Skip to content

feat(registry): add OG image generation for all pages#102

Merged
bntvllnt merged 5 commits intomainfrom
feat/registry-og-images
Mar 10, 2026
Merged

feat(registry): add OG image generation for all pages#102
bntvllnt merged 5 commits intomainfrom
feat/registry-og-images

Conversation

@bntvllnt
Copy link
Collaborator

Summary

  • Dynamic OG image generation for all 5 registry pages via /api/og route
  • Frontmatter-driven config adapted from bntvllnt pattern (query-param API + helper lib)
  • Full content migration from inline template literals to MDX files with frontmatter
  • openGraph + twitter metadata wired on all routes

Architecture

content/pages/*.mdx → lib/content.ts (loader) → generateMetadata() → lib/og.ts (helpers) → /api/og (ImageResponse)

New Files

File Purpose
lib/og.ts Zod schema, generateOGImageURL(), generateOGMetadata(), generateTwitterMetadata()
lib/og-templates.ts 4 template configs (home, component, docs, page)
app/api/og/route.ts next/og ImageResponse with category badges + footer
lib/content.ts + lib/schemas.ts gray-matter MDX loader + Zod validation
content/pages/*.mdx 4 MDX files (home, docs, philosophy, components)

Modified Files

  • app/layout.tsx — added metadataBase for absolute OG URLs
  • 4 static pages — load content from MDX, wire OG metadata
  • app/components/[slug]/page.tsx — extend metadata with OG image

Test plan

  • pnpm build passes (103/103 pages generated)
  • Visit /api/og?title=Button&type=component&category=core — returns PNG image
  • Verify OG meta tags on each page (view source or social debugger)
  • Share a URL on Twitter/Slack/Discord — preview card renders correctly
  • Test fallback: /api/og with no params returns default VLLNT UI image

Closes #100

Dynamic OG images via /api/og route using next/og ImageResponse.
Frontmatter-driven config adapted from bntvllnt pattern.

- Add lib/og.ts (Zod schema, URL builder, metadata generators)
- Add lib/og-templates.ts (4 templates: home, component, docs, page)
- Add app/api/og/route.ts (ImageResponse with category badges, footer)
- Migrate static page content from inline to MDX files with frontmatter
- Add lib/content.ts + lib/schemas.ts (gray-matter loader, Zod validation)
- Wire generateMetadata with OG + Twitter cards on all 5 routes
- Add metadataBase to layout.tsx for absolute OG URLs

Closes #100
@bntvllnt bntvllnt added the enhancement New feature or request label Mar 10, 2026
@bntvllnt bntvllnt self-assigned this Mar 10, 2026
@vercel
Copy link

vercel bot commented Mar 10, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ui.vllnt.com Ready Ready Preview, Comment Mar 10, 2026 11:04pm

Request Review

Temporary /og-preview page showing all generated OG images:
- 4 static pages + all component pages grouped by category
- Lazy-loaded images with URL display for debugging
@bntvllnt bntvllnt merged commit 6589a21 into main Mar 10, 2026
3 checks passed
@bntvllnt bntvllnt deleted the feat/registry-og-images branch March 10, 2026 23:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(registry): add OG image generation to all pages

1 participant