feat: per-city Open Graph images (#122) - #138
Merged
Merged
Conversation
Every shared city link used the same generic preview. Add an opengraph-image route to the city segment that renders the city name, its biggest place categories, and the wordmark at 1200x630, generated at build time for all 217 city pages. The image route mirrors the page's static params and 404 behavior; the Space Grotesk typeface is fetched from Google (edge runtime has no system fonts) with a cached fallback so a font-host hiccup never fails the build. Non-city routes keep the static /brand/og.svg card.
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.
What
Per-city Open Graph images, so shared city links stop unfurling as ten identical generic cards.
src/app/city/[slug]/opengraph-image.tsx— renders the city name, its biggest place categories with counts, and the StudyMap wordmark on the brand dark background (#0A0A0A+ amber pin), at 1200×630. Mirrors the city page'sgenerateStaticParams/dynamicParams/slug-decode so every dataset city gets an image and unknown slugs 404.next/ogruns on the edge runtime with no system fonts, so the Space Grotesk typeface is fetched from Google (legacy-UA CSS request → truetype URLs, since the renderer reads ttf/otf, not woff2), cached for the process, with a graceful fallback to a system stack if the font host is unreachable — a font hiccup must never fail the build.src/lib/og.ts+ tests — pure, deterministicogCitySummary()(display name, total, biggest categories first, capped at 4 with "+N more") so the card content is unit-testable./brand/og.svgfrom the root layout (verified on/and/about).Verification
next buildclean; 217 distinct OG PNGs prerendered (one per city), all 1200×630 — sha256-distinct per city, mumbai renders 1,052 unique colors (real text/accents, not a flat card)./city/navi_mumbaiemits<meta property="og:image" content="https://studyymap.com/city/navi_mumbai/opengraph-image">.One note for a real unfurl test: the acceptance criteria asks for a deployed preview check via opengraph.xyz — that needs a live deploy, which this PR can't do from the fork, but the images are build-time static assets so the deployed URL will serve them at the same paths.