debug: minimal OG test — single div, no nesting, isolate workers-og/WASM

Author: Miriad

apps/web/src/pages/api/og/default.png.ts

@@ -1,46 +1,41 @@
 /**
- * Default OG image generation for generic pages.
+ * Minimal OG image test — single div, no nesting.
+ * If this fails, the problem is workers-og/fonts/WASM, not templates.
  */
 import type { APIRoute } from "astro";
 import { ImageResponse } from "workers-og";
-import { generateDefaultOgHtml, loadFonts, OG_CACHE_HEADER } from "../../../lib/og-utils";
+import { loadFonts } from "../../../lib/og-utils";
 
 export const prerender = false;
 
 export const GET: APIRoute = async ({ url }) => {
   try {
-    const title = url.searchParams.get("title") || "CodingCat.dev";
-    const subtitle = url.searchParams.get("subtitle") || undefined;
-    const html = generateDefaultOgHtml({ title, subtitle });
+    const html = '<div style="display:flex;width:1200px;height:630px;background:#000;color:#fff;font-size:48px;align-items:center;justify-content:center">Hello World</div>';
 
-    // Use og() directly via ImageResponse + arrayBuffer() to catch stream errors
-    const ogResponse = new ImageResponse(html, {
+    const response = new ImageResponse(html, {
       width: 1200,
       height: 630,
       fonts: loadFonts(),
     });
 
-    const body = await ogResponse.arrayBuffer();
-
-    if (body.byteLength === 0) {
-      return new Response(
-        JSON.stringify({ error: "Empty body", htmlLength: html.length }),
-        { status: 500, headers: { "Content-Type": "application/json" } }
-      );
+    const buffer = await response.arrayBuffer();
+    if (buffer.byteLength === 0) {
+      return new Response(JSON.stringify({ error: "Empty buffer", htmlLength: html.length }), {
+        status: 500,
+        headers: { "Content-Type": "application/json" },
+      });
     }
 
-    return new Response(body, {
-      status: 200,
+    return new Response(buffer, {
       headers: {
         "Content-Type": "image/png",
-        "Content-Length": body.byteLength.toString(),
-        "Cache-Control": OG_CACHE_HEADER,
+        "Content-Length": buffer.byteLength.toString(),
       },
     });
-  } catch (error: any) {
-    return new Response(
-      JSON.stringify({ error: error.message, stack: error.stack }),
-      { status: 500, headers: { "Content-Type": "application/json" } }
-    );
+  } catch (e: any) {
+    return new Response(JSON.stringify({ error: e.message, stack: e.stack }), {
+      status: 500,
+      headers: { "Content-Type": "application/json" },
+    });
   }
 };