Add copy-to-clipboard button on code blocks (#576)

* Add copy-to-clipboard button on code blocks

Adds a hover-revealed Copy button to every Hugo .highlight block:

- Vanilla JS scaffold in copy-code.js, bundled into the existing
  rladiesplus-bundle.
- Click → navigator.clipboard.writeText(code.innerText). Success swaps
  the icon to a check and label to "Copied"; failure shows X and
  "Copy failed". Auto-reverts after 2 s.
- CSS in syntax.css uses --color-success / --color-error tokens defined
  alongside the rest of the brand palette (light + dark overrides) — no
  hardcoded greens/reds.
- Toast logic from the previous attempt is dropped; the button itself
  carries the feedback, which avoids the stacking-context bug that got
  the earlier prototype reverted.

Closes #569.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* Switch to render hooks for code copy + add heading anchors

- Replace JS-based code-block scanning with a Hugo render hook
  (layouts/_markup/render-codeblock.html). The hook wraps every code
  block — language-tagged or not — in a .code-block container with a
  Copy button. The previous approach only attached to .highlight
  divs, so unlanguaged fenced blocks got nothing.
- Click feedback is now a toast in a body-level #toast-container
  (avoids the stacking-context bug that killed the prior toast
  attempt). Success toast uses the brand blue token; error stays red.
- Add layouts/_markup/render-heading.html: appends a link-icon anchor
  to every heading except on the home page. CSS holds it at
  opacity:0 until heading hover/focus, plus scroll-margin-top so
  jumped-to anchors don't slide under the fixed header.
- Improve dark-mode contrast on .alert-primary (cross-post notice):
  text was --color-primary-dark (#a152f8) on a barely-tinted bg,
  ~3.5:1. Switch to --color-primary-lighter on an 18%-mix bg → ~11:1.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* Add es/fr/pt translations for copy-code and heading anchor strings

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: drmowinckels

i18n/en.yaml

@@ -185,3 +185,12 @@ auto_translation: |
     This page was auto-translated using
     [DeepL](https://www.deepl.com)
     and has not been reviewed by a human yet.
+
+# Code blocks ----
+copy_code: 'Copy'
+copy_code_aria: 'Copy code to clipboard'
+copy_code_success: 'Code copied'
+copy_code_error: 'Copy failed'
+
+# Headings ----
+heading_anchor_aria: 'Link to this heading'

i18n/es.yaml

@@ -185,3 +185,12 @@ auto_translation: |
     Esta página fue traducida automáticamente usando
     [DeepL](https://www.deepl.com)
     y aún no ha sido revisada por una persona.
+
+# Code blocks ----
+copy_code: 'Copiar'
+copy_code_aria: 'Copiar código al portapapeles'
+copy_code_success: 'Código copiado'
+copy_code_error: 'Error al copiar'
+
+# Headings ----
+heading_anchor_aria: 'Enlace a este encabezado'

i18n/fr.yaml

@@ -185,3 +185,12 @@ auto_translation: |
     Cette page a été traduite automatiquement avec
     [DeepL](https://www.deepl.com)
     et n'a pas encore été relue par une personne.
+
+# Code blocks ----
+copy_code: 'Copier'
+copy_code_aria: 'Copier le code dans le presse-papiers'
+copy_code_success: 'Code copié'
+copy_code_error: 'Échec de la copie'
+
+# Headings ----
+heading_anchor_aria: 'Lien vers ce titre'

i18n/pt.yaml

@@ -185,3 +185,12 @@ auto_translation: |
     Esta página foi traduzida automaticamente usando
     [DeepL](https://www.deepl.com)
     e ainda não foi revisada por uma pessoa.
+
+# Code blocks ----
+copy_code: 'Copiar'
+copy_code_aria: 'Copiar código para a área de transferência'
+copy_code_success: 'Código copiado'
+copy_code_error: 'Falha ao copiar'
+
+# Headings ----
+heading_anchor_aria: 'Link para este título'

themes/hugo-rladiesplus/assets/css/components/darkmode.css

@@ -14,6 +14,8 @@
     --color-accent-rose: #f6a4c3;
     --color-accent-rose-75: #f2c9dc;
     --color-bg: #121220;
+    --color-success: #86efac;
+    --color-error: #fca5a5;
     --color-surface: #1a1a2e;
     --color-surface-alt: #16213e;
     --color-surface-footer: #0f0f1a;
@@ -61,6 +63,12 @@
     background: color-mix(in srgb, var(--color-primary) 8%, var(--color-raised));
   }
 
+  /* ── Alerts ── */
+  .dark .alert-primary {
+    background: color-mix(in srgb, var(--color-primary) 18%, var(--color-raised));
+    color: var(--color-primary-lighter);
+  }
+
   /* ── Callouts ── */
   .dark .callout {
     background: color-mix(in srgb, var(--callout-color, var(--color-primary)) 10%, var(--color-raised));

themes/hugo-rladiesplus/assets/css/components/syntax.css

@@ -157,4 +157,69 @@
   .dark .chroma .gp,
   .dark .chroma .gu { color: #9ca3af; }
   .dark .chroma .gt { color: #7dd3fc; }
+
+  .code-block { position: relative; }
+
+  .copy-code-btn {
+    @apply absolute inline-flex items-center gap-1 px-2 py-1 text-xs cursor-pointer;
+    top: 0.5rem;
+    right: 0.5rem;
+    font-family: var(--font-sans);
+    color: var(--color-muted);
+    background-color: color-mix(in srgb, var(--color-bg) 85%, transparent);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    opacity: 0;
+    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+  }
+
+  .code-block:hover .copy-code-btn,
+  .code-block:focus-within .copy-code-btn,
+  .copy-code-btn:focus-visible {
+    opacity: 1;
+  }
+
+  .copy-code-btn:hover {
+    color: var(--color-primary);
+    border-color: var(--color-primary);
+  }
+
+  .copy-code-icon svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+}
+
+@layer components {
+  .toast-container {
+    position: fixed;
+    bottom: 1.5rem;
+    right: 1.5rem;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    pointer-events: none;
+  }
+
+  .toast {
+    pointer-events: auto;
+    padding: 0.625rem 1rem;
+    font-family: var(--font-sans);
+    font-size: 0.875rem;
+    color: #fff;
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-elevated);
+    opacity: 0;
+    transform: translateY(0.5rem);
+    transition: opacity 0.2s ease, transform 0.2s ease;
+  }
+
+  .toast-visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .toast-success { background-color: var(--color-accent-blue); }
+  .toast-error { background-color: #b91c1c; }
 }

themes/hugo-rladiesplus/assets/css/components/typography.css

@@ -179,4 +179,34 @@
     font-size: 0.95em;
     letter-spacing: 0.04em;
   }
+
+  .heading-anchored {
+    scroll-margin-top: 5rem;
+  }
+
+  .heading-anchor {
+    display: inline-flex;
+    align-items: center;
+    margin-left: 0.4em;
+    color: var(--color-primary);
+    text-decoration: none;
+    opacity: 0;
+    transition: opacity 0.15s ease, color 0.15s ease;
+    vertical-align: middle;
+  }
+
+  .heading-anchor svg {
+    width: 0.7em;
+    height: 0.7em;
+  }
+
+  .heading-anchored:hover .heading-anchor,
+  .heading-anchored:focus-within .heading-anchor,
+  .heading-anchor:focus-visible {
+    opacity: 1;
+  }
+
+  .heading-anchor:hover {
+    color: var(--color-primary-dark);
+  }
 }

themes/hugo-rladiesplus/assets/css/main.css

@@ -29,6 +29,8 @@
   --color-light: #ededf4;
   --color-bg: #ededf4;
   --color-muted: #5d5f66;
+  --color-success: #0a5030;
+  --color-error: #b91c1c;
   --color-surface: #f8f8fc;
   --color-surface-alt: #ebe3f6;
   --color-surface-footer: #ddd0f0;

themes/hugo-rladiesplus/assets/css/vendor/tailwind.css

@@ -0,0 +1,34 @@
+(function () {
+  if (!navigator.clipboard || !navigator.clipboard.writeText) return;
+
+  document.addEventListener('click', function (e) {
+    var btn = e.target.closest && e.target.closest('.copy-code-btn');
+    if (!btn) return;
+    var wrapper = btn.closest('.code-block');
+    if (!wrapper) return;
+    var code = wrapper.querySelector('code');
+    if (!code) return;
+
+    navigator.clipboard.writeText(code.innerText).then(
+      function () { showToast(btn.dataset.successMsg || 'Code copied', 'success'); },
+      function () { showToast(btn.dataset.errorMsg || 'Copy failed', 'error'); }
+    );
+  });
+
+  function showToast(text, state) {
+    var container = document.getElementById('toast-container');
+    if (!container) return;
+    var toast = document.createElement('div');
+    toast.className = 'toast toast-' + state;
+    toast.setAttribute('role', state === 'error' ? 'alert' : 'status');
+    toast.textContent = text;
+    container.appendChild(toast);
+    requestAnimationFrame(function () {
+      toast.classList.add('toast-visible');
+    });
+    setTimeout(function () {
+      toast.classList.remove('toast-visible');
+      setTimeout(function () { toast.remove(); }, 250);
+    }, 2000);
+  }
+})();