feat(ui): enhance component share UX and add new interactive simulations

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

@@ -3,6 +3,8 @@ import { allPosts } from "contentlayer/generated";
 import { blogThumbnails } from "../../../src/components/blog/blogThumbnails";
 import { OGImageTemplate } from "../../../src/components/OGImageTemplate";
 import { getOgFonts, OG_IMAGE_SIZE } from "../../../src/lib/og-helper";
+import * as fs from "node:fs/promises";
+import * as path from "node:path";
 
 export const size = OG_IMAGE_SIZE;
 export const contentType = "image/png";
@@ -15,6 +17,24 @@ 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
+  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",
+        },
+      });
+    } catch (err) {
+      console.warn(`[OG Image Generator] Could not read thumbnail file for ${slug}:`, err);
+      // Fall through to dynamic generation
+    }
+  }
+
   const thumbnail = blogThumbnails[slug];
 
   const title = post?.title || "Marc Mintel";