Generate per-city Open Graph images

[AnayDhawan]

Problem

Every shared link unfurls with the same generic preview image. Once city pages and deep links exist, ten different shared links all look identical in a chat, which makes them easy to ignore.

Where to start

• The city pages from Add per-city landing pages generated from the places dataset #127
• Next.js next/og docs

What to build

An opengraph-image.tsx for the city route that renders the city name, a count of places by category, and the StudyMap wordmark.

Wire it up so each city page advertises its own image.

Keep a static fallback for routes that are not city pages.

Acceptance criteria

• Each city page produces a distinct OG image showing its own name and counts
• Images render at 1200x630
• Non-city routes still get a sensible default image
• Previews render correctly in a real unfurl test, not just locally

Verifying

npm install
npm run dev

Visit the opengraph-image route for a city directly, then check a deployed preview URL with opengraph.xyz.

Notes

next/og runs on the edge runtime, which restricts what you can use. Font loading is the usual sticking point; fetch the font file rather than relying on a system font.

Scope: medium, roughly 3 hours. Depends on #127.

New to the repo? Start with CONTRIBUTING.md.