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

Add copy controls to workshop code blocks

Author: jamesmontemagno

docs/step.css

@@ -2,6 +2,7 @@
             --bg-dark: #0a0a0f;
             --bg-card: #12121a;
             --bg-code: #1a1a2e;
+            --bg-overlay: rgba(18, 18, 26, 0.92);
             --neon-cyan: #00f5ff;
             --neon-magenta: #ff00ff;
             --neon-purple: #b366ff;
@@ -10,6 +11,8 @@
             --border-color: #2a2a3a;
             --success-green: #4ec9b0;
             --warning-yellow: #dcdcaa;
+            --code-block-top-padding: 3.5rem;
+            --code-block-horizontal-padding: 1.25rem;
         }
 
         * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -159,10 +162,43 @@
             border-radius: 4px; color: var(--warning-yellow);
         }
         .markdown pre {
+            position: relative;
             background: var(--bg-code); border: 1px solid var(--border-color);
-            border-radius: 8px; padding: 1.25rem; overflow-x: auto; margin: 1.5rem 0;
+            border-radius: 8px;
+            padding: var(--code-block-top-padding) var(--code-block-horizontal-padding) var(--code-block-horizontal-padding) var(--code-block-horizontal-padding);
+            overflow-x: auto; margin: 1.5rem 0;
         }
         .markdown pre code { color: var(--text-primary); background: none; padding: 0; }
+        .markdown .code-copy-btn {
+            position: absolute; top: 0.75rem; right: 0.75rem;
+            display: inline-flex; align-items: center; justify-content: center;
+            min-width: max-content; padding: 0.4rem 0.75rem;
+            border: 1px solid var(--border-color); border-radius: 999px;
+            background: var(--bg-overlay); color: var(--text-secondary);
+            font: inherit; font-size: 0.8rem; cursor: pointer; transition: all 0.2s ease;
+        }
+        .markdown .code-copy-btn:hover,
+        .markdown .code-copy-btn:focus-visible {
+            border-color: var(--neon-cyan); color: var(--neon-cyan);
+            outline: none;
+        }
+        .markdown .code-copy-btn[data-state="copied"] {
+            border-color: var(--success-green); color: var(--success-green);
+        }
+        .markdown .code-copy-btn[data-state="error"] {
+            border-color: var(--neon-magenta); color: var(--neon-magenta);
+        }
+        .sr-only {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border: 0;
+        }
 
         .markdown blockquote {
             background: var(--bg-card); border-left: 4px solid var(--neon-cyan);

docs/step.html

@@ -81,6 +81,8 @@
 
         const GITHUB_RAW_BASE = 'https://raw.githubusercontent.com/copilot-dev-days/agent-lab-typescript/main/workshop/';
         const CHECKBOX_STATE_KEY_PREFIX = 'workshop-checkboxes:';
+        const COPY_STATUS_RESET_DELAY = 2000;
+        const pendingCopyResetTimers = new Set();
 
         function getCurrentStepId() {
             const params = new URLSearchParams(window.location.search);
@@ -169,6 +171,7 @@
 
         function setupInteractiveCheckboxes(stepId) {
             const container = document.getElementById('markdown-content');
+            if (!container) return;
             const checkboxes = container.querySelectorAll('input[type="checkbox"]');
             if (!checkboxes.length) return;
 
@@ -198,6 +201,81 @@
             });
         }
 
+        async function copyCodeToClipboard(text) {
+            if (navigator.clipboard?.writeText) {
+                await navigator.clipboard.writeText(text);
+                return;
+            }
+
+            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();
+            // Keep the deprecated fallback for older browsers that lack navigator.clipboard.
+            const copied = document.execCommand('copy');
+            document.body.removeChild(textarea);
+            if (!copied) throw new Error('Fallback copy failed');
+        }
+
+        function setupCodeBlockCopyButtons() {
+            const container = document.getElementById('markdown-content');
+            if (!container) return;
+            const codeBlocks = container.querySelectorAll('pre');
+
+            codeBlocks.forEach((pre) => {
+                const code = pre.querySelector('code');
+                const codeText = code?.textContent?.trim();
+                if (!codeText) return;
+
+                const copyButton = document.createElement('button');
+                copyButton.type = 'button';
+                copyButton.className = 'code-copy-btn';
+                copyButton.textContent = 'Copy';
+                copyButton.setAttribute('aria-label', 'Copy code');
+
+                const liveRegion = document.createElement('span');
+                liveRegion.className = 'sr-only';
+                liveRegion.setAttribute('aria-live', 'polite');
+                let resetTimer = null;
+
+                const resetButtonState = () => {
+                    copyButton.textContent = 'Copy';
+                    copyButton.dataset.state = 'idle';
+                    liveRegion.textContent = '';
+                };
+
+                copyButton.addEventListener('click', async () => {
+                    if (resetTimer) {
+                        clearTimeout(resetTimer);
+                        pendingCopyResetTimers.delete(resetTimer);
+                    }
+
+                    try {
+                        await copyCodeToClipboard(codeText);
+                        copyButton.textContent = 'Copied!';
+                        copyButton.dataset.state = 'copied';
+                        liveRegion.textContent = 'Code copied to clipboard';
+                    } catch {
+                        copyButton.textContent = 'Failed';
+                        copyButton.dataset.state = 'error';
+                        liveRegion.textContent = 'Unable to copy code';
+                    }
+
+                    resetTimer = setTimeout(() => {
+                        pendingCopyResetTimers.delete(resetTimer);
+                        resetTimer = null;
+                        resetButtonState();
+                    }, COPY_STATUS_RESET_DELAY);
+                    pendingCopyResetTimers.add(resetTimer);
+                });
+
+                pre.append(copyButton, liveRegion);
+            });
+        }
+
         async function loadContent() {
             const idx = getCurrentStepIndex();
             if (idx === -1) {
@@ -209,6 +287,9 @@
             document.title = `${step.title} | VS Code Copilot Agent Lab`;
 
             try {
+                pendingCopyResetTimers.forEach(timer => clearTimeout(timer));
+                pendingCopyResetTimers.clear();
+
                 const response = await fetch(`${GITHUB_RAW_BASE}${step.file}`);
                 if (!response.ok) throw new Error('Failed to load');
 
@@ -225,6 +306,7 @@
                 marked.setOptions({ breaks: true, gfm: true });
                 document.getElementById('markdown-content').innerHTML = marked.parse(md);
                 setupInteractiveCheckboxes(step.id);
+                setupCodeBlockCopyButtons();
 
                 if (step.id === '05-complete') {
                     setTimeout(celebrate, 500);