Merge pull request #5 from copilot-dev-days/copilot/add-copy-buttons-to-code-blocks

Add copy actions to workshop code blocks

Author: jamesmontemagno

docs/step.css

@@ -10,6 +10,8 @@
             --border-color: #2a2a3a;
             --success-green: #4ec9b0;
             --warning-yellow: #dcdcaa;
+            --code-copy-bg: rgba(10, 10, 15, 0.85);
+            --code-copy-offset: 2.75rem;
         }
 
         * {
@@ -335,9 +337,10 @@
             background: var(--bg-code);
             border: 1px solid var(--border-color);
             border-radius: 8px;
-            padding: 1.25rem;
+            padding: var(--code-copy-offset) 1.25rem 1.25rem;
             overflow-x: auto;
             margin: 1.5rem 0;
+            position: relative;
         }
 
         .markdown pre code {
@@ -346,6 +349,43 @@
             padding: 0;
         }
 
+        .code-copy-button {
+            position: absolute;
+            top: 0.75rem;
+            right: 0.75rem;
+            border: 1px solid var(--border-color);
+            border-radius: 999px;
+            background: var(--code-copy-bg);
+            color: var(--text-secondary);
+            font-family: inherit;
+            font-size: 0.75rem;
+            font-weight: 700;
+            letter-spacing: 0.04em;
+            text-transform: uppercase;
+            padding: 0.35rem 0.8rem;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            backdrop-filter: blur(8px);
+        }
+
+        .code-copy-button:hover,
+        .code-copy-button:focus-visible {
+            border-color: var(--neon-cyan);
+            color: var(--neon-cyan);
+            outline: none;
+            transform: translateY(-1px);
+        }
+
+        .code-copy-button[data-copy-state="copied"] {
+            border-color: var(--success-green);
+            color: var(--success-green);
+        }
+
+        .code-copy-button[data-copy-state="error"] {
+            border-color: var(--neon-magenta);
+            color: var(--neon-magenta);
+        }
+
         /* Blockquotes / Tips */
         .markdown blockquote {
             background: var(--bg-card);

docs/step.html

@@ -304,6 +304,88 @@
             return md;
         }
 
+        const resetTimers = new WeakMap();
+
+        function resetCopyButton(button) {
+            const existingTimerId = resetTimers.get(button);
+            if (existingTimerId) {
+                window.clearTimeout(existingTimerId);
+            }
+
+            const timerId = window.setTimeout(() => {
+                button.textContent = 'Copy';
+                button.setAttribute('aria-label', 'Copy code block');
+                button.dataset.copyState = 'idle';
+            }, 2000);
+            resetTimers.set(button, timerId);
+        }
+
+        async function copyText(text) {
+            if (navigator.clipboard?.writeText) {
+                try {
+                    await navigator.clipboard.writeText(text);
+                    return;
+                } catch (error) {
+                    // Fall back below when the Clipboard API is unavailable or denied.
+                }
+            }
+
+            const textArea = document.createElement('textarea');
+            textArea.value = text;
+            textArea.setAttribute('readonly', '');
+            textArea.style.position = 'absolute';
+            textArea.style.left = '-9999px';
+            document.body.appendChild(textArea);
+            textArea.select();
+
+            try {
+                if (!document.execCommand('copy')) {
+                    throw new Error('Failed to copy code to clipboard');
+                }
+            } finally {
+                document.body.removeChild(textArea);
+            }
+        }
+
+        function enhanceCodeBlocks() {
+            document.querySelectorAll('#markdown-content pre code').forEach((code) => {
+                const pre = code.parentElement;
+                if (!pre || pre.querySelector('.code-copy-button')) {
+                    return;
+                }
+
+                const text = code?.textContent?.trimEnd();
+                if (!text) {
+                    return;
+                }
+
+                const button = document.createElement('button');
+                button.type = 'button';
+                button.className = 'code-copy-button';
+                button.textContent = 'Copy';
+                button.dataset.copyState = 'idle';
+                button.setAttribute('aria-label', 'Copy code block');
+                button.setAttribute('aria-live', 'polite');
+
+                button.addEventListener('click', async () => {
+                    try {
+                        await copyText(text);
+                        button.textContent = 'Copied!';
+                        button.setAttribute('aria-label', 'Code copied');
+                        button.dataset.copyState = 'copied';
+                    } catch (error) {
+                        button.textContent = 'Failed';
+                        button.setAttribute('aria-label', 'Copy failed');
+                        button.dataset.copyState = 'error';
+                    }
+
+                    resetCopyButton(button);
+                });
+
+                pre.appendChild(button);
+            });
+        }
+
         // Load and render markdown
         async function loadContent() {
             const idx = getCurrentStepIndex();
@@ -342,6 +424,8 @@
                     checkbox.disabled = false;
                 });
 
+                enhanceCodeBlocks();
+
                 // If this is the completion page, add confetti!
                 if (step.id === '05-complete') {
                     // Trigger celebration on load