debug: systematic isolation — 5 levels of HTML complexity via ?level=1-5

Author: Miriad

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

@@ -1,6 +1,6 @@
 /**
- * Default OG image — debug: dump HTML to inspect what Satori receives.
- * Also test rendering with the minimal approach for comparison.
+ * Default OG image — systematic isolation test.
+ * Tests increasingly complex HTML to find the breaking point.
  */
 import type { APIRoute } from "astro";
 import { ImageResponse } from "workers-og";
@@ -9,20 +9,30 @@ import { generateDefaultOgHtml, loadFonts } from "../../../lib/og-utils";
 export const prerender = false;
 
 export const GET: APIRoute = async ({ url }) => {
-  const mode = url.searchParams.get("mode") || "render";
-  const title = url.searchParams.get("title") || "CodingCat.dev";
-  const subtitle = url.searchParams.get("subtitle") || undefined;
+  const level = url.searchParams.get("level") || "full";
 
-  const html = generateDefaultOgHtml({ title, subtitle });
+  // Level 1: Single div (known working)
+  const html1 = '<div style="display:flex;width:1200px;height:630px;background:#000;color:#fff;font-size:48px;align-items:center;justify-content:center">Hello World</div>';
 
-  // Mode: dump — return raw HTML for inspection
-  if (mode === "dump") {
-    return new Response(html, {
-      headers: { "Content-Type": "text/plain" },
-    });
+  // Level 2: Two nested divs
+  const html2 = '<div style="display:flex;width:1200px;height:630px;background:#000"><div style="display:flex;color:#fff;font-size:48px;align-items:center;justify-content:center;width:100%;height:100%">Hello World</div></div>';
+
+  // Level 3: Column layout with 3 children
+  const html3 = '<div style="display:flex;width:1200px;height:630px;background:#000;padding:60px"><div style="display:flex;flex-direction:column;width:100%;height:100%;justify-content:space-between"><div style="display:flex;color:#fff;font-size:24px">Top</div><div style="display:flex;color:#fff;font-size:48px">Middle</div><div style="display:flex;color:#fff;font-size:16px">Bottom</div></div></div>';
+
+  // Level 4: Logo with emoji + spans
+  const html4 = '<div style="display:flex;width:1200px;height:630px;background:#000;padding:60px"><div style="display:flex;flex-direction:column;width:100%;height:100%;justify-content:space-between"><div style="display:flex;align-items:center;gap:12px"><div style="font-size:40px">🐱</div><div style="display:flex;font-size:24px;font-weight:700;color:#fff"><span>CodingCat</span><span style="color:#7c3aed">.dev</span></div></div><div style="display:flex;color:#fff;font-size:48px">Title</div><div style="display:flex;color:#888;font-size:16px">codingcat.dev</div></div></div>';
+
+  // Level 5: Full template
+  const html5 = generateDefaultOgHtml({ title: "Test Title" });
+
+  const htmlMap: Record<string, string> = { "1": html1, "2": html2, "3": html3, "4": html4, "5": html5, full: html5 };
+  const html = htmlMap[level] || html5;
+
+  if (url.searchParams.get("mode") === "dump") {
+    return new Response(html, { headers: { "Content-Type": "text/plain" } });
   }
 
-  // Mode: render — try to generate the image
   try {
     const response = new ImageResponse(html, {
       width: 1200,
@@ -32,22 +42,17 @@ export const GET: APIRoute = async ({ url }) => {
 
     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(JSON.stringify({ error: "Empty buffer", level }), {
+        status: 500, headers: { "Content-Type": "application/json" },
+      });
     }
 
     return new Response(buffer, {
-      headers: {
-        "Content-Type": "image/png",
-        "Content-Length": buffer.byteLength.toString(),
-      },
+      headers: { "Content-Type": "image/png", "Content-Length": buffer.byteLength.toString() },
     });
   } catch (e: any) {
-    return new Response(
-      JSON.stringify({ error: e.message, stack: e.stack }),
-      { status: 500, headers: { "Content-Type": "application/json" } }
-    );
+    return new Response(JSON.stringify({ error: e.message, level }), {
+      status: 500, headers: { "Content-Type": "application/json" },
+    });
   }
 };