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

Author: emmerich

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

@@ -13,10 +13,7 @@ export async function GET(req: NextRequest) {
 
         // biome-ignore lint/suspicious/noConsole: we want to log here
         console.log(`serving icon for ${context.site.id}`);
-        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;
+        return await serveIcon(context, req);
     } catch (err) {
         // biome-ignore lint/suspicious/noConsole: we want to log here
         console.log(`serveIcon error: ${err}`, (err as Error).stack);

packages/gitbook/src/routes/icon.tsx

@@ -52,9 +52,15 @@ 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()
-    );
+    const fontOrigin = await fetch(
+        new URL('../fonts/Inter/Inter-Regular.ttf', import.meta.url)
+    ).then((res) => res.arrayBuffer());
+    const dst = new ArrayBuffer(fontOrigin.byteLength);
+    new Uint8Array(dst).set(new Uint8Array(fontOrigin));
+
+    if (dst.detached) {
+        console.log('about to use detached font buffer..');
+    }
 
     return new ImageResponse(
         <div
@@ -86,7 +92,7 @@ export async function serveIcon(context: GitBookSiteContext, req: Request) {
             height: size.height,
             fonts: [
                 {
-                    data: font,
+                    data: dst,
                     name: 'Inter',
                     weight: 400,
                     style: 'normal',