feat: Centralize OG image font loading and sizing, simplify product page OG generation, and refine template styling.

app/[locale]/api/og/product/route.tsx

@@ -3,6 +3,7 @@ import { getProductBySlug } from '@/lib/mdx';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
 import { NextRequest } from 'next/server';
+import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const runtime = 'nodejs';
 
@@ -10,7 +11,7 @@ export async function GET(
   request: NextRequest,
   { params }: { params: { locale: string } }
 ) {
-  const { searchParams } = new URL(request.url);
+  const { searchParams, origin } = new URL(request.url);
   const slug = searchParams.get('slug');
   const locale = params.locale || 'en';
 
@@ -18,6 +19,7 @@ export async function GET(
     return new Response('Missing slug', { status: 400 });
   }
 
+  const fonts = await getOgFonts();
   const t = await getTranslations({ locale, namespace: 'Products' });
 
   // Check if it's a category page
@@ -36,8 +38,8 @@ export async function GET(
         />
       ),
       {
-        width: 1200,
-        height: 630,
+        ...OG_IMAGE_SIZE,
+        fonts,
       }
     );
   }
@@ -45,16 +47,13 @@ export async function GET(
   const product = await getProductBySlug(slug, locale);
 
   if (!product) {
-    return new ImageResponse(
-      <div style={{ display: 'flex', width: '100%', height: '100%', backgroundColor: '#001a4d' }} />
-    );
+    return new Response('Product not found', { status: 404 });
   }
 
-  const { origin } = new URL(request.url);
   const featuredImage = product.frontmatter.images?.[0]
     ? (product.frontmatter.images[0].startsWith('http')
-        ? product.frontmatter.images[0]
-        : `${origin}${product.frontmatter.images[0]}`)
+      ? product.frontmatter.images[0]
+      : `${origin}${product.frontmatter.images[0]}`)
     : undefined;
 
   return new ImageResponse(
@@ -63,12 +62,13 @@ export async function GET(
         title={product.frontmatter.title}
         description={product.frontmatter.description}
         label={product.frontmatter.categories?.[0] || 'Product'}
-        image={featuredImage?.startsWith('http') ? featuredImage : undefined}
+        image={featuredImage}
       />
     ),
     {
-      width: 1200,
-      height: 630,
+      ...OG_IMAGE_SIZE,
+      fonts,
     }
   );
 }
+