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,

apps/web/app/blog/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { blogPosts } from "../../../src/data/blogPosts";
 import { BlogPostHeader } from "../../../src/components/blog/BlogPostHeader";
@@ -15,6 +16,41 @@ export async function generateStaticParams() {
   }));
 }
 
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const post = blogPosts.find((p) => p.slug === slug);
+
+  if (!post) return {};
+
+  return {
+    title: post.title,
+    description: post.description,
+    openGraph: {
+      title: post.title,
+      description: post.description,
+      type: "article",
+      images: [
+        {
+          url: `/api/og/${slug}`,
+          width: 1200,
+          height: 630,
+          alt: post.title,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: post.title,
+      description: post.description,
+      images: [`/api/og/${slug}`],
+    },
+  };
+}
+
 export default async function BlogPostPage({
   params,
 }: {