fix(og): robust infrastructure fix for OG image check

- Added exhaustive PathRegexp whitelists in docker-compose.yml to bypass Gatekeeper.
- Fixed TRAEFIK_HOST_RULE interpolation in deploy.yml.
- Enhanced scripts/check-og-images.ts with header and body diagnostics.
- Added server-side font loading logs in lib/og-helper.tsx.

.gitea/workflows/deploy.yml

@@ -323,8 +323,8 @@ jobs:
           TARGET=$TARGET
           SENTRY_ENVIRONMENT=$TARGET
           PROJECT_NAME=$PROJECT_NAME
-          TRAEFIK_HOST_RULE=$TRAEFIK_RULE
-          TRAEFIK_HOST=$TRAEFIK_HOST
+          TRAEFIK_HOST_RULE="${TRAEFIK_RULE}"
+          TRAEFIK_HOST="${TRAEFIK_HOST}"
           ENV_FILE=$ENV_FILE
           COMPOSE_PROFILES=$COMPOSE_PROFILES
           AUTH_MIDDLEWARE=$AUTH_MIDDLEWARE

docker-compose.yml

@@ -22,7 +22,7 @@ services:
       - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.middlewares=${AUTH_MIDDLEWARE:-${PROJECT_NAME:-klz-cables}-ratelimit,${PROJECT_NAME:-klz-cables}-forward,${PROJECT_NAME:-klz-cables}-compress}"
 
       # Public Router (Whitelist for OG Images, Sitemaps, Health)
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.rule=(${TRAEFIK_HOST_RULE:-Host(`klz-cables.com`)}) && (PathPrefix(`/health`, `/sitemap.xml`, `/robots.txt`, `/manifest.webmanifest`, `/api/og`) || PathRegexp(`^/.*opengraph-image$`))"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.rule=PathPrefix(`/health`, `/sitemap.xml`, `/robots.txt`, `/manifest.webmanifest`) || PathRegexp(`.*api/og/.*`) || PathRegexp(`.*opengraph-image$`) || PathRegexp(`.*opengraph-image\\?.*`)"
       - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.entrypoints=websecure"
       - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.tls.certresolver=le"
       - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.tls=true"

lib/og-helper.tsx

@@ -10,8 +10,12 @@ export async function getOgFonts() {
   const regularFontPath = join(process.cwd(), 'public/fonts/Inter-Regular.woff2');
 
   try {
+    console.log(`[OG] Loading fonts: bold=${boldFontPath}, regular=${regularFontPath}`);
     const boldFont = readFileSync(boldFontPath);
     const regularFont = readFileSync(regularFontPath);
+    console.log(
+      `[OG] Fonts loaded successfully (${boldFont.length} and ${regularFont.length} bytes)`,
+    );
 
     return [
       {
@@ -28,7 +32,7 @@ export async function getOgFonts() {
       },
     ];
   } catch (error) {
-    console.error('Failed to load OG fonts from filesystem, falling back to system fonts:', error);
+    console.error(`[OG] Failed to load fonts from ${process.cwd()}:`, error);
     return [];
   }
 }

scripts/check-og-images.ts

@@ -29,8 +29,9 @@ async function verifyImage(path: string): Promise<boolean> {
     const contentType = response.headers.get('content-type');
     if (!contentType?.includes('image/png')) {
       const body = await response.text();
+      console.log(`  Headers: ${JSON.stringify(Object.fromEntries(response.headers))}`);
       throw new Error(
-        `Content-Type: ${contentType}. Body: ${body.substring(0, 200).replace(/\n/g, ' ')}...`,
+        `Content-Type: ${contentType}. Body preview: ${body.substring(0, 500).replace(/\n/g, ' ')}...`,
       );
     }