feat(og): update og image

[waleedlatif1]

Summary

• update og image

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 10:25pm

[greptile-apps]

Greptile Overview

Greptile Summary

Updated Open Graph (OG) image generation for documentation pages with enhanced visual design and description support.

Key Changes:

• Switched from Inter to Geist font family for better brand consistency with the main site
• Added support for optional description parameter in OG images
• Improved visual design with gradient background (dark purple to black), subtle purple glow effect, and refined color palette
• Updated typography with adjusted font sizes, weights, and spacing for better readability
• Description text is truncated at 100 characters when displayed on OG images

Implementation Details:

• page.tsx: Modified generateMetadata to conditionally append description parameter to OG image URL
• route.tsx: Updated loadGoogleFont function signature to accept configurable font weights, enhanced JSX layout with new gradient background and purple accent glow, adjusted all visual styling parameters

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The changes are well-contained visual updates to OG image generation with proper error handling, URL encoding, and backward compatibility. The implementation follows best practices: description parameter is optional and safely handled, URL encoding is applied correctly, font loading has proper error handling, and all visual changes are isolated to the OG image endpoint without affecting core functionality
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
apps/docs/app/[lang]/[[...slug]]/page.tsx	5/5	Added description parameter to OG image URL generation with proper conditional encoding
apps/docs/app/api/og/route.tsx	5/5	Updated OG image design with new font (Geist), improved gradient background, description support, and refined styling

Sequence Diagram

sequenceDiagram
    participant Browser
    participant Page as Documentation Page
    participant OG as OG Image API
    participant GoogleFonts as Google Fonts API

    Browser->>Page: Request documentation page
    Page->>Page: generateMetadata()
    Page->>Page: Extract title and description
    Page->>Page: Build OG image URL with params
    Page->>Browser: Return metadata with OG image URL

    Browser->>OG: GET /api/og with title, category, description
    OG->>GoogleFonts: Fetch Geist font CSS
    GoogleFonts->>OG: Return font CSS
    OG->>GoogleFonts: Fetch font file from extracted URL
    GoogleFonts->>OG: Return font data
    OG->>OG: Generate image with gradient, glow, text elements
    OG->>Browser: Return 1200x630 PNG image

Loading

[greptile-apps]

_{2 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}