[FEATURE] Added a copy button to the SVG code snippet for easy copying

Author: himanshuramavat

assets/js/main.js

@@ -18,6 +18,28 @@ document.addEventListener("DOMContentLoaded", () => {
             }
         }
     }
+
+    document.querySelectorAll('.code-copy-btn').forEach((button) => {
+        button.addEventListener('click', () => {
+            const codeBlock = button.nextElementSibling?.querySelector('code');
+
+            if (codeBlock) {
+                const textToCopy = codeBlock.textContent.trim();
+
+                navigator.clipboard
+                    .writeText(textToCopy)
+                    .then(() => {
+                        button.textContent = 'Copied!';
+                        setTimeout(() => {
+                            button.textContent = 'Copy';
+                        }, 2000);
+                    })
+                    .catch((error) => {
+                        console.error('Failed to copy text:', error);
+                    });
+            }
+        });
+    });
 });
 
 // Theme

assets/scss/docs/_misc.scss

@@ -48,3 +48,19 @@
         font-family: monospace;
     }
 }
+
+.code-container {
+    position: relative;
+    border-radius: var(--bs-border-radius);
+    overflow: hidden;
+
+    .code-copy-btn {
+        font-family: var(--bs-font-monospace);
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-end: 0;
+        border-start-start-radius: 0;
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+    }
+}

tmpl/html/docs/_makros.html.twig

@@ -1,3 +1,6 @@
 {% macro codeblock(markup, language = 'html') %}
-    <pre class="p-3 rounded bg-adapt-light"><code class="language-{{ language }}">{{ markup|trim|escape }}</code></pre>
+    <div class="code-container position-relative">
+        <button class="btn btn-default btn-sm code-copy-btn" aria-label="Copy code" title="Copy">Copy</button>
+        <pre class="p-3 rounded bg-adapt-light code-block"><code class="language-{{ language }}">{{ markup|trim|escape }}</code></pre>
+    </div>
 {% endmacro %}