feat(og): dynamic package-themed OG images (#835)

* chore: add satori and resvg-js for dynamic OG image generation

* chore: add Inter TTF fonts for Satori OG generation

* feat(og): add library accent color map

* feat(og): module-scope loader for Satori fonts and island asset

* feat(og): Satori JSX template for package OG images

* feat(og): PNG generator via Satori and resvg

* chore(og): add preview script for local visual verification

* feat(og): add doc-title slot between library name and description

* feat(og): /api/og/:library.png resource route with CDN cache headers

* test(smoke): cover /api/og endpoint with status + content-type assertions

* feat(og): ogImageUrl helper for SEO call sites

* feat(og): use generated OG image on library landing pages

* feat(og): use generated OG image on docs pages

* chore(og): remove unused static ogImage fields from libraries

* fix(og): clamp title length, drop unused color export, include fonts in function bundle

* ci: apply automated fixes

* feat(og): separate pitch slot from description, fix slot order

* feat(og): show pitch only on landing pages (no doc title or description)

* fix(og): add empty alt to decorative island img for lint

* refactor(og): migrate satori + resvg to takumi

Swap the two-stage satori (JSX→SVG) + resvg-js (SVG→PNG) pipeline for
takumi's single-stage Rust renderer. Smaller PNGs (~22%) and faster
cold start on the Netlify function.

The island PNG moves from an inline base64 data URL to takumi's
persistent-image cache, referenced by key. Route handler now returns
the ImageResponse directly instead of wrapping a Buffer.

* fix(og): use deploy origin for og:image so previews resolve

canonicalUrl always returns the production hostname, so on Netlify
preview/branch deploys the og:image meta tag pointed at
https://tanstack.com/api/og/<id>.png — which 404s if production
hasn't shipped the endpoint yet, making validators report the
image as invalid/unreachable.

og:image now prefers DEPLOY_PRIME_URL → DEPLOY_URL → URL → SITE_URL
on SSR, so each deploy emits a same-origin og:image URL. Production
behavior is unchanged (DEPLOY_PRIME_URL === URL on production builds).
Canonical link tags continue to use canonicalUrl and point to prod.

* Merge branch 'main' into feat/dynamic-og-images

* fix(og): address coderabbit review

- Inter-Regular registered with weight 400 (was 700) — matches the
  font file and pairs cleanly with Inter-ExtraBold at 800 so template
  fontWeight 500 resolves to the closer regular face.
- Tighten LIBRARY_ACCENT_COLORS to Partial<Record<LibraryId, string>>
  so removing or renaming a library id is a TS error rather than a
  silent fallback to the default. getAccentColor takes LibraryId now.
- Share MAX_OG_TITLE_LENGTH / MAX_OG_DESCRIPTION_LENGTH / clampOgText
  via src/utils/og-limits.ts and clamp client-side in ogImageUrl so
  the og:image URL stays bounded and CDN cache keys stay stable.
- Hoist duplicated title/description strings in the examples route
  head() so seo() and ogImageUrl() can't drift.
- Smoke tests: add a 404 assertion for unknown library ids, and
  report HTML / OG / Total counts separately so a mid-run "X passed"
  isn't misleading.

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Sarah Gerrard <gerrardsarah@gmail.com>

Author: 3 people

.gitignore

@@ -35,3 +35,4 @@ test-results
 .eslintcache
 .tsbuildinfo
 src/routeTree.gen.ts
+.og-preview/

netlify.toml

@@ -7,6 +7,11 @@ publish = "dist/client"
 
 [functions]
 directory = "netlify/functions"
+included_files = [
+  "public/fonts/Inter-Regular.ttf",
+  "public/fonts/Inter-ExtraBold.ttf",
+  "public/images/logos/splash-dark.png",
+]
 
 [[headers]]
 for = "/*"

package.json

@@ -47,6 +47,9 @@
     "@shopify/hydrogen-react": "^2026.4.0",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.2.2",
+    "@takumi-rs/core": "^1.1.2",
+    "@takumi-rs/helpers": "^1.1.2",
+    "@takumi-rs/image-response": "^1.1.2",
     "@tanstack/ai": "^0.10.2",
     "@tanstack/ai-anthropic": "^0.7.3",
     "@tanstack/ai-client": "^0.7.9",

pnpm-lock.yaml

@@ -0,0 +1,44 @@
+/**
+ * Renders one OG image per library to `.og-preview/`.
+ * Run with: pnpm exec tsx scripts/og-preview.ts
+ */
+import { mkdirSync, writeFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { libraries } from '../src/libraries/libraries'
+import { generateOgImageResponse } from '../src/server/og/generate.server'
+
+const OUT_DIR = resolve(process.cwd(), '.og-preview')
+
+async function renderToFile(
+  outPath: string,
+  input: Parameters<typeof generateOgImageResponse>[0],
+) {
+  const result = generateOgImageResponse(input)
+  if ('kind' in result) {
+    console.warn(`[skip] ${input.libraryId}: ${result.kind}`)
+    return
+  }
+  const buf = Buffer.from(await result.arrayBuffer())
+  writeFileSync(outPath, buf)
+  console.log(`[ok] ${outPath}`)
+}
+
+async function main() {
+  mkdirSync(OUT_DIR, { recursive: true })
+
+  for (const lib of libraries) {
+    if (!lib.to) continue // skip entries without a landing page (react-charts, create-tsrouter-app)
+
+    await renderToFile(resolve(OUT_DIR, `${lib.id}.png`), { libraryId: lib.id })
+    await renderToFile(resolve(OUT_DIR, `${lib.id}-docs.png`), {
+      libraryId: lib.id,
+      title: 'Overview',
+      description: `${lib.tagline} Guides, API reference and examples in one place.`,
+    })
+  }
+}
+
+main().catch((err) => {
+  console.error(err)
+  process.exit(1)
+})

public/fonts/Inter-ExtraBold.ttf

@@ -9,7 +9,6 @@ const textStyles = `text-pink-600 dark:text-pink-500`
 export const aiProject = {
   ...ai,
   description: `A powerful, open-source AI SDK with a unified interface across multiple providers. No vendor lock-in, no proprietary formats, just clean TypeScript and honest open source.`,
-  ogImage: 'https://github.com/tanstack/ai/raw/main/media/repo-header.png',
   latestBranch: 'main',
   bgRadial: 'from-pink-500 via-pink-700/50 to-transparent',
   textColor: `text-pink-700`,

public/fonts/Inter-Regular.ttf

@@ -8,7 +8,6 @@ const textStyles = 'text-black dark:text-gray-100'
 export const configProject = {
   ...config,
   description: `Opinionated tooling to lint, build, test, version, and publish JS/TS packages — minimal config, consistent results.`,
-  ogImage: 'https://github.com/tanstack/config/raw/main/media/repo-header.png',
   latestBranch: 'main',
   featureHighlights: [
     {

scripts/og-preview.ts

@@ -8,7 +8,6 @@ const textStyles = `text-orange-600 dark:text-orange-500`
 export const dbProject = {
   ...db,
   description: `TanStack DB gives you a reactive, client-first store for your API data with collections, live queries and optimistic mutations that keep your UI reactive, consistent and blazing fast 🔥`,
-  ogImage: 'https://github.com/tanstack/db/raw/main/media/repo-header.png',
   latestBranch: 'main',
   bgRadial: 'from-orange-500 via-orange-700/50 to-transparent',
   textColor: `text-orange-700`,