feat(og): redesign blog open graph images using thumbnails as background

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

@@ -1,7 +1,7 @@
 import { ImageResponse } from "next/og";
 import { allPosts } from "contentlayer/generated";
 import { blogThumbnails } from "../../../src/components/blog/blogThumbnails";
-import { OGImageTemplate } from "../../../src/components/OGImageTemplate";
+import { BlogOGImageTemplate } from "../../../src/components/BlogOGImageTemplate";
 import { getOgFonts, OG_IMAGE_SIZE } from "../../../src/lib/og-helper";
 import * as fs from "node:fs/promises";
 import * as path from "node:path";
@@ -18,20 +18,21 @@ export default async function Image({
   const { slug } = await params;
   const post = allPosts.find((p) => p.slug === slug);
 
-  // If we have a custom generated thumbnail, serve it directly as the OG image
+  let backgroundImageSrc: string | undefined = undefined;
+
+  // If we have a custom generated thumbnail, convert it to a data URI for Satori
   if (post?.thumbnail) {
     try {
       const filePath = path.join(process.cwd(), "public", post.thumbnail);
       const fileBuffer = await fs.readFile(filePath);
-      return new Response(fileBuffer, {
-        headers: {
-          "Content-Type": "image/png",
-          "Cache-Control": "public, max-age=31536000, immutable",
-        },
-      });
+
+      const ext = path.extname(post.thumbnail).substring(1).toLowerCase();
+      const mimeType = ext === "jpg" || ext === "jpeg" ? "image/jpeg" : "image/png";
+
+      backgroundImageSrc = `data:${mimeType};base64,${fileBuffer.toString("base64")}`;
     } catch (err) {
-      console.warn(`[OG Image Generator] Could not read thumbnail file for ${slug}:`, err);
-      // Fall through to dynamic generation
+      console.warn(`[OG Image Generator] Could not read thumbnail file for ${slug} to use as background:`, err);
+      // Fall through to standard plain background
     }
   }
 
@@ -48,12 +49,13 @@ export default async function Image({
   const fonts = await getOgFonts();
 
   return new ImageResponse(
-    <OGImageTemplate
+    <BlogOGImageTemplate
       title={title}
       description={description}
       label={label}
       accentColor={accentColor}
       keyword={keyword}
+      backgroundImageSrc={backgroundImageSrc}
     />,
     {
       ...OG_IMAGE_SIZE,