feat: per-page social share images for every page#12
Merged
Conversation
Add a registry-driven Open Graph / Twitter card renderer so the homepage and each tool page get a distinct, on-brand 1200x630 image instead of all sharing one generic root card. - lib/og.tsx: shared renderer that embeds the bundled subset Noto Sans for crisp text; accent colour and copy come from each tool's registry entry - one opengraph-image route per tool, plus a rewritten homepage card - sanitize glyphs absent from the font subset (the arrow in "Image → URI" becomes "Image to URI") Next mirrors each file image to twitter:image automatically. The images prerender as static PNGs at build time.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
1 participant
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.
What
Every page shared to social currently falls back to the single generic root OG image. This adds a distinct, on-brand 1200×630 Open Graph / Twitter card for each page (homepage + all four tools), driven entirely by the tool registry.
How
lib/og.tsx— one shared renderer. Embeds the already-bundled subset Noto Sans (Regular + Bold) so text is real hinted glyphs, not the satori fallback. Accent colour, title, description, feature chips, and URL all come from each tool'sTOOLSentry, so cards can never drift from the tool metadata.opengraph-image.tsxroute per tool + a rewritten homepage card. Each is a few lines that hand its registry entry to the renderer.Image → URIrenders asImage to URI).Next mirrors each file image to
twitter:imageautomatically, so tool pages now emit bothog:imageandtwitter:image. All five images prerender as static PNGs at build time (verified:○ (Static)in the build output), so there is no runtime cost or external dependency.Verification
npm run build— all 5 OG routes prerender static, no errorsnpm run lint— cleannpm run test— 27/27 passCard design
Brand mark +
CODERCOPS · TOOLSeyebrow, a category badge, accent bar, large title, description, feature chips, and the live URL with a fading accent bar motif. Homepage uses the cyan brand accent and the four tool colours in the footer bar.Part of the SEO / discoverability plan. Next PRs: structured data (FAQ / Organization / breadcrumbs), on-site GitHub link + live star count, README overhaul (which will reuse these images).