From 606283689272826ebae37621410e381fa8ecb287 Mon Sep 17 00:00:00 2001
From: Fatih <m.fatihdayan@gmail.com>
Date: Sun, 20 Sep 2026 04:40:35 +0300
Subject: [PATCH 1/2] feat(blog): copy a code block without selecting it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

87 of the 104 posts carry code — connection strings, compose fragments,
SQL — and the point of publishing them is that someone runs them.
Selecting a multi-line block by hand was the one part of that the page
controlled and was not helping with.

The button is injected at runtime rather than rendered into the markup.
The alternative is a `data-copy` attribute holding a second copy of
every block, which would roughly double the weight of a code-heavy page
to save a few lines of script; reading `textContent` at click time also
guarantees the text is the code the reader is looking at. With
JavaScript off the blocks render exactly as before.

The clipboard write and its execCommand fallback moved to
scripts/clipboard.ts so the two callers cannot drift on the part that is
easy to get subtly wrong off https.

Hidden until hover for the mouse, and always visible where there is no
hover — an affordance that only appears on hover does not exist on a
phone.
---
 src/pages/blog/[...id].astro | 48 +++++++++++++++++++++++++++++
 src/scripts/clipboard.ts     | 25 +++++++++++++++
 src/scripts/code-copy.ts     | 59 ++++++++++++++++++++++++++++++++++++
 src/scripts/copy.ts          | 26 ++--------------
 tests/post-relations.test.ts | 23 ++++++++++++++
 5 files changed, 157 insertions(+), 24 deletions(-)
 create mode 100644 src/scripts/clipboard.ts
 create mode 100644 src/scripts/code-copy.ts

