feat(docs): add opengraph to docs for dynamic link preview

[waleedlatif1]

Summary

• add opengraph to docs for dynamic link preview

Type of Change

• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

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

Project	Deployment	Review	Updated (UTC)
docs	Ready	Preview, Comment	Dec 13, 2025 8:59pm

[greptile-apps]

Greptile Overview

Greptile Summary

This PR adds dynamic Open Graph image generation for the documentation site to enable rich link previews when shared on social platforms. The implementation creates a new edge runtime API route at /api/og that generates custom OG images with the page title and category, using the Inter font from Google Fonts.

• Added new /api/og route that generates 1200x630 OG images dynamically using next/og ImageResponse
• Updated page metadata in page.tsx to include dynamic OG images with proper URL encoding
• Changed Twitter card type from summary to summary_large_image for better visual presentation
• Added Twitter creator and site metadata (@simdotai)
• Updated root layout metadata to use the dynamic OG API instead of a static image
• Added new og-background.png texture asset for the generated images

Confidence Score: 5/5

• This PR is safe to merge - it adds a new feature without modifying existing core functionality.
• The implementation follows standard Next.js patterns for OG image generation using edge runtime. All static assets referenced (logo.png, og-background.png) exist in the public/static folder. The code uses proper URL encoding and the Google Fonts loading approach is a common pattern. No breaking changes or security concerns identified.
• No files require special attention.

Important Files Changed

File Analysis

Filename	Score	Overview
apps/docs/app/api/og/route.tsx	4/5	New edge runtime API route that dynamically generates OG images for documentation pages using next/og ImageResponse, with dynamic font loading from Google Fonts and customizable title/category parameters.
apps/docs/app/[lang]/[[...slug]]/page.tsx	5/5	Added dynamic OG image URL to page metadata with proper URL encoding, updated Twitter card to summary_large_image, and added Twitter creator/site metadata.
apps/docs/app/layout.tsx	5/5	Updated root layout to use dynamic OG image API endpoint instead of static og-image.png for both OpenGraph and Twitter metadata.
apps/docs/public/static/og-background.png	5/5	New background texture image asset for the OG image generation.

Sequence Diagram

sequenceDiagram
    participant Client
    participant NextJS as Next.js Server
    participant OGRoute as /api/og Route
    participant GoogleFonts as Google Fonts API
    participant Static as Static Assets

    Client->>NextJS: Request documentation page
    NextJS->>Client: Return HTML with OG meta tags
    Note over Client: Meta tag contains og:image URL

    Client->>OGRoute: Request OG image (/api/og?title=...&category=...)
    OGRoute->>GoogleFonts: Fetch Inter font CSS
    GoogleFonts-->>OGRoute: Return CSS with font URL
    OGRoute->>GoogleFonts: Fetch font binary data
    GoogleFonts-->>OGRoute: Return ArrayBuffer
    OGRoute->>Static: Load og-background.png
    Static-->>OGRoute: Return background image
    OGRoute->>Static: Load logo.png
    Static-->>OGRoute: Return logo image
    OGRoute-->>Client: Return generated PNG image (1200x630)

Loading

[greptile-apps]

_{3 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}