From 39d2828af932f14617f98c1e46ea26733bdf3ca9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samy=20Pess=C3=A9?= <samypesse@gmail.com>
Date: Mon, 7 Apr 2025 23:58:38 +0200
Subject: [PATCH] Try binding

---
 packages/gitbook/src/routes/ogimage.tsx | 29 ++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/packages/gitbook/src/routes/ogimage.tsx b/packages/gitbook/src/routes/ogimage.tsx
index f974b8d14..9edfafdd4 100644
--- a/packages/gitbook/src/routes/ogimage.tsx
+++ b/packages/gitbook/src/routes/ogimage.tsx
@@ -8,6 +8,7 @@ import { getFontSourcesToPreload } from '@/fonts/custom';
 import { getAssetURL } from '@/lib/assets';
 import { filterOutNullable } from '@/lib/typescript';
 import type { GitBookSiteContext } from '@v2/lib/context';
+import { getCloudflareContext } from '@v2/lib/data/cloudflare';
 import { GITBOOK_RUNTIME } from '@v2/lib/env';
 import { getResizedImageURL } from '@v2/lib/images';
 
@@ -203,7 +204,11 @@ export async function serveOGImage(baseContext: GitBookSiteContext, params: Page
             />
 
             {/* Grid */}
-            {/* <img tw="absolute inset-0 w-[100vw] h-[100vh]" src={gridAsset} alt="Grid" /> */}
+            <img
+                tw="absolute inset-0 w-[100vw] h-[100vh]"
+                src={await readImage(await fetchSelf(gridAsset))}
+                alt="Grid"
+            />
 
             {/* Logo */}
             {customization.header.logo && 0 ? (
@@ -296,3 +301,25 @@ async function loadCustomFont(input: { url: string; weight: 400 | 700 }) {
         weight,
     };
 }
+
+/**
+ * Fetch a resource from the function itself.
+ * To avoid error with worker to worker requests in the same zone, we use the `WORKER_SELF_REFERENCE` binding.
+ */
+async function fetchSelf(url: string) {
+    const cloudflare = getCloudflareContext();
+    if (cloudflare?.env.WORKER_SELF_REFERENCE) {
+        return await cloudflare.env.WORKER_SELF_REFERENCE.fetch(url);
+    }
+
+    return await fetch(url);
+}
+
+/**
+ * Read an image from a response as a base64 encoded string.
+ */
+async function readImage(response: Response) {
+    const arrayBuffer = await response.arrayBuffer();
+    const base64 = Buffer.from(arrayBuffer).toString('base64');
+    return `data:image/${response.headers.get('content-type')};base64,${base64}`;
+}