Version Packages (#2984)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.github/composite/deploy-cloudflare/action.yaml

@@ -44,6 +44,7 @@ runs:
             GITBOOK_SECRET: ${{ inputs.opItem }}/GITBOOK_SECRET
             GITBOOK_APP_URL: ${{ inputs.opItem }}/GITBOOK_APP_URL
             GITBOOK_API_URL: ${{ inputs.opItem }}/GITBOOK_API_URL
+            GITBOOK_API_PUBLIC_URL: ${{ inputs.opItem }}/GITBOOK_API_PUBLIC_URL
             GITBOOK_API_TOKEN: ${{ inputs.opItem }}/GITBOOK_API_TOKEN
             GITBOOK_INTEGRATIONS_HOST: ${{ inputs.opItem }}/GITBOOK_INTEGRATIONS_HOST
             GITBOOK_IMAGE_RESIZE_SIGNING_KEY: ${{ inputs.opItem }}/GITBOOK_IMAGE_RESIZE_SIGNING_KEY

.github/composite/deploy-vercel/action.yaml

@@ -49,6 +49,7 @@ runs:
             GITBOOK_SECRET: ${{ inputs.opItem }}/GITBOOK_SECRET
             GITBOOK_APP_URL: ${{ inputs.opItem }}/GITBOOK_APP_URL
             GITBOOK_API_URL: ${{ inputs.opItem }}/GITBOOK_API_URL
+            GITBOOK_API_PUBLIC_URL: ${{ inputs.opItem }}/GITBOOK_API_PUBLIC_URL
             GITBOOK_API_TOKEN: ${{ inputs.opItem }}/GITBOOK_API_TOKEN
             GITBOOK_INTEGRATIONS_HOST: ${{ inputs.opItem }}/GITBOOK_INTEGRATIONS_HOST
             GITBOOK_IMAGE_RESIZE_SIGNING_KEY: ${{ inputs.opItem }}/GITBOOK_IMAGE_RESIZE_SIGNING_KEY

.github/workflows/deploy-preview.yaml

@@ -35,21 +35,11 @@ jobs:
             - name: Sets env vars for production
               if: github.ref == 'refs/heads/main'
               run: |
-                echo "SENTRY_ENVIRONMENT=production" >> $GITHUB_ENV
                 echo "GITBOOK_ASSETS_PREFIX=https://static.gitbook.com" >> $GITHUB_ENV
-            - name: Sets env vars for preview
-              if: github.ref != 'refs/heads/main'
-              run: |
-                  echo "SENTRY_ENVIRONMENT=preview" >> $GITHUB_ENV
             - name: Build Next.js with next-on-pages
               run: bun run turbo gitbook#build:cloudflare
               env:
-                  SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
                   NEXT_SERVER_ACTIONS_ENCRYPTION_KEY: ${{ secrets.NEXT_SERVER_ACTIONS_ENCRYPTION_KEY }}
-                  SENTRY_ORG: ${{ vars.SENTRY_ORG }}
-                  SENTRY_PROJECT: ${{ vars.SENTRY_PROJECT }}
-                  SENTRY_DSN: ${{ vars.SENTRY_DSN }}
-                  SENTRY_RELEASE: ${{ github.sha }}
             - id: deploy
               name: Deploy to Cloudflare
               uses: cloudflare/wrangler-action@v3.14.0

.prettierignore

@@ -1,17 +0,0 @@
-.next
-.vercel
-.open-next
-
-# Generated
-packages/emoji-codepoints/index.ts
-packages/gitbook/public/~gitbook/static/
-packages/icons/src/data/*.json
-
-# Build files
-dist/
-
-README.md
-CHANGELOG.md
-
-# v2
-packages/gitbook-v2/public/~gitbook/static/

.prettierrc.json

@@ -1,5 +0,0 @@
-{
-    "printWidth": 100,
-    "singleQuote": true,
-    "tabWidth": 4
-}

biome.json

@@ -18,7 +18,9 @@
             "**/.vercel/**/*",
             "**/.cache/**/*",
             "**/.wrangler/**/*",
-            "packages/openapi-parser/src/fixtures/**/*"
+            "packages/openapi-parser/src/fixtures/**/*",
+            "packages/emoji-codepoints/index.ts",
+            "packages/icons/src/data/*.json"
         ]
     },
     "formatter": {

package.json

@@ -11,7 +11,8 @@
     "overrides": {
         "@codemirror/state": "6.4.1",
         "react": "18.3.1",
-        "react-dom": "18.3.1"
+        "react-dom": "18.3.1",
+        "@gitbook/api": "0.99.0"
     },
     "private": true,
     "scripts": {

packages/cache-tags/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gitbook/cache-tags
 
+## 0.2.0
+
+### Minor Changes
+
+- f32bf1f: Export function `getCacheTagForURL` to easily get the cache tag for a URL.
+
 ## 0.1.0
 
 ### Minor Changes

packages/cache-tags/package.json

@@ -8,9 +8,9 @@
             "default": "./dist/index.js"
         }
     },
-    "version": "0.1.0",
+    "version": "0.2.0",
     "dependencies": {
-        "@gitbook/api": "0.96.1",
+        "@gitbook/api": "*",
         "assert-never": "^1.2.1"
     },
     "devDependencies": {

packages/cache-tags/src/index.ts

@@ -111,6 +111,17 @@ export function getCacheTag(
     }
 }
 
+/**
+ * Get the cache tag for a given URL.
+ */
+export function getCacheTagForURL(url: string | URL) {
+    const parsedURL = url instanceof URL ? url : new URL(url);
+    return getCacheTag({
+        tag: 'url',
+        hostname: parsedURL.hostname,
+    });
+}
+
 /**
  * Get the tags for a computed content source.
  */

packages/colors/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gitbook/colors
 
+## 0.3.0
+
+### Minor Changes
+
+- 4f0a772: Override tint lightness if supplied color is out of bounds
+
 ## 0.2.0
 
 ### Minor Changes

packages/colors/package.json

@@ -8,7 +8,7 @@
             "default": "./dist/index.js"
         }
     },
-    "version": "0.2.0",
+    "version": "0.3.0",
     "devDependencies": {
         "typescript": "^5.5.3"
     },

packages/colors/src/transformations.ts

