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

Add copy-to-clipboard controls to workshop code blocks

Author: jamesmontemagno

docs/step.css

@@ -340,6 +340,60 @@
             margin: 1.5rem 0;
         }
 
+        .code-block-wrapper {
+            position: relative;
+            margin: 1.5rem 0;
+        }
+
+        .code-block-wrapper pre {
+            margin: 0;
+        }
+
+        .copy-code-btn {
+            position: absolute;
+            top: 0.75rem;
+            right: 0.75rem;
+            z-index: 1;
+            border: 1px solid var(--border-color);
+            border: 1px solid color-mix(in srgb, var(--neon-cyan) 45%, var(--border-color));
+            background: rgba(0, 245, 255, 0.12);
+            background: color-mix(in srgb, var(--bg-dark) 78%, var(--neon-cyan));
+            color: var(--text-primary);
+            border-radius: 999px;
+            padding: 0.35rem 0.75rem;
+            font-size: 0.75rem;
+            font-weight: 700;
+            letter-spacing: 0.04em;
+            text-transform: uppercase;
+            cursor: pointer;
+            transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
+            box-shadow: 0 0 0 1px rgba(0, 245, 255, 0.08);
+        }
+
+        .copy-code-btn:hover,
+        .copy-code-btn:focus-visible {
+            background: rgba(0, 245, 255, 0.18);
+            background: color-mix(in srgb, var(--neon-cyan) 24%, var(--bg-dark));
+            border-color: var(--neon-cyan);
+            color: var(--neon-cyan);
+            transform: translateY(-1px);
+            outline: none;
+        }
+
+        .copy-code-btn[data-state="success"] {
+            color: var(--success-green);
+            border-color: var(--success-green);
+            background: rgba(78, 201, 176, 0.14);
+            background: color-mix(in srgb, var(--bg-dark) 70%, var(--success-green));
+        }
+
+        .copy-code-btn[data-state="error"] {
+            color: var(--warning-yellow);
+            border-color: var(--warning-yellow);
+            background: rgba(220, 220, 170, 0.14);
+            background: color-mix(in srgb, var(--bg-dark) 72%, var(--warning-yellow));
+        }
+
         .markdown pre code {
             color: var(--text-primary);
             background: none;
@@ -454,3 +508,15 @@
                 display: none;
             }
         }
+
+        @media (max-width: 640px) {
+            .copy-code-btn {
+                top: 0.5rem;
+                right: 0.5rem;
+                padding: 0.3rem 0.65rem;
+            }
+
+            .markdown pre {
+                padding-top: 3rem;
+            }
+        }

docs/step.html

@@ -313,6 +313,92 @@
             });
         }
 
+        async function copyText(text) {
+            if (navigator.clipboard?.writeText) {
+                try {
+                    await navigator.clipboard.writeText(text);
+                    return;
+                } catch (error) {
+                    // Fall back to document.execCommand when clipboard permissions are unavailable.
+                }
+            }
+
+            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 {
+                document.execCommand('copy');
+            } finally {
+                textarea.remove();
+            }
+        }
+
+        const copyButtonResetTimers = new WeakMap();
+
+        function showCopyState(button, state) {
+            const labels = {
+                idle: 'Copy',
+                success: 'Copied!',
+                error: 'Try again'
+            };
+
+            button.textContent = labels[state];
+            button.dataset.state = state;
+
+            const existingTimer = copyButtonResetTimers.get(button);
+            if (existingTimer) {
+                clearTimeout(existingTimer);
+            }
+
+            if (state !== 'idle') {
+                const resetTimer = setTimeout(() => {
+                    button.textContent = labels.idle;
+                    button.dataset.state = 'idle';
+                }, 2000);
+                copyButtonResetTimers.set(button, resetTimer);
+            }
+        }
+
+        function enhanceCodeBlocks() {
+            const blocks = document.querySelectorAll('#markdown-content pre');
+
+            blocks.forEach((pre) => {
+                if (pre.parentElement?.classList.contains('code-block-wrapper')) {
+                    return;
+                }
+
+                const code = pre.querySelector('code');
+                const wrapper = document.createElement('div');
+                const button = document.createElement('button');
+
+                wrapper.className = 'code-block-wrapper';
+                button.className = 'copy-code-btn';
+                button.type = 'button';
+                button.textContent = 'Copy';
+                button.setAttribute('aria-label', 'Copy code block to clipboard');
+
+                button.addEventListener('click', async () => {
+                    const codeText = code?.textContent ?? pre.textContent ?? '';
+
+                    try {
+                        await copyText(codeText.trimEnd());
+                        showCopyState(button, 'success');
+                    } catch (error) {
+                        showCopyState(button, 'error');
+                    }
+                });
+
+                pre.parentNode.insertBefore(wrapper, pre);
+                wrapper.appendChild(button);
+                wrapper.appendChild(pre);
+            });
+        }
+
         // Process markdown - clean up navigation links and fix paths
         function processMarkdown(md) {
             // Remove the header navigation bar (we have our own sidebar)
@@ -373,6 +459,7 @@
 
                 document.getElementById('markdown-content').innerHTML = marked.parse(md);
                 enableTaskListCheckboxes(step.id);
+                enhanceCodeBlocks();
 
                 // If this is the completion page, add confetti!
                 if (step.id === '05-complete') {