Fix rendering of font in ogimage

.changeset/poor-dodos-lick.md

@@ -0,0 +1,5 @@
+---
+"@gitbook/fonts": minor
+---
+
+Initial version of the package

.changeset/warm-roses-sleep.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Fix ogimage using incorrect Google Font depending on language.

package.json

@@ -7,10 +7,9 @@
         "turbo": "^2.5.0",
         "vercel": "^39.3.0"
     },
-    "packageManager": "bun@1.2.11",
+    "packageManager": "bun@1.2.15",
     "overrides": {
         "@codemirror/state": "6.4.1",
-        "@gitbook/api": "^0.120.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
     },
@@ -34,7 +33,12 @@
         "download:env": "op read op://gitbook-x-dev/gitbook-open/.env.local >> .env.local",
         "clean": "turbo run clean"
     },
-    "workspaces": ["packages/*"],
+    "workspaces": {
+        "packages": ["packages/*"],
+        "catalog": {
+            "@gitbook/api": "^0.120.0"
+        }
+    },
     "patchedDependencies": {
         "decode-named-character-reference@1.0.2": "patches/decode-named-character-reference@1.0.2.patch",
         "@vercel/next@4.4.2": "patches/@vercel%2Fnext@4.4.2.patch"

packages/cache-tags/package.json

@@ -10,7 +10,7 @@
     },
     "version": "0.3.1",
     "dependencies": {
-        "@gitbook/api": "^0.120.0",
+        "@gitbook/api": "catalog:",
         "assert-never": "^1.2.1"
     },
     "devDependencies": {

packages/fonts/.gitignore

@@ -0,0 +1,2 @@
+dist/
+src/data/*.json

packages/fonts/README.md

@@ -0,0 +1,3 @@
+# `@gitbook/fonts`
+
+Utilities to lookup default fonts supported by GitBook.

packages/fonts/bin/generate.ts

@@ -0,0 +1,91 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+import { APIv2 } from 'google-font-metadata';
+
+import { CustomizationDefaultFont } from '@gitbook/api';
+
+import type { FontDefinitions } from '../src/types';
+
+const googleFontsMap: { [fontName in CustomizationDefaultFont]: string } = {
+    [CustomizationDefaultFont.Inter]: 'inter',
+    [CustomizationDefaultFont.FiraSans]: 'fira-sans-extra-condensed',
+    [CustomizationDefaultFont.IBMPlexSerif]: 'ibm-plex-serif',
+    [CustomizationDefaultFont.Lato]: 'lato',
+    [CustomizationDefaultFont.Merriweather]: 'merriweather',
+    [CustomizationDefaultFont.NotoSans]: 'noto-sans',
+    [CustomizationDefaultFont.OpenSans]: 'open-sans',
+    [CustomizationDefaultFont.Overpass]: 'overpass',
+    [CustomizationDefaultFont.Poppins]: 'poppins',
+    [CustomizationDefaultFont.Raleway]: 'raleway',
+    [CustomizationDefaultFont.Roboto]: 'roboto',
+    [CustomizationDefaultFont.RobotoSlab]: 'roboto-slab',
+    [CustomizationDefaultFont.SourceSansPro]: 'source-sans-3',
+    [CustomizationDefaultFont.Ubuntu]: 'ubuntu',
+    [CustomizationDefaultFont.ABCFavorit]: 'inter',
+};
+
+/**
+ * Scripts to generate the list of all icons.
+ */
+async function main() {
+    // @ts-expect-error - we build the object
+    const output: FontDefinitions = {};
+
+    for (const font of Object.values(CustomizationDefaultFont)) {
+        const googleFontName = googleFontsMap[font];
+        const fontMetadata = APIv2[googleFontName.toLowerCase()];
+        if (!fontMetadata) {
+            throw new Error(`Font ${googleFontName} not found`);
+        }
+
+        output[font] = {
+            font: googleFontName,
+            unicodeRange: fontMetadata.unicodeRange,
+            variants: {
+                '400': {},
+                '700': {},
+            },
+        };
+
+        Object.keys(output[font].variants).forEach((weight) => {
+            const variants = fontMetadata.variants[weight];
+            const normalVariant = variants.normal;
+            if (!normalVariant) {
+                throw new Error(`Font ${googleFontName} has no normal variant`);
+            }
+
+            output[font].variants[weight] = {};
+            Object.entries(normalVariant).forEach(([script, url]) => {
+                output[font].variants[weight][script] = url.url.woff;
+            });
+        });
+    }
+
+    await writeDataFile('fonts', JSON.stringify(output, null, 2));
+}
+
+/**
+ * We write both in dist and src as the build process might have happen already
+ * and tsc doesn't copy the files.
+ */
+async function writeDataFile(name, content) {
+    const srcData = path.resolve(__dirname, '../src/data');
+    const distData = path.resolve(__dirname, '../dist/data');
+
+    // Ensure the directories exists
+    await Promise.all([
+        fs.mkdir(srcData, { recursive: true }),
+        fs.mkdir(distData, { recursive: true }),
+    ]);
+
+    await Promise.all([
+        fs.writeFile(path.resolve(srcData, `${name}.json`), content),
+        fs.writeFile(path.resolve(distData, `${name}.json`), content),
+    ]);
+}
+
+main().catch((error) => {
+    console.error(`Error generating icons list: ${error}`);
+    process.exit(1);
+});

packages/fonts/package.json

@@ -0,0 +1,31 @@
+{
+    "name": "@gitbook/fonts",
+    "type": "module",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "development": "./src/index.ts",
+            "default": "./dist/index.js"
+        }
+    },
+    "version": "0.0.0",
+    "dependencies": {
+        "@gitbook/api": "catalog:"
+    },
+    "devDependencies": {
+        "google-font-metadata": "^6.0.3",
+        "typescript": "^5.5.3"
+    },
+    "scripts": {
+        "generate": "bun ./bin/generate.js",
+        "build": "tsc --project tsconfig.build.json",
+        "typecheck": "tsc --noEmit",
+        "dev": "tsc -w",
+        "clean": "rm -rf ./dist && rm -rf ./src/data",
+        "unit": "bun test"
+    },
+    "files": ["dist", "src", "bin", "README.md", "CHANGELOG.md"],
+    "engines": {
+        "node": ">=20.0.0"
+    }
+}