@@ -184,6 +184,7 @@ export function colorScale(
     const mixColor = mix?.color ? rgbToOklch(hexToRgbArray(mix.color)) : null;
     const foregroundColor = rgbToOklch(hexToRgbArray(foreground));
     const backgroundColor = rgbToOklch(hexToRgbArray(background));
+    let mapping = darkMode ? colorMixMapping.dark : colorMixMapping.light;
 
     if (mixColor && mix?.ratio && mix.ratio > 0) {
         // If defined, we mix in a (tiny) bit of the mix color with the base color.
@@ -192,7 +193,20 @@ export function colorScale(
         baseColor.H = mix.color === DEFAULT_TINT_COLOR ? baseColor.H : mixColor.H;
     }
 
-    const mapping = darkMode ? colorMixMapping.dark : colorMixMapping.light;
+    if (
+        (darkMode && baseColor.L < backgroundColor.L) ||
+        (!darkMode && baseColor.L > backgroundColor.L)
+    ) {
+        // If the supplied color is outside of our lightness bounds, use the supplied color's lightness.
+        // This is mostly used to allow darker-than-dark backgrounds for brands that specifically want that look.
+        const difference = (backgroundColor.L - baseColor.L) / backgroundColor.L;
+        backgroundColor.L = baseColor.L;
+        // At the edges of the scale, the subtle lightness changes stop being perceptible. We need to amp up our mapping to still stand out.
+        const amplifier = 1;
+        mapping = mapping.map((step, index) =>
+            index < 9 ? step + step * amplifier * difference : step
+        );
+    }
 
     const result = [];
 

packages/gitbook-v2/CHANGELOG.md

@@ -1,5 +1,12 @@
 # gitbook-v2
 
+## 0.2.1
+
+### Patch Changes
+
+- Updated dependencies [f32bf1f]
+  - @gitbook/cache-tags@0.2.0
+
 ## 0.2.0
 
 ### Minor Changes

packages/gitbook-v2/package.json

@@ -1,12 +1,12 @@
 {
     "name": "gitbook-v2",
-    "version": "0.2.0",
+    "version": "0.2.1",
     "private": true,
     "dependencies": {
         "next": "^15.2.1",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "@gitbook/api": "0.96.1",
+        "@gitbook/api": "*",
         "@gitbook/cache-tags": "workspace:*",
         "@sindresorhus/fnv1a": "^3.1.0",
         "server-only": "^0.0.1",
@@ -14,7 +14,7 @@
     },
     "devDependencies": {
         "gitbook": "*",
-        "@opennextjs/cloudflare": "https://pkg.pr.new/opennextjs/opennextjs-cloudflare/@opennextjs/cloudflare@236c84d",
+        "@opennextjs/cloudflare": "^0.5.10",
         "tailwindcss": "^3.4.0",
         "postcss": "^8"
     },
@@ -26,6 +26,7 @@
         "start": "next start",
         "build:v2:cloudflare": "opennextjs-cloudflare",
         "dev:v2:cloudflare": "wrangler dev --port 8771",
-        "unit": "bun test"
+        "unit": "bun test",
+        "typecheck": "tsc --noEmit"
     }
 }

packages/gitbook-v2/src/app/~gitbook/env/route.ts

@@ -1,6 +1,7 @@
 import { type NextRequest, NextResponse } from 'next/server';
 
 import {
+    GITBOOK_API_PUBLIC_URL,
     GITBOOK_API_TOKEN,
     GITBOOK_API_URL,
     GITBOOK_APP_URL,
@@ -22,6 +23,7 @@ export async function GET(_req: NextRequest) {
         GITBOOK_URL,
         GITBOOK_APP_URL,
         GITBOOK_API_URL,
+        GITBOOK_API_PUBLIC_URL,
         GITBOOK_ASSETS_URL,
         GITBOOK_ICONS_URL,
         GITBOOK_USER_AGENT,

packages/gitbook-v2/src/app/~space/[spaceId]/pdf.ts

@@ -4,7 +4,6 @@ import {
     fetchSpaceContextByIds,
 } from '@v2/lib/context';
 import { createDataFetcher } from '@v2/lib/data';
-import { GITBOOK_API_URL } from '@v2/lib/env';
 import { createLinker } from '@v2/lib/links';
 import { getAPITokenFromMiddleware } from '@v2/lib/middleware';
 
@@ -26,7 +25,6 @@ export async function getSpacePDFContext(
     });
     const dataFetcher = createDataFetcher({
         apiToken: apiToken,
-        apiEndpoint: GITBOOK_API_URL,
     });
 
     const baseContext: GitBookBaseContext = {

packages/gitbook-v2/src/lib/context.ts

@@ -16,7 +16,7 @@ import type {
 import { type GitBookDataFetcher, createDataFetcher, throwIfDataError } from '@v2/lib/data';
 import { redirect } from 'next/navigation';
 import { assert } from 'ts-essentials';
-import { GITBOOK_API_TOKEN, GITBOOK_API_URL, GITBOOK_URL } from './env';
+import { GITBOOK_URL } from './env';
 import { type ImageResizer, createImageResizer } from './images';
 import { type GitBookSpaceLinker, createLinker } from './links';
 
@@ -113,8 +113,7 @@ export function getBaseContext(input: {
     const urlMode = input.urlMode;
 
     const dataFetcher = createDataFetcher({
-        apiToken: input.apiToken ?? GITBOOK_API_TOKEN,
+        apiToken: input.apiToken ?? null,
-        apiEndpoint: GITBOOK_API_URL,
     });
 
     const linker = getLinkerForSiteURL({

packages/gitbook-v2/src/lib/data/api.ts

@@ -1,42 +1,40 @@
-import { type ComputedContentSource, GitBookAPI } from '@gitbook/api';
+import { trace } from '@/lib/tracing';
-import { getCacheTag, getComputedContentSourceCacheTags } from '@gitbook/cache-tags';
+import {
+    type ComputedContentSource,
+    GitBookAPI,
+    type GitBookAPIServiceBinding,
+} from '@gitbook/api';
+import {
+    getCacheTag,
+    getCacheTagForURL,
+    getComputedContentSourceCacheTags,
+} from '@gitbook/cache-tags';
 import { GITBOOK_API_TOKEN, GITBOOK_API_URL, GITBOOK_USER_AGENT } from '@v2/lib/env';
 import { unstable_cacheLife as cacheLife, unstable_cacheTag as cacheTag } from 'next/cache';
 import { wrapDataFetcherError } from './errors';
 import type { GitBookDataFetcher } from './types';
 
 interface DataFetcherInput {
-    /**
-     * API host to use.
-     */
-    apiEndpoint: string;
-
     /**
      * API token.
      */
     apiToken: string | null;
 }
 
-const commonInput: DataFetcherInput = {
-    apiEndpoint: GITBOOK_API_URL,
-    apiToken: GITBOOK_API_TOKEN,
-};
-
 /**
  * Create a data fetcher using an API token.
  * The data are being cached by Next.js built-in cache.
  */
-export function createDataFetcher(input: DataFetcherInput = commonInput): GitBookDataFetcher {
+export function createDataFetcher(
+    input: DataFetcherInput = { apiToken: null }
+): GitBookDataFetcher {
     return {
-        apiEndpoint: input.apiEndpoint,
-
         async api() {
-            return getAPI(input);
+            return apiClient(input);
         },
 
         withToken({ apiToken }) {
             return createDataFetcher({
-                ...input,
                 apiToken,
             });
         },
@@ -45,94 +43,120 @@ export function createDataFetcher(input: DataFetcherInput = commonInput): GitBoo
         // API that are tied to the token
         //
         getPublishedContentSite(params) {
-            return getPublishedContentSite(input, {
+            return trace('getPublishedContentSite', () =>
+                getPublishedContentSite(input, {
                     organizationId: params.organizationId,
                     siteId: params.siteId,
                     siteShareKey: params.siteShareKey,
-            });
+                })
+            );
         },
         getSiteRedirectBySource(params) {
-            return getSiteRedirectBySource(input, {
+            return trace('getSiteRedirectBySource', () =>
+                getSiteRedirectBySource(input, {
                     organizationId: params.organizationId,
                     siteId: params.siteId,
                     siteShareKey: params.siteShareKey,
                     source: params.source,
-            });
+                })
+            );
         },
         getRevision(params) {
-            return getRevision(input, {
+            return trace('getRevision', () =>
+                getRevision(input, {
                     spaceId: params.spaceId,
                     revisionId: params.revisionId,
                     metadata: params.metadata,
-            });
+                })
+            );
         },
         getRevisionPages(params) {
-            return getRevisionPages(input, {
+            return trace('getRevisionPages', () =>
+                getRevisionPages(input, {
                     spaceId: params.spaceId,
                     revisionId: params.revisionId,
                     metadata: params.metadata,
-            });
+                })
+            );
         },
         getRevisionFile(params) {
-            return getRevisionFile(input, {
+            return trace('getRevisionFile', () =>
+                getRevisionFile(input, {
                     spaceId: params.spaceId,
                     revisionId: params.revisionId,
                     fileId: params.fileId,
-            });
+                })
+            );
         },
         getRevisionPageByPath(params) {
-            return getRevisionPageByPath(input, {
+            return trace('getRevisionPageByPath', () =>
+                getRevisionPageByPath(input, {
                     spaceId: params.spaceId,
                     revisionId: params.revisionId,
                     path: params.path,
-            });
+                })
+            );
         },
         getReusableContent(params) {
-            return getReusableContent(input, {
+            return trace('getReusableContent', () =>
+                getReusableContent(input, {
                     spaceId: params.spaceId,
                     revisionId: params.revisionId,
                     reusableContentId: params.reusableContentId,
-            });
+                })
+            );
         },
         getLatestOpenAPISpecVersionContent(params) {
-            return getLatestOpenAPISpecVersionContent(input, {
+            return trace('getLatestOpenAPISpecVersionContent', () =>
+                getLatestOpenAPISpecVersionContent(input, {
                     organizationId: params.organizationId,
                     slug: params.slug,
-            });
+                })
+            );
         },
         getSpace(params) {
-            return getSpace(input, {
+            return trace('getSpace', () =>
+                getSpace(input, {
                     spaceId: params.spaceId,
                     shareKey: params.shareKey,
-            });
+                })
+            );
         },
         getChangeRequest(params) {
-            return getChangeRequest(input, {
+            return trace('getChangeRequest', () =>
+                getChangeRequest(input, {
                     spaceId: params.spaceId,
                     changeRequestId: params.changeRequestId,
-            });
+                })
+            );
         },
         getDocument(params) {
-            return getDocument(input, {
+            return trace('getDocument', () =>
+                getDocument(input, {
                     spaceId: params.spaceId,
                     documentId: params.documentId,
-            });
+                })
+            );
         },
         getComputedDocument(params) {
-            return getComputedDocument(input, {
+            return trace('getComputedDocument', () =>
+                getComputedDocument(input, {
                     organizationId: params.organizationId,
                     spaceId: params.spaceId,
                     source: params.source,
-            });
+                })
+            );
         },
         getEmbedByUrl(params) {
-            return getEmbedByUrl(input, {
+            return trace('getEmbedByUrl', () =>
+                getEmbedByUrl(input, {
                     url: params.url,
                     spaceId: params.spaceId,
-            });
+                })
+            );
         },
         searchSiteContent(params) {
-            return searchSiteContent(input, params);
+            return trace('searchSiteContent', () => searchSiteContent(input, params));
         },
 
         //
@@ -140,25 +164,31 @@ export function createDataFetcher(input: DataFetcherInput = commonInput): GitBoo
         // where the data is the same for all users
         //
         getUserById(userId) {
-            return getUserById(commonInput, userId);
+            return trace('getUserById', () => getUserById({ apiToken: null }, { userId }));
         },
         getPublishedContentByUrl(params) {
-            return getPublishedContentByUrl(commonInput, {
+            return trace('getPublishedContentByUrl', () =>
+                getPublishedContentByUrl(
+                    { apiToken: null },
+                    {
                         url: params.url,
                         visitorAuthToken: params.visitorAuthToken,
                         redirectOnError: params.redirectOnError,
-            });
+                    }
+                )
+            );
         },
     };
 }
 
-async function getUserById(input: DataFetcherInput, userId: string) {
+async function getUserById(input: DataFetcherInput, params: { userId: string }) {
     'use cache';
 
     cacheLife('days');
 
     return wrapDataFetcherError(async () => {
-        const res = await getAPI(input).users.getUserById(userId);
+        const api = await apiClient(input);
+        const res = await api.users.getUserById(params.userId);
         return res.data;
     });
 }
@@ -181,7 +211,8 @@ async function getSpace(
     );
 
     return wrapDataFetcherError(async () => {
-        const res = await getAPI(input).spaces.getSpaceById(params.spaceId, {
+        const api = await apiClient(input);
+        const res = await api.spaces.getSpaceById(params.spaceId, {
             shareKey: params.shareKey,
         });
         return res.data;
@@ -200,10 +231,8 @@ async function getChangeRequest(
     cacheLife('minutes');
 
     return wrapDataFetcherError(async () => {
-        const res = await getAPI(input).spaces.getChangeRequestById(
+        const api = await apiClient(input);
-            params.spaceId,
+        const res = await api.spaces.getChangeRequestById(params.spaceId, params.changeRequestId);
-            params.changeRequestId
-        );
         cacheTag(
             getCacheTag({
                 tag: 'change-request',
@@ -228,7 +257,8 @@ async function getRevision(
     cacheLife('max');
 
     return wrapDataFetcherError(async () => {
-        const res = await getAPI(input).spaces.getRevisionById(params.spaceId, params.revisionId, {
+        const api = await apiClient(input);
+        const res = await api.spaces.getRevisionById(params.spaceId, params.revisionId, {
             metadata: params.metadata,
         });
         return res.data;
@@ -248,13 +278,10 @@ async function getRevisionPages(
     cacheLife('max');
 
     return wrapDataFetcherError(async () => {
-        const res = await getAPI(input).spaces.listPagesInRevisionById(
+        const api = await apiClient(input);
-            params.spaceId,
+        const res = await api.spaces.listPagesInRevisionById(params.spaceId, params.revisionId, {
-            params.revisionId,
-            {
             metadata: params.metadata,
-            }
+        });
-        );
         return res.data.pages;
     });
 }
@@ -272,10 +299,12 @@ async function getRevisionFile(
     cacheLife('max');
 
     return wrapDataFetcherError(async () => {
-        const res = await getAPI(input).spaces.getFileInRevisionById(
+        const api = await apiClient(input);
+        const res = await api.spaces.getFileInRevisionById(
             params.spaceId,
             params.revisionId,
-            params.fileId
+            params.fileId,
+            {}
         );
         return res.data;
     });
@@ -295,10 +324,12 @@ async function getRevisionPageByPath(
 
     const encodedPath = encodeURIComponent(params.path);
     return wrapDataFetcherError(async () => {
-        const res = await getAPI(input).spaces.getPageInRevisionByPath(
+        const api = await apiClient(input);
+        const res = await api.spaces.getPageInRevisionByPath(
             params.spaceId,
             params.revisionId,
-            encodedPath
+            encodedPath,
+            {}
         );
 
         return res.data;
@@ -317,7 +348,8 @@ async function getDocument(
     cacheLife('max');
 
     return wrapDataFetcherError(async () => {
-        const res = await getAPI(input).spaces.getDocumentById(params.spaceId, params.documentId);
+        const api = await apiClient(input);
+        const res = await api.spaces.getDocumentById(params.spaceId, params.documentId, {});
         return res.data;
     });
 }
@@ -345,7 +377,8 @@ async function getComputedDocument(
     );
 
     return wrapDataFetcherError(async () => {
-        const res = await getAPI(input).spaces.getComputedDocument(params.spaceId, {
+        const api = await apiClient(input);
+        const res = await api.spaces.getComputedDocument(params.spaceId, {
             source: params.source,
         });
         return res.data;
@@ -365,7 +398,8 @@ async function getReusableContent(
     cacheLife('max');
 
     return wrapDataFetcherError(async () => {
-        const res = await getAPI(input).spaces.getReusableContentInRevisionById(
+        const api = await apiClient(input);
+        const res = await api.spaces.getReusableContentInRevisionById(
             params.spaceId,
             params.revisionId,
             params.reusableContentId
@@ -393,7 +427,8 @@ async function getLatestOpenAPISpecVersionContent(
     cacheLife('days');
 
     return wrapDataFetcherError(async () => {
-        const res = await getAPI(input).orgs.getLatestOpenApiSpecVersionContent(
+        const api = await apiClient(input);
+        const res = await api.orgs.getLatestOpenApiSpecVersionContent(
             params.organizationId,
             params.slug
         );
@@ -413,17 +448,12 @@ async function getPublishedContentByUrl(
 
     const { url, visitorAuthToken, redirectOnError } = params;
 
-    const hostname = new URL(url).hostname;
+    cacheTag(getCacheTagForURL(url));
-    cacheTag(
-        getCacheTag({
-            tag: 'url',
-            hostname,
-        })
-    );
     cacheLife('days');
 
     return wrapDataFetcherError(async () => {
-        const res = await getAPI(input).urls.getPublishedContentByUrl({
+        const api = await apiClient(input);
+        const res = await api.urls.getPublishedContentByUrl({
             url,
             visitorAuthToken: visitorAuthToken ?? undefined,
             redirectOnError,
@@ -452,22 +482,19 @@ async function getPublishedContentSite(
 ) {
     'use cache';
 
+    cacheLife('days');
     cacheTag(
         getCacheTag({
             tag: 'site',
             site: params.siteId,
         })
     );
-    cacheLife('days');
 
     return wrapDataFetcherError(async () => {
-        const res = await getAPI(input).orgs.getPublishedContentSite(
+        const api = await apiClient(input);
-            params.organizationId,
+        const res = await api.orgs.getPublishedContentSite(params.organizationId, params.siteId, {
-            params.siteId,
-            {
             shareKey: params.siteShareKey,
-            }
+        });
-        );
         return res.data;
     });
 }
@@ -492,14 +519,11 @@ async function getSiteRedirectBySource(
     cacheLife('days');
 
     return wrapDataFetcherError(async () => {
-        const res = await getAPI(input).orgs.getSiteRedirectBySource(
+        const api = await apiClient(input);
-            params.organizationId,
+        const res = await api.orgs.getSiteRedirectBySource(params.organizationId, params.siteId, {
-            params.siteId,
-            {
             shareKey: params.siteShareKey,
             source: params.source,
-            }
+        });
-        );
 
         return res.data;
     });
@@ -517,7 +541,7 @@ async function getEmbedByUrl(
     cacheLife('weeks');
 
     return wrapDataFetcherError(async () => {
-        const api = getAPI(input);
+        const api = await apiClient(input);
         const res = await api.spaces.getEmbedByUrlInSpace(params.spaceId, { url: params.url });
         return res.data;
     });
@@ -534,7 +558,8 @@ async function searchSiteContent(
     cacheLife('days');
 
     return wrapDataFetcherError(async () => {
-        const res = await getAPI(input).orgs.searchSiteContent(organizationId, siteId, {
+        const api = await apiClient(input);
+        const res = await api.orgs.searchSiteContent(organizationId, siteId, {
             query,
             ...scope,
         });
@@ -542,12 +567,43 @@ async function searchSiteContent(
     });
 }
 
-function getAPI(input: DataFetcherInput) {
+let loggedServiceBinding = false;
-    const { apiEndpoint, apiToken } = input;
+
+/**
+ * Create a new API client.
+ */
+export async function apiClient(input: DataFetcherInput = { apiToken: null }) {
+    const { apiToken } = input;
+    let serviceBinding: GitBookAPIServiceBinding | undefined;
+
+    try {
+        // HACK: This is a workaround to avoid webpack trying to bundle this cloudflare only module
+        // @ts-ignore
+        const { env } = await import(
+            /* webpackIgnore: true */ `${'__cloudflare:workers'.replaceAll('_', '')}`
+        );
+        serviceBinding = env.GITBOOK_API;
+        if (!loggedServiceBinding) {
+            loggedServiceBinding = true;
+            if (serviceBinding) {
+                // biome-ignore lint/suspicious/noConsole: we want to log here
+                console.log(`using service binding for the API (${GITBOOK_API_URL})`);
+            } else {
+                // biome-ignore lint/suspicious/noConsole: we want to log here
+                console.warn(`no service binding for the API (${GITBOOK_API_URL})`);
+            }
+        }
+    } catch (error) {
+        if (process.env.NODE_ENV === 'production' && !process.env.VERCEL) {
+            throw error;
+        }
+    }
+
     const api = new GitBookAPI({
-        authToken: apiToken ?? undefined,
+        authToken: apiToken || GITBOOK_API_TOKEN || undefined,
-        endpoint: apiEndpoint,
+        endpoint: GITBOOK_API_URL,
         userAgent: GITBOOK_USER_AGENT,
+        serviceBinding,
     });
 
     return api;

packages/gitbook-v2/src/lib/data/lookup.ts

@@ -1,7 +1,8 @@
 import { race, tryCatch } from '@/lib/async';
 import { joinPath } from '@/lib/paths';
-import { GitBookAPI, type PublishedSiteContentLookup } from '@gitbook/api';
+import { trace } from '@/lib/tracing';
-import { GITBOOK_API_TOKEN, GITBOOK_API_URL, GITBOOK_USER_AGENT } from '@v2/lib/env';
+import type { PublishedSiteContentLookup } from '@gitbook/api';
+import { apiClient } from './api';
 import { getExposableError } from './errors';
 import type { DataFetcherResponse } from './types';
 import { getURLLookupAlternatives, stripURLSearch } from './urls';
@@ -20,34 +21,26 @@ export async function getPublishedContentByURL(input: {
     const lookup = getURLLookupAlternatives(url);
 
     const result = await race(lookup.urls, async (alternative, { signal }) => {
-        const api = new GitBookAPI({
+        const api = await apiClient();
-            authToken: GITBOOK_API_TOKEN ?? undefined,
-            endpoint: GITBOOK_API_URL,
-            userAgent: GITBOOK_USER_AGENT,
-        });
 
-        const startTime = performance.now();
+        const callResult = await trace(
-        const callResult = await tryCatch(
+            {
+                operation: 'getPublishedContentByURL',
+                name: alternative.url,
+            },
+            () =>
+                tryCatch(
                     api.urls.getPublishedContentByUrl(
                         {
                             url: alternative.url,
                             visitorAuthToken: input.visitorAuthToken ?? undefined,
                             redirectOnError: input.redirectOnError,
-                    cache: true,
                         },
                         {
                             signal,
-                    headers: {
-                        'x-gitbook-force-cache': 'true',
-                    },
                         }
                     )
-        );
+                )
-        const endTime = performance.now();
-
-        // biome-ignore lint/suspicious/noConsole: we want to log performance data
-        console.log(
-            `getPublishedContentByURL(${alternative.url}) Time taken: ${endTime - startTime}ms`
         );
 
         if (callResult.error) {

packages/gitbook-v2/src/lib/data/types.ts

@@ -20,11 +20,6 @@ export type DataFetcherResponse<T> =
  * It is used between v1 and v2.
  */
 export interface GitBookDataFetcher {
-    /**
-     * Endpoint of the API.
-     */
-    apiEndpoint: string;
-
     /**
      * Get an API client for the current context.
      */

packages/gitbook-v2/src/lib/env/globals.ts

@@ -34,6 +34,11 @@ export const GITBOOK_APP_URL = process.env.GITBOOK_APP_URL || 'https://app.gitbo
  */
 export const GITBOOK_API_URL = process.env.GITBOOK_API_URL || 'https://api.gitbook.com';
 
+/**
+ * Default GitBook API URL endpoint, to be shared with the client.
+ */
+export const GITBOOK_API_PUBLIC_URL = process.env.GITBOOK_API_PUBLIC_URL || GITBOOK_API_URL;
+
 /**
  * Default GitBook API token.
  * It can be use to avoid rate-limiting.

packages/gitbook-v2/wrangler.toml

@@ -1,7 +1,7 @@
 main = ".open-next/worker.js"
 name = "gitbook-open-v2"
-compatibility_date = "2024-09-23"
+compatibility_date = "2025-03-11"
-compatibility_flags = ["nodejs_compat"]
+compatibility_flags = ["nodejs_compat", "allow_importable_env"]
 assets = { directory = ".open-next/assets", binding = "ASSETS" }
 observability = { enabled = true }
 
@@ -12,6 +12,10 @@ kv_namespaces = [
 d1_databases = [
   { binding = "NEXT_CACHE_D1", database_id = "f59ddb40-ad72-4312-9395-0ac6a129af8e", database_name = "gitbook-open-v2-tags-preview" }
 ]
+services = [
+  { binding = "NEXT_CACHE_REVALIDATION_WORKER", service = "gitbook-open-v2-preview" },
+  { binding = "GITBOOK_API", service = "gitbook-x-prod-api-cache" }
+]
 
 [env.staging]
 routes = [
@@ -24,6 +28,10 @@ kv_namespaces = [
 d1_databases = [
   { binding = "NEXT_CACHE_D1", database_id = "9df62e39-1f35-4066-83aa-e9b8ed3ac8d5", database_name = "gitbook-open-v2-tags-staging" }
 ]
+services = [
+  { binding = "NEXT_CACHE_REVALIDATION_WORKER", service = "gitbook-open-v2-staging" },
+  { binding = "GITBOOK_API", service = "gitbook-x-staging-api-cache" }
+]
 
 [env.production]
 routes = [
@@ -36,3 +44,7 @@ kv_namespaces = [
 d1_databases = [
   { binding = "NEXT_CACHE_D1", database_id = "a6f16fce-5f45-43a9-89a4-7b83ddf25b77", database_name = "gitbook-open-v2-tags-production" }
 ]
+services = [
+  { binding = "NEXT_CACHE_REVALIDATION_WORKER", service = "gitbook-open-v2-production" },
+  { binding = "GITBOOK_API", service = "gitbook-x-prod-api-cache" }
+]

packages/gitbook/.env.example

@@ -23,8 +23,5 @@
 ## Caching
 # GITBOOK_OUTPUT_CACHE=true
 
-### Sentry ###
-# SENTRY_DSN=xxx
-
 ### Silent logs
 # SILENT=true

packages/gitbook/.gitignore

@@ -23,9 +23,6 @@ next-env.d.ts
 # visual tests
 screenshots/
 
-# Sentry Config File
-.sentryclirc
-
 /test-results/
 /playwright-report/
 /blob-report/

packages/gitbook/CHANGELOG.md

@@ -1,5 +1,40 @@
 # gitbook
 
+## 0.8.1
+
+### Patch Changes
+
+- 886e204: Update OpenAPI operation path design
+- Updated dependencies [886e204]
+- Updated dependencies [4f0a772]
+  - @gitbook/react-openapi@1.1.5
+  - @gitbook/colors@0.3.0
+
+## 0.8.0
+
+### Minor Changes
+
+- eec3eed: Add styling for prominent search bar option
+
+### Patch Changes
+
+- 16292de: Display sidebar on no-TOC pages
+- 9b5f971: Transparent background for OpenAPI path block
+- 99da8df: Optimize favicons and og:image using the image resizer
+- b011ea0: Fix rendering of code blocks in Ask AI when being streamed
+- 9bc3d50: Info hint background and link color fixes
+- 31d800e: Render OpenAPISchemas block
+- Updated dependencies [6aaeae2]
+- Updated dependencies [c60e9ba]
+- Updated dependencies [9108c56]
+- Updated dependencies [31d800e]
+- Updated dependencies [ff3b708]
+- Updated dependencies [f32bf1f]
+- Updated dependencies [c9ea239]
+  - @gitbook/react-contentkit@0.7.0
+  - @gitbook/react-openapi@1.1.4
+  - @gitbook/cache-tags@0.2.0
+
 ## 0.7.3
 
 ### Patch Changes

packages/gitbook/e2e/internal.spec.ts

@@ -19,6 +19,7 @@ import {
     type TestsCase,
     allDeprecatedThemePresets,
     allLocales,
+    allSearchStyles,
     allSidebarBackgroundStyles,
     allThemeModes,
     allThemes,
@@ -647,6 +648,23 @@ const testCases: TestsCase[] = [
                         run: waitForCookiesDialog,
                     })),
                 ]),
+                ...allSearchStyles.flatMap((searchStyle) => ({
+                    name: `Theme ${theme} – Search ${searchStyle} – Mode ${themeMode}`,
+                    url: getCustomizationURL({
+                        styling: {
+                            theme,
+                            search: searchStyle,
+                        },
+                        header: {
+                            links: headerLinks,
+                        },
+                        themes: {
+                            default: themeMode,
+                            toggeable: false,
+                        },
+                    }),
+                    run: waitForCookiesDialog,
+                })),
             ]),
             // Deprecated header themes
             ...allDeprecatedThemePresets.flatMap((preset) => [

packages/gitbook/e2e/util.ts

@@ -2,12 +2,13 @@ import { argosScreenshot } from '@argos-ci/playwright';
 import {
     CustomizationBackground,
     CustomizationCorners,
-    CustomizationFont,
+    CustomizationDefaultFont,
     type CustomizationHeaderItem,
     CustomizationHeaderPreset,
     CustomizationIconsStyle,
     CustomizationLinksStyle,
     CustomizationLocale,
+    CustomizationSearchStyle,
     CustomizationSidebarBackgroundStyle,
     CustomizationSidebarListStyle,
     CustomizationTheme,
@@ -109,6 +110,11 @@ export const allSidebarBackgroundStyles: CustomizationSidebarBackgroundStyle[] =
     CustomizationSidebarBackgroundStyle.Filled,
 ];
 
+export const allSearchStyles: CustomizationSearchStyle[] = [
+    CustomizationSearchStyle.Prominent,
+    CustomizationSearchStyle.Subtle,
+];
+
 // Common customization settings
 
 export const headerLinks: CustomizationHeaderItem[] = [
@@ -249,7 +255,7 @@ export function getCustomizationURL(partial: DeepPartial<SiteCustomizationSettin
             dangerColor: { light: '#FB2C36', dark: '#FB2C36' },
             successColor: { light: '#00C950', dark: '#00C950' },
             corners: CustomizationCorners.Rounded,
-            font: CustomizationFont.Inter,
+            font: CustomizationDefaultFont.Inter,
             background: CustomizationBackground.Plain,
             icons: CustomizationIconsStyle.Regular,
             links: CustomizationLinksStyle.Default,
@@ -257,6 +263,7 @@ export function getCustomizationURL(partial: DeepPartial<SiteCustomizationSettin
                 background: CustomizationSidebarBackgroundStyle.Default,
                 list: CustomizationSidebarListStyle.Default,
             },
+            search: CustomizationSearchStyle.Subtle,
         },
         internationalization: {
             locale: CustomizationLocale.En,

packages/gitbook/next.config.js

@@ -1,19 +1,13 @@
-const { withSentryConfig } = require('@sentry/nextjs');
+module.exports = {
-
-module.exports = withSentryConfig(
-    {
     env: {
         BUILD_VERSION: (process.env.GITHUB_SHA ?? '').slice(0, 7),
-            SENTRY_RELEASE: process.env.SENTRY_RELEASE ?? '',
-            SENTRY_DSN: process.env.SENTRY_DSN ?? '',
-            SENTRY_ENVIRONMENT: process.env.SENTRY_ENVIRONMENT ?? 'development',
         GITBOOK_ASSETS_PREFIX: process.env.GITBOOK_ASSETS_PREFIX,
         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,
     },
 
-        webpack(config, { dev, webpack }) {
+    webpack(config) {
         config.resolve.fallback = {
             ...config.resolve.fallback,
 
@@ -23,21 +17,6 @@ module.exports = withSentryConfig(
             http: false,
         };
 
-            // Tree shake debug code for Sentry
-            // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/#tree-shaking-with-nextjs
-            if (!dev) {
-                config.plugins.push(
-                    new webpack.DefinePlugin({
-                        __SENTRY_DEBUG__: false,
-                        // We always init Sentry with enableTracing: false for now, so this is useless
-                        __SENTRY_TRACING__: false,
-                        __RRWEB_EXCLUDE_IFRAME__: true,
-                        __RRWEB_EXCLUDE_SHADOW_DOM__: true,
-                        __SENTRY_EXCLUDE_REPLAY_WORKER__: true,
-                    })
-                );
-            }
-
         return config;
     },
 
@@ -67,17 +46,4 @@ module.exports = withSentryConfig(
             },
         ],
     },
-    },
+};
-    {
-        release: process.env.SENTRY_RELEASE,
-        org: process.env.SENTRY_ORG,
-        project: process.env.SENTRY_PROJECT,
-        authToken: process.env.SENTRY_AUTH_TOKEN,
-
-        // Upload a larger set of source maps for prettier stack traces (increases build time)
-        widenClientFileUpload: true,
-        // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
-        tunnelRoute: '/~gitbook/monitoring',
-        disableLogger: true,
-    }
-);

packages/gitbook/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gitbook",
-    "version": "0.7.3",
+    "version": "0.8.1",
     "private": true,
     "scripts": {
         "dev": "env-cmd --silent -f ../../.env.local next dev",
@@ -16,7 +16,7 @@
         "clean": "rm -rf ./.next && rm -rf ./public/~gitbook/static/icons && rm -rf ./public/~gitbook/static/math"
     },
     "dependencies": {
-        "@gitbook/api": "0.96.1",
+        "@gitbook/api": "*",
         "@gitbook/cache-do": "workspace:*",
         "@gitbook/cache-tags": "workspace:*",
         "@gitbook/colors": "workspace:*",
@@ -29,7 +29,6 @@
         "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-navigation-menu": "^1.2.3",
         "@radix-ui/react-popover": "^1.0.7",
-        "@sentry/nextjs": "8.35.0",
         "@sindresorhus/fnv1a": "^3.1.0",
         "@tailwindcss/container-queries": "^0.1.1",
         "@tailwindcss/typography": "^0.5.16",
@@ -59,7 +58,7 @@
         "react-hotkeys-hook": "^4.4.1",
         "rison": "^0.1.1",
         "server-only": "^0.0.1",
-        "shiki": "^1.27.2",
+        "shiki": "^3.2.0",
         "tailwind-merge": "^2.2.0",
         "tailwind-shades": "^1.1.2",
         "url-join": "^5.0.0",

packages/gitbook/sentry.client.config.ts

@@ -1,18 +0,0 @@
-import * as Sentry from '@sentry/browser';
-
-const dsn = process.env.SENTRY_DSN;
-if (dsn) {
-    Sentry.init({
-        dsn,
-        release: process.env.SENTRY_RELEASE,
-
-        // Disable tracing as it creates additional requests in an env where subrequests are limited.
-        tracesSampleRate: 0,
-
-        // Disable transactions  as it creates additional requests in an env where subrequests are limited.
-        // https://docs.sentry.io/platforms/node/configuration/filtering/#using--3
-        beforeSendTransaction: () => {
-            return null;
-        },
-    });
-}

packages/gitbook/src/app/global-error.tsx

@@ -1,14 +1,8 @@
 'use client';
 
-import { captureException } from '@sentry/nextjs';
 import NextError from 'next/error';
-import { useEffect } from 'react';
-
-export default function GlobalError({ error }: { error: Error }) {
-    useEffect(() => {
-        captureException(error);
-    }, [error]);
 
+export default function GlobalError() {
     return (
         <html lang="en">
             <body>

packages/gitbook/src/app/middleware/(site)/error.tsx

@@ -1,8 +1,5 @@
 'use client';
 
-import { captureException, withScope } from '@sentry/nextjs';
-import React from 'react';
-
 import { Button } from '@/components/primitives/Button';
 import { t, useLanguage } from '@/intl/client';
 import { tcls } from '@/lib/tailwind';
@@ -11,18 +8,9 @@ export default function ErrorPage(props: {
     error: Error & { digest?: string };
     reset: () => void;
 }) {
-    const { error, reset } = props;
+    const { reset } = props;
     const language = useLanguage();
 
-    React.useEffect(() => {
-        withScope((scope) => {
-            if ('_componentStack' in error && error._componentStack) {
-                scope.setExtra('componentStack', error._componentStack);
-            }
-            captureException(error);
-        });
-    }, [error]);
-
     return (
         <div
             className={tcls(

packages/gitbook/src/cloudflare-entrypoint.ts

@@ -1,6 +1,7 @@
 // @ts-ignore
 import nextOnPagesHandler from '@cloudflare/next-on-pages/fetch-handler';
 
+import { withResponseCacheTags } from './lib/cache/response';
 import { withMiddlewareHeadersStorage } from './lib/middleware';
 
 /**
@@ -9,8 +10,8 @@ import { withMiddlewareHeadersStorage } from './lib/middleware';
  */
 export default {
     async fetch(request, env, ctx) {
-        const response = await withMiddlewareHeadersStorage(() =>
+        const response = await withResponseCacheTags(() =>
-            nextOnPagesHandler.fetch(request, env, ctx)
+            withMiddlewareHeadersStorage(() => nextOnPagesHandler.fetch(request, env, ctx))
         );
 
         return response;

packages/gitbook/src/components/DocumentView/Block.tsx

@@ -25,7 +25,7 @@ import { IntegrationBlock } from './Integration';
 import { List } from './List';
 import { ListItem } from './ListItem';
 import { BlockMath } from './Math';
-import { OpenAPI } from './OpenAPI';
+import { OpenAPIOperation, OpenAPISchemas } from './OpenAPI';
 import { Paragraph } from './Paragraph';
 import { Quote } from './Quote';
 import { ReusableContent } from './ReusableContent';
@@ -82,7 +82,9 @@ export function Block<T extends DocumentBlock>(props: BlockProps<T>) {
                 return <Table {...props} block={block} />;
             case 'swagger':
             case 'openapi-operation':
-                return <OpenAPI {...props} block={block} />;
+                return <OpenAPIOperation {...props} block={block} />;
+            case 'openapi-schemas':
+                return <OpenAPISchemas {...props} block={block} />;
             case 'embed':
                 return <Embed {...props} block={block} />;
             case 'blockquote':
@@ -156,6 +158,7 @@ export function BlockSkeleton(props: { block: DocumentBlock; style: ClassValue }
         case 'table':
         case 'swagger':
         case 'openapi-operation':
+        case 'openapi-schemas':
         case 'math':
         case 'divider':
         case 'content-ref':

packages/gitbook/src/components/DocumentView/CodeBlock/ClientCodeBlock.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import type { DocumentBlockCode } from '@gitbook/api';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { useInViewportListener } from '@/components/hooks/useInViewportListener';
 import { useScrollListener } from '@/components/hooks/useScrollListener';
-import { useDebounceCallback, useEventCallback } from 'usehooks-ts';
+import { useDebounceCallback } from 'usehooks-ts';
 import type { BlockProps } from '../Block';
 import { CodeBlockRenderer } from './CodeBlockRenderer';
 import type { HighlightLine, RenderedInline } from './highlight';
@@ -22,53 +22,82 @@ type ClientBlockProps = Pick<BlockProps<DocumentBlockCode>, 'block' | 'style'> &
 export function ClientCodeBlock(props: ClientBlockProps) {
     const { block, style, inlines } = props;
     const blockRef = useRef<HTMLDivElement>(null);
-    const processedRef = useRef(false);
+    const isInViewportRef = useRef(false);
-    const isInViewportRef = useRef<boolean | null>(null);
+    const [isInViewport, setIsInViewport] = useState(false);
-    const [lines, setLines] = useState<HighlightLine[]>(() => plainHighlight(block, []));
+    const plainLines = useMemo(() => plainHighlight(block, []), [block]);
+    const [lines, setLines] = useState<null | HighlightLine[]>(null);
 
     // Preload the highlighter when the block is mounted.
     useEffect(() => {
         import('./highlight').then(({ preloadHighlight }) => preloadHighlight(block));
     }, [block]);
 
-    const runHighlight = useEventCallback(() => {
+    // When user scrolls, we need to wait for the scroll to finish before running the highlight
-        if (processedRef.current) {
+    const isScrollingRef = useRef(false);
-            return;
+    const onFinishScrolling = useDebounceCallback(() => {
-        }
+        isScrollingRef.current = false;
-        if (typeof window !== 'undefined') {
-            import('./highlight').then(({ highlight }) => {
-                highlight(block, inlines).then((lines) => {
-                    setLines(lines);
-                    processedRef.current = true;
-                });
-            });
-        }
-    });
-    const debouncedRunHighlight = useDebounceCallback(runHighlight, 1000);
 
+        // If the block is in the viewport after the scroll, we need to run the highlight
+        if (isInViewportRef.current) {
+            setIsInViewport(true);
+        }
+    }, 100);
+    useScrollListener(
+        () => {
+            isScrollingRef.current = true;
+            onFinishScrolling();
+        },
+        useRef(typeof window !== 'undefined' ? window : null)
+    );
+
+    // Detect when the block is in viewport
     useInViewportListener(
         blockRef,
         (isInViewport, disconnect) => {
-            // Disconnect once in viewport
-            if (isInViewport) {
-                disconnect();
-                // If it's initially in viewport, we need to run the highlight
-                if (isInViewportRef.current === null) {
-                    runHighlight();
-                }
-            }
             isInViewportRef.current = isInViewport;
+            if (isScrollingRef.current) {
+                // If the user is scrolling, we don't want to run the highlight
+                // because it will be run when the scroll is finished
+                return;
+            }
+
+            if (isInViewport) {
+                // Disconnect once in viewport
+                disconnect();
+                setIsInViewport(true);
+            }
         },
         { rootMargin: '200px' }
     );
 
-    const handleScroll = useDebounceCallback(() => {
+    // When the block is visible or updated, we need to re-run the highlight
-        if (isInViewportRef.current) {
+    useEffect(() => {
-            debouncedRunHighlight();
+        if (isInViewport) {
+            // If the block is in viewport, we need to run the highlight
+            let cancelled = false;
+
+            if (typeof window !== 'undefined') {
+                import('./highlight').then(({ highlight }) => {
+                    highlight(block, inlines).then((lines) => {
+                        if (cancelled) {
+                            return;
                         }
-    }, 80);
 
-    useScrollListener(handleScroll, useRef(typeof window !== 'undefined' ? window : null));
+                        setLines(lines);
+                    });
+                });
+            }
 
-    return <CodeBlockRenderer ref={blockRef} block={block} style={style} lines={lines} />;
+            return () => {
+                cancelled = true;
+            };
+        }
+
+        // Otherwise if the block is not in viewport, we reset to the plain lines
+        setLines(null);
+    }, [isInViewport, block, inlines]);
+
+    return (
+        <CodeBlockRenderer ref={blockRef} block={block} style={style} lines={lines ?? plainLines} />
+    );
 }

packages/gitbook/src/components/DocumentView/CodeBlock/highlight.test.ts

@@ -46,7 +46,7 @@ it('should parse plain code', async () => {
 
 it('should parse different code in parallel', async () => {
     await Promise.all(
-        ['shell', 'scss', 'markdown', 'less', 'scss', 'css', 'scss', 'yaml'].map(async (syntax) =>
+        ['shell', 'scss', 'scss', 'css', 'scss', 'yaml'].map(async (syntax) =>
             highlight(
                 {
                     object: 'block',

packages/gitbook/src/components/DocumentView/CodeBlock/highlight.ts

@@ -35,14 +35,11 @@ export type RenderedInline = {
 
 const theme = createCssVariablesTheme();
 
-const highlighter = createSingletonShorthands(
+const { getSingletonHighlighter } = createSingletonShorthands(
     createdBundledHighlighter<any, any>({
         langs: bundledLanguages,
         themes: {},
-        engine: () =>
+        engine: () => createJavaScriptRegexEngine({ forgiving: true, target: 'ES2018' }),
-            createJavaScriptRegexEngine({
-                forgiving: true,
-            }),
     })
 );
 
@@ -52,7 +49,7 @@ const highlighter = createSingletonShorthands(
 export async function preloadHighlight(block: DocumentBlockCode) {
     const langName = getBlockLang(block);
     if (langName) {
-        await highlighter.getSingletonHighlighter({
+        await getSingletonHighlighter({
             langs: [langName],
             themes: [theme],
         });
@@ -74,7 +71,12 @@ export async function highlight(
 
     const code = getPlainCodeBlock(block);
 
-    const lines = await highlighter.codeToTokensBase(code, {
+    const highlighter = await getSingletonHighlighter({
+        langs: [langName],
+        themes: [theme],
+    });
+
+    const lines = highlighter.codeToTokensBase(code, {
         lang: langName,
         theme,
         tokenizeMaxLineLength: 400,
@@ -132,12 +134,6 @@ function getLanguageForSyntax(syntax: string): BundledLanguage | null {
     // Normalize the syntax to lowercase.
     syntax = syntax.toLowerCase();
 
-    // Temporary disable highlighting for C/C++ code blocks
-    // @see https://github.com/shikijs/shiki/issues/893
-    if (syntax === 'cpp' || syntax === 'c') {
-        return null;
-    }
-
     // Check if the syntax is a bundled language.
     if (checkIsBundledLanguage(syntax)) {
         return syntax;

packages/gitbook/src/components/DocumentView/Hint.tsx

@@ -104,8 +104,8 @@ const HINT_STYLES: {
             '[&_.can-override-text]:text-neutral-strong',
         ],
         container:
-            'bg-neutral theme-muted:bg-neutral-base theme-bold-tint:bg-neutral-base theme-gradient:bg-neutral-12/1 border-neutral',
+            'bg-info border-info theme-muted-tint:bg-info-solid/2 theme-bold-tint:bg-info-solid/2',
-        containerWithHeader: 'border-info-solid bg-neutral-subtle theme-gradient:bg-neutral-12/1',
+        containerWithHeader: 'border-info-solid bg-info-subtle',
     },
     warning: {
         icon: 'circle-exclamation',
@@ -113,11 +113,13 @@ const HINT_STYLES: {
         header: 'bg-warning-active',
         body: [
             'text-neutral-strong',
-            '[&_a]:text-warning',
+            'links-default:[&_a]:text-warning',
-            '[&_a:hover]:text-warning-strong',
+            'links-default:[&_a:hover]:text-warning-strong',
+            'links-default:[&_a]:decoration-warning/6',
+            'links-accent:[&_a]:decoration-warning',
+            'decoration-warning/6',
             '[&_.can-override-bg]:bg-warning-active',
             '[&_.can-override-text]:text-warning-strong',
-            'decoration-warning/6',
         ],
         container: 'bg-warning border-warning',
         containerWithHeader: 'border-warning-solid bg-warning-subtle',
@@ -128,11 +130,13 @@ const HINT_STYLES: {
         header: 'bg-danger-active',
         body: [
             'text-neutral-strong',
-            '[&_a]:text-danger',
+            'links-default:[&_a]:text-danger',
-            '[&_a:hover]:text-danger-strong',
+            'links-default:[&_a:hover]:text-danger-strong',
+            'links-default:[&_a]:decoration-danger/6',
+            'links-accent:[&_a]:decoration-danger',
+            'decoration-danger/6',
             '[&_.can-override-bg]:bg-danger-active',
             '[&_.can-override-text]:text-danger-strong',
-            'decoration-danger/6',
         ],
         container: 'bg-danger border-danger',
         containerWithHeader: 'border-danger-solid bg-danger-subtle',
@@ -143,11 +147,13 @@ const HINT_STYLES: {
         header: 'bg-success-active',
         body: [
             'text-neutral-strong',
-            '[&_a]:text-success',
+            'links-default:[&_a]:text-success',
-            '[&_a:hover]:text-success-strong',
+            'links-default:[&_a:hover]:text-success-strong',
+            'links-default:[&_a]:decoration-success/6',
+            'links-accent:[&_a]:decoration-success',
+            'decoration-success/6',
             '[&_.can-override-bg]:bg-success-active',
             '[&_.can-override-text]:text-success-strong',
-            'decoration-success/6',
         ],
         container: 'bg-success border-success',
         containerWithHeader: 'border-success-solid bg-success-subtle',

packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIOperation.tsx

@@ -1,6 +1,6 @@
 import type { JSONDocument } from '@gitbook/api';
 import { Icon } from '@gitbook/icons';
-import { OpenAPIOperation } from '@gitbook/react-openapi';
+import { OpenAPIOperation as BaseOpenAPIOperation } from '@gitbook/react-openapi';
 
 import { resolveOpenAPIOperationBlock } from '@/lib/openapi/resolveOpenAPIOperationBlock';
 import { tcls } from '@/lib/tailwind';
@@ -12,21 +12,21 @@ import { Heading } from '../Heading';
 
 import './scalar.css';
 import './style.css';
-import type { AnyOpenAPIBlock } from '@/lib/openapi/types';
+import type { AnyOpenAPIOperationsBlock } from '@/lib/openapi/types';
 
 /**
  * Render an openapi block or an openapi-operation block.
  */
-export async function OpenAPI(props: BlockProps<AnyOpenAPIBlock>) {
+export async function OpenAPIOperation(props: BlockProps<AnyOpenAPIOperationsBlock>) {
     const { style } = props;
     return (
         <div className={tcls('flex w-full', style, 'max-w-full')}>
-            <OpenAPIBody {...props} />
+            <OpenAPIOperationBody {...props} />
         </div>
     );
 }
 
-async function OpenAPIBody(props: BlockProps<AnyOpenAPIBlock>) {
+async function OpenAPIOperationBody(props: BlockProps<AnyOpenAPIOperationsBlock>) {
     const { block, context } = props;
 
     if (!context.contentContext) {
@@ -53,7 +53,7 @@ async function OpenAPIBody(props: BlockProps<AnyOpenAPIBlock>) {
     }
 
     return (
-        <OpenAPIOperation
+        <BaseOpenAPIOperation
             data={data}
             context={{
                 specUrl,

packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPISchemas.tsx

@@ -0,0 +1,67 @@
+import { resolveOpenAPISchemasBlock } from '@/lib/openapi/resolveOpenAPISchemasBlock';
+import { tcls } from '@/lib/tailwind';
+import { Icon } from '@gitbook/icons';
+import { OpenAPISchemas as BaseOpenAPISchemas } from '@gitbook/react-openapi';
+
+import type { BlockProps } from '../Block';
+
+import './scalar.css';
+import './style.css';
+import type { OpenAPISchemasBlock } from '@/lib/openapi/types';
+
+/**
+ * Render an openapi-schemas block.
+ */
+export async function OpenAPISchemas(props: BlockProps<OpenAPISchemasBlock>) {
+    const { style } = props;
+    return (
+        <div className={tcls('flex w-full', style, 'max-w-full')}>
+            <OpenAPISchemasBody {...props} />
+        </div>
+    );
+}
+
+async function OpenAPISchemasBody(props: BlockProps<OpenAPISchemasBlock>) {
+    const { block, context } = props;
+
+    if (!context.contentContext) {
+        return null;
+    }
+
+    const { data, specUrl, error } = await resolveOpenAPISchemasBlock({
+        block,
+        context: context.contentContext,
+    });
+
+    if (error) {
+        return (
+            <div className="hidden">
+                <p>
+                    Error with {specUrl}: {error.message}
+                </p>
+            </div>
+        );
+    }
+
+    if (!data || !specUrl) {
+        return null;
+    }
+
+    return (
+        <BaseOpenAPISchemas
+            data={data}
+            context={{
+                specUrl,
+                icons: {
+                    chevronDown: <Icon icon="chevron-down" />,
+                    chevronRight: <Icon icon="chevron-right" />,
+                    plus: <Icon icon="plus" />,
+                },
+                defaultInteractiveOpened: context.mode === 'print',
+                id: block.meta?.id,
+                blockKey: block.key,
+            }}
+            className="openapi-block"
+        />
+    );
+}

packages/gitbook/src/components/DocumentView/OpenAPI/index.ts

@@ -1 +1,2 @@
-export * from './OpenAPI';
+export * from './OpenAPIOperation';
+export * from './OpenAPISchemas';

packages/gitbook/src/components/DocumentView/OpenAPI/scalar.css

@@ -264,14 +264,18 @@
     gap: 6px;
 }
 .scalar-activate-button {
-    @apply flex gap-1.5 items-center;
+    @apply flex gap-2 items-center;
     @apply bg-primary-solid text-contrast-primary-solid hover:bg-primary-solid-hover hover:text-contrast-primary-solid-hover contrast-more:ring-1 rounded-md straight-corners:rounded-none place-self-start;
     @apply ring-1 ring-tint hover:ring-tint-hover;
     @apply shadow-sm shadow-tint dark:shadow-tint-1 hover:shadow-md active:shadow-none;
     @apply contrast-more:ring-tint-12 contrast-more:hover:ring-2 contrast-more:hover:ring-tint-12;
     @apply hover:scale-105 active:scale-100 transition-all;
     @apply grow-0 shrink-0 truncate;
-    @apply text-sm px-2.5 py-1;
+    @apply text-[13px] px-2 py-0.5 font-mono font-medium [word-spacing:-2px];
+}
+
+.scalar-activate-button svg {
+    @apply size-2.5;
 }
 
 .scalar-app-loading {

packages/gitbook/src/components/DocumentView/OpenAPI/style.css

@@ -1,6 +1,6 @@
 /* Layout Components */
 .openapi-operation {
-    @apply flex-1 flex flex-col gap-4 mb-14;
+    @apply flex-1 flex flex-col gap-8 mb-14;
 }
 
 .openapi-schemas {
@@ -17,7 +17,7 @@
 }
 
 .openapi-summary {
-    @apply flex flex-col items-start justify-start gap-2;
+    @apply flex flex-col items-start justify-start gap-3;
 }
 
 .openapi-deprecated {
@@ -122,7 +122,7 @@
 }
 
 .openapi-column-preview-body {
-    @apply flex flex-col gap-4 sticky top-4 site-header:top-20 site-header-sections:top-32 page-api-block:xl:max-2xl:top-32 print-mode:static;
+    @apply flex flex-col gap-4 sticky top-4 site-header:top-20 site-header-sections:page-has-toc:top-32 page-api-block:xl:max-2xl:top-32 print-mode:static;
 }
 
 .openapi-column-preview pre {
@@ -198,7 +198,11 @@
 }
 
 .openapi-schema-required {
-    @apply text-amber-600 text-[0.813rem];
+    @apply text-warning-subtle text-[0.813rem];
+}
+
+.openapi-schema-readonly {
+    @apply text-primary-subtle/9 text-[0.813rem];
 }
 
 .openapi-schema-type {
@@ -387,17 +391,30 @@
     @apply flex flex-row items-center h-fit;
 }
 
+.openapi-codesample-footer {
+    @apply flex w-full justify-end;
+}
+
 /* Path */
 .openapi-path {
-    @apply flex items-center bg-tint-base text-sm gap-2 p-2 border rounded-md border-tint-subtle;
+    @apply flex items-center text-sm gap-2 h-fit;
+}
+
+.openapi-path-variable {
+    @apply p-px min-w-[1.625rem] text-tint-strong font-normal w-fit justify-center items-center ring-1 ring-inset ring-tint bg-tint rounded text-sm leading-none before:!content-none after:!content-none;
+}
+
+.openapi-path-server {
+    @apply text-tint hidden md:inline;
 }
 
 .openapi-path .openapi-method {
-    @apply text-[0.813rem] m-0 px-1;
+    @apply text-[0.813rem] m-0 h-full items-center flex px-2;
 }
 
 .openapi-path-title {
-    @apply flex-1 relative font-normal whitespace-nowrap overflow-x-auto font-mono text-tint-strong;
+    @apply flex-1 relative font-normal whitespace-nowrap overflow-x-auto font-mono text-tint-strong/10;
+    @apply py-0.5 px-1 rounded hover:bg-tint cursor-pointer transition-colors;
     scrollbar-width: none;
     -ms-overflow-style: none;
 }
@@ -516,6 +533,10 @@
     @apply px-3 py-2 pt-2.5 border-t border-tint-subtle text-[0.813rem] text-tint;
 }
 
+.openapi-tabs-footer .openapi-markdown {
+    @apply text-[0.813rem] text-tint;
+}
+
 /* Disclosure group */
 .openapi-disclosure-group {
     @apply border-b border-tint-subtle relative;
@@ -627,3 +648,37 @@
 .openapi-section-schemas > .openapi-section-body > .openapi-schema-properties > .openapi-schema {
     @apply p-2.5;
 }
+
+.openapi-tooltip {
+    @apply flex items-center gap-1 bg-tint-base border border-tint-subtle text-tint-strong rounded-md font-medium px-1.5 py-0.5 shadow-sm text-[13px];
+}
+
+.openapi-tooltip svg {
+    @apply size-3 text-tint-strong;
+}
+
+.openapi-tooltip[data-entering] {
+    animation: tooltip-enter 0.2s ease-in-out forwards;
+}
+
+.openapi-tooltip[data-exiting] {
+    animation: tooltip-leave 0.2s ease-in-out forwards;
+}
+
+@keyframes tooltip-enter {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes tooltip-leave {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}

packages/gitbook/src/components/Footer/Footer.tsx

@@ -16,16 +16,9 @@ export function Footer(props: { context: GitBookSiteContext }) {
     const { customization } = context;
 
     return (
-        <>
-            <hr className="border-tint-subtle border-t" />
-            <div className="scroll-nojump">
         <footer
             className={tcls(
-                        CONTAINER_STYLE,
+                'border-tint-subtle border-t',
-                        'px-4',
-                        'mx-auto',
-                        'flex',
-                        'gap-12',
                 // If the footer only contains a mode toggle, we only show it on smaller screens
                 customization.themes.toggeable &&
                     !customization.footer.copyright &&
@@ -35,6 +28,8 @@ export function Footer(props: { context: GitBookSiteContext }) {
                     : null
             )}
         >
+            <div className="scroll-nojump">
+                <div className={tcls(CONTAINER_STYLE, 'px-4', 'mx-auto', 'flex', 'gap-12')}>
                     <div className="hidden page-no-toc:hidden basis-72 lg:block" />
                     <div
                         className={tcls(
@@ -137,8 +132,8 @@ export function Footer(props: { context: GitBookSiteContext }) {
                         </div>
                     </div>
                     <div className="hidden page-no-toc:hidden lg:block xl:basis-56" />
-                </footer>
                 </div>
-        </>
+            </div>
+        </footer>
     );
 }

packages/gitbook/src/components/Header/Dropdown.tsx

@@ -44,7 +44,6 @@ export function Dropdown<E extends HTMLElement>(props: {
                     'absolute',
                     'top-full',
                     'left-0',
-                    'z-20',
                     'origin-top-left',
                     'invisible',
                     'transition-opacity',
@@ -54,6 +53,7 @@ export function Dropdown<E extends HTMLElement>(props: {
                     className
                 )}
             >
+                <div className="fixed z-50 w-52">
                     <div
                         className={tcls(
                             'mt-2',
@@ -73,6 +73,7 @@ export function Dropdown<E extends HTMLElement>(props: {
                     </div>
                 </div>
             </div>
+        </div>
     );
 }
 

packages/gitbook/src/components/Header/Header.tsx

@@ -20,7 +20,6 @@ import { SpacesDropdown } from './SpacesDropdown';
 export function Header(props: { context: GitBookSiteContext; withTopHeader?: boolean }) {
     const { context, withTopHeader } = props;
     const { siteSpace, siteSpaces, sections, customization } = context;
-    const isMultiVariants = siteSpaces.length > 1;
 
     return (
         <header
@@ -31,7 +30,7 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
                 `h-[${HEADER_HEIGHT_DESKTOP}px]`,
                 'sticky',
                 'top-0',
-                'z-10',
+                'z-30',
                 'w-full',
                 'flex-none',
                 'shadow-[0px_1px_0px]',
@@ -56,11 +55,11 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
                     'theme-bold:shadow-tint-12/2'
                 )}
             >
-                <div className={tcls('scroll-nojump')}>
+                <div className="scroll-nojump">
                     <div
                         className={tcls(
                             'gap-4',
-                            'lg:gap-8',
+                            'lg:gap-6',
                             'flex',
                             'items-center',
                             'justify-between',
@@ -68,14 +67,12 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
                             'py-3',
                             'min-h-16',
                             'sm:h-16',
-                            isMultiVariants && 'page-no-toc:max-[400px]:flex-wrap',
                             CONTAINER_STYLE
                         )}
                     >
                         <div
                             className={tcls(
-                                'flex max-w-full',
+                                'flex max-w-full lg:basis-72',
-                                isMultiVariants && 'page-no-toc:max-[400px]:w-full',
                                 'min-w-0 shrink items-center justify-start gap-2 lg:gap-4'
                             )}
                         >
@@ -86,44 +83,35 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
                                     'text-tint-strong',
                                     'theme-bold:text-header-link',
                                     'hover:bg-tint-hover',
-                                    'theme-bold:hover:bg-header-link/3'
+                                    'theme-bold:hover:bg-header-link/3',
+                                    'page-no-toc:hidden'
                                 )}
                             />
                             <HeaderLogo context={context} />
                         </div>
 
-                        {isMultiVariants && (
-                            <div className="mr-auto page-no-toc:flex hidden">
-                                <SpacesDropdown
-                                    context={context}
-                                    siteSpace={siteSpace}
-                                    siteSpaces={siteSpaces}
-                                    className={
-                                        'theme-bold:bg-header-link/2 theme-bold:text-header-link theme-bold:ring-header-link/4 theme-bold:group-focus-within/dropdown:bg-header-link/3 theme-bold:group-focus-within/dropdown:text-header-link theme-bold:group-focus-within/dropdown:ring-header-link/6 theme-bold:group-hover/dropdown:bg-header-link/3 theme-bold:group-hover/dropdown:text-header-link theme-bold:group-hover/dropdown:ring-header-link/6 theme-bold:contrast-more:bg-header-background theme-bold:contrast-more:text-header-link theme-bold:contrast-more:ring-header-link theme-bold:contrast-more:group-hover/dropdown:text-header-link theme-bold:contrast-more:group-hover/dropdown:ring-header-link theme-bold:contrast-more:group-focus-within/dropdown:text-header-link theme-bold:contrast-more:group-focus-within/dropdown:ring-header-link theme-bold:dark:bg-header-link/2 theme-bold:dark:text-header-link theme-bold:dark:ring-header-link/4 theme-bold:dark:group-hover/dropdown:bg-header-link/3 theme-bold:dark:group-hover/dropdown:text-header-link theme-bold:dark:group-hover/dropdown:ring-header-link/6 theme-bold:contrast-more:dark:group-hover/dropdown:text-header-link theme-bold:contrast-more:dark:group-hover/dropdown:ring-header-link theme-bold:dark:group-focus-within/dropdown:bg-header-link/3 theme-bold:dark:group-focus-within/dropdown:text-header-link theme-bold:dark:group-focus-within/dropdown:ring-header-link/6 theme-bold:contrast-more:dark:group-focus-within/dropdown:text-header-link theme-bold:contrast-more:dark:group-focus-within/dropdown:ring-header-link'
-                                    }
-                                />
-                            </div>
-                        )}
-
-                        {customization.header.links.length > 0 && (
-                            <HeaderLinks>
-                                {customization.header.links.map((link, index) => {
-                                    return <HeaderLink key={index} link={link} context={context} />;
-                                })}
-                                <HeaderLinkMore
-                                    label={t(getSpaceLanguage(customization), 'more')}
-                                    links={customization.header.links}
-                                    context={context}
-                                />
-                            </HeaderLinks>
-                        )}
                         <div
                             className={tcls(
                                 'flex',
-                                'md:min-w-56',
                                 'grow-0',
                                 'shrink-0',
-                                'justify-self-end'
+                                'md:basis-56',
+                                'justify-self-end',
+                                'search' in customization.styling &&
+                                    customization.styling.search === 'prominent'
+                                    ? [
+                                          'md:grow-[0.8]',
+                                          'lg:basis-40',
+                                          'max-w-lg',
+                                          'lg:ml-[max(calc((100%-18rem-48rem-3rem)/2),1.5rem)]', // container (100%) - sidebar (18rem) - content (48rem) - margin (3rem)
+                                          'xl:ml-[max(calc((100%-18rem-48rem-14rem-3rem)/2),1.5rem)]', // container (100%) - sidebar (18rem) - content (48rem) - outline (14rem) - margin (3rem)
+                                          'page-no-toc:lg:ml-[max(calc((100%-18rem-48rem-18rem-3rem)/2),0rem)]',
+                                          'page-full-width:lg:ml-6',
+                                          'lg:mr-auto',
+                                          'order-last',
+                                          'md:order-[unset]',
+                                      ]
+                                    : ['order-last']
                             )}
                         >
                             <Suspense fallback={null}>
@@ -152,6 +140,7 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
 
                                         'theme-bold:shadow-none',
                                         'theme-bold:hover:shadow-none',
+                                        'whitespace-nowrap',
                                     ]}
                                 >
                                     <span className={tcls('flex-1')}>
@@ -166,11 +155,70 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
                                 </SearchButton>
                             </Suspense>
                         </div>
+
+                        {customization.header.links.length > 0 && (
+                            <HeaderLinks>
+                                {customization.header.links.map((link) => {
+                                    return (
+                                        <HeaderLink
+                                            key={link.title}
+                                            link={link}
+                                            context={context}
+                                        />
+                                    );
+                                })}
+                                <HeaderLinkMore
+                                    label={t(getSpaceLanguage(customization), 'more')}
+                                    links={customization.header.links}
+                                    context={context}
+                                />
+                            </HeaderLinks>
+                        )}
                     </div>
                 </div>
             </div>
-            {sections ? (
+
-                <SiteSectionTabs sections={encodeClientSiteSections(context, sections)} />
+            {sections || siteSpaces.length > 1 ? (
+                <div
+                    className={tcls(
+                        'w-full',
+                        'overflow-x-scroll',
+                        'overflow-y-hidden',
+                        'hide-scroll',
+                        '-mb-4 pb-4', // Positive padding / negative margin allows the navigation menu indicator to show in a scroll viewƒ
+                        !sections ? ['hidden', 'page-no-toc:flex'] : 'flex'
+                    )}
+                >
+                    <div
+                        className={tcls(
+                            CONTAINER_STYLE,
+                            'page-default-width:max-w-[unset]',
+                            'grow',
+                            'flex',
+                            'items-end',
+                            'page-default-width:2xl:px-[calc((100%-1536px+4rem)/2)]'
+                        )}
+                    >
+                        {siteSpaces.length > 1 && (
+                            <div
+                                id="variants"
+                                className="my-2 mr-5 page-no-toc:flex hidden grow border-tint border-r pr-5 *:grow only:mr-0 only:border-none only:pr-0 sm:max-w-64"
+                            >
+                                <SpacesDropdown
+                                    context={context}
+                                    siteSpace={siteSpace}
+                                    siteSpaces={siteSpaces}
+                                    className="w-full grow py-1"
+                                />
+                            </div>
+                        )}
+                        {sections && (
+                            <SiteSectionTabs
+                                sections={encodeClientSiteSections(context, sections)}
+                            />
+                        )}
+                    </div>
+                </div>
             ) : null}
         </header>
     );

packages/gitbook/src/components/Header/HeaderLink.tsx

@@ -34,7 +34,7 @@ export async function HeaderLink(props: {
     if (link.links && link.links.length > 0) {
         return (
             <Dropdown
-                className="shrink"
+                className={`shrink ${customization.styling.search === 'prominent' ? 'right-0 left-auto' : null}`}
                 button={(buttonProps) => {
                     if (!target || !link.to) {
                         return (
@@ -151,8 +151,8 @@ function HeaderItemButton(
 
 function getHeaderLinkClassName(_props: { headerPreset: CustomizationHeaderPreset }) {
     return tcls(
-        'flex items-center shrink',
+        'flex items-center',
-        'min-w-0',
+        'shrink',
         'contrast-more:underline',
         'truncate',
 

packages/gitbook/src/components/Header/HeaderLinkMore.tsx

@@ -45,7 +45,13 @@ export function HeaderLinkMore(props: {
 
     return (
         <div className={`${styles.linkEllipsis} z-20 items-center`}>
-            <Dropdown button={renderButton} className="-translate-x-48 md:translate-x-0">
+            <Dropdown
+                button={renderButton}
+                className={tcls(
+                    'max-md:right-0 max-md:left-auto',
+                    context.customization.styling.search === 'prominent' && 'right-0 left-auto'
+                )}
+            >
                 <DropdownMenu>
                     {links.map((link, index) => (
                         <MoreMenuLink key={index} link={link} context={context} />

packages/gitbook/src/components/Header/HeaderLinks.tsx

@@ -1,19 +1,21 @@
 import type React from 'react';
 
-import { tcls } from '@/lib/tailwind';
+import { type ClassValue, tcls } from '@/lib/tailwind';
 
 import styles from './headerLinks.module.css';
 
 interface HeaderLinksProps {
     children: React.ReactNode;
+    style?: ClassValue;
 }
 
-export async function HeaderLinks({ children }: HeaderLinksProps) {
+export async function HeaderLinks({ children, style }: HeaderLinksProps) {
     return (
         <div
             className={tcls(
                 styles.containerHeaderlinks,
-                'lg:[&>.button+.button]:-ml-2 z-20 flex min-w-9 shrink grow items-center justify-end gap-x-4 lg:gap-x-6'
+                'lg:[&>.button+.button]:-ml-2 z-20 ml-auto flex min-w-9 shrink grow items-center justify-end gap-x-4 lg:gap-x-6 xl:grow-0',
+                style
             )}
         >
             {children}

packages/gitbook/src/components/Header/HeaderLogo.tsx

@@ -55,6 +55,7 @@ export async function HeaderLogo(props: HeaderLogoProps) {
                         'min-w-0',
                         'max-w-40',
                         'lg:max-w-64',
+                        'site-header-none:page-no-toc:lg:max-w-56',
                         'max-h-10',
                         'lg:max-h-12',
                         'h-full',
@@ -84,7 +85,7 @@ function LogoFallback(props: HeaderLogoProps) {
             <div
                 className={tcls(
                     'text-pretty',
-                    'line-clamp-3',
+                    'line-clamp-2',
                     'tracking-tight',
                     'max-w-[18ch]',
                     'lg:max-w-[24ch]',

packages/gitbook/src/components/Header/HeaderMobileMenu.tsx

@@ -54,7 +54,6 @@ export function HeaderMobileMenu(props: Partial<React.ButtonHTMLAttributes<HTMLB
                 'px-2',
                 'rounded',
                 'straight-corners:rounded-sm',
-                'page-no-toc:hidden',
                 props.className
             )}
         >

packages/gitbook/src/components/Header/SpacesDropdown.tsx

@@ -63,7 +63,7 @@ export function SpacesDropdown(props: {
                         className
                     )}
                 >
-                    <span className={tcls('line-clamp-2', 'grow')}>{siteSpace.title}</span>
+                    <span className={tcls('truncate', 'grow')}>{siteSpace.title}</span>
                     <DropdownChevron />
                 </div>
             )}

packages/gitbook/src/components/Header/headerLinks.module.css

@@ -1,6 +1,8 @@
-.containerHeaderlinks {
+@media (max-width: 1279px) {
+    .containerHeaderlinks {
         container-type: inline-size;
         container-name: headerlinks;
+    }
 }
 
 .linkEllipsis {
@@ -43,7 +45,7 @@
         }
     }
 }
-@container headerlinks (width < 600px) {
+@container headerlinks (width < 550px) {
     .containerHeaderlinks > :nth-child(n + 4) {
         display: none;
     }
@@ -54,7 +56,7 @@
         }
     }
 }
-@container headerlinks (width < 750px) {
+@container headerlinks (width < 650px) {
     .containerHeaderlinks > :nth-child(n + 5) {
         display: none;
     }
@@ -65,7 +67,7 @@
         }
     }
 }
-@container headerlinks (width < 850px) {
+@container headerlinks (width < 750px) {
     .containerHeaderlinks > :nth-child(n + 6) {
         display: none;
     }

packages/gitbook/src/components/PageAside/PageAside.tsx

@@ -48,8 +48,11 @@ export function PageAside(props: {
                 'group/aside',
                 'hidden',
                 'xl:flex',
+                // 'page-no-toc:lg:flex',
                 'flex-col',
                 'basis-56',
+                // 'page-no-toc:basis-40',
+                // 'page-no-toc:xl:basis-56',
                 'grow-0',
                 'shrink-0',
                 'break-anywhere', // To prevent long words in headings from breaking the layout

packages/gitbook/src/components/PageBody/PageBody.tsx

@@ -47,12 +47,12 @@ export function PageBody(props: {
                         'page-api-block:xl:max-2xl:pr-0',
                         // Max size to ensure one column in api is aligned with rest of content (2 x 3xl) + (gap-3 + 2) * px-12
                         'page-api-block:max-w-[1654px]',
-                        'page-api-block:mx-auto',
+                        'page-api-block:mx-auto'
 
-                        page.layout.tableOfContents ? null : 'xl:ml-56'
+                        // page.layout.tableOfContents ? null : 'xl:ml-56'
                     ) +
-                    (asFullWidth ? ' page-full-width' : '') +
+                    (asFullWidth ? ' page-full-width' : ' page-default-width') +
-                    (!page.layout.tableOfContents ? ' page-no-toc' : '')
+                    (!page.layout.tableOfContents ? ' page-no-toc' : ' page-has-toc')
                 }
             >
                 <PreservePageLayout asFullWidth={asFullWidth} />

packages/gitbook/src/components/PageBody/PageCover.tsx

@@ -32,7 +32,11 @@ export async function PageCover(props: {
                           'sm:-mx-6',
                           'md:-mx-8',
                           '-lg:mr-8',
-                          page.layout.tableOfContents ? 'lg:ml-0' : null,
+                          'lg:ml-0',
+                          !page.layout.tableOfContents &&
+                          context.customization.header.preset !== 'none'
+                              ? 'lg:-ml-64'
+                              : null,
                       ]
                     : ['sm:mx-auto', 'max-w-3xl', 'sm:rounded-md', 'mb-8']
             )}

packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx

@@ -55,7 +55,7 @@ export async function CustomizationRootLayout(props: {
             lang={customization.internationalization.locale}
             className={tcls(
                 customization.header.preset === CustomizationHeaderPreset.None
-                    ? null
+                    ? 'site-header-none'
                     : 'scroll-pt-[76px]', // Take the sticky header in consideration for the scrolling
                 customization.styling.corners === CustomizationCorners.Straight
                     ? ' straight-corners'

packages/gitbook/src/components/Search/SearchButton.tsx

@@ -43,8 +43,8 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV
                 'justify-center',
                 'items-center',
                 'w-full',
-                'px-3',
                 'py-2',
+                'px-3',
                 'gap-2',
 
                 'bg-tint-base',
@@ -81,10 +81,11 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV
                 'contrast-more:focus:ring-tint-12',
 
                 'active:shadow-sm',
-                'active:scale-98',
+                'active:scale-100',
 
                 'md:justify-start',
                 'md:w-full',
+                'text-sm',
                 style
             )}
         >
@@ -99,7 +100,7 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV
 }
 
 const Shortcut = () => {
-    const [operatingSystem, setOperatingSystem] = useState('win');
+    const [operatingSystem, setOperatingSystem] = useState<string | null>(null);
 
     useEffect(() => {
         function getOperatingSystem() {
@@ -114,21 +115,31 @@ const Shortcut = () => {
         setOperatingSystem(getOperatingSystem());
     }, []);
 
-    return (
+    return operatingSystem ? (
         <div
             className={tcls(
                 'shortcut',
                 'hidden',
-                'md:inline',
+                'md:flex',
+                'gap-0.5',
+                '-mr-1',
                 'justify-end',
                 'text-xs',
                 'text-tint',
                 'contrast-more:text-tint-strong',
                 'whitespace-nowrap',
-                `[font-feature-settings:"calt",_"case"]`
+                `[font-feature-settings:"calt",_"case"]`,
+                'animate-fadeIn'
             )}
         >
-            {operatingSystem === 'mac' ? '⌘' : 'Ctrl +'} K
+            <kbd
+                className={`flex h-5 min-w-5 items-center justify-center rounded border border-tint-subtle theme-bold:border-header-link/5 bg-tint-base theme-bold:bg-header-background px-1 ${operatingSystem === 'mac' ? 'text-sm' : ''}`}
+            >
+                {operatingSystem === 'mac' ? '⌘' : 'Ctrl'}
+            </kbd>
+            <kbd className="flex size-5 items-center justify-center rounded border border-tint-subtle theme-bold:border-header-link/5 bg-tint-base theme-bold:bg-header-background">
+                K
+            </kbd>
         </div>
-    );
+    ) : null;
 };

packages/gitbook/src/components/Search/SearchModal.tsx

@@ -84,7 +84,7 @@ export function SearchModal(props: SearchModalProps) {
                             'bg-tint-12/4',
                             'dark:bg-tint-1/6',
                             'backdrop-blur-2xl',
-                            'z-30',
+                            'z-50',
                             'px-4',
                             'pt-4',
                             'md:pt-[min(8vh,6rem)]'

packages/gitbook/src/components/Search/SearchResults.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { captureException } from '@sentry/nextjs';
 import { readStreamableValue } from 'ai/rsc';
 import assertNever from 'assert-never';
 import React from 'react';
@@ -132,12 +131,6 @@ export const SearchResults = React.forwardRef(function SearchResults(
             }
 
             if (!results) {
-                captureException(
-                    new Error(
-                        `corrupt-cache: ${global ? 'searchAllSiteContent' : 'searchSiteSpaceContent'} is ${results}`
-                    ),
-                    { extra: { results } }
-                );
                 setResultsState({ results: [], fetching: false });
                 return;
             }

packages/gitbook/src/components/SiteLayout/SiteLayout.tsx

@@ -12,7 +12,8 @@ import { SpaceLayout } from '@/components/SpaceLayout';
 import { buildVersion } from '@/lib/build';
 import { isSiteIndexable } from '@/lib/seo';
 
-import { GITBOOK_API_URL, GITBOOK_ASSETS_URL } from '@v2/lib/env';
+import { GITBOOK_API_PUBLIC_URL, GITBOOK_ASSETS_URL, GITBOOK_ICONS_URL } from '@v2/lib/env';
+import { getResizedImageURL } from '@v2/lib/images';
 import { ClientContexts } from './ClientContexts';
 import { RocketLoaderDetector } from './RocketLoaderDetector';
 
@@ -31,7 +32,8 @@ export async function SiteLayout(props: {
 
     const { scripts, customization } = context;
 
-    ReactDOM.preconnect(GITBOOK_API_URL);
+    ReactDOM.preconnect(GITBOOK_API_PUBLIC_URL);
+    ReactDOM.preconnect(GITBOOK_ICONS_URL);
     if (GITBOOK_ASSETS_URL) {
         ReactDOM.preconnect(GITBOOK_ASSETS_URL);
     }
@@ -95,33 +97,43 @@ export async function generateSiteLayoutViewport(context: GitBookSiteContext): P
 }
 
 export async function generateSiteLayoutMetadata(context: GitBookSiteContext): Promise<Metadata> {
-    const { site, customization, linker } = context;
+    const { site, customization, linker, imageResizer } = context;
     const customIcon = 'icon' in customization.favicon ? customization.favicon.icon : null;
 
-    return {
+    const faviconSize = 48;
-        title: site.title,
+    const icons = [
-        generator: `GitBook (${buildVersion()})`,
-        icons: {
-            icon: [
         {
-                    url:
+            url: customIcon?.light
-                        customIcon?.light ??
+                ? await getResizedImageURL(imageResizer, customIcon.light, {
-                        linker.toAbsoluteURL(
+                      width: faviconSize,
+                      height: faviconSize,
+                  })
+                : linker.toAbsoluteURL(
                       linker.toPathInContent('~gitbook/icon?size=small&theme=light')
                   ),
             type: 'image/png',
             media: '(prefers-color-scheme: light)',
         },
         {
-                    url:
+            url: customIcon?.dark
-                        customIcon?.dark ??
+                ? await getResizedImageURL(imageResizer, customIcon.dark, {
-                        linker.toAbsoluteURL(
+                      width: faviconSize,
+                      height: faviconSize,
+                  })
+                : linker.toAbsoluteURL(
                       linker.toPathInContent('~gitbook/icon?size=small&theme=dark')
                   ),
             type: 'image/png',
             media: '(prefers-color-scheme: dark)',
         },
-            ],
+    ];
+
+    return {
+        title: site.title,
+        generator: `GitBook (${buildVersion()})`,
+        icons: {
+            icon: icons,
+            apple: icons,
         },
         robots: (await isSiteIndexable(context)) ? 'index, follow' : 'noindex, nofollow',
     };

packages/gitbook/src/components/SitePage/SitePage.tsx

@@ -10,6 +10,7 @@ import { PageBody, PageCover } from '@/components/PageBody';
 import { getPagePath } from '@/lib/pages';
 import { isPageIndexable, isSiteIndexable } from '@/lib/seo';
 
+import { getResizedImageURL } from '@v2/lib/images';
 import { PageClientLayout } from './PageClientLayout';
 import { type PagePathParams, fetchPageData, getPathnameParam, normalizePathname } from './fetch';
 
@@ -118,7 +119,7 @@ export async function generateSitePageMetadata(props: SitePageProps): Promise<Me
     }
 
     const { page, ancestors } = pageTarget;
-    const { site, customization, pages, linker } = context;
+    const { site, customization, pages, linker, imageResizer } = context;
 
     return {
         title: [page.title, site.title].filter(Boolean).join(' | '),
@@ -131,8 +132,12 @@ export async function generateSitePageMetadata(props: SitePageProps): Promise<Me
         },
         openGraph: {
             images: [
-                customization.socialPreview.url ??
+                customization.socialPreview.url
-                    linker.toAbsoluteURL(linker.toPathInContent(`~gitbook/ogimage/${page.id}`)),
+                    ? await getResizedImageURL(imageResizer, customization.socialPreview.url, {
+                          width: 1200,
+                          height: 630,
+                      })
+                    : linker.toAbsoluteURL(linker.toPathInContent(`~gitbook/ogimage/${page.id}`)),
             ],
         },
         robots:

packages/gitbook/src/components/SiteSections/SiteSectionList.tsx

@@ -137,12 +137,13 @@ export function SiteSectionGroupItem(props: {
     return (
         <>
             <button
+                type="button"
                 onClick={(event) => {
                     event.preventDefault();
                     event.stopPropagation();
                     setIsVisible((prev) => !prev);
                 }}
-                className={`group/section-link flex w-full flex-row items-center gap-3 rounded-md straight-corners:rounded-none px-3 py-2 transition-all hover:bg-tint-hover hover:text-tint-strong contrast-more:hover:ring-1 contrast-more:hover:ring-tint ${
+                className={`group/section-link flex w-full flex-row items-center gap-3 rounded-md straight-corners:rounded-none px-3 py-2 text-left transition-all hover:bg-tint-hover hover:text-tint-strong contrast-more:hover:ring-1 contrast-more:hover:ring-tint ${
                     isActiveGroup
                         ? 'font-semibold text-primary hover:bg-primary-hover hover:text-primary-strong contrast-more:text-primary-strong contrast-more:hover:ring-1 contrast-more:hover:ring-primary-hover'
                         : null

packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx

@@ -6,7 +6,6 @@ import React from 'react';
 
 import { Link } from '@/components/primitives';
 import { tcls } from '@/lib/tailwind';
-
 import { SectionIcon } from './SectionIcon';
 import type { ClientSiteSection, ClientSiteSections } from './encodeClientSiteSections';
 
@@ -21,26 +20,27 @@ export function SiteSectionTabs(props: { sections: ClientSiteSections }) {
     } = props;
     const [value, setValue] = React.useState<string | null>();
     const [offset, setOffset] = React.useState<number | null>(null);
-    const scrollableViewRef = React.useRef<HTMLDivElement>(null);
+    const menuContainerRef = React.useRef<HTMLDivElement>(null);
 
     const onNodeUpdate = (trigger: HTMLButtonElement | null, itemValue: string, size = 0) => {
-        const windowWidth = document.documentElement.clientWidth;
-        if (windowWidth < 768) {
-            // if the screen is small don't offset the menu
-            setOffset(0);
-        } else if (trigger && value === itemValue) {
         const padding = 16;
+        const margin = -12; // Offsetting the menu container's negative margin
+        const windowWidth = document.documentElement.clientWidth;
+        const windowBuffer = 16; // constrain to within the window with some buffer on the left and right we don't want the menu to enter
         const viewportWidth =
             size < MIN_ITEMS_FOR_COLS
                 ? VIEWPORT_ITEM_WIDTH + padding
                 : VIEWPORT_ITEM_WIDTH * 2 + padding;
-            const scrollLeft = scrollableViewRef.current?.scrollLeft ?? 0;
+        const minOffset = 0 - (menuContainerRef.current?.offsetLeft ?? 0) + margin;
-            const triggerOffset = trigger.offsetLeft - scrollLeft; // offset of the trigger from the left edge including scrolling
+        const maxOffset = minOffset + windowWidth - viewportWidth;
-            const bufferLeft = 2; // offset the menu viewport should not pass on the left side of window
+
-            const bufferRight = windowWidth - (16 + viewportWidth); // offset the menu viewport should not pass on the right side of the window
+        if (windowWidth < 768) {
+            // if the screen is small don't offset the menu
+            setOffset(minOffset + windowBuffer);
+        } else if (trigger && value === itemValue) {
+            const position = minOffset + trigger?.getBoundingClientRect().left;
             setOffset(
-                // constrain to within the window with some buffer on the left and right we don't want the menu to enter
+                Math.min(maxOffset - windowBuffer, Math.max(minOffset + windowBuffer, position))
-                Math.min(bufferRight, Math.max(bufferLeft, Math.round(triggerOffset)))
             );
         } else if (!value) {
             setOffset(null);
@@ -50,14 +50,16 @@ export function SiteSectionTabs(props: { sections: ClientSiteSections }) {
     return sectionsAndGroups.length > 0 ? (
         <NavigationMenu.Root
             aria-label="Sections"
+            id="sections"
             onValueChange={setValue}
-            className="relative z-10 mx-auto flex w-full max-w-screen-2xl page-full-width:max-w-full flex-nowrap items-center"
+            className="z-10 flex w-full flex-nowrap items-center"
         >
             <div
-                ref={scrollableViewRef}
+                ref={menuContainerRef}
-                className="hide-scroll -mb-4 w-full overflow-y-hidden overflow-x-scroll pb-4" /* Positive padding / negative margin allows the navigation menu indicator to show in a scroll view */
+                className="-mx-3"
+                // className="-mb-4 pb-4" /* Positive padding / negative margin allows the navigation menu indicator to show in a scroll view */
             >
-                <NavigationMenu.List className="center m-0 flex list-none gap-2 bg-transparent px-1 sm:px-3 md:px-5">
+                <NavigationMenu.List className="center m-0 flex list-none gap-2 bg-transparent">
                     {sectionsAndGroups.map((sectionOrGroup) => {
                         const { id, title, icon } = sectionOrGroup;
                         const isGroup = sectionOrGroup.object === 'site-section-group';
@@ -121,11 +123,11 @@ export function SiteSectionTabs(props: { sections: ClientSiteSections }) {
                 className="absolute top-full flex transition-transform duration-200 ease-in-out"
                 style={{
                     display: offset === null ? 'none' : undefined,
-                    transform: offset ? `translateX(${offset}px)` : undefined,
+                    transform: offset ? `translateX(${offset}px) translateZ(0)` : 'translateZ(0)', // TranslateZ is needed to force a stacking context, fixing a rendering bug on Safari
                 }}
             >
                 <NavigationMenu.Viewport
-                    className="relative mt-3 ml-4 h-[var(--radix-navigation-menu-viewport-height)] w-[calc(100vw_-_2rem)] origin-[top_center] overflow-hidden rounded straight-corners:rounded-none bg-tint shadow-1xs shadow-dark/1 duration-250 data-[state=closed]:duration-150 motion-safe:transition-[width,_height,_transform] data-[state=closed]:motion-safe:animate-scaleOut data-[state=open]:motion-safe:animate-scaleIn md:mx-0 md:w-[var(--radix-navigation-menu-viewport-width)] dark:shadow-dark/4"
+                    className="relative mt-3 h-[var(--radix-navigation-menu-viewport-height)] w-[calc(100vw_-_2rem)] origin-[top_center] overflow-hidden rounded straight-corners:rounded-none bg-tint shadow-1xs shadow-dark/1 duration-250 data-[state=closed]:duration-150 motion-safe:transition-[width,_height,_transform] data-[state=closed]:motion-safe:animate-scaleOut data-[state=open]:motion-safe:animate-scaleIn md:mx-0 md:w-[var(--radix-navigation-menu-viewport-width)] dark:shadow-dark/4"
                     style={{
                         translate:
                             undefined /* don't move this to a Tailwind class as Radix renders viewport incorrectly for a few frames */,

packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx

@@ -11,7 +11,7 @@ import { getSpaceLanguage } from '@/intl/server';
 import { t } from '@/intl/translate';
 import { tcls } from '@/lib/tailwind';
 
-import { GITBOOK_APP_URL } from '@v2/lib/env';
+import { GITBOOK_API_PUBLIC_URL, GITBOOK_APP_URL } from '@v2/lib/env';
 import { SpacesDropdown } from '../Header/SpacesDropdown';
 import { InsightsProvider } from '../Insights';
 import { SiteSectionList, encodeClientSiteSections } from '../SiteSections';
@@ -51,7 +51,7 @@ export function SpaceLayout(props: {
             <InsightsProvider
                 enabled={withTracking}
                 appURL={GITBOOK_APP_URL}
-                apiHost={context.dataFetcher.apiEndpoint}
+                apiHost={GITBOOK_API_PUBLIC_URL}
                 visitorAuthToken={visitorAuthToken}
                 organizationId={context.organizationId}
                 siteId={context.site.id}
@@ -85,7 +85,8 @@ export function SpaceLayout(props: {
                                         'lg:flex',
                                         'grow-0',
                                         'flex-wrap',
-                                        'dark:shadow-light/1'
+                                        'dark:shadow-light/1',
+                                        'text-base/tight'
                                     )}
                                 >
                                     <HeaderLogo context={context} />
@@ -106,6 +107,7 @@ export function SpaceLayout(props: {
                                                             ? 'search_or_ask'
                                                             : 'search'
                                                     )}
+                                                    ...
                                                 </span>
                                             </SearchButton>
                                         </React.Suspense>
@@ -122,7 +124,11 @@ export function SpaceLayout(props: {
                                         context={context}
                                         siteSpace={siteSpace}
                                         siteSpaces={siteSpaces}
-                                        className={tcls('w-full')}
+                                        className={tcls(
+                                            'w-full',
+                                            'page-no-toc:hidden',
+                                            'site-header-none:page-no-toc:flex'
+                                        )}
                                     />
                                 )}
                             </>

packages/gitbook/src/components/TableOfContents/TableOfContents.tsx

@@ -21,12 +21,13 @@ export function TableOfContents(props: {
             data-testid="table-of-contents"
             className={tcls(
                 'group',
-                'page-no-toc:hidden',
+                'text-sm',
 
                 'grow-0',
                 'shrink-0',
                 'basis-full',
                 'lg:basis-72',
+                'page-no-toc:lg:basis-56',
 
                 'relative',
                 'z-[1]',
@@ -46,10 +47,14 @@ export function TableOfContents(props: {
                 'pt-6',
                 'pb-4',
                 'sidebar-filled:lg:pr-6',
+                'page-no-toc:lg:pr-0',
 
                 'hidden',
-                'navigation-open:flex',
+                'navigation-open:!flex',
                 'lg:flex',
+                'page-no-toc:lg:hidden',
+                'page-no-toc:xl:flex',
+                'site-header-none:page-no-toc:lg:flex',
                 'flex-col',
                 'gap-4',
 
@@ -73,6 +78,7 @@ export function TableOfContents(props: {
                     'theme-bold-tint:bg-tint-subtle',
                     '[html.sidebar-filled.theme-muted_&]:bg-tint-base',
                     '[html.sidebar-filled.theme-bold.tint_&]:bg-tint-base',
+                    'page-no-toc:!bg-transparent',
 
                     'sidebar-filled:rounded-xl',
                     'straight-corners:rounded-none'
@@ -101,7 +107,11 @@ export function TableOfContents(props: {
                         rootPages={pages}
                         pages={pages}
                         context={context}
-                        style={tcls('sidebar-list-line:border-l', 'border-tint-subtle')}
+                        style={tcls(
+                            'page-no-toc:hidden',
+                            'sidebar-list-line:border-l',
+                            'border-tint-subtle'
+                        )}
                     />
                     {customization.trademark.enabled ? (
                         <Trademark

packages/gitbook/src/components/TableOfContents/Trademark.tsx

@@ -25,7 +25,6 @@ export function Trademark(props: {
                 'relative',
                 'z-[2]',
                 'lg:absolute',
-                'mt-6',
 
                 'left-0',
                 'right-2',
@@ -34,6 +33,7 @@ export function Trademark(props: {
                 'pointer-events-none',
                 'sidebar-filled:pl-2',
                 'sidebar-filled:pb-2',
+                'sidebar-filled:page-no-toc:p-0',
 
                 'bg-tint-base',
                 'sidebar-filled:bg-tint-subtle',
@@ -55,7 +55,8 @@ export function Trademark(props: {
                 'theme-muted:before:to-tint-subtle',
                 'theme-bold-tint:before:to-tint-subtle',
                 '[html.sidebar-filled.theme-muted_&]:before:to-tint-base',
-                '[html.sidebar-filled.theme-bold.tint_&]:before:to-tint-base'
+                '[html.sidebar-filled.theme-bold.tint_&]:before:to-tint-base',
+                'page-no-toc:before:!to-transparent'
             )}
         >
             <TrademarkLink {...props} />
@@ -85,6 +86,9 @@ export function TrademarkLink(props: {
             href={url.toString()}
             className={tcls(
                 'text-sm',
+                // 'page-no-toc:lg:max-xl:text-xs',
+                // 'page-no-toc:lg:max-xl:px-3',
+                // 'page-no-toc:lg:max-xl:py-3',
                 'font-semibold',
                 'text-tint',
 
@@ -93,7 +97,9 @@ export function TrademarkLink(props: {
                 'items-center',
                 'px-5',
                 'py-4',
+
                 'sidebar-filled:px-3',
+                'sidebar-filled:page-no-toc:lg:px-5',
 
                 'rounded-lg',
                 'straight-corners:rounded-none',
@@ -114,8 +120,22 @@ export function TrademarkLink(props: {
                 placement,
             }}
         >
-            <Icon icon="gitbook" className={tcls('size-5', 'mr-3')} />
+            <Icon
+                icon="gitbook"
+                className={tcls(
+                    'size-5',
+                    // 'page-no-toc:lg:max-xl:size-4',
+                    'shrink-0'
+                )}
+            />
+            <span
+                className={tcls(
+                    'ml-3'
+                    // 'page-no-toc:lg:max-xl:ml-2'
+                )}
+            >
                 {t(language, 'powered_by_gitbook')}
+            </span>
         </Link>
     );
 }

packages/gitbook/src/components/primitives/StyledLink.tsx

@@ -13,13 +13,13 @@ export function StyledLink(props: Omit<LinkProps, 'style'> & { style?: ClassValu
             {...rest}
             className={tcls(
                 'underline',
-                'decoration-from-font',
+                'decoration-[max(0.07em,1px)]', // Set the underline to be proportional to the font size, with a minimum. The default is too thin.
                 'underline-offset-2',
                 'links-accent:underline-offset-4',
 
                 'links-default:decoration-primary/6',
                 'links-default:text-primary-subtle',
-                'links-default:hover:text-primary',
+                'links-default:hover:text-primary-strong',
                 'links-default:contrast-more:text-primary',
                 'links-default:contrast-more:hover:text-primary-strong',
 

packages/gitbook/src/fonts/index.ts

@@ -1,4 +1,4 @@
-import { CustomizationFont } from '@gitbook/api';
+import { CustomizationDefaultFont } from '@gitbook/api';
 import {
     Fira_Sans_Extra_Condensed,
     IBM_Plex_Mono,
@@ -188,20 +188,20 @@ const abcFavorit = localFont({
 /**
  * Font definitions.
  */
-export const fonts: { [fontName in CustomizationFont]: { variable: string } } = {
+export const fonts: { [fontName in CustomizationDefaultFont]: { variable: string } } = {
-    [CustomizationFont.Inter]: inter,
+    [CustomizationDefaultFont.Inter]: inter,
-    [CustomizationFont.FiraSans]: firaSans,
+    [CustomizationDefaultFont.FiraSans]: firaSans,
-    [CustomizationFont.IBMPlexSerif]: ibmPlexSerif,
+    [CustomizationDefaultFont.IBMPlexSerif]: ibmPlexSerif,
-    [CustomizationFont.Lato]: lato,
+    [CustomizationDefaultFont.Lato]: lato,
-    [CustomizationFont.Merriweather]: merriweather,
+    [CustomizationDefaultFont.Merriweather]: merriweather,
-    [CustomizationFont.NotoSans]: notoSans,
+    [CustomizationDefaultFont.NotoSans]: notoSans,
-    [CustomizationFont.OpenSans]: openSans,
+    [CustomizationDefaultFont.OpenSans]: openSans,
-    [CustomizationFont.Overpass]: overpass,
+    [CustomizationDefaultFont.Overpass]: overpass,
-    [CustomizationFont.Poppins]: poppins,
+    [CustomizationDefaultFont.Poppins]: poppins,
-    [CustomizationFont.Raleway]: raleway,
+    [CustomizationDefaultFont.Raleway]: raleway,
-    [CustomizationFont.Roboto]: roboto,
+    [CustomizationDefaultFont.Roboto]: roboto,
-    [CustomizationFont.RobotoSlab]: robotoSlab,
+    [CustomizationDefaultFont.RobotoSlab]: robotoSlab,
-    [CustomizationFont.SourceSansPro]: sourceSansPro,
+    [CustomizationDefaultFont.SourceSansPro]: sourceSansPro,
-    [CustomizationFont.Ubuntu]: ubuntu,
+    [CustomizationDefaultFont.Ubuntu]: ubuntu,
-    [CustomizationFont.ABCFavorit]: abcFavorit,
+    [CustomizationDefaultFont.ABCFavorit]: abcFavorit,
 };

packages/gitbook/src/lib/api.ts

@@ -1,5 +1,9 @@
 import { AsyncLocalStorage } from 'node:async_hooks';
-import { getCacheTag, getComputedContentSourceCacheTags } from '@gitbook/cache-tags';
+import {
+    getCacheTag,
+    getCacheTagForURL,
+    getComputedContentSourceCacheTags,
+} from '@gitbook/cache-tags';
 import 'server-only';
 
 import {
@@ -174,6 +178,7 @@ export const getUserById = cache({
             tag: 'user',
             user: userId,
         }),
+    tagImmutable: true,
     get: async (userId: string, options: CacheFunctionOptions) => {
         try {
             const apiCtx = await api();
@@ -238,11 +243,7 @@ export const getLatestOpenAPISpecVersionContent = cache({
  */
 export const getPublishedContentByUrl = cache({
     name: 'api.getPublishedContentByUrl.v4',
-    tag: (url) =>
+    tag: (url) => getCacheTagForURL(url),
-        getCacheTag({
-            tag: 'url',
-            hostname: new URL(url).hostname,
-        }),
     get: async (
         url: string,
         visitorAuthToken: string | undefined,
@@ -379,6 +380,7 @@ export const getRevision = cache({
     name: 'api.getRevision.v2',
     tag: (spaceId, revisionId) =>
         getCacheTag({ tag: 'revision', space: spaceId, revision: revisionId }),
+    tagImmutable: true,
     getKeySuffix: getAPIContextId,
     get: async (
         spaceId: string,
@@ -411,6 +413,7 @@ export const getRevisionPages = cache({
     name: 'api.getRevisionPages.v4',
     tag: (spaceId, revisionId) =>
         getCacheTag({ tag: 'revision', space: spaceId, revision: revisionId }),
+    tagImmutable: true,
     getKeySuffix: getAPIContextId,
     get: async (
         spaceId: string,
@@ -446,6 +449,7 @@ export const getRevisionPageByPath = cache({
     name: 'api.getRevisionPageByPath.v3',
     tag: (spaceId, revisionId) =>
         getCacheTag({ tag: 'revision', space: spaceId, revision: revisionId }),
+    tagImmutable: true,
     getKeySuffix: getAPIContextId,
     get: async (
         spaceId: string,
@@ -492,6 +496,7 @@ const getRevisionFileById = cache({
     name: 'api.getRevisionFile.v3',
     tag: (spaceId, revisionId) =>
         getCacheTag({ tag: 'revision', space: spaceId, revision: revisionId }),
+    tagImmutable: true,
     get: async (
         spaceId: string,
         revisionId: string,
@@ -528,6 +533,7 @@ const getRevisionReusableContentById = cache({
     name: 'api.getRevisionReusableContentById.v1',
     tag: (spaceId, revisionId) =>
         getCacheTag({ tag: 'revision', space: spaceId, revision: revisionId }),
+    tagImmutable: true,
     getKeySuffix: getAPIContextId,
     get: async (
         spaceId: string,
@@ -569,6 +575,7 @@ const getRevisionAllFiles = cache({
     name: 'api.getRevisionAllFiles.v2',
     tag: (spaceId, revisionId) =>
         getCacheTag({ tag: 'revision', space: spaceId, revision: revisionId }),
+    tagImmutable: true,
     get: async (spaceId: string, revisionId: string, options: CacheFunctionOptions) => {
         const response = await getAll(
             async (params) => {
@@ -684,6 +691,7 @@ export const getDocument = cache({
     name: 'api.getDocument.v2',
     tag: (spaceId, documentId) =>
         getCacheTag({ tag: 'document', space: spaceId, document: documentId }),
+    tagImmutable: true,
     getKeySuffix: getAPIContextId,
     get: async (spaceId: string, documentId: string, options: CacheFunctionOptions) => {
         const apiCtx = await api();

packages/gitbook/src/lib/async.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'bun:test';
 
-import { asyncMutexFunction, race } from './async';
+import { race } from './async';
 import { flushWaitUntil } from './waitUntil';
 
 describe('race', () => {
@@ -380,88 +380,3 @@ describe('race', () => {
         });
     });
 });
-
-describe('asyncMutexFunction', () => {
-    describe('self', () => {
-        it('should run only once', async () => {
-            let running = 0;
-
-            const fn = async () => {
-                running += 1;
-
-                await new Promise((resolve) => setTimeout(resolve, 10));
-            };
-
-            const mutexFn = asyncMutexFunction();
-
-            await Promise.all([
-                mutexFn(fn),
-                mutexFn(fn),
-                mutexFn(fn),
-                mutexFn(fn),
-                mutexFn(fn),
-                mutexFn(fn),
-            ]);
-
-            expect(running).toBe(1);
-        });
-    });
-
-    describe('runBlocking', () => {
-        it('should run only one function at a time', async () => {
-            let running = 0;
-            let maxRunning = 0;
-
-            const fn = async () => {
-                running += 1;
-                maxRunning = Math.max(running, maxRunning);
-
-                await new Promise((resolve) => setTimeout(resolve, 10));
-
-                running -= 1;
-            };
-
-            const mutexFn = asyncMutexFunction();
-
-            await Promise.all([
-                mutexFn.runBlocking(fn),
-                mutexFn.runBlocking(fn),
-                mutexFn.runBlocking(fn),
-                mutexFn.runBlocking(fn),
-                mutexFn.runBlocking(fn),
-                mutexFn.runBlocking(fn),
-            ]);
-
-            expect(maxRunning).toBe(1);
-        });
-    });
-
-    describe('runAfter', () => {
-        it('should run only one function at a time', async () => {
-            let running = 0;
-            let maxRunning = 0;
-
-            const fn = async () => {
-                running += 1;
-                maxRunning = Math.max(running, maxRunning);
-
-                await new Promise((resolve) => setTimeout(resolve, 10));
-
-                running -= 1;
-            };
-
-            const mutexFn = asyncMutexFunction();
-
-            await Promise.all([
-                mutexFn.runAfter(fn),
-                mutexFn.runAfter(fn),
-                mutexFn.runAfter(fn),
-                mutexFn.runAfter(fn),
-                mutexFn.runAfter(fn),
-                mutexFn.runAfter(fn),
-            ]);
-
-            expect(maxRunning).toBe(1);
-        });
-    });
-});

packages/gitbook/src/lib/async.ts

@@ -388,87 +388,6 @@ export type AsyncMutexFunction<T> = ((fn: () => Promise<T>) => Promise<T>) & {
     ) => Promise<ReturnType>;
 };
 
-/**
- * Creates a function that will only call the given function once at a time.
- */
-export function asyncMutexFunction<T>(): AsyncMutexFunction<T> {
-    let pending:
-        | undefined
-        | { kind: 'value'; promise: Promise<T> }
-        | { kind: 'blocking'; promise: Promise<unknown> };
-
-    const mutex: AsyncMutexFunction<T> = async (fn) => {
-        if (pending?.kind === 'value') {
-            return pending.promise;
-        }
-
-        while (pending) {
-            await pending.promise;
-        }
-
-        const promise = fn();
-        pending = { kind: 'value', promise };
-        try {
-            const result = await promise;
-            return result;
-        } finally {
-            pending = undefined;
-        }
-    };
-
-    mutex.wait = async () => {
-        return pending?.promise;
-    };
-
-    mutex.runBlocking = async (fn, options) => {
-        const failOnMutexError = options?.failOnMutexError ?? true;
-
-        while (pending) {
-            try {
-                await pending.promise;
-            } catch (err) {
-                if (failOnMutexError) {
-                    throw err;
-                }
-            }
-        }
-
-        const promise = fn();
-        pending = { kind: 'blocking', promise };
-        try {
-            const result = await promise;
-            return result;
-        } finally {
-            pending = undefined;
-        }
-    };
-
-    mutex.runAfter = async (fn, options) => {
-        const failOnMutexError = options?.failOnMutexError ?? true;
-
-        while (pending) {
-            try {
-                await pending.promise;
-            } catch (err) {
-                if (failOnMutexError) {
-                    throw err;
-                }
-            }
-        }
-
-        const promise = fn();
-        pending = { kind: 'value', promise };
-        try {
-            const result = await pending.promise;
-            return result;
-        } finally {
-            pending = undefined;
-        }
-    };
-
-    return mutex;
-}
-
 /**
  * Try catch a promise and return the result or the error.
  */

packages/gitbook/src/lib/cache/cache.ts

@@ -1,12 +1,12 @@
 import hash from 'object-hash';
 
-import { captureException } from '../../sentry';
 import { race, singletonMap } from '../async';
 import { type TraceSpan, trace } from '../tracing';
 import { assertIsNotV2 } from '../v2';
 import { waitUntil } from '../waitUntil';
 import { cacheBackends } from './backends';
 import { memoryCache } from './memory';
+import { addResponseCacheTag } from './response';
 import type { CacheBackend, CacheEntry } from './types';
 
 export type CacheFunctionOptions = {
@@ -54,6 +54,9 @@ export interface CacheDefinition<Args extends any[], Result> {
     /** Tag to associate to the entry */
     tag?: (...args: Args) => string;
 
+    /** If true, the tag will not be sent to the HTTP response, as we consider it immutable */
+    tagImmutable?: boolean;
+
     /** Filter the arguments that should be taken into consideration for the cache key */
     getKeyArgs?: (args: Args) => any[];
 
@@ -134,6 +137,11 @@ export function cache<Args extends any[], Result>(
             let result: readonly [CacheEntry, string] | null = null;
             const tag = cacheDef.tag?.(...args);
 
+            // Add the cache tag to the HTTP response
+            if (tag && !cacheDef.tagImmutable) {
+                addResponseCacheTag(tag);
+            }
+
             // Try the memory backend, independently of the other backends as it doesn't have a network cost
             const memoryEntry = await memoryCache.get({ key, tag });
             if (memoryEntry) {
@@ -150,17 +158,11 @@ export function cache<Args extends any[], Result>(
                         }
 
                         // Detect empty cache entries to avoid returning them.
-                        // Also log in Sentry to investigate what cache is returning empty entries.
                         if (
                             entry.data &&
                             typeof entry.data === 'object' &&
                             Object.keys(entry.data).length === 0
                         ) {
-                            captureException(
-                                new Error(
-                                    `Cache entry ${key} from ${backendName} is an empty object`
-                                )
-                            );
                             return null;
                         }
 

packages/gitbook/src/lib/cache/response.ts

@@ -0,0 +1,44 @@
+import { AsyncLocalStorage } from 'node:async_hooks';
+
+const symbolResponseCacheTagsLocalStorage = Symbol.for('__gitbook-response-cache-tags__');
+
+/**
+ * Wrap a response handler with a storage to store cache tags and write them as header to the response.
+ */
+export async function withResponseCacheTags(handler: () => Promise<Response>): Promise<Response> {
+    const responseCacheTagsLocalStorage =
+        // @ts-ignore
+        (globalThis[symbolResponseCacheTagsLocalStorage] as AsyncLocalStorage<Set<string>>) ??
+        new AsyncLocalStorage<Set<string>>();
+    // @ts-ignore
+    globalThis[symbolResponseCacheTagsLocalStorage] = responseCacheTagsLocalStorage;
+
+    const responseCacheTags = new Set<string>();
+    const response = await responseCacheTagsLocalStorage.run(responseCacheTags, handler);
+
+    if (responseCacheTags.size > 0) {
+        const headerCacheTag = Array.from(responseCacheTags).join(',');
+        response.headers.set('cache-tag', headerCacheTag);
+        response.headers.set('x-gitbook-cache-tag', headerCacheTag);
+    }
+
+    return response;
+}
+
+/**
+ * Add a cache tag to the HTTP response.
+ * This is a hack for v1, for v2, we use ISR and do not cache the whole response.
+ */
+export function addResponseCacheTag(...tags: string[]) {
+    const responseCacheTagsLocalStorage =
+        // @ts-ignore
+        (globalThis[symbolResponseCacheTagsLocalStorage] as AsyncLocalStorage<Set<string>>) ??
+        new AsyncLocalStorage<Set<string>>();
+    // @ts-ignore
+    globalThis[symbolResponseCacheTagsLocalStorage] = responseCacheTagsLocalStorage;
+
+    const store = responseCacheTagsLocalStorage.getStore();
+    tags.forEach((tag) => {
+        store?.add(tag);
+    });
+}

packages/gitbook/src/lib/middleware.ts

@@ -1,5 +1,9 @@
 import { AsyncLocalStorage } from 'node:async_hooks';
 
+/*
+ * This code is ONLY for v1.
+ */
+
 /**
  * Set a header on the middleware response.
  * We do this because of https://github.com/opennextjs/opennextjs-cloudflare/issues/92

packages/gitbook/src/lib/openapi/fetch.ts

@@ -1,18 +1,24 @@
 import { parseOpenAPI } from '@gitbook/openapi-parser';
 
 import { type CacheFunctionOptions, cache, noCacheFetchOptions } from '@/lib/cache';
-import type { ResolveOpenAPIBlockArgs } from '@/lib/openapi/types';
+import type {
+    AnyOpenAPIOperationsBlock,
+    OpenAPISchemasBlock,
+    ResolveOpenAPIBlockArgs,
+} from '@/lib/openapi/types';
 import { assert } from 'ts-essentials';
 import { resolveContentRef } from '../references';
 import { isV2 } from '../v2';
 import { enrichFilesystem } from './enrich';
 import type { FetchOpenAPIFilesystemResult } from './types';
 
+type AnyOpenAPIBlock = AnyOpenAPIOperationsBlock | OpenAPISchemasBlock;
+
 /**
  * Fetch OpenAPI block.
  */
 export async function fetchOpenAPIFilesystem(
-    args: ResolveOpenAPIBlockArgs
+    args: ResolveOpenAPIBlockArgs<AnyOpenAPIBlock>
 ): Promise<FetchOpenAPIFilesystemResult> {
     const { context, block } = args;
 

packages/gitbook/src/lib/openapi/resolveOpenAPIOperationBlock.ts

@@ -1,18 +1,25 @@
 import { fetchOpenAPIFilesystem } from '@/lib/openapi/fetch';
 import { OpenAPIParseError } from '@gitbook/openapi-parser';
 import { type OpenAPIOperationData, resolveOpenAPIOperation } from '@gitbook/react-openapi';
-import type { AnyOpenAPIBlock, ResolveOpenAPIBlockArgs, ResolveOpenAPIBlockResult } from './types';
+import type {
+    AnyOpenAPIOperationsBlock,
+    ResolveOpenAPIBlockArgs,
+    ResolveOpenAPIBlockResult,
+} from './types';
 
 type ResolveOpenAPIOperationBlockResult = ResolveOpenAPIBlockResult<OpenAPIOperationData>;
 
-const weakmap = new WeakMap<AnyOpenAPIBlock, Promise<ResolveOpenAPIOperationBlockResult>>();
+const weakmap = new WeakMap<
+    AnyOpenAPIOperationsBlock,
+    Promise<ResolveOpenAPIOperationBlockResult>
+>();
 
 /**
  * Cache the result of resolving an OpenAPI block.
  * It is important because the resolve is called in sections and in the block itself.
  */
 export function resolveOpenAPIOperationBlock(
-    args: ResolveOpenAPIBlockArgs
+    args: ResolveOpenAPIBlockArgs<AnyOpenAPIOperationsBlock>
 ): Promise<ResolveOpenAPIOperationBlockResult> {
     if (weakmap.has(args.block)) {
         return weakmap.get(args.block)!;
@@ -27,7 +34,7 @@ export function resolveOpenAPIOperationBlock(
  * Resolve OpenAPI operation block.
  */
 async function baseResolveOpenAPIOperationBlock(
-    args: ResolveOpenAPIBlockArgs
+    args: ResolveOpenAPIBlockArgs<AnyOpenAPIOperationsBlock>
 ): Promise<ResolveOpenAPIOperationBlockResult> {
     const { context, block } = args;
     if (!block.data.path || !block.data.method) {

packages/gitbook/src/lib/openapi/resolveOpenAPISchemasBlock.ts

@@ -1,19 +1,22 @@
-import { fetchOpenAPIFilesystem } from '@/lib/openapi/fetch';
-import type { ResolveOpenAPIBlockResult } from '@/lib/openapi/types';
 import { OpenAPIParseError } from '@gitbook/openapi-parser';
 import { type OpenAPISchemasData, resolveOpenAPISchemas } from '@gitbook/react-openapi';
-import type { AnyOpenAPIBlock, ResolveOpenAPIBlockArgs } from './types';
+import { fetchOpenAPIFilesystem } from './fetch';
+import type {
+    OpenAPISchemasBlock,
+    ResolveOpenAPIBlockArgs,
+    ResolveOpenAPIBlockResult,
+} from './types';
 
 type ResolveOpenAPISchemasBlockResult = ResolveOpenAPIBlockResult<OpenAPISchemasData>;
 
-const weakmap = new WeakMap<AnyOpenAPIBlock, Promise<ResolveOpenAPISchemasBlockResult>>();
+const weakmap = new WeakMap<OpenAPISchemasBlock, Promise<ResolveOpenAPISchemasBlockResult>>();
 
 /**
  * Cache the result of resolving an OpenAPI block.
  * It is important because the resolve is called in sections and in the block itself.
  */
 export function resolveOpenAPISchemasBlock(
-    args: ResolveOpenAPIBlockArgs
+    args: ResolveOpenAPIBlockArgs<OpenAPISchemasBlock>
 ): Promise<ResolveOpenAPISchemasBlockResult> {
     if (weakmap.has(args.block)) {
         return weakmap.get(args.block)!;
@@ -28,10 +31,10 @@ export function resolveOpenAPISchemasBlock(
  * Resolve OpenAPI schemas block.
  */
 async function baseResolveOpenAPISchemasBlock(
-    args: ResolveOpenAPIBlockArgs
+    args: ResolveOpenAPIBlockArgs<OpenAPISchemasBlock>
 ): Promise<ResolveOpenAPISchemasBlockResult> {
     const { context, block } = args;
-    if (!block.data.path || !block.data.method) {
+    if (!block.data.schemas || !block.data.schemas.length) {
         return { data: null, specUrl: null };
     }
 
@@ -42,7 +45,9 @@ async function baseResolveOpenAPISchemasBlock(
             return { data: null, specUrl: null };
         }
 
-        const data = await resolveOpenAPISchemas(filesystem);
+        const data = await resolveOpenAPISchemas(filesystem, {
+            schemas: block.data.schemas,
+        });
 
         return { data, specUrl };
     } catch (error) {

packages/gitbook/src/lib/openapi/types.ts

@@ -1,15 +1,26 @@
-import type { DocumentBlockOpenAPI, DocumentBlockOpenAPIOperation } from '@gitbook/api';
+import type {
+    DocumentBlockOpenAPI,
+    DocumentBlockOpenAPIOperation,
+    DocumentBlockOpenAPISchemas,
+} from '@gitbook/api';
 import type { Filesystem, OpenAPIParseError, OpenAPIV3xDocument } from '@gitbook/openapi-parser';
 import type { GitBookAnyContext } from '@v2/lib/context';
 
-//!!TODO: Add DocumentBlockOpenAPISchemas when available in @gitbook/api
+/**
-export type AnyOpenAPIBlock = DocumentBlockOpenAPI | DocumentBlockOpenAPIOperation;
+ * Type for both OpenAPI & OpenAPIOperation block
+ */
+export type AnyOpenAPIOperationsBlock = DocumentBlockOpenAPI | DocumentBlockOpenAPIOperation;
+
+/**
+ * Type for OpenAPI Schemas block
+ */
+export type OpenAPISchemasBlock = DocumentBlockOpenAPISchemas;
 
 /**
  * Arguments for resolving OpenAPI block.
  */
-export type ResolveOpenAPIBlockArgs = {
+export type ResolveOpenAPIBlockArgs<T> = {
-    block: AnyOpenAPIBlock;
+    block: T;
     context: GitBookAnyContext;
 };
 

packages/gitbook/src/lib/tracing.ts

@@ -1,5 +1,3 @@
-import { startSpan } from '@sentry/nextjs';
-
 export interface TraceSpan {
     setAttribute: (label: string, value: boolean | string | number) => void;
 }
@@ -22,17 +20,10 @@ export async function trace<T>(
         typeof name === 'string' ? { operation: name, name: undefined } : name;
     const completeName = executionName ? `${operation}(${executionName})` : operation;
 
-    return await startSpan(
-        {
-            name: completeName,
-            op: operation,
-        },
-        async (sentrySpan) => {
     const attributes: Record<string, boolean | string | number> = {};
     const span: TraceSpan = {
         setAttribute(label, value) {
             attributes[label] = value;
-                    sentrySpan?.setAttribute(label, value);
         },
     };
 
@@ -49,8 +40,6 @@ export async function trace<T>(
             console.log(`trace ${completeName} ${end - start}ms`, attributes);
         }
     }
-        }
-    );
 }
 
 /**

packages/gitbook/src/lib/utils.ts

@@ -15,7 +15,7 @@ export function defaultCustomizationForSpace(): api.CustomizationSettings {
                 light: '#346DDB',
             },
             corners: api.CustomizationCorners.Rounded,
-            font: api.CustomizationFont.Inter,
+            font: api.CustomizationDefaultFont.Inter,
             background: api.CustomizationBackground.Plain,
         },
         favicon: {},

packages/gitbook/src/lib/visitor-token.test.ts

@@ -1,7 +1,9 @@
 import { describe, expect, it } from 'bun:test';
 import type { NextRequest } from 'next/server';
 
+import type { JwtPayload } from 'jwt-decode';
 import {
+    getVisitorAuthCookieMaxAge,
     getVisitorAuthCookieName,
     getVisitorAuthCookieValue,
     getVisitorToken,
@@ -74,6 +76,47 @@ describe('getVisitorAuthToken', () => {
     });
 });
 
+describe('getVisitorAuthCookieMaxAge', () => {
+    const ONE_MINUTE_IN_SECONDS = 60;
+
+    it('returns the max age of 7 days if token expires in 7 days', () => {
+        const SEVEN_DAYS_IN_SECONDS = 7 * 24 * 60 * 60;
+        const now = Math.floor(Date.now() / 1000);
+        const decoded: JwtPayload = { exp: now + SEVEN_DAYS_IN_SECONDS };
+
+        expect(getVisitorAuthCookieMaxAge(decoded)).toBe(SEVEN_DAYS_IN_SECONDS);
+    });
+
+    it('returns the max age of 30 days if token expires in 30 days', () => {
+        const THIRTY_DAYS_IN_SECONDS = 30 * 24 * 60 * 60;
+        const now = Math.floor(Date.now() / 1000);
+        const decoded: JwtPayload = { exp: now + THIRTY_DAYS_IN_SECONDS };
+
+        expect(getVisitorAuthCookieMaxAge(decoded)).toBe(THIRTY_DAYS_IN_SECONDS);
+    });
+
+    it('returns the minimum max age of 60 seconds if token has already expired', () => {
+        const now = Math.floor(Date.now() / 1000);
+        const decoded: JwtPayload = { exp: now - 1000 };
+
+        expect(getVisitorAuthCookieMaxAge(decoded)).toBe(ONE_MINUTE_IN_SECONDS);
+    });
+
+    it('returns the minimum max age of 60 seconds if token expires in less than 60 seconds', () => {
+        const now = Math.floor(Date.now() / 1000);
+        const decoded: JwtPayload = { exp: now + 30 }; // Expires in 30 seconds
+
+        expect(getVisitorAuthCookieMaxAge(decoded)).toBe(ONE_MINUTE_IN_SECONDS);
+    });
+
+    it('returns the correct value if expiry is in the future but more than 60 seconds', () => {
+        const now = Math.floor(Date.now() / 1000);
+        const decoded: JwtPayload = { exp: now + 300 }; // Expires in 5 minutes
+
+        expect(getVisitorAuthCookieMaxAge(decoded)).toBe(300);
+    });
+});
+
 function assertVisitorAuthCookieValue(
     value: unknown
 ): asserts value is { source: 'visitor-auth-cookie'; basePath: string; token: string } {

packages/gitbook/src/lib/visitor-token.ts

@@ -238,13 +238,13 @@ function findVisitorAuthCookieForBasePath(
  * We want to store the token for as long as it's valid, but at least 1 minute.
  * If an invalid token is passed to the API, the API will return a redirect to the auth flow.
  */
-function getVisitorAuthCookieMaxAge(decoded: JwtPayload): number {
+export function getVisitorAuthCookieMaxAge(decoded: JwtPayload): number {
     const defaultMaxAge = 7 * 24 * 60 * 60; // 7 days
     const minMaxAge = 60; // 1 min
     const exp = decoded.exp;
 
     if (typeof exp === 'number') {
-        const now = new Date().getTime();
+        const now = Math.floor(new Date().getTime() / 1000);
         return Math.max(exp - now, minMaxAge);
     }
 

packages/gitbook/src/middleware.ts

@@ -1,5 +1,4 @@
 import { type ContentAPITokenPayload, CustomizationThemeMode, GitBookAPI } from '@gitbook/api';
-import { setContext, setTag } from '@sentry/nextjs';
 import { getURLLookupAlternatives, normalizeURL } from '@v2/lib/data';
 import assertNever from 'assert-never';
 import jwt from 'jsonwebtoken';
@@ -33,6 +32,7 @@ import {
 import { joinPath, normalizePathname } from '@/lib/paths';
 import { getProxyModeBasePath } from '@/lib/proxy';
 import { MiddlewareHeaders } from '@v2/lib/middleware';
+import { addResponseCacheTag } from './lib/cache/response';
 
 export const config = {
     matcher:
@@ -95,14 +95,6 @@ export async function middleware(request: NextRequest) {
     const { url, mode } = getInputURL(request);
     const isServerAction = request.headers.has('Next-Action');
 
-    setTag('url', url.toString());
-    setContext('request', {
-        method: request.method,
-        url: url.toString(),
-        rawRequestURL: request.url,
-        userAgent: userAgent(),
-    });
-
     // Redirect to normalize the URL
     const normalized = normalizeURL(url);
     if (normalized.toString() !== url.toString()) {
@@ -147,14 +139,6 @@ export async function middleware(request: NextRequest) {
         return writeCookies(NextResponse.redirect(normalizedVA.toString()), resolved.cookies);
     }
 
-    setTag('space', resolved.space);
-    setContext('content', {
-        space: resolved.space,
-        changeRequest: resolved.changeRequest,
-        revision: resolved.revision,
-        ...('site' in resolved ? { site: resolved.site, siteSpace: resolved.siteSpace } : {}),
-    });
-
     // Because of how Next will encode, we need to encode ourselves the pathname before rewriting to it.
     const rewritePathname = normalizePathname(encodePathname(resolved.pathname));
 
@@ -287,10 +271,8 @@ export async function middleware(request: NextRequest) {
         }
     }
 
-    if (resolved.cacheTags && resolved.cacheTags.length > 0) {
+    if (resolved.cacheTags) {
-        const headerCacheTag = resolved.cacheTags.join(',');
+        addResponseCacheTag(...resolved.cacheTags);
-        setMiddlewareHeader(response, 'cache-tag', headerCacheTag);
-        setMiddlewareHeader(response, 'x-gitbook-cache-tag', headerCacheTag);
     }
 
     return response;

packages/gitbook/src/routes/icon.tsx

@@ -1,9 +1,10 @@
-import { notFound } from 'next/navigation';
+import { notFound, redirect } from 'next/navigation';
 import { ImageResponse } from 'next/og';
 
 import { getEmojiForCode } from '@/lib/emojis';
 import { tcls } from '@/lib/tailwind';
 import type { GitBookSiteContext } from '@v2/lib/context';
+import { getResizedImageURL } from '@v2/lib/images';
 
 const SIZES = {
     /** Size for a favicon */
@@ -25,11 +26,24 @@ const SIZES = {
 /**
  * Generate an icon for a site content.
  */
-export function serveIcon(context: GitBookSiteContext, req: Request) {
+export async function serveIcon(context: GitBookSiteContext, req: Request) {
     const options = getOptions(req.url);
     const size = SIZES[options.size];
 
     const { site, customization } = context;
+    const customIcon = 'icon' in customization.favicon ? customization.favicon.icon : null;
+
+    // If the site has a custom icon, redirect to it
+    if (customIcon) {
+        const iconUrl = options.theme === 'light' ? customIcon.light : customIcon.dark;
+        redirect(
+            await getResizedImageURL(context.imageResizer, iconUrl, {
+                width: size.width,
+                height: size.height,
+            })
+        );
+    }
+
     const contentTitle = site.title;
 
     return new ImageResponse(

packages/gitbook/src/routes/ogimage.tsx

@@ -1,4 +1,4 @@
-import { CustomizationFont, CustomizationHeaderPreset } from '@gitbook/api';
+import { CustomizationDefaultFont, CustomizationHeaderPreset } from '@gitbook/api';
 import { colorContrast } from '@gitbook/colors';
 import { redirect } from 'next/navigation';
 import { ImageResponse } from 'next/og';
@@ -7,23 +7,24 @@ import { type PageParams, fetchPageData } from '@/components/SitePage';
 import { getAssetURL } from '@/lib/assets';
 import { filterOutNullable } from '@/lib/typescript';
 import type { GitBookSiteContext } from '@v2/lib/context';
+import { getResizedImageURL } from '@v2/lib/images';
 
-const googleFontsMap: { [fontName in CustomizationFont]: string } = {
+const googleFontsMap: { [fontName in CustomizationDefaultFont]: string } = {
-    [CustomizationFont.Inter]: 'Inter',
+    [CustomizationDefaultFont.Inter]: 'Inter',
-    [CustomizationFont.FiraSans]: 'Fira Sans Extra Condensed',
+    [CustomizationDefaultFont.FiraSans]: 'Fira Sans Extra Condensed',
-    [CustomizationFont.IBMPlexSerif]: 'IBM Plex Serif',
+    [CustomizationDefaultFont.IBMPlexSerif]: 'IBM Plex Serif',
-    [CustomizationFont.Lato]: 'Lato',
+    [CustomizationDefaultFont.Lato]: 'Lato',
-    [CustomizationFont.Merriweather]: 'Merriweather',
+    [CustomizationDefaultFont.Merriweather]: 'Merriweather',
-    [CustomizationFont.NotoSans]: 'Noto Sans',
+    [CustomizationDefaultFont.NotoSans]: 'Noto Sans',
-    [CustomizationFont.OpenSans]: 'Open Sans',
+    [CustomizationDefaultFont.OpenSans]: 'Open Sans',
-    [CustomizationFont.Overpass]: 'Overpass',
+    [CustomizationDefaultFont.Overpass]: 'Overpass',
-    [CustomizationFont.Poppins]: 'Poppins',
+    [CustomizationDefaultFont.Poppins]: 'Poppins',
-    [CustomizationFont.Raleway]: 'Raleway',
+    [CustomizationDefaultFont.Raleway]: 'Raleway',
-    [CustomizationFont.Roboto]: 'Roboto',
+    [CustomizationDefaultFont.Roboto]: 'Roboto',
-    [CustomizationFont.RobotoSlab]: 'Roboto Slab',
+    [CustomizationDefaultFont.RobotoSlab]: 'Roboto Slab',
-    [CustomizationFont.SourceSansPro]: 'Source Sans 3',
+    [CustomizationDefaultFont.SourceSansPro]: 'Source Sans 3',
-    [CustomizationFont.Ubuntu]: 'Ubuntu',
+    [CustomizationDefaultFont.Ubuntu]: 'Ubuntu',
-    [CustomizationFont.ABCFavorit]: 'Inter',
+    [CustomizationDefaultFont.ABCFavorit]: 'Inter',
 };
 
 /**
@@ -31,12 +32,17 @@ const googleFontsMap: { [fontName in CustomizationFont]: string } = {
  */
 export async function serveOGImage(baseContext: GitBookSiteContext, params: PageParams) {
     const { context, pageTarget } = await fetchPageData(baseContext, params);
-    const { customization, site, linker } = context;
+    const { customization, site, linker, imageResizer } = context;
     const page = pageTarget?.page;
 
     // If user configured a custom social preview, we redirect to it.
     if (customization.socialPreview.url) {
-        redirect(customization.socialPreview.url);
+        redirect(
+            await getResizedImageURL(imageResizer, customization.socialPreview.url, {
+                width: 1200,
+                height: 630,
+            })
+        );
     }
 
     // Compute all text to load only the necessary fonts

packages/gitbook/src/sentry.ts

@@ -1,20 +0,0 @@
-import { init } from '@sentry/nextjs';
-
-const dsn = process.env.SENTRY_DSN;
-if (dsn) {
-    init({
-        dsn,
-        release: process.env.SENTRY_RELEASE,
-
-        // Disable tracing as it creates additional requests in an env where subrequests are limited.
-        tracesSampleRate: 0,
-
-        // Disable transactions  as it creates additional requests in an env where subrequests are limited.
-        // https://docs.sentry.io/platforms/node/configuration/filtering/#using--3
-        beforeSendTransaction: () => {
-            return null;
-        },
-    });
-}
-
-export * from '@sentry/nextjs';

packages/gitbook/tailwind.config.ts

@@ -456,8 +456,12 @@ const config: Config = {
             /**
              * Variant when a header is displayed.
              */
+            addVariant('site-header-none', 'html.site-header-none &');
             addVariant('site-header', 'body:has(#site-header:not(.mobile-only)) &');
-            addVariant('site-header-sections', 'body:has(#site-header:not(.mobile-only) > nav) &');
+            addVariant('site-header-sections', [
+                'body:has(#site-header:not(.mobile-only) #sections) &',
+                'body:has(.page-no-toc):has(#site-header:not(.mobile-only) #variants) &',
+            ]);
 
             const customisationVariants = {
                 // Sidebar styles
@@ -502,12 +506,14 @@ const config: Config = {
              * Variant when the page contains a block that will be rendered in full-width mode.
              */
             addVariant('page-full-width', 'body:has(.page-full-width) &');
+            addVariant('page-default-width', 'body:has(.page-default-width) &');
 
             /**
              * Variant when the page is configured to hide the table of content.
              * `page.layout.tableOfContents` is set to false.
              */
             addVariant('page-no-toc', 'body:has(.page-no-toc) &');
+            addVariant('page-has-toc', 'body:has(.page-has-toc) &');
 
             /**
              * Variant when the page contains an OpenAPI block.

packages/gitbook/tests/utils.ts

@@ -49,18 +49,12 @@ export function getTestURL(urlRest: string): string {
  * Get an API token for a site by its URL.
  */
 export async function getSiteAPIToken(url: string) {
-    const api = new GitBookAPI();
+    const api = new GitBookAPI({
-    const { data } = await api.urls.getPublishedContentByUrl(
+        endpoint: 'https://api.gitbook.com/cache',
-        {
+    });
+    const { data } = await api.urls.getPublishedContentByUrl({
         url,
-            cache: true,
+    });
-        },
-        {
-            headers: {
-                'x-gitbook-force-cache': 'true',
-            },
-        }
-    );
 
     if ('redirect' in data) {
         throw new Error(`Invalid site URL, it resulted in a redirect: ${data.redirect}`);

packages/react-contentkit/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @gitbook/react-contentkit
 
+## 0.7.0
+
+### Minor Changes
+
+- 6aaeae2: Fix an issue where ContentKit iframes were not resizing.
+
+### Patch Changes
+
+- 9108c56: Fix an issue where contentkit webframes weren't resized properly
+- c9ea239: Fix an issue where iframe aspect ratio was not respected.
+
 ## 0.6.2
 
 ### Patch Changes

packages/react-contentkit/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gitbook/react-contentkit",
-    "version": "0.6.2",
+    "version": "0.7.0",
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
@@ -10,7 +10,7 @@
     },
     "dependencies": {
         "classnames": "^2.5.1",
-        "@gitbook/api": "0.96.1",
+        "@gitbook/api": "*",
         "@gitbook/icons": "workspace:*"
     },
     "peerDependencies": {

packages/react-contentkit/src/ElementWebframe.tsx

@@ -14,8 +14,7 @@ export function ElementWebframe(props: ContentKitClientElementProps<ContentKitWe
     const renderer = useContentKitClientContext();
     const iframeRef = React.useRef<HTMLIFrameElement>(null);
     const [size, setSize] = React.useState<{
-        maxWidth?: number;
+        height?: number;
-        maxHeight?: number;
         aspectRatio?: number;
     }>({});
 
@@ -88,9 +87,8 @@ export function ElementWebframe(props: ContentKitClientElementProps<ContentKitWe
                         const height = parsed.height;
 
                         setSize({
-                            maxWidth: width,
                             aspectRatio: width / height,
-                            maxHeight: height,
+                            height: height,
                         });
                     }
                 } catch (_err) {
@@ -108,11 +106,25 @@ export function ElementWebframe(props: ContentKitClientElementProps<ContentKitWe
                         messagesQueueRef.current = [];
                         break;
                     case '@webframe.resize':
-                        setSize({
+                        setSize((size) => ({
-                            maxWidth: Number(message.action.size.maxWidth),
+                            aspectRatio:
-                            maxHeight: Number(message.action.size.maxHeight),
+                                typeof message.action.size.aspectRatio !== 'undefined'
-                            aspectRatio: Number(message.action.size.aspectRatio),
+                                    ? Number(message.action.size.aspectRatio)
-                        });
+                                    : size.aspectRatio,
+
+                            height: (() => {
+                                if (typeof message.action.size.height !== 'undefined') {
+                                    return Number(message.action.size.height);
+                                }
+
+                                // maxHeight was used prior to moving to height, maintain it for backward compatibility.
+                                if (typeof message.action.size.maxHeight !== 'undefined') {
+                                    return Number(message.action.size.maxHeight);
+                                }
+
+                                return size.height;
+                            })(),
+                        }));
                         break;
                     default:
                         renderer.update({
@@ -149,33 +161,27 @@ export function ElementWebframe(props: ContentKitClientElementProps<ContentKitWe
         return sendMessage({ state });
     }, [element.data, renderer.state, sendMessage]);
 
+    if (!mounted) {
+        return null;
+    }
+
+    const aspectRatio = size.aspectRatio || element.aspectRatio;
+
     return (
-        <div
-            className={'contentkit-webframe'}
-            style={{
-                aspectRatio: size.aspectRatio || element.aspectRatio || undefined,
-                maxWidth: size.maxWidth || undefined,
-                maxHeight: size.maxHeight || undefined,
-            }}
-        >
-            {mounted ? (
         <iframe
             ref={iframeRef}
             src={element.source.url}
+            title={element.source.url}
             allowFullScreen
             allow="clipboard-write"
+            className="contentkit-webframe"
             style={{
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        bottom: 0,
-                        right: 0,
                 width: '100%',
-                        height: '100%',
+                maxWidth: '100%',
+                aspectRatio,
+                height: size.height ? Math.max(size.height, 32) : '100%',
                 border: 'none',
             }}
         />
-            ) : null}
-        </div>
     );
 }

packages/react-openapi/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @gitbook/react-openapi
 
+## 1.1.5
+
+### Patch Changes
+
+- 886e204: Update OpenAPI operation path design
+
+## 1.1.4
+
+### Patch Changes
+
+- c60e9ba: Handle read-only in OpenAPISchemaName
+- 31d800e: Render OpenAPISchemas block
+- ff3b708: Remove read-only properties from codesample
+
 ## 1.1.3
 
 ### Patch Changes

packages/react-openapi/package.json

@@ -8,7 +8,7 @@
             "default": "./dist/index.js"
         }
     },
-    "version": "1.1.3",
+    "version": "1.1.5",
     "sideEffects": false,
     "dependencies": {
         "@gitbook/openapi-parser": "workspace:*",

packages/react-openapi/src/OpenAPICodeSample.tsx

@@ -1,4 +1,6 @@
+import type { OpenAPIV3 } from '@gitbook/openapi-parser';
 import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
+import { ScalarApiButton } from './ScalarApiButton';
 import { StaticSection } from './StaticSection';
 import { type CodeSampleInput, codeSampleGenerators } from './code-samples';
 import { generateMediaTypeExample, generateSchemaExample } from './generateSchemaExample';
@@ -26,13 +28,17 @@ export function OpenAPICodeSample(props: {
         }
 
         if (param.in === 'header' && param.required) {
-            const example = param.schema ? generateSchemaExample(param.schema) : undefined;
+            const example = param.schema
+                ? generateSchemaExample(param.schema, { mode: 'write' })
+                : undefined;
             if (example !== undefined && param.name) {
                 headersObject[param.name] =
                     typeof example !== 'string' ? stringifyOpenAPI(example) : example;
             }
         } else if (param.in === 'query' && param.required) {
-            const example = param.schema ? generateSchemaExample(param.schema) : undefined;
+            const example = param.schema
+                ? generateSchemaExample(param.schema, { mode: 'write' })
+                : undefined;
             if (example !== undefined && param.name) {
                 searchParams.append(
                     param.name,
@@ -75,6 +81,7 @@ export function OpenAPICodeSample(props: {
             code: generator.generate(input),
             syntax: generator.syntax,
         }),
+        footer: <OpenAPICodeSampleFooter data={data} context={context} />,
     }));
 
     // Use custom samples if defined
@@ -101,6 +108,7 @@ export function OpenAPICodeSample(props: {
                         code: sample.source,
                         syntax: sample.lang,
                     }),
+                    footer: <OpenAPICodeSampleFooter data={data} context={context} />,
                 }));
         }
     });
@@ -124,6 +132,30 @@ export function OpenAPICodeSample(props: {
     );
 }
 
+function OpenAPICodeSampleFooter(props: {
+    data: OpenAPIOperationData;
+    context: OpenAPIContextProps;
+}) {
+    const { data, context } = props;
+    const { method, path } = data;
+    const { specUrl } = context;
+    const hideTryItPanel = data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'];
+
+    if (hideTryItPanel) {
+        return null;
+    }
+
+    if (!validateHttpMethod(method)) {
+        return null;
+    }
+
+    return (
+        <div className="openapi-codesample-footer">
+            <ScalarApiButton method={method} path={path} specUrl={specUrl} />
+        </div>
+    );
+}
+
 function getSecurityHeaders(securities: OpenAPIOperationData['securities']): {
     [key: string]: string;
 } {
@@ -165,3 +197,7 @@ function getSecurityHeaders(securities: OpenAPIOperationData['securities']): {
         }
     }
 }
+
+function validateHttpMethod(method: string): method is OpenAPIV3.HttpMethods {
+    return ['get', 'post', 'put', 'delete', 'patch', 'head', 'options', 'trace'].includes(method);
+}

packages/react-openapi/src/OpenAPICopyButton.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useState } from 'react';
+import { Button, type ButtonProps, Tooltip, TooltipTrigger } from 'react-aria-components';
+
+export function OpenAPICopyButton(
+    props: ButtonProps & {
+        value: string;
+    }
+) {
+    const { value } = props;
+    const { children, onPress, className } = props;
+    const [copied, setCopied] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleCopy = () => {
+        if (!value) return;
+        navigator.clipboard.writeText(value).then(() => {
+            setIsOpen(true);
+            setCopied(true);
+
+            setTimeout(() => {
+                setCopied(false);
+            }, 2000);
+        });
+    };
+
+    return (
+        <TooltipTrigger isOpen={isOpen} onOpenChange={setIsOpen} closeDelay={200} delay={200}>
+            <Button
+                type="button"
+                preventFocusOnPress
+                onPress={(e) => {
+                    handleCopy();
+                    onPress?.(e);
+                }}
+                className={`openapi-copy-button ${className}`}
+                {...props}
+            >
+                {children}
+            </Button>
+
+            <Tooltip
+                isOpen={isOpen}
+                onOpenChange={setIsOpen}
+                placement="top"
+                offset={4}
+                className="openapi-tooltip"
+            >
+                {copied ? 'Copied' : 'Copy to clipboard'}{' '}
+            </Tooltip>
+        </TooltipTrigger>
+    );
+}

packages/react-openapi/src/OpenAPIOperation.tsx

@@ -35,6 +35,7 @@ export function OpenAPIOperation(props: {
                           title: operation.summary,
                       })
                     : null}
+                <OpenAPIPath data={data} context={context} />
                 {operation.deprecated && <div className="openapi-deprecated">Deprecated</div>}
             </div>
             <div className="openapi-columns">
@@ -49,7 +50,6 @@ export function OpenAPIOperation(props: {
                         </div>
                     ) : null}
                     <OpenAPIOperationDescription operation={operation} context={context} />
-                    <OpenAPIPath data={data} context={context} />
                     <OpenAPISpec data={data} context={clientContext} />
                 </div>
                 <div className="openapi-column-preview">

packages/react-openapi/src/OpenAPIPath.tsx

@@ -1,7 +1,6 @@
-import type { OpenAPIV3_1 } from '@gitbook/openapi-parser';
+import { OpenAPICopyButton } from './OpenAPICopyButton';
-import type React from 'react';
-import { ScalarApiButton } from './ScalarApiButton';
 import type { OpenAPIContextProps, OpenAPIOperationData } from './types';
+import { getDefaultServerURL } from './util/server';
 
 /**
  * Display the path of an operation.
@@ -10,63 +9,62 @@ export function OpenAPIPath(props: {
     data: OpenAPIOperationData;
     context: OpenAPIContextProps;
 }) {
-    const { data, context } = props;
+    const { data } = props;
-    const { method, path } = data;
+    const { method, path, operation } = data;
-    const { specUrl } = context;
+
-    const hideTryItPanel = data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'];
+    const server = getDefaultServerURL(data.servers);
+    const formattedPath = formatPath(path);
 
     return (
         <div className="openapi-path">
             <div className={`openapi-method openapi-method-${method}`}>{method}</div>
-            <div className="openapi-path-title" data-deprecated={data.operation.deprecated}>
+
-                <p>{formatPath(path)}</p>
+            <OpenAPICopyButton
-            </div>
+                value={server + path}
-            {!hideTryItPanel && validateHttpMethod(method) && (
+                className="openapi-path-title"
-                <ScalarApiButton method={method} path={path} specUrl={specUrl} />
+                data-deprecated={operation.deprecated}
-            )}
+            >
+                <span className="openapi-path-server">{server}</span>
+                {formattedPath}
+            </OpenAPICopyButton>
         </div>
     );
 }
 
-function validateHttpMethod(method: string): method is OpenAPIV3_1.HttpMethods {
+/**
-    return ['get', 'post', 'put', 'delete', 'patch', 'head', 'options', 'trace'].includes(method);
+ * Format the path by wrapping placeholders in <span> tags.
-}
+ */
-
-// Format the path to highlight placeholders
 function formatPath(path: string) {
     // Matches placeholders like {id}, {userId}, etc.
-    const regex = /\{(\w+)\}/g;
+    const regex = /\{\s*(\w+)\s*\}|:\w+/g;
 
     const parts: (string | React.JSX.Element)[] = [];
     let lastIndex = 0;
 
-    // Replace placeholders with <em> tags
+    //Wrap the variables in <span> tags and maintain either {variable} or :variable
-    path.replace(regex, (match, key, offset) => {
+    path.replace(regex, (match, _, offset) => {
+        if (offset > lastIndex) {
             parts.push(path.slice(lastIndex, offset));
-        parts.push(<em key={key}>{`{${key}}`}</em>);
+        }
+        parts.push(
+            <span key={offset} className="openapi-path-variable">
+                {match}
+            </span>
+        );
         lastIndex = offset + match.length;
         return match;
     });
 
-    // Push remaining text after the last placeholder
+    if (lastIndex < path.length) {
         parts.push(path.slice(lastIndex));
-
-    // Join parts with separators wrapped in <span>
-    const formattedPath = parts.reduce(
-        (acc, part, index) => {
-            if (typeof part === 'string' && index > 0 && part === '/') {
-                acc.push(
-                    <span className="openapi-path-separator" key={`sep-${index}`}>
-                        /
-                    </span>
-                );
     }
 
-            acc.push(part);
+    const formattedPath = parts.map((part, index) => {
-            return acc;
+        if (typeof part === 'string') {
-        },
+            return <span key={index}>{part}</span>;
-        [] as (string | React.JSX.Element)[]
+        }
-    );
+        return part;
+    });
 
-    return <span>{formattedPath}</span>;
+    return formattedPath;
 }