feat(theme): add click-to-copy buttons to code blocks

Inject a copy button into Chroma `.highlight` blocks and `.ps-terminal`
shortcode blocks. For line-numbered blocks the code is read from the last
table cell so the line-number gutter is excluded. Uses the async Clipboard
API with an execCommand fallback.

Also fix `.ps-terminal` rendering a leading blank line: the shortcode now
trims all surrounding whitespace via strings.TrimSpace, so CRLF content no
longer leaves a stray carriage return before the first line.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: HeyItsGilbert

themes/powershell-community/layouts/_default/baseof.html

@@ -40,6 +40,7 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-tomorrow.min.css" rel="stylesheet">
     <link href="/css/alerts.css" rel="stylesheet">
+    <link href="/css/code-copy.css" rel="stylesheet">
     {{ with .Site.Params.algolia }}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.css" />{{ end }}
 
     <!-- Custom CSS -->
@@ -235,6 +236,7 @@
     <script
         src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/autoloader/prism-autoloader.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.10.2/cdn.min.js" defer></script>
+    <script src="/js/code-copy.js" defer></script>
 
     <!-- Custom JavaScript -->
     <script>

themes/powershell-community/layouts/_shortcodes/terminal.html

@@ -6,7 +6,7 @@
         Highlighting is handled client-side by Prism via the language-* class. */ -}}
 {{- $lang := .Get "lang" | default "powershell" -}}
 {{- $title := .Get "title" | default "PowerShell" -}}
-{{- $code := trim .Inner "\n" -}}
+{{- $code := .Inner | strings.TrimSpace -}}
 <div class="code-terminal ps-terminal rounded-xl overflow-hidden shadow-xl my-6">
     <div class="flex items-center px-4 py-3 border-b border-gray-700">
         <div class="flex space-x-2 mr-4">

themes/powershell-community/static/css/code-copy.css

@@ -0,0 +1,57 @@
+/* Click-to-copy buttons for code blocks.
+   Injected by /js/code-copy.js into Hugo/Chroma `.highlight` blocks and the
+   `.ps-terminal` shortcode. The button is positioned in the top-right corner
+   of each block and fades in on hover (always visible on touch devices). */
+
+.highlight,
+.ps-terminal {
+    position: relative;
+}
+
+.code-copy-btn {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    z-index: 10;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.3rem 0.55rem;
+    font-size: 0.75rem;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    line-height: 1;
+    color: #e5e7eb;
+    background: rgba(31, 41, 55, 0.75);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 0.375rem;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+
+.highlight:hover .code-copy-btn,
+.ps-terminal:hover .code-copy-btn,
+.code-copy-btn:focus-visible {
+    opacity: 1;
+}
+
+.code-copy-btn:hover {
+    background: rgba(31, 41, 55, 0.95);
+}
+
+.code-copy-btn:focus-visible {
+    outline: 2px solid #00BCF2;
+    outline-offset: 1px;
+}
+
+.code-copy-btn.copied {
+    color: #34d399;
+    border-color: rgba(52, 211, 153, 0.5);
+}
+
+/* No hover affordance on touch devices — keep the button visible. */
+@media (hover: none) {
+    .code-copy-btn {
+        opacity: 1;
+    }
+}

themes/powershell-community/static/js/code-copy.js

@@ -0,0 +1,71 @@
+/* Adds a click-to-copy button to every code block on the page.
+   Handles two block types:
+     - Hugo/Chroma `.highlight` blocks. With lineNos enabled these render as a
+       two-column table; the code lives in the LAST cell, so we read that and
+       leave the line-number gutter out of the copied text.
+     - `.ps-terminal` shortcode blocks, where the code is in `pre > code`.
+   Styling lives in /css/code-copy.css. */
+(function () {
+    'use strict';
+
+    function codeText(block) {
+        var cell = block.querySelector('table tr > td:last-child');
+        var source = cell || block.querySelector('pre code') || block.querySelector('pre');
+        return source ? source.textContent.replace(/\n+$/, '') : '';
+    }
+
+    function copyText(text) {
+        if (navigator.clipboard && window.isSecureContext) {
+            return navigator.clipboard.writeText(text);
+        }
+        return new Promise(function (resolve, reject) {
+            var ta = document.createElement('textarea');
+            ta.value = text;
+            ta.style.position = 'fixed';
+            ta.style.top = '-9999px';
+            document.body.appendChild(ta);
+            ta.select();
+            try {
+                document.execCommand('copy') ? resolve() : reject();
+            } catch (err) {
+                reject(err);
+            } finally {
+                document.body.removeChild(ta);
+            }
+        });
+    }
+
+    var IDLE = '<i class="fas fa-copy" aria-hidden="true"></i><span>Copy</span>';
+    var DONE = '<i class="fas fa-check" aria-hidden="true"></i><span>Copied!</span>';
+
+    function attach(block) {
+        if (block.querySelector(':scope > .code-copy-btn')) {
+            return;
+        }
+        var btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'code-copy-btn';
+        btn.setAttribute('aria-label', 'Copy code to clipboard');
+        btn.innerHTML = IDLE;
+        block.appendChild(btn);
+
+        var reset;
+        btn.addEventListener('click', function () {
+            copyText(codeText(block)).then(function () {
+                btn.classList.add('copied');
+                btn.innerHTML = DONE;
+                clearTimeout(reset);
+                reset = setTimeout(function () {
+                    btn.classList.remove('copied');
+                    btn.innerHTML = IDLE;
+                }, 2000);
+            }).catch(function () {
+                btn.innerHTML = '<span>Press Ctrl+C</span>';
+            });
+        });
+    }
+
+    document.addEventListener('DOMContentLoaded', function () {
+        document.querySelectorAll('.prose .highlight, .ps-terminal').forEach(attach);
+    });
+})();