feat(blog): implement dynamic SVG thumbnails and specialized OG images for blog posts

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

@@ -1,5 +1,6 @@
 import { ImageResponse } from "next/og";
 import { blogPosts } from "../../../../src/data/blogPosts";
+import { blogThumbnails } from "../../../../src/data/blogThumbnails";
 import { OGImageTemplate } from "../../../../src/components/OGImageTemplate";
 import { getOgFonts, OG_IMAGE_SIZE } from "../../../../src/lib/og-helper";
 
@@ -15,6 +16,8 @@ export async function GET(
   let title: string;
   let description: string;
   let label: string | undefined;
+  let accentColor: string | undefined;
+  let keyword: string | undefined;
 
   if (slug === "home") {
     title = "Marc Mintel";
@@ -23,17 +26,26 @@ export async function GET(
     label = "Engineering";
   } else {
     const post = blogPosts.find((p) => p.slug === slug);
+    const thumbnail = blogThumbnails[slug];
     title = post?.title || "Marc Mintel";
     description =
       post?.description ||
       "Technical problem solver's blog - practical insights and learning notes";
     label = post ? "Blog Post" : "Engineering";
+    accentColor = thumbnail?.accent;
+    keyword = thumbnail?.keyword;
   }
 
   const fonts = await getOgFonts();
 
   return new ImageResponse(
-    <OGImageTemplate title={title} description={description} label={label} />,
+    <OGImageTemplate
+      title={title}
+      description={description}
+      label={label}
+      accentColor={accentColor}
+      keyword={keyword}
+    />,
     {
       ...OG_IMAGE_SIZE,
       fonts: fonts as any,