Add copy buttons to snipplets

Author: albertodebortoli

css/style.css

@@ -264,6 +264,40 @@ code {
     box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
 }
 
+/* Code block copy button */
+.code-block {
+    position: relative;
+}
+
+.btn-code-copy {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 0.75rem;
+    background: #1a1d27;
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    color: var(--text-primary);
+    border-radius: 5px;
+    width: 28px;
+    height: 28px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.code-block:hover .btn-code-copy {
+    opacity: 1;
+}
+
+.btn-code-copy:hover {
+    background: var(--primary-accent);
+    color: #000;
+    border-color: var(--primary-accent);
+}
+
 /* Terminal Demo Window */
 .terminal-window {
     background: #09090b;
@@ -744,9 +778,6 @@ footer {
         margin-bottom: 1rem;
     }
 
-    .btn-copy {
-        width: 100%;
-    }
 
     .grid-3 {
         grid-template-columns: 1fr;

index.html

@@ -138,7 +138,7 @@ <h2>Quick Start</h2>
                     <pre><code>luca install tuist/tuist@4.78.0 --asset tuist.zip</code></pre>
                 </div>
 
-                <div class="example card">
+                <div class="example card no-copy">
                     <div class="example-title">
                         <span class="command">Step 2: Use Your Tools</span>
                     </div>
@@ -294,7 +294,7 @@ <h2>Additional Features</h2>
                 </div>
             </div>
             <div class="command-examples grid-3">
-                <div class="example card">
+                <div class="example card no-copy">
                     <div class="example-title">
                         <span class="command">List Installed</span>
                     </div>
@@ -311,7 +311,7 @@ <h2>Additional Features</h2>
 tuist:
   - 4.78.0</code></pre>
                 </div>
-                <div class="example card">
+                <div class="example card no-copy">
                     <div class="example-title">
                         <span class="command">List Linked</span>
                     </div>

js/main.js

@@ -20,8 +20,40 @@ function copyInstallCommand() {
         });
 }
 
+const CLIPBOARD_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/></svg>`;
+const CHECK_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
+
 // Add smooth scrolling for anchor links
 document.addEventListener('DOMContentLoaded', () => {
+    // Inject copy buttons into all pre elements inside cards
+    document.querySelectorAll('.card:not(.no-copy) pre').forEach(pre => {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'code-block';
+        pre.parentNode.insertBefore(wrapper, pre);
+        wrapper.appendChild(pre);
+
+        const btn = document.createElement('button');
+        btn.className = 'btn-code-copy';
+        btn.title = 'Copy to clipboard';
+        btn.innerHTML = CLIPBOARD_ICON;
+        wrapper.appendChild(btn);
+
+        btn.addEventListener('click', () => {
+            const text = pre.querySelector('code') ? pre.querySelector('code').textContent : pre.textContent;
+            navigator.clipboard.writeText(text);
+            btn.innerHTML = CHECK_ICON;
+            btn.style.color = '#10b981';
+            btn.style.borderColor = '#10b981';
+            btn.style.background = 'rgba(16, 185, 129, 0.15)';
+            setTimeout(() => {
+                btn.innerHTML = CLIPBOARD_ICON;
+                btn.style.color = '';
+                btn.style.borderColor = '';
+                btn.style.background = '';
+            }, 2000);
+        });
+    });
+
     // Add animation for features on scroll
     const features = document.querySelectorAll('.feature');