fix: remove HTML comments from OG templates — Satori treats them as child nodes

Root cause: Satori requires every parent element with multiple children
to have explicit "display: flex". HTML comments (<!-- ... -->) are parsed
as child nodes by workers-og's parseHtml (uses HTMLRewriter), causing
"Expected <div> to have explicit display: flex" errors that were
swallowed inside ImageResponse's ReadableStream (returning 200 + 0 bytes).

Fix: Remove all 6 HTML comments from og-utils.ts templates.
Also clean up debug code from blog.png.ts and default.png.ts,
keeping try/catch for error visibility.

Build: 18.04s ✅

Co-authored-by: seniordeveloper <seniordeveloper@miriad.systems>

Author: Miriad

apps/web/src/lib/og-utils.ts

@@ -150,7 +150,6 @@ export function generateOgHtml({
         height: 100%;
         justify-content: space-between;
       ">
-        <!-- Top: Logo + Badge -->
         <div style="display: flex; align-items: center; justify-content: space-between;">
           <div style="display: flex; align-items: center; gap: 12px;">
             <div style="font-size: 40px;">🐱</div>
@@ -163,7 +162,6 @@ export function generateOgHtml({
           ${badgeBlock}
         </div>
 
-        <!-- Middle: Title -->
         <div style="
           display: flex;
           flex: 1;
@@ -180,7 +178,6 @@ export function generateOgHtml({
           ">${title}</div>
         </div>
 
-        <!-- Bottom: Author + URL -->
         <div style="display: flex; align-items: center; justify-content: space-between;">
           <div style="display: flex; align-items: center; gap: 12px;">
             <div style="
@@ -251,7 +248,6 @@ export function generateDefaultOgHtml({
         height: 100%;
         justify-content: space-between;
       ">
-        <!-- Top: Logo -->
         <div style="display: flex; align-items: center; gap: 12px;">
           <div style="font-size: 40px;">🐱</div>
           <div style="
@@ -261,7 +257,6 @@ export function generateDefaultOgHtml({
           ">CodingCat<span style="color: ${BRAND.primary};">.dev</span></div>
         </div>
 
-        <!-- Middle: Title + Subtitle -->
         <div style="
           display: flex;
           flex-direction: column;
@@ -280,7 +275,6 @@ export function generateDefaultOgHtml({
           ${subtitleBlock}
         </div>
 
-        <!-- Bottom: URL -->
         <div style="display: flex; align-items: center; justify-content: flex-end;">
           <div style="
             font-size: 16px;

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

@@ -24,28 +24,20 @@ export const GET: APIRoute = async ({ url }) => {
     const type = url.searchParams.get("type") || "Blog";
 
     const html = generateOgHtml({ title, author, type });
-    const fonts = loadFonts();
 
     const response = new ImageResponse(html, {
       width: 1200,
       height: 630,
-      fonts,
+      fonts: loadFonts(),
     });
 
     response.headers.set("Cache-Control", OG_CACHE_HEADER);
 
     return response;
   } catch (error: any) {
     return new Response(
-      JSON.stringify({
-        error: error.message,
-        stack: error.stack,
-        name: error.name,
-      }),
-      {
-        status: 500,
-        headers: { "Content-Type": "application/json" },
-      }
+      JSON.stringify({ error: error.message, stack: error.stack }),
+      { status: 500, headers: { "Content-Type": "application/json" } }
     );
   }
 };

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

@@ -1,8 +1,15 @@
 /**
  * Default OG image generation for generic pages.
- * 
- * Debug version: bypasses ImageResponse's ReadableStream to surface errors.
- * Uses workers-og's ImageResponse but reads the body to catch stream errors.
+ *
+ * Uses workers-og (Satori + resvg-wasm) to generate 1200x630 PNG images
+ * on Cloudflare Workers. Simpler layout — just branding + title + optional subtitle.
+ * Used for homepage, author pages, and other generic pages.
+ *
+ * Usage: /api/og/default.png?title=About+Us&subtitle=Learn+more+about+CodingCat.dev
+ *
+ * Query params:
+ * - title (required): Page title
+ * - subtitle (optional): Subtitle text
  */
 import type { APIRoute } from "astro";
 import { ImageResponse } from "workers-og";
@@ -16,65 +23,20 @@ export const GET: APIRoute = async ({ url }) => {
     const subtitle = url.searchParams.get("subtitle") || undefined;
 
     const html = generateDefaultOgHtml({ title, subtitle });
-    const fonts = loadFonts();
 
-    // Debug: log font data types to understand what rawFonts plugin produces
-    const fontDebug = fonts.map((f: any) => ({
-      name: f.name,
-      weight: f.weight,
-      dataType: typeof f.data,
-      isArrayBuffer: f.data instanceof ArrayBuffer,
-      isUint8Array: f.data instanceof Uint8Array,
-      dataLength: f.data?.byteLength || f.data?.length || 0,
-      constructor: f.data?.constructor?.name,
-    }));
-
-    // Create ImageResponse — this returns immediately with a ReadableStream body
-    const ogResponse = new ImageResponse(html, {
+    const response = new ImageResponse(html, {
       width: 1200,
       height: 630,
-      fonts,
+      fonts: loadFonts(),
     });
 
-    // Read the body to force the stream to execute (and catch errors)
-    const body = await ogResponse.arrayBuffer();
-
-    if (body.byteLength === 0) {
-      // Stream produced no data — WASM or font error was swallowed
-      return new Response(
-        JSON.stringify({
-          error: "ImageResponse produced empty body",
-          fontDebug,
-          htmlLength: html.length,
-          hint: "WASM init or font loading likely failed silently inside ReadableStream",
-        }),
-        {
-          status: 500,
-          headers: { "Content-Type": "application/json" },
-        }
-      );
-    }
+    response.headers.set("Cache-Control", OG_CACHE_HEADER);
 
-    // Success — return the PNG with proper headers
-    return new Response(body, {
-      status: 200,
-      headers: {
-        "Content-Type": "image/png",
-        "Content-Length": body.byteLength.toString(),
-        "Cache-Control": OG_CACHE_HEADER,
-      },
-    });
+    return response;
   } catch (error: any) {
     return new Response(
-      JSON.stringify({
-        error: error.message,
-        stack: error.stack,
-        name: error.name,
-      }),
-      {
-        status: 500,
-        headers: { "Content-Type": "application/json" },
-      }
+      JSON.stringify({ error: error.message, stack: error.stack }),
+      { status: 500, headers: { "Content-Type": "application/json" } }
     );
   }
 };