feat: Centralize OG image font loading and sizing, simplify product page OG generation, and refine template styling.

tests/og-image.test.ts

@@ -1,52 +1,74 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, beforeAll } from 'vitest';
 
-const BASE_URL = process.env.TEST_URL || 'http://localhost:3000';
+const BASE_URL = process.env.TEST_URL || process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
 
 describe('OG Image Generation', () => {
   const locales = ['de', 'en'];
-  const productSlugs = ['nay2y']; // Based on data/products/de/nay2y.mdx
+  const productSlugs = ['nay2y'];
 
+  let isServerUp = false;
+
+  beforeAll(async () => {
+    try {
+      const response = await fetch(`${BASE_URL}/health`).catch(() => null);
+      if (response && response.ok) {
+        const text = await response.text();
+        if (text.includes('OK')) {
+          isServerUp = true;
+          return;
+        }
+      }
+      console.log(`\n⚠️  KLZ Application not detected at ${BASE_URL}. Skipping integration tests.\n`);
+    } catch (e) {
+      isServerUp = false;
+    }
+  });
   async function verifyImageResponse(response: Response) {
-    expect(response.status).toBe(200);
-    expect(response.headers.get('content-type')).toContain('image/png');
-    
+    expect(response.status, `Failed to fetch OG image: ${response.url}`).toBe(200);
+    const contentType = response.headers.get('content-type');
+    expect(contentType, `Incorrect content type: ${contentType}`).toContain('image/png');
+
     const buffer = await response.arrayBuffer();
     const bytes = new Uint8Array(buffer);
-    
+
     // Check for PNG signature: 89 50 4E 47 0D 0A 1A 0A
     expect(bytes[0]).toBe(0x89);
     expect(bytes[1]).toBe(0x50);
     expect(bytes[2]).toBe(0x4E);
     expect(bytes[3]).toBe(0x47);
-    
+
     // Check that the image is not empty and has a reasonable size
-    // A 1200x630 OG image should be at least 4KB
-    expect(bytes.length).toBeGreaterThan(4000);
+    expect(bytes.length, `Image size too small: ${bytes.length} bytes`).toBeGreaterThan(4000);
   }
 
   locales.forEach((locale) => {
-    it(`should generate main OG image for ${locale}`, async () => {
+    it(`should generate main OG image for ${locale}`, async ({ skip }) => {
+      if (!isServerUp) skip();
       const url = `${BASE_URL}/${locale}/opengraph-image`;
       const response = await fetch(url);
       await verifyImageResponse(response);
     }, 30000);
 
-    it(`should generate product OG image for ${locale} with slug ${productSlugs[0]}`, async () => {
+    it(`should generate product OG image for ${locale} with slug ${productSlugs[0]}`, async ({ skip }) => {
+      if (!isServerUp) skip();
       const url = `${BASE_URL}/${locale}/api/og/product?slug=${productSlugs[0]}`;
       const response = await fetch(url);
       await verifyImageResponse(response);
     }, 30000);
 
-    it(`should return 400 for product OG image without slug in ${locale}`, async () => {
+    it(`should return 400 for product OG image without slug in ${locale}`, async ({ skip }) => {
+      if (!isServerUp) skip();
       const url = `${BASE_URL}/${locale}/api/og/product`;
       const response = await fetch(url);
       expect(response.status).toBe(400);
     }, 30000);
   });
 
-  it('should generate blog OG image', async () => {
+  it('should generate blog OG image', async ({ skip }) => {
+    if (!isServerUp) skip();
     const url = `${BASE_URL}/de/blog/opengraph-image`;
     const response = await fetch(url);
     await verifyImageResponse(response);
   }, 30000);
 });
+