refactor

Author: valentin0h

.github/composite/deploy-cloudflare/action.yaml

@@ -69,4 +69,4 @@ runs:
           env:
             DEPLOYMENT_URL: ${{ steps.deploy.outputs.deployment-url }}
           run: |
-              echo "URL: ${{ steps.deploy.outputs.deployment-url }}"
+              echo "URL: ${{ steps.deploy.outputs.deployment-url }}"

packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx

@@ -55,9 +55,16 @@ export async function CustomizationRootLayout(props: {
     // Preconnect and preload custom fonts if needed
     if (fontData.type === 'custom') {
         ReactDOM.preconnect(GITBOOK_FONTS_URL);
-        fontData.preloadSources.forEach(({ url }) => {
-            ReactDOM.preload(url, { as: 'font', crossOrigin: 'anonymous', fetchPriority: 'high' });
-        });
+        fontData.preloadSources
+            .flatMap((face) => face.sources)
+            .forEach(({ url, format }) => {
+                ReactDOM.preload(url, {
+                    as: 'font',
+                    crossOrigin: 'anonymous',
+                    fetchPriority: 'high',
+                    type: format ? `font/${format}` : undefined,
+                });
+            });
     }
 
     return (

packages/gitbook/src/fonts/custom.test.ts

@@ -259,10 +259,10 @@ describe('generateFontFacesCSS', () => {
     });
 });
 
-describe('getCustomFontPreloadLinks', () => {
+describe('getFontSourcesToPreload', () => {
     const preloadTestCases = [
         { name: 'basic case', font: TEST_FONTS.basic, expectedCount: 2 },
-        { name: 'multiple weights', font: TEST_FONTS.multiWeight, expectedCount: 5 },
+        { name: 'multiple weights', font: TEST_FONTS.multiWeight, expectedCount: 2 },
         { name: 'multiple sources', font: TEST_FONTS.multiSource, expectedCount: 2 },
         { name: 'missing format', font: TEST_FONTS.missingFormat, expectedCount: 2 },
         { name: 'empty font faces', font: TEST_FONTS.empty, expectedCount: 0 },
@@ -272,20 +272,9 @@ describe('getCustomFontPreloadLinks', () => {
 
     preloadTestCases.forEach(({ name, font, expectedCount }) => {
         test(`extracts ${expectedCount} URLs from ${name}`, () => {
-            const result = getFontSourcesToPreload(font);
+            const result = getFontSourcesToPreload(font).flatMap((face) => face.sources);
             expect(result).toBeArray();
             expect(result.length).toBe(expectedCount);
         });
     });
-
-    test('handles different URL types correctly', () => {
-        const result = getFontSourcesToPreload(TEST_FONTS.variousURLs);
-
-        expect(result).toBeArray();
-        expect(result.length).toBe(2);
-        expect(result).toMatchObject([
-            { url: 'https://example.com/fonts.woff2' },
-            { url: 'https://example.com/fonts.woff' },
-        ]);
-    });
 });

packages/gitbook/src/fonts/custom.ts

@@ -1,7 +1,7 @@
-import type { CustomizationFontDefinition, FontSource } from '@gitbook/api';
+import type { CustomizationFontDefinition } from '@gitbook/api';
 
 /**
- * Define the custom font faces and set the --font-content to the custom font name
+ * Define the custom font faces and set the --font-custom to the custom font name
  */
 export function generateFontFacesCSS(customFont: CustomizationFontDefinition): string {
     const { fontFaces } = customFont;
@@ -21,7 +21,7 @@ export function generateFontFacesCSS(customFont: CustomizationFontDefinition): s
                 })
                 .join(', ');
 
-            // We could use the font-family name here, but to avoid extra normalization we're using CustomFont
+            // We could use the font-family name here, but to avoid extra normalization we're using 'CustomFont'
             return `
         @font-face {
             font-family: CustomFont; 
@@ -48,18 +48,9 @@ export function generateFontFacesCSS(customFont: CustomizationFontDefinition): s
  * Currently we're preloading all sources but we could optimize this in the future by only preloading the important ones
  * to avoid blocking the page load.
  */
-export function getFontSourcesToPreload(customFont: CustomizationFontDefinition): FontSource[] {
-    const allSources = customFont.fontFaces.flatMap((face) => face.sources);
-
-    const uniqueSources = new Map<string, FontSource>();
-
-    // Add each source to the map, using URL as the key
-    allSources.forEach((source) => {
-        const url = source.url.toString();
-        if (!uniqueSources.has(url)) {
-            uniqueSources.set(url, source);
-        }
-    });
-
-    return Array.from(uniqueSources.values());
+export function getFontSourcesToPreload(customFont: CustomizationFontDefinition) {
+    return customFont.fontFaces.filter(
+        (face): face is typeof face & { weight: 400 | 700 } =>
+            face.weight === 400 || face.weight === 700
+    );
 }

packages/gitbook/src/fonts/index.ts

@@ -1,4 +1,4 @@
-import type { CustomizationFont, FontSource } from '@gitbook/api';
+import type { CustomizationFont, CustomizationFontDefinition } from '@gitbook/api';
 import { generateFontFacesCSS, getFontSourcesToPreload } from './custom';
 import { fonts } from './default';
 
@@ -21,7 +21,7 @@ interface DefaultFontData {
 interface CustomFontData {
     type: 'custom';
     fontFaceRules: string;
-    preloadSources: FontSource[];
+    preloadSources: CustomizationFontDefinition['fontFaces'];
 }
 
 /**

packages/gitbook/src/routes/ogimage.tsx

@@ -4,6 +4,7 @@ import { redirect } from 'next/navigation';
 import { ImageResponse } from 'next/og';
 
 import { type PageParams, fetchPageData } from '@/components/SitePage';
+import { getFontSourcesToPreload } from '@/fonts/custom';
 import { getAssetURL } from '@/lib/assets';
 import { filterOutNullable } from '@/lib/typescript';
 import type { GitBookSiteContext } from '@v2/lib/context';
@@ -79,27 +80,19 @@ export async function serveOGImage(baseContext: GitBookSiteContext, params: Page
         }
 
         // custom fonts
-        const primaryFontSources = customization.styling.font.fontFaces
-            .filter((face): face is typeof face & { weight: 400 | 700 } => {
-                return face.weight === 400 || face.weight === 700;
-            })
-            .map((face) => {
-                if (face.sources.length === 0) {
-                    return null;
-                }
-
-                return {
-                    weight: face.weight,
-                    // just load the first source, fromat is not that important here
-                    url: face.sources[0].url,
-                } as const;
-            })
-            .filter(filterOutNullable);
+        // We only load the primary font weights for now
+        const primaryFontWeights = getFontSourcesToPreload(customization.styling.font);
 
         const fonts = (
             await Promise.all(
-                primaryFontSources.map((source) => {
-                    return loadCustomFont({ url: source.url, weight: source.weight });
+                primaryFontWeights.map((face) => {
+                    const { weight, sources } = face;
+                    if (sources.length === 0) {
+                        return null;
+                    }
+                    const url = sources[0].url;
+
+                    return loadCustomFont({ url, weight });
                 })
             )
         ).filter(filterOutNullable);