sass/project.scss

@@ -36,6 +36,20 @@
   margin: 2rem 0;
 }
 
+.copy-code-wrapper {
+  position: relative;
+}
+
+.copy-code {
+  position: absolute;
+  top: .5rem;
+  right: .5rem;
+  cursor: pointer;
+  background-color: #1b1f26;
+  padding: .3rem ;
+  border-radius: 5px;
+}
+
 @media (max-width: 768px) {
   .project-wrapper {
     max-width: 100%;

static/js/code-copy.js

@@ -0,0 +1,30 @@
+let codes = document.querySelectorAll("pre")
+
+codes.forEach(code => {
+  const elWrapper = document.createElement("div")
+  elWrapper.classList.add("copy-code-wrapper")
+
+
+  const el = document.createElement("span")
+  el.textContent = "Copy"
+  el.classList.add("copy-code")
+
+  elWrapper.appendChild(el)
+
+  code.parentNode.insertBefore(elWrapper, code)
+
+  let textContent = ""
+  code.childNodes.forEach(child => {
+    textContent += child.textContent;
+  })
+
+  elWrapper.addEventListener("click", (e) => {
+    e.preventDefault()
+    navigator.clipboard.writeText(textContent)
+    el.textContent = "Copied!"
+    setTimeout(() => {
+      el.textContent = "Copy"
+    }, 5000);
+  })
+})
+

templates/base.html

@@ -67,6 +67,9 @@
 		<script>
 			console.log("I heard that a cool frontend developer works for https://fofrweb.com")
 		</script>
+
+    {% block scripts %}
+    {% endblock scripts %}
 	</body>
 </html>
 

templates/post.html

@@ -4,6 +4,11 @@
 	<link rel="stylesheet" href="/project.css">
 {% endblock styles %}
 
+{% block scripts %}
+  <script src="/js/code-copy.js" defer></script> 
+{% endblock scripts %}
+
+
 {% block content %}
 	<section class="project-wrapper flex-col">
     <!--