feat(og): adapt premium industrial style for OG images

apps/web/app/api/og/[[...slug]]/route.tsx

@@ -1,89 +1,42 @@
-import { ImageResponse } from 'next/og';
-import { blogPosts } from '../../../../src/data/blogPosts';
+import { ImageResponse } from "next/og";
+import { blogPosts } from "../../../../src/data/blogPosts";
+import { OGImageTemplate } from "../../../../src/components/OGImageTemplate";
+import { getOgFonts, OG_IMAGE_SIZE } from "../../../../src/lib/og-helper";
 
-export const runtime = 'edge';
+export const runtime = "nodejs";
 
 export async function GET(
   request: Request,
-  { params }: { params: Promise<{ slug?: string[] }> }
+  { params }: { params: Promise<{ slug?: string[] }> },
 ) {
   const { slug: slugArray } = await params;
-  const slug = slugArray?.[0] || 'home';
+  const slug = slugArray?.[0] || "home";
 
   let title: string;
   let description: string;
+  let label: string | undefined;
 
-  if (slug === 'home') {
-    title = 'Marc Mintel';
-    description = 'Technical problem solver\'s blog - practical insights and learning notes';
+  if (slug === "home") {
+    title = "Marc Mintel";
+    description =
+      "Technical problem solver's blog - practical insights and learning notes";
+    label = "Engineering";
   } else {
-    const post = blogPosts.find(p => p.slug === slug);
-    title = post?.title || 'Marc Mintel';
-    description = (post?.description || 'Technical problem solver\'s blog - practical insights and learning notes').slice(0, 100);
+    const post = blogPosts.find((p) => p.slug === slug);
+    title = post?.title || "Marc Mintel";
+    description =
+      post?.description ||
+      "Technical problem solver's blog - practical insights and learning notes";
+    label = post ? "Blog Post" : "Engineering";
   }
 
+  const fonts = await getOgFonts();
+
   return new ImageResponse(
-    (
-      <div
-        style={{
-          height: '100%',
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'flex-start',
-          justifyContent: 'center',
-          backgroundColor: '#fff',
-          padding: '60px',
-        }}
-      >
-        <div
-          style={{
-            position: 'absolute',
-            top: '60px',
-            right: '60px',
-            width: '120px',
-            height: '4px',
-            backgroundColor: '#3b82f6',
-            borderRadius: '2px',
-          }}
-        />
-        <div
-          style={{
-            fontSize: '48px',
-            fontWeight: 700,
-            color: '#1e293b',
-            marginBottom: '20px',
-            fontFamily: 'sans-serif',
-          }}
-        >
-          {title}
-        </div>
-        <div
-          style={{
-            fontSize: '24px',
-            fontWeight: 400,
-            color: '#64748b',
-            marginBottom: 'auto',
-            fontFamily: 'sans-serif',
-          }}
-        >
-          {description}
-        </div>
-        <div
-          style={{
-            fontSize: '18px',
-            fontWeight: 500,
-            color: '#94a3b8',
-            fontFamily: 'sans-serif',
-          }}
-        >
-          mintel.me
-        </div>
-      </div>
-    ),
+    <OGImageTemplate title={title} description={description} label={label} />,
     {
-      width: 1200,
-      height: 630,
-    }
+      ...OG_IMAGE_SIZE,
+      fonts: fonts as any,
+    },
   );
 }