Add rich link preview cards and put counter names in shared messages - #17
Merged
Merged
Conversation
Pasted clockdown links previewed as a bare title with no image. Add Open
Graph and Twitter card metadata to all four pages, backed by generated
1200x630 share cards that mirror the live countdown's look.
The counter's own name cannot go in the preview card: every counter's data
lives in the URL's #hash, which browsers never send to a server, and link
unfurlers don't run JavaScript. On static hosting there is no point at which
a per-counter title could be rendered. Doing that would mean moving the data
into the path or query string and serving the HTML from an edge function --
which would also start putting counter names in server logs.
So the name goes where it can go: the Share button now passes it as
navigator.share({ text }), so it appears in the message body directly above
the preview card.
Also add tools/og/, a dependency-free generator for the cards (headless
Chromium plus a small PNG cropper), excluded from the deployed site.
Contributor
|
🔗 Preview deployed: https://clockdown.us/pr/17/ |
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.
Pasted clockdown links previewed as a bare title with no image — iMessage was falling back to
<title>because the pages had no Open Graph metadata at all.What changed
OG + Twitter card metadata on all four pages (
/,/timer,/stopwatch,/motivation), each pointing at its own generated 1200×630 share card. Links now unfurl as a full-width image card instead of a text-only bubble.The counter's name now reaches the recipient. The Share button previously sent
navigator.share({ title, url }), and iOS Messages ignorestitle. It now passes the name astext, so the message reads:Clipboard "Copy Link" is unchanged — it still copies a bare URL, since that gets pasted into address bars.
tools/og/— a dependency-free generator for the cards (headless Chromium + a small PNG cropper). Excluded from the deployed site via both workflows. Space Grotesk is fetched and cached at build time rather than vendored, so no font binaries land in the repo.Why the name isn't in the card itself
It can't be, on static hosting. Every counter's data lives in the URL's
#hash, which browsers never send to a server, and link unfurlers don't run JavaScript. There is no point in the request where a per-counter title could be rendered.Putting it there would mean moving the data into the path or query string and serving the HTML from an edge function (Vercel/Netlify/Cloudflare) — which would also start putting counter names in server logs, where they never appear today. That tradeoff is written up in
tools/og/README.mdso the reasoning isn't lost.Notes for review
Two headless Chromium quirks are worked around and documented:
--window-sizeincludes window chrome, so the viewport lands ~87px short and the bottom of the card never composited. The script measures that inset, renders oversized, and crops back.Testing
navigator.shareand clicking the real button:🎉 New Year's Eve — counting down on Clockdown,🍝 Pasta Timer — timer running on Clockdown,💪 Plank Challenge — stopwatch running on Clockdown.The preview deploy on this PR won't reflect the real cards —
og:imageURLs are absolute toclockdown.us, so they'll resolve to production until this merges.Generated by Claude Code