Fix ogimage generation crashing when site is using a custom WOFF2 font (#3119)

Author: SamyPesse

Diff for: .changeset/quick-countries-allow.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Fix ogimage generation crashing when site is using a custom WOFF2 font

Diff for: packages/gitbook/e2e/customers.spec.ts

@@ -239,6 +239,15 @@ const testCases: TestsCase[] = [
         contentBaseURL: 'https://docs.fluentbit.io',
         tests: [{ name: 'Home', url: '/', run: waitForCookiesDialog }],
     },
+    {
+        name: 'run-ai-docs.nvidia.com',
+        contentBaseURL: 'https://run-ai-docs.nvidia.com',
+        skip: process.env.ARGOS_BUILD_NAME !== 'customers-v2',
+        tests: [
+            { name: 'Home', url: '/' },
+            { name: 'OG Image', url: '/~gitbook/ogimage/h17zQIFwy3MaafVNmItO', mode: 'image' },
+        ],
+    },
 ];
 
 runTestCases(testCases);

Diff for: packages/gitbook/e2e/util.ts

@@ -34,6 +34,10 @@ export interface Test {
      * Test to run
      */
     run?: (page: Page, response: Response | null) => Promise<unknown>;
+    /**
+     * Mode for the test.
+     */
+    mode?: 'page' | 'image';
     /**
      * Whether the test should be fullscreened during testing.
      */
@@ -154,6 +158,7 @@ export function runTestCases(testCases: TestsCase[]) {
 
         test.describe(testCase.name, () => {
             for (const testEntry of testCase.tests) {
+                const { mode = 'page' } = testEntry;
                 const testFn = testEntry.only ? test.only : test;
                 testFn(testEntry.name, async ({ page, context }) => {
                     const testEntryPathname =
@@ -194,24 +199,33 @@ export function runTestCases(testCases: TestsCase[]) {
                     }
                     const screenshotOptions = testEntry.screenshot;
                     if (screenshotOptions !== false) {
-                        await argosScreenshot(page, `${testCase.name} - ${testEntry.name}`, {
-                            viewports: ['macbook-16', 'macbook-13', 'ipad-2', 'iphone-x'],
-                            argosCSS: `
+                        const screenshotName = `${testCase.name} - ${testEntry.name}`;
+                        if (mode === 'image') {
+                            await argosScreenshot(page, screenshotName, {
+                                viewports: ['macbook-13'],
+                                threshold: screenshotOptions?.threshold ?? undefined,
+                                fullPage: true,
+                            });
+                        } else {
+                            await argosScreenshot(page, screenshotName, {
+                                viewports: ['macbook-16', 'macbook-13', 'ipad-2', 'iphone-x'],
+                                argosCSS: `
                             /* Hide Intercom */
                             .intercom-lightweight-app {
                                 display: none !important;
                             }
                             `,
-                            threshold: screenshotOptions?.threshold ?? undefined,
-                            fullPage: testEntry.fullPage ?? false,
-                            beforeScreenshot: async ({ runStabilization }) => {
-                                await runStabilization();
-                                await waitForIcons(page);
-                                if (screenshotOptions?.waitForTOCScrolling !== false) {
-                                    await waitForTOCScrolling(page);
-                                }
-                            },
-                        });
+                                threshold: screenshotOptions?.threshold ?? undefined,
+                                fullPage: testEntry.fullPage ?? false,
+                                beforeScreenshot: async ({ runStabilization }) => {
+                                    await runStabilization();
+                                    await waitForIcons(page);
+                                    if (screenshotOptions?.waitForTOCScrolling !== false) {
+                                        await waitForTOCScrolling(page);
+                                    }
+                                },
+                            });
+                        }
                     }
                 });
             }

Diff for: packages/gitbook/src/lib/assets.ts

@@ -1,8 +1,8 @@
-import { GITBOOK_ASSETS_URL } from '@v2/lib/env';
+import { GITBOOK_ASSETS_URL, GITBOOK_URL } from '@v2/lib/env';
 
 /**
  * Create a public URL for an asset.
  */
 export function getAssetURL(path: string): string {
-    return `${GITBOOK_ASSETS_URL || ''}/~gitbook/static/${path}`;
+    return `${GITBOOK_ASSETS_URL || GITBOOK_URL}/~gitbook/static/${path}`;
 }

Diff for: packages/gitbook/src/routes/ogimage.tsx

@@ -89,12 +89,15 @@ export async function serveOGImage(baseContext: GitBookSiteContext, params: Page
             await Promise.all(
                 primaryFontWeights.map((face) => {
                     const { weight, sources } = face;
-                    if (sources.length === 0) {
+                    const source = sources[0];
+
+                    // Satori doesn't support WOFF2, so we skip it
+                    // https://github.com/vercel/satori?tab=readme-ov-file#fonts
+                    if (!source || source.format === 'woff2' || source.url.endsWith('.woff2')) {
                         return null;
                     }
-                    const url = sources[0].url;
 
-                    return loadCustomFont({ url, weight });
+                    return loadCustomFont({ url: source.url, weight });
                 })
             )
         ).filter(filterOutNullable);