Implemented the Copy button as required

KhanjarSingh · KhanjarSingh · commit 76456268f33a · 2025-11-25T21:33:39.000+05:30
diff --git a/assets/sass/content.scss b/assets/sass/content.scss
@@ -49,6 +49,43 @@ pre {
   border-radius: 5px;
   overflow-x: auto;
 }
+.code-block-wrapper {
+  position: relative;
+  margin-bottom: 1.5rem;
+}
+
+.copy-code-button {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 28px;
+  height: 28px;
+
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(4px);
+  border-radius: 6px;
+
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  transition: background 0.2s ease, border-color 0.2s ease;
+
+  svg {
+    width: 16px;
+    height: 16px;
+    fill: white;
+  }
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.25);
+    border-color: rgba(255, 255, 255, 0.4);
+  }
+}
+
 
 details {
   margin-bottom: 2em;
@@ -58,5 +95,5 @@ details {
 }
 
 details[open] {
-  border-color: 1px solid var(--text-color);
-}
+  border-color: var(--text-color);
+}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -24,6 +24,7 @@
     <meta name="twitter:card" content="summary" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+
   </head>
   <body>
     <a class="skip-to-content-link" href="#main">
@@ -44,7 +45,7 @@ <h1><a href="/">Helmet.js</a></h1>
 
     <main id="main" class="container">
       {{ block "main" . }}{{ end }}
-    </div>
+    </main>
+    <script src="/js/copy-code.js" defer></script>
   </body>
 </html>
-
diff --git a/static/img/check.svg b/static/img/check.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-check" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M5 12l5 5l10 -10" />
+</svg>
diff --git a/static/img/copy.svg b/static/img/copy.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copy" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <rect x="8" y="8" width="12" height="12" rx="2" />
+  <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" />
+</svg>
diff --git a/static/img/error.svg b/static/img/error.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M12 9v2m0 4v.01" />
+  <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
+</svg>
diff --git a/static/js/copy-code.js b/static/js/copy-code.js
@@ -0,0 +1,58 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const codeBlocks = document.querySelectorAll("pre > code");
+
+  const icons = {
+    copy: `
+      <svg viewBox="0 0 28 28">
+        <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 
+            0-2 .9-2 2v16c0 1.1.9 2 2 2h11c1.1 0 2-.9 
+            2-2V7c0-1.1-.9-2-2-2zm0 18H8V7h11v16z"/>
+      </svg>
+    `,
+    check: `
+      <svg viewBox="0 0 24 24">
+        <path d="M9 16.17 4.83 12l-1.42 1.41L9 19 
+          21 7l-1.41-1.41z"/>
+      </svg>
+    `
+  };
+
+  function setButtonState(btn, icon, label) {
+    btn.innerHTML = icon;
+    btn.setAttribute("aria-label", label);
+  }
+
+  codeBlocks.forEach(code => {
+    const pre = code.parentElement;
+    const wrapper = document.createElement("div");
+    
+    wrapper.className = "code-block-wrapper";
+    pre.replaceWith(wrapper);
+    wrapper.appendChild(pre);
+
+    const button = document.createElement("button");
+    button.className = "copy-code-button";
+    setButtonState(button, icons.copy, "Copy code");
+
+    wrapper.appendChild(button);
+
+    let cooling = false;
+
+    button.addEventListener("click", async () => {
+      if (cooling) return;
+      cooling = true;
+
+      try {
+        await navigator.clipboard.writeText(code.textContent.trim());
+        setButtonState(button, icons.check, "Copied");
+      } catch {
+        setButtonState(button, icons.copy, "Copy code");
+      }
+
+      setTimeout(() => {
+        setButtonState(button, icons.copy, "Copy code");
+        cooling = false;
+      }, 1000);
+    });
+  });
+});
