add: copy buttons to code section

animate-css · Jan 12, 2025 · 3f45e33 · 3f45e33
1 parent 3f8ab23
commit 3f45e33
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
diff --git a/docs/main.mjs b/docs/main.mjs
@@ -25,3 +25,26 @@ document.querySelectorAll('.copy-icon').forEach(icon => {
     }, 750)
   })
 })
+
+const preTags = document.querySelectorAll('pre');
+
+// Function to add copy buttons
+preTags.forEach(pre => {
+    const copyButton = document.createElement('button');
+    copyButton.className = 'copy-button';
+    copyButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
+
+    pre.appendChild(copyButton);
+    copyButton.addEventListener('click', () => {
+        const codeToCopy = pre.innerText;
+        navigator.clipboard.writeText(codeToCopy).then(() => {
+            // copyButton.innerText = 'Copied!';
+            copyButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0900ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-check"><path d="m12 15 2 2 4-4"/><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
+            setTimeout(() => {
+                copyButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
+            }, 1500);
+        }).catch(err => {
+            console.error('Failed to copy:', err);
+        });
+    });
+});
diff --git a/docs/style.css b/docs/style.css
@@ -67,12 +67,24 @@ code {
 
 pre {
   padding: 1rem;
-
+position: relative;
   background-color: var(--c-dark);
   border-radius: 0.25em;
   color: #fff;
 }
 
+.copy-button{
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.5em 1em;
+  color: #fff;
+  border: none;
+  border-radius: 0 0 0 0.25em;
+  cursor: pointer;
+  background: none;
+}
+
 pre code {
   background-color: transparent;
   font-size: 0.8rem !important;