Use Inter font when generating icons to prevent ArrayBuffer re-use. (#3100)

Author: emmerich

packages/gitbook/src/app/middleware/(site)/(core)/~gitbook/icon/route.tsx

@@ -8,20 +8,18 @@ export const runtime = 'edge';
 
 export async function GET(req: NextRequest) {
     try {
-        console.log('icon: getSiteContentPointer');
         const pointer = await getSiteContentPointer();
-        console.log('icon: fetchV1context');
         const context = await fetchV1ContextForSitePointer(pointer);
 
         // biome-ignore lint/suspicious/noConsole: we want to log here
         console.log(`serving icon for ${context.site.id}`);
-
-        return await serveIcon(context, req);
+        const response = await serveIcon(context, req);
+        // biome-ignore lint/suspicious/noConsole: we want to log here
+        console.log(`served icon for ${context.site.id}`);
+        return response;
     } catch (err) {
-        if (err instanceof Error) {
-            console.error(`icon: ${err.toString()}`, err.stack);
-        }
-
+        // biome-ignore lint/suspicious/noConsole: we want to log here
+        console.log(`serveIcon error: ${err}`, (err as Error).stack);
         throw err;
     }
 }

packages/gitbook/src/lib/v1.ts

@@ -285,7 +285,6 @@ async function getDataFetcherV1(): Promise<GitBookDataFetcher> {
 export async function fetchV1ContextForSitePointer(pointer: SiteContentPointer) {
     const baseContext = await getV1BaseContext();
 
-    console.log('icon: baseContext success');
     const context = await fetchSiteContextByIds(baseContext, {
         organization: pointer.organizationId,
         site: pointer.siteId,
@@ -296,10 +295,8 @@ export async function fetchV1ContextForSitePointer(pointer: SiteContentPointer)
         changeRequest: pointer.changeRequestId,
         revision: pointer.revisionId,
     });
-    console.log('icon: context inner success');
 
     context.customization = await getDynamicCustomizationSettings(context.customization);
-    console.log('icon: customization success');
 
     return context;
 }

packages/gitbook/src/routes/icon.tsx

@@ -27,13 +27,17 @@ const SIZES = {
  * Generate an icon for a site content.
  */
 export async function serveIcon(context: GitBookSiteContext, req: Request) {
-    console.log('icon: serveIcon', req.url);
     const options = getOptions(req.url);
     const size = SIZES[options.size];
 
     const { site, customization } = context;
     const customIcon = 'icon' in customization.favicon ? customization.favicon.icon : null;
 
+    console.log(
+        'icon: serveIcon',
+        req.url,
+        customIcon ? 'custom' : 'emoji' in customization.favicon ? 'emoji' : 'fallback'
+    );
     // If the site has a custom icon, redirect to it
     if (customIcon) {
         const iconUrl = options.theme === 'light' ? customIcon.light : customIcon.dark;
@@ -47,6 +51,11 @@ export async function serveIcon(context: GitBookSiteContext, req: Request) {
 
     const contentTitle = site.title;
 
+    // Load the font locally to prevent the shared instance used by ImageResponse.
+    const font = await fetch(new URL('../fonts/Inter/Inter-Regular.ttf', import.meta.url)).then(
+        (res) => res.arrayBuffer()
+    );
+
     return new ImageResponse(
         <div
             tw={tcls(options.theme === 'light' ? 'bg-white' : 'bg-black', size.boxStyle)}
@@ -56,6 +65,7 @@ export async function serveIcon(context: GitBookSiteContext, req: Request) {
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
+                fontFamily: 'Inter',
             }}
         >
             <h2
@@ -74,6 +84,14 @@ export async function serveIcon(context: GitBookSiteContext, req: Request) {
         {
             width: size.width,
             height: size.height,
+            fonts: [
+                {
+                    data: font,
+                    name: 'Inter',
+                    weight: 400,
+                    style: 'normal',
+                },
+            ],
         }
     );
 }