diff --git a/src/pages/blog/[...id].astro b/src/pages/blog/[...id].astro
index 00a4337..4d95aa6 100644
--- a/src/pages/blog/[...id].astro
+++ b/src/pages/blog/[...id].astro
@@ -171,6 +171,10 @@ const schema = [
   </article>
 </BaseLayout>
 
+<script>
+  import '../../scripts/code-copy';
+</script>
+
 <style>
   .post__inner {
     padding-block: clamp(var(--space-09), 6vh, 72px) clamp(var(--section-y-desktop), 10vh, 112px);
@@ -268,6 +272,50 @@ const schema = [
     border: var(--border-width-1) solid var(--border);
   }
 
+  /* The button sits inside the <pre> rather than in a wrapper: a wrapper would
+     sit between the prose rules and the block, and the margins they set on
+     adjacent elements would stop applying. */
+  .post__body :global(pre.has-codecopy) {
+    position: relative;
+  }
+  .post__body :global(.codecopy) {
+    position: absolute;
+    top: var(--space-03);
+    right: var(--space-03);
+    padding: var(--space-02) var(--space-03);
+    border: var(--border-width-1) solid var(--console-border, var(--border));
+    border-radius: var(--radius-sm);
+    background: var(--console-bg, var(--surface));
+    color: var(--console-text-tertiary, var(--text-tertiary));
+    font: var(--weight-medium) 11.5px / 1 var(--font-mono);
+    cursor: pointer;
+    opacity: 0;
+    transition:
+      opacity 120ms ease,
+      color 120ms ease,
+      border-color 120ms ease;
+  }
+  /* Revealed on hover for the mouse, and always present for keyboard and touch —
+     an affordance that only exists on hover does not exist on a phone. */
+  .post__body :global(pre:hover .codecopy),
+  .post__body :global(.codecopy:focus-visible),
+  .post__body :global(.codecopy.is-copied),
+  .post__body :global(.codecopy.is-copyfailed) {
+    opacity: 1;
+  }
+  @media (hover: none) {
+    .post__body :global(.codecopy) {
+      opacity: 1;
+    }
+  }
+  .post__body :global(.codecopy:hover) {
+    color: var(--text-primary);
+    border-color: var(--border-strong);
+  }
+  .post__body :global(.codecopy.is-copied) {
+    color: var(--text-brand, var(--text-primary));
+  }
+
   .post__grid {
     margin-top: clamp(var(--space-09), 5vh, var(--space-11));
     display: grid;
diff --git a/src/scripts/clipboard.ts b/src/scripts/clipboard.ts
new file mode 100644
index 0000000..a818724
--- /dev/null
+++ b/src/scripts/clipboard.ts
@@ -0,0 +1,25 @@
+/** Writing to the clipboard, and the fallback that makes it work off https.
+ *
+ *  Shared so the two callers — [data-copy] buttons and the code blocks in a post
+ *  — cannot drift on the part that is easy to get subtly wrong. Falls back to a hidden textarea + execCommand so it
+ *  still works on http:// origins where the async clipboard API is unavailable. */
+export function write(text: string): Promise<void> {
+  if (navigator.clipboard?.writeText) return navigator.clipboard.writeText(text);
+  return new Promise((resolve, reject) => {
+    const ta = document.createElement('textarea');
+    ta.value = text;
+    ta.setAttribute('readonly', '');
+    ta.style.position = 'fixed';
+    ta.style.opacity = '0';
+    document.body.appendChild(ta);
+    ta.select();
+    try {
+      if (document.execCommand('copy')) resolve();
+      else reject(new Error('copy rejected'));
+    } catch (err) {
+      reject(err);
+    } finally {
+      ta.remove();
+    }
+  });
+}
diff --git a/src/scripts/code-copy.ts b/src/scripts/code-copy.ts
new file mode 100644
index 0000000..ea08c59
--- /dev/null
+++ b/src/scripts/code-copy.ts
@@ -0,0 +1,59 @@
+/**
+ * A copy button on every code block in a post.
+ *
+ * 87 of the 104 posts carry code — connection strings, compose fragments, SQL —
+ * and the whole point of publishing them is that someone runs them. Selecting a
+ * multi-line block by hand is the one part of that the page controlled and was
+ * not helping with.
+ *
+ * The button is injected at runtime rather than rendered into the markup: the
+ * alternative is a `data-copy` attribute holding a second copy of every block,
+ * which would roughly double the weight of a code-heavy page to save a few
+ * lines of script. The text is read from the DOM at click time, so it is by
+ * definition the code the reader is looking at.
+ *
+ * With JavaScript off the blocks render exactly as before — this adds an
+ * affordance, it does not carry the content.
+ */
+import { write } from './clipboard';
+
+const IDLE = 'copy';
+const RESET_MS = 1600;
+
+for (const pre of document.querySelectorAll<HTMLPreElement>('.post__body pre')) {
+  // Shiki nests <code> inside <pre>; either way textContent is the source.
+  const source = pre.textContent ?? '';
+  if (!source.trim()) continue;
+
+  const btn = document.createElement('button');
+  btn.type = 'button';
+  btn.className = 'codecopy';
+  btn.textContent = IDLE;
+  btn.setAttribute('aria-label', 'Copy this code block');
+
+  // The button is positioned against the <pre>; a wrapper would change the
+  // prose flow and the margins the stylesheet sets on sibling blocks.
+  pre.classList.add('has-codecopy');
+  pre.append(btn);
+
+  let timer: number | undefined;
+  btn.addEventListener('click', async () => {
+    let ok = true;
+    try {
+      await write(source);
+    } catch {
+      ok = false;
+    }
+    btn.textContent = ok ? 'copied' : 'press ⌘C';
+    btn.setAttribute('aria-label', ok ? 'Copied to clipboard' : 'Copy failed — select the code and press Command C');
+    btn.classList.toggle('is-copied', ok);
+    btn.classList.toggle('is-copyfailed', !ok);
+
+    window.clearTimeout(timer);
+    timer = window.setTimeout(() => {
+      btn.textContent = IDLE;
+      btn.setAttribute('aria-label', 'Copy this code block');
+      btn.classList.remove('is-copied', 'is-copyfailed');
+    }, RESET_MS);
+  });
+}
diff --git a/src/scripts/copy.ts b/src/scripts/copy.ts
index d2bbf93..78ca447 100644
--- a/src/scripts/copy.ts
+++ b/src/scripts/copy.ts
@@ -1,26 +1,6 @@
 /** Copy-to-clipboard buttons: writes [data-copy], then shows "copied" for 1.6s
- *  (the prototype's timing). Falls back to a hidden textarea + execCommand so it
- *  still works on http:// origins where the async clipboard API is unavailable. */
-function write(text: string): Promise<void> {
-  if (navigator.clipboard?.writeText) return navigator.clipboard.writeText(text);
-  return new Promise((resolve, reject) => {
-    const ta = document.createElement('textarea');
-    ta.value = text;
-    ta.setAttribute('readonly', '');
-    ta.style.position = 'fixed';
-    ta.style.opacity = '0';
-    document.body.appendChild(ta);
-    ta.select();
-    try {
-      if (document.execCommand('copy')) resolve();
-      else reject(new Error('copy rejected'));
-    } catch (err) {
-      reject(err);
-    } finally {
-      ta.remove();
-    }
-  });
-}
+ *  (the prototype's timing). */
+import { write } from './clipboard';
 
 for (const btn of document.querySelectorAll<HTMLButtonElement>('[data-copy]')) {
   const idle = btn.textContent ?? 'copy';
@@ -58,5 +38,3 @@ for (const btn of document.querySelectorAll<HTMLButtonElement>('[data-copy]')) {
     }, 1600);
   });
 }
-
-export {};
diff --git a/tests/post-relations.test.ts b/tests/post-relations.test.ts
index f1ac9b1..b2d132e 100644
--- a/tests/post-relations.test.ts
+++ b/tests/post-relations.test.ts
@@ -151,3 +151,26 @@ describe('the sitemap dates what it knows', () => {
     for (const path of undated) expect(path, 'a post went undated').not.toMatch(/^\/blog\/[^/]+\/$/);
   });
 });
