Dynamic OG images for docs pages

[aurorascharff]

Generates a per-page social card so links unfurl with the actual page name (for example <Suspense>) instead of the generic "API Reference" banner.

The cards are generated statically at build time (no runtime image generation): scripts/generateOgImages.mjs runs after next build, renders a card for every content page with satori, and writes them to public/images/og/. Page.tsx points og:image at the static file. The homepage and error pages keep their existing static images.

Numbers from a local run: 219 images, 24MB, ~25s added to the build.

Examples

Section	Card
API Reference (<Suspense>)
API Reference (useState)
Learn (long, wrapping title)
Community
Blog

Notes

• Design matches the existing static cards: React logo and wordmark, Optimistic Display, uppercase page path, same background.
• Satori can't read woff2, so the two Optimistic weights used are also vendored as TTF in public/fonts/ (converted from the woff2 files already in the repo).
• Titles come from frontmatter, falling back to the sidebar route title (covers <link>, <meta>, <script>, <style>).
• To preview locally: node scripts/generateOgImages.mjs, then check public/images/og/.

[github-actions]

Size changes

Details

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

Five Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
/404	127.24 KB (🟡 +126 B)	242.39 KB
/500	127.25 KB (🟡 +126 B)	242.4 KB
/[[...markdownPath]]	129.69 KB (🟡 +126 B)	244.84 KB
/errors	127.5 KB (🟡 +126 B)	242.65 KB
/errors/[errorCode]	127.47 KB (🟡 +126 B)	242.62 KB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

[Copilot]

Pull request overview

This PR adds build-time generation of per-page Open Graph (OG) images so social link unfurls can show the specific page title (e.g. <Suspense> or useState) instead of a generic section banner. It introduces a static image generation script (Satori + Resvg) that runs during the build and updates the page SEO metadata to reference the generated assets.

Changes:

• Add scripts/generateOgImages.mjs to render OG cards for content pages into public/images/og/ at build time.
• Update Page.tsx to point og:image to the per-page generated PNG when applicable, otherwise fall back to existing section images.
• Add required dependencies (satori, @resvg/resvg-js), wire the script into npm run build, and ignore generated outputs in git.

Reviewed changes

Copilot reviewed 3 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
yarn.lock	Adds lockfile entries for Satori/Resvg and transitive deps used for image generation.
src/components/Layout/Page.tsx	Switches OG image selection to prefer per-page generated images.
scripts/generateOgImages.mjs	New build-time generator for static OG card PNGs for content routes.
package.json	Adds deps and runs OG generation after next build.
.gitignore	Ignores generated public/images/og/ output.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.