feat(share): per-transition share pages with generated composite OG cards#9
Open
rohram04 wants to merge 1 commit into
Open
feat(share): per-transition share pages with generated composite OG cards#9rohram04 wants to merge 1 commit into
rohram04 wants to merge 1 commit into
Conversation
…ards
Adds a real shareable surface so each transition unfurls as its own rich
link preview instead of the generic site card.
- New /transition/[id] route: server component resolves the transition by id
(getTransition) and renders a single-item, playable TransitionPlayer view
with a back-to-feed control. Anonymous/guest accessible.
- generateMetadata produces per-transition title/description + OG/Twitter
tags ("Track A → Track B …"); 404s on a missing id.
- opengraph-image.js generates a 1200x630 composite via ImageResponse: both
album covers split by the signature amber "cut" marker, the wordmark, and
each track's title (Syne) + artist (Space Mono), with a "shared by" credit.
Fonts are fetched from Google as truetype (Satori can't parse woff2);
falls back to a branded card if data or fonts are unavailable.
twitter-image.js re-exports the same generator.
- Share control in the player dock: native share sheet where available, else
copy-to-clipboard (async API with execCommand fallback) and a brief
"Link copied" amber check.
Crawler-safe: metadata + image are resolved server-side on the Node runtime,
so previews work without running the client player.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
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.
Stacked on top of
feat/frontend-design-refresh. Adds a real shareable surface so each transition unfurls as its own rich link preview instead of the generic site card.What's included
/transition/[id]route — server component resolves the transition by id (getTransition) and renders a single-item, playableTransitionPlayerview with a back-to-feed control. Anonymous/guest accessible.generateMetadata— per-transition title/description + Open Graph / Twitter tags ("Track A → Track B …");404s on a missing id.opengraph-image.js) — 1200×630ImageResponse: both album covers split by the signature amber cut marker, the wordmark, and each track's title (Syne) + artist (Space Mono), with a "shared by" credit. Fonts fetched from Google as TrueType (Satori can't parse woff2); falls back to a branded card if data/fonts are unavailable.twitter-image.jsre-exports the same generator.execCommandfallback) and a brief "Link copied" amber check.Crawler-safe: metadata + image are resolved server-side on the Node runtime, so previews work without running the client player.
Verification
npm run build+npm run lintclean; all three routes registered.curl /transition/1returns correct per-transition OG/Twitter meta.🤖 Generated with Claude Code