feat(og): migrate to co-located opengraph-image.tsx convention

apps/web/app/blog/[slug]/opengraph-image.tsx

@@ -0,0 +1,43 @@
+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";
+
+export const size = OG_IMAGE_SIZE;
+export const contentType = "image/png";
+export const runtime = "nodejs";
+
+export default async function Image({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const post = blogPosts.find((p) => p.slug === slug);
+  const thumbnail = blogThumbnails[slug];
+
+  const title = post?.title || "Marc Mintel";
+  const description =
+    post?.description ||
+    "Technical problem solver's blog - practical insights and learning notes";
+  const label = post ? "Blog Post" : "Engineering";
+  const accentColor = thumbnail?.accent;
+  const keyword = thumbnail?.keyword;
+
+  const fonts = await getOgFonts();
+
+  return new ImageResponse(
+    <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

@@ -33,20 +33,11 @@ export async function generateMetadata({
       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}`],
     },
   };
 }