packages/fonts/src/__snapshots__/getDefaultFont.test.ts.snap

@@ -0,0 +1,57 @@
+// Bun Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`getDefaultFont should return correct object for Latin text 1`] = `
+{
+  "font": "Inter",
+  "url": "https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hjp-Ek-_0ew.woff",
+}
+`;
+
+exports[`getDefaultFont should return correct object for Cyrillic text 1`] = `
+{
+  "font": "Inter",
+  "url": "https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZthjp-Ek-_0ewmM.woff",
+}
+`;
+
+exports[`getDefaultFont should return correct object for Greek text 1`] = `
+{
+  "font": "Inter",
+  "url": "https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZxhjp-Ek-_0ewmM.woff",
+}
+`;
+
+exports[`getDefaultFont should handle mixed script text 1`] = `
+{
+  "font": "Inter",
+  "url": "https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZthjp-Ek-_0ewmM.woff",
+}
+`;
+
+exports[`getDefaultFont should handle different font weights: regular 1`] = `
+{
+  "font": "Inter",
+  "url": "https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hjp-Ek-_0ew.woff",
+}
+`;
+
+exports[`getDefaultFont should handle different font weights: bold 1`] = `
+{
+  "font": "Inter",
+  "url": "https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYAZ9hjp-Ek-_0ew.woff",
+}
+`;
+
+exports[`getDefaultFont should handle different fonts: inter 1`] = `
+{
+  "font": "Inter",
+  "url": "https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hjp-Ek-_0ew.woff",
+}
+`;
+
+exports[`getDefaultFont should handle different fonts: roboto 1`] = `
+{
+  "font": "Roboto",
+  "url": "https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxMKTU1Kg.woff",
+}
+`;

packages/fonts/src/fonts.ts

@@ -0,0 +1,5 @@
+import type { FontDefinitions } from './types';
+
+import rawFonts from './data/fonts.json' with { type: 'json' };
+
+export const fonts: FontDefinitions = rawFonts;

packages/fonts/src/getDefaultFont.test.ts

@@ -0,0 +1,119 @@
+import { describe, expect, it } from 'bun:test';
+import { CustomizationDefaultFont } from '@gitbook/api';
+import { getDefaultFont } from './getDefaultFont';
+
+describe('getDefaultFont', () => {
+    it('should return null for invalid font', () => {
+        const result = getDefaultFont({
+            font: 'invalid-font' as CustomizationDefaultFont,
+            text: 'Hello',
+            weight: 400,
+        });
+        expect(result).toBeNull();
+    });
+
+    it('should return null for invalid weight', () => {
+        const result = getDefaultFont({
+            font: CustomizationDefaultFont.Inter,
+            text: 'Hello',
+            weight: 999 as any,
+        });
+        expect(result).toBeNull();
+    });
+
+    it('should return null for text not supported by any script', () => {
+        const result = getDefaultFont({
+            font: CustomizationDefaultFont.Inter,
+            text: '😀', // Emoji not supported by Inter
+            weight: 400,
+        });
+        expect(result).toBeNull();
+    });
+
+    it('should return correct object for Latin text', () => {
+        const result = getDefaultFont({
+            font: CustomizationDefaultFont.Inter,
+            text: 'Hello World',
+            weight: 400,
+        });
+        expect(result).not.toBeNull();
+        expect(result?.font).toBe(CustomizationDefaultFont.Inter);
+        expect(result).toMatchSnapshot();
+    });
+
+    it('should return correct object for Cyrillic text', () => {
+        const result = getDefaultFont({
+            font: CustomizationDefaultFont.Inter,
+            text: 'Привет мир',
+            weight: 400,
+        });
+        expect(result).not.toBeNull();
+        expect(result?.font).toBe(CustomizationDefaultFont.Inter);
+        expect(result).toMatchSnapshot();
+    });
+
+    it('should return correct object for Greek text', () => {
+        const result = getDefaultFont({
+            font: CustomizationDefaultFont.Inter,
+            text: 'Γεια σας',
+            weight: 400,
+        });
+        expect(result).not.toBeNull();
+        expect(result?.font).toBe(CustomizationDefaultFont.Inter);
+        expect(result).toMatchSnapshot();
+    });
+
+    it('should handle mixed script text', () => {
+        const result = getDefaultFont({
+            font: CustomizationDefaultFont.Inter,
+            text: 'Hello Привет',
+            weight: 400,
+        });
+        expect(result).not.toBeNull();
+        expect(result?.font).toBe(CustomizationDefaultFont.Inter);
+        expect(result).toMatchSnapshot();
+    });
+
+    it('should handle different font weights', () => {
+        const regular = getDefaultFont({
+            font: CustomizationDefaultFont.Inter,
+            text: 'Hello',
+            weight: 400,
+        });
+        const bold = getDefaultFont({
+            font: CustomizationDefaultFont.Inter,
+            text: 'Hello',
+            weight: 700,
+        });
+        expect(regular).not.toBeNull();
+        expect(bold).not.toBeNull();
+        expect(regular).toMatchSnapshot('regular');
+        expect(bold).toMatchSnapshot('bold');
+    });
+
+    it('should handle empty string', () => {
+        const result = getDefaultFont({
+            font: CustomizationDefaultFont.Inter,
+            text: '',
+            weight: 400,
+        });
+        expect(result).toBeNull();
+    });
+
+    it('should handle different fonts', () => {
+        const inter = getDefaultFont({
+            font: CustomizationDefaultFont.Inter,
+            text: 'Hello',
+            weight: 400,
+        });
+        const roboto = getDefaultFont({
+            font: CustomizationDefaultFont.Roboto,
+            text: 'Hello',
+            weight: 400,
+        });
+        expect(inter).not.toBeNull();
+        expect(roboto).not.toBeNull();
+        expect(inter).toMatchSnapshot('inter');
+        expect(roboto).toMatchSnapshot('roboto');
+    });
+});