fix(web): correct relative imports in opengraph-image routes

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

@@ -0,0 +1,70 @@
+import { ImageResponse } from "next/og";
+import { getAllPosts } from "../../../../src/lib/posts";
+import { blogThumbnails } from "../../../../src/components/blog/blogThumbnails";
+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";
+
+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 allPosts = await getAllPosts();
+  const post = allPosts.find((p) => p.slug === slug);
+
+  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);
+
+      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} to use as background:`,
+        err,
+      );
+      // Fall through to standard plain background
+    }
+  }
+
+  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(
+    <BlogOGImageTemplate
+      title={title}
+      description={description}
+      label={label}
+      accentColor={accentColor}
+      keyword={keyword}
+      backgroundImageSrc={backgroundImageSrc}
+    />,
+    {
+      ...OG_IMAGE_SIZE,
+      fonts: fonts as any,
+    },
+  );
+}