import { ImageResponse } from 'next/og' import type { NextRequest } from 'next/server' export const runtime = 'edge' const TITLE_FONT_SIZE = { large: 64, medium: 56, small: 48, } as const function getTitleFontSize(title: string): number { if (title.length > 45) return TITLE_FONT_SIZE.small if (title.length > 30) return TITLE_FONT_SIZE.medium return TITLE_FONT_SIZE.large } /** * Loads a Google Font dynamically by fetching the CSS and extracting the font URL. */ async function loadGoogleFont(font: string, weights: string, text: string): Promise { const url = `https://fonts.googleapis.com/css2?family=${font}:wght@${weights}&text=${encodeURIComponent(text)}` const css = await (await fetch(url)).text() const resource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/) if (resource) { const response = await fetch(resource[1]) if (response.status === 200) { return await response.arrayBuffer() } } throw new Error('Failed to load font data') } /** * Sim logo with icon and "Sim" text for OG image. */ function SimLogoFull() { return ( {/* Green icon - top left shape with cutout */} {/* Green icon - bottom right square */} {/* "Sim" text - white for dark background */} ) } /** * Generates dynamic Open Graph images for documentation pages. * Style matches Cursor docs: dark background, title at top, logo bottom-left, domain bottom-right. */ export async function GET(request: NextRequest) { const { searchParams } = new URL(request.url) const title = searchParams.get('title') || 'Documentation' const allText = `${title}docs.sim.ai` const fontData = await loadGoogleFont('Geist', '400;500;600', allText) return new ImageResponse(
{/* Title at top */} {title} {/* Footer: icon left, domain right */}
docs.sim.ai
, { width: 1200, height: 630, fonts: [ { name: 'Geist', data: fontData, style: 'normal', }, ], } ) }