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

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,
 }: {