Copy a code block without selecting it - #53
Merged
Merged
Conversation
cevheri
changed the base branch from
seo/one-url-per-page-and-engine-archives
to
main
September 20, 2026 15:58
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.
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.
cevheri
force-pushed
the
seo/og-images-and-code-copy
branch
from
September 20, 2026 15:59
fa0d56d to
82c9ce5
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Stacked on #52 — the base is that branch, so the diff here is one commit.
87 of the 104 posts carry code, and the point of publishing a connection string or a compose fragment is that someone runs it. 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, not rendered into the markup. The alternative is a
data-copyattribute 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. ReadingtextContentat click time also guarantees the copied text is the code on screen. With JavaScript off the blocks render exactly as before — this adds an affordance, it does not carry content.The clipboard write and its
execCommandfallback moved tosrc/scripts/clipboard.ts, shared with the existing[data-copy]buttons, so the two cannot drift on the part that is easy to get subtly wrong off https.Hidden until hover for a mouse; always visible under
@media (hover: none)and on:focus-visible. An affordance that only appears on hover does not exist on a phone or to a keyboard.Verified in a browser rather than asserted: all five blocks on
/blog/postgresql-connect-docker-container/get a button, positioned inside the<pre>, idle atopacity: 0, and on click the label becomes "copied" with the brand colour applied.Two items from the same list I did not do, and why
Per-page OG images. The tooling exists (
scripts/og/build-og.mjsrenders the card in real Chrome). Butpublic/og/default.pngis 102 KB, so 104 post cards is about 10.4 MB committed — against a.gitthat is currently 3.8 MB. Quadrupling the repository, permanently, to improve share cards is the wrong trade. If the cards are wanted, generating them in CI before the build — so they reachdist/without ever entering history — is the version worth doing, and that is a separate decision about adding Chrome to the deploy job.Hero image as AVIF. 149 KB JPEG, and AVIF would save roughly 110 KB. But LCP is already 1,189 ms against a 2,500 ms threshold, there is no image pipeline in this repo to hang an encoder on, and re-compressing the JPEG locally gained 16 KB at visible quality cost. Adding a build dependency for one image that is not a problem is not worth it.