diff --git a/.github/workflows/deploy-preview.yaml b/.github/workflows/deploy-preview.yaml index e7ce2a6a7..0ed5fd3d8 100644 --- a/.github/workflows/deploy-preview.yaml +++ b/.github/workflows/deploy-preview.yaml @@ -40,6 +40,7 @@ jobs: run: bun run turbo gitbook#build:cloudflare env: NEXT_SERVER_ACTIONS_ENCRYPTION_KEY: ${{ secrets.NEXT_SERVER_ACTIONS_ENCRYPTION_KEY }} + GITBOOK_RUNTIME: cloudflare - id: deploy name: Deploy to Cloudflare uses: cloudflare/wrangler-action@v3.14.0 diff --git a/packages/gitbook/next.config.js b/packages/gitbook/next.config.js index 8aec4f2e7..23c575ec1 100644 --- a/packages/gitbook/next.config.js +++ b/packages/gitbook/next.config.js @@ -5,6 +5,7 @@ module.exports = { GITBOOK_ICONS_URL: process.env.GITBOOK_ICONS_URL, GITBOOK_ICONS_TOKEN: process.env.GITBOOK_ICONS_TOKEN, NEXT_SERVER_ACTIONS_ENCRYPTION_KEY: process.env.NEXT_SERVER_ACTIONS_ENCRYPTION_KEY, + GITBOOK_RUNTIME: process.env.GITBOOK_RUNTIME, }, webpack(config) { diff --git a/packages/gitbook/src/routes/ogimage.tsx b/packages/gitbook/src/routes/ogimage.tsx index 59a7a66f1..63e607c19 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 { GITBOOK_RUNTIME } from '@v2/lib/env'; import { getResizedImageURL } from '@v2/lib/images'; const googleFontsMap: { [fontName in CustomizationDefaultFont]: string } = { @@ -113,8 +114,18 @@ export async function serveOGImage(baseContext: GitBookSiteContext, params: Page body: baseColors[useLightTheme ? 'dark' : 'light'], // Invert text on background }; - const gridWhite = getAssetURL('images/ogimage-grid-white.png'); - const gridBlack = getAssetURL('images/ogimage-grid-black.png'); + // For Cloudflare, we use absolute URLs from the root of the site instead + // to avoid issues with worker to worker requests in the same zone. + const gridWhitePath = 'images/ogimage-grid-white.png'; + const gridDarkPath = 'images/ogimage-grid-dark.png'; + const gridWhite = + GITBOOK_RUNTIME === 'cloudflare' + ? linker.toAbsoluteURL(`/~gitbook/static/${gridWhitePath}`) + : getAssetURL(gridWhitePath); + const gridBlack = + GITBOOK_RUNTIME === 'cloudflare' + ? linker.toAbsoluteURL(`/~gitbook/static/${gridDarkPath}`) + : getAssetURL(gridDarkPath); let gridAsset = useLightTheme ? gridBlack : gridWhite;