+
+describe('code blocks can be copied', () => {
+  it('loads the copier on every post', () => {
+    // The button is injected at runtime, so the markup cannot be asserted — what
+    // can be is that the module reaches the page and that it shares the
+    // clipboard fallback rather than carrying a second copy of it.
+    for (const slug of dirs) {
+      const doc = readFileSync(`dist/blog/${slug}/index.html`, 'utf8');
+      const modules = [...doc.matchAll(/<script type="module" src="([^"]+)"/g)].map((m) => m[1]!);
+      const loaded = modules.some((src) => readFileSync(`dist${src}`, 'utf8').includes('codecopy'));
+      expect(loaded, `${slug}: the code copier is not loaded`).toBe(true);
+    }
+  });
+
+  it('reads the code from the DOM instead of duplicating it into an attribute', () => {
+    // A `data-copy` attribute per block would roughly double the weight of a
+    // code-heavy page to save a few lines of script.
+    const doc = readFileSync('dist/blog/postgresql-connect-docker-container/index.html', 'utf8');
+    const body = doc.slice(doc.indexOf('post__body prose'), doc.indexOf('<nav class="toc"'));
+    expect(body).toContain('<pre');
+    expect(body, 'code was duplicated into an attribute').not.toContain('data-copy=');
+  });
+});

From 82c9ce56cc1e7e083e485c1465a4a73132a9ff63 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Sun, 20 Sep 2026 18:49:56 +0300
Subject: [PATCH 2/2] fix(blog): keep the copy button out of the code a reader
 selects
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two defects in the button, both found by driving the built page rather than
reading it.

--radius-sm is not in the vocabulary — the scale is xs/s/m/l/xl/2xl — so the
declaration was invalid at computed-value time and the button rendered with
square corners. It is a small control, which the design system sizes at
--radius-s (6px).

The button sits inside the <pre>, so its label was part of the block's
selectable text: selecting the block by hand returned 'docker run ... postgres:18copy'.
That is the exact workflow the button was added to improve, and it broke it for
anyone who kept doing it the old way. user-select: none takes the label back
out. What the button itself copies was never affected — the source is read
before the button is appended — so only the manual path regressed.

Measured on dist: button radius 6px, prev/next card 12px, hand selection ends
at 'postgres:18', clipboard matches it. The test asserts the rule from the
emitted stylesheet and fails without the fix.
---
 src/pages/blog/[...id].astro |  6 +++++-
 tests/post-relations.test.ts | 15 +++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/pages/blog/[...id].astro b/src/pages/blog/[...id].astro
index 4d95aa6..d97f8cf 100644
--- a/src/pages/blog/[...id].astro
+++ b/src/pages/blog/[...id].astro
@@ -284,11 +284,15 @@ const schema = [
     right: var(--space-03);
     padding: var(--space-02) var(--space-03);
     border: var(--border-width-1) solid var(--console-border, var(--border));
-    border-radius: var(--radius-sm);
+    border-radius: var(--radius-s);
     background: var(--console-bg, var(--surface));
     color: var(--console-text-tertiary, var(--text-tertiary));
     font: var(--weight-medium) 11.5px / 1 var(--font-mono);
     cursor: pointer;
+    /* The button lives inside the <pre>, so its label is part of the block's
+       selectable text. Without this, selecting the block by hand — the very
+       thing this button exists to replace — copies "docker run …copy". */
+    user-select: none;
     opacity: 0;
     transition:
       opacity 120ms ease,
diff --git a/tests/post-relations.test.ts b/tests/post-relations.test.ts
index b2d132e..11720a9 100644
--- a/tests/post-relations.test.ts
+++ b/tests/post-relations.test.ts
@@ -165,6 +165,21 @@ describe('code blocks can be copied', () => {
     }
   });
 
+  it('keeps its own label out of the block a reader selects by hand', () => {
+    // The button sits inside the <pre>, so without user-select: none its label
+    // joins the block's selectable text and a hand-selected `docker run …`
+    // comes out as `docker run …copy` — breaking the one workflow this was
+    // added to improve.
+    const doc = readFileSync('dist/blog/postgresql-connect-docker-container/index.html', 'utf8');
+    const sheets = [...doc.matchAll(/<link rel="stylesheet" href="([^"]+)"/g)].map((m) => m[1]!);
+    const rule = sheets
+      .map((href) => readFileSync(`dist${href}`, 'utf8'))
+      .flatMap((css) => [...css.matchAll(/\.codecopy\{([^}]*)\}/g)].map((m) => m[1]!))
+      .find((body) => body.includes('cursor:pointer'));
+    expect(rule, 'the .codecopy rule is not in any stylesheet').toBeDefined();
+    expect(rule, 'the button label is selectable with the code').toContain('user-select:none');
+  });
+
   it('reads the code from the DOM instead of duplicating it into an attribute', () => {
     // A `data-copy` attribute per block would roughly double the weight of a
     // code-heavy page to save a few lines of script.