get rid of Object.values

.changeset/beige-crabs-attack.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Avoid multiple <h1> in the page by using a <div> for the title in the header

.changeset/beige-snails-count.md

@@ -0,0 +1,6 @@
+---
+'@gitbook/react-openapi': patch
+'gitbook': patch
+---
+
+Adds content-visibility css property to OpenAPI Operation for better render performance

.changeset/brave-camels-trade.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/react-openapi': minor
+---
+
+Add Python support in Code Samples

.changeset/clean-balloons-travel.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+RND-3532: drop down menu for hidden links at small screen size

.changeset/cold-knives-judge.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Change dark mode shadow for multi-space search toolbar

.changeset/dull-gifts-flow.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Use ellipsis and fix icon color for more links in the header on small screen

.changeset/forty-trains-pull.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/icons': patch
+---
+
+Fix first run of the package in development mode

.changeset/green-swans-boil.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/react-openapi': patch
+---
+
+bump: scalar from 1.0.5 to 1.0.7

.changeset/healthy-spoons-itch.md

@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Replace all icons, previously imported from Geist, by new package `@gitbook/icons`

.changeset/heavy-jeans-unite.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/cache-do': minor
+---
+
+First version of a new cache backend powered by Cloudflare Durable Objects

.changeset/honest-jars-refuse.md

@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Add support for Norwegian language

.changeset/hungry-actors-march.md

@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Optimize layout shift while transitioning between pages with full width blocks (ex: OpenAPI blocks)

.changeset/hungry-students-sing.md

@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Add support for page icons

.changeset/kind-flies-impress.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Only display spaces dropdown in compact header when site is multi-variants

.changeset/lovely-donkeys-deny.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/icons': minor
+---
+
+Initial release for `@gitbook/icons`, a package of content icons to be used for pages, documents, etc.

.changeset/mighty-apples-design.md

@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Persist state of tabs and dynamically sync them based on title

.changeset/nervous-turtles-lick.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Ensure "Sponsored via GitBook" can be translated in all languages

.changeset/ninety-starfishes-refuse.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Use url hash to open Expandable and scroll to anchor

.changeset/odd-beds-walk.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Fix margin for paragraphs in quote blocks

.changeset/odd-candles-cover.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Use new cache backend, powered by Durable Objects, alongside the existing ones (KV, etc).

.changeset/plenty-pets-hope.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/react-openapi': minor
+---
+
+Add required query parameters to the code sample

.changeset/poor-bats-cheer.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/react-openapi': minor
+---
+
+Display pattern if available in parmas in OpenAPI block

.changeset/poor-emus-remember.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Fix inconsistent click area in table because of scroll indicator

.changeset/purple-forks-refuse.md

@@ -0,0 +1,6 @@
+---
+'@gitbook/react-openapi': minor
+'gitbook': patch
+---
+
+Synchronize response and response example tabs

.changeset/purple-lies-teach.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Show definition title when visible in cards

.changeset/quiet-doors-double.md

@@ -0,0 +1,6 @@
+---
+'@gitbook/react-openapi': minor
+'gitbook': patch
+---
+
+Rollback of scalar modal while fixing perf issue

.changeset/rare-maps-call.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Optimize images rendered in community ads

.changeset/red-bats-chew.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/react-contentkit': patch
+---
+
+Fix rendering of webframe with SSR causing wrong communication between frame and renderer

.changeset/shy-buttons-relate.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Add optional env `GITBOOK_INTEGRATIONS_HOST` to configure the host serving the integrations

.changeset/silent-donuts-love.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/react-openapi': patch
+---
+
+Fix crash when `example` is undefined for a response

.changeset/smooth-moose-marry.md

@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Add support for icons style customization for sites

.changeset/strange-eyes-notice.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/react-openapi': patch
+---
+
+Adds tabs to Response Example section e.g. for status code examples

.changeset/ten-carpets-cover.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/react-openapi': patch
+---
+
+Render mandatory headers in code sample

.changeset/tender-onions-jog.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/react-openapi': patch
+---
+
+Update Scalar client to latest version

.changeset/thick-dogs-bake.md

@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Prevent search indexation for pages where it's configured as disabled

.changeset/three-shoes-talk.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Fix table of contents being visible on mobile when disabled at the page level

.changeset/unlucky-balloons-explain.md

@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Update rendering of community ads to match new API response, and make it possible to preview ads.

.changeset/violet-beers-matter.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/react-math': minor
+---
+
+Export binary `gitbook-math` to copy assets to a directory

.changeset/weak-hairs-compete.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Fix "ip" being passed to BSA for community ads

.changeset/wild-worms-roll.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/icons': minor
+---
+
+Fix bin gitbook-icons when installed without the Pro token

.changeset/wise-papayas-retire.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Don't show hidden pages in the empty state of a page

.changeset/witty-kiwis-knock.md

@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Fix linking to a tab itself

.github/workflows/ci.yaml

@@ -13,12 +13,8 @@ jobs:
         permissions:
             contents: read
             deployments: write
-            issues: write
-            pull-requests: write
-            checks: write
-            statuses: write
         outputs:
-            deployment_url: ${{ steps.deploy.outputs.url }}
+            deployment_url: ${{ steps.cloudflare.outputs.url }}
         steps:
             - name: Checkout
               uses: actions/checkout@v4
@@ -56,55 +52,27 @@ jobs:
                   SENTRY_ORG: ${{ vars.SENTRY_ORG }}
                   SENTRY_PROJECT: ${{ vars.SENTRY_PROJECT }}
                   SENTRY_DSN: ${{ vars.SENTRY_DSN }}
-            - id: deploy
-              name: Deploy to Cloudflare
-              uses: cloudflare/wrangler-action@v3
+            - id: cloudflare
+              name: Publish to Cloudflare Pages
+              uses: cloudflare/pages-action@v1
               with:
                   apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
                   accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+                  projectName: ${{ vars.CLOUDFLARE_PROJECT_NAME }}
+                  directory: ./packages/gitbook/.vercel/output/static
+                  gitHubToken: ${{ secrets.GITHUB_TOKEN }}
                   workingDirectory: ./
-                  wranglerVersion: '3.82.0'
-                  command: pages deploy ./packages/gitbook/.vercel/output/static --project-name=${{ vars.CLOUDFLARE_PROJECT_NAME }} --branch=${{ github.ref == 'refs/heads/main' && 'main' || format('pr{0}', github.event.pull_request.number) }}
             - name: Outputs
               run: |
-                  echo "URL: ${{ steps.deploy.outputs.url }}"
-                  echo "Alias URL: ${{ steps.deploy.outputs.deployment-alias-url }}"
+                  echo "ID: ${{ steps.cloudflare.outputs.id }}"
+                  echo "URL: ${{ steps.cloudflare.outputs.url }}"
+                  echo "Environment: ${{ steps.cloudflare.outputs.environment }}"
+                  echo "Alias: ${{ steps.cloudflare.outputs.alias }}"
             - name: Archive build output
               uses: actions/upload-artifact@v4
               with:
                   name: build-output
                   path: .vercel/
-            # Until https://github.com/cloudflare/wrangler-action/issues/301 is done
-            - name: Update Deployment Status to Success
-              env:
-                  DEPLOYMENT_URL: ${{ steps.deploy.outputs.url }}
-              run: |
-                  curl -X POST \
-                    -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
-                    -H "Accept: application/vnd.github.v3+json" \
-                    -d '{"state": "success", "target_url": "${{ steps.deploy.outputs.url }}", "description": "Deployed Preview URL for commit", "context": "cloudflare/preview"}' \
-                    https://api.github.com/repos/${{ github.repository }}/statuses/${{ github.sha }}
-
-            - name: Find GitHub Comment
-              uses: peter-evans/find-comment@v3
-              id: fc
-              if: 1 && !startsWith(github.ref, 'refs/heads/main')
-              with:
-                  issue-number: ${{ github.event.pull_request.number }}
-                  comment-author: 'github-actions[bot]'
-                  body-includes: GitBook Preview
-
-            - name: Create or update GitHub comment
-              uses: peter-evans/create-or-update-comment@v4
-              if: 1 && !startsWith(github.ref, 'refs/heads/main')
-              with:
-                  comment-id: ${{ steps.fc.outputs.comment-id }}
-                  issue-number: ${{ github.event.pull_request.number }}
-                  body: |
-                      **GitBook Preview**
-                      Latest commit: [${{ steps.deploy.outputs.url }}](${{ steps.deploy.outputs.url }})
-                      PR: [${{ steps.deploy.outputs.alias }}](${{ steps.deploy.outputs.alias }})
-                  edit-mode: replace
     visual-testing:
         runs-on: ubuntu-latest
         name: Visual Testing

README.md

@@ -5,7 +5,7 @@
 </p>
 
 <p align="center">
-  <a href="https://gitbook.com"><img src="https://img.shields.io/static/v1?message=Documented%20on%20GitBook&logo=gitbook&logoColor=ffffff&label=%20&labelColor=5c5c5c&color=3F89A1"></a>
+  <a href="https://gitbook.com"><img src="https://img.shields.io/static/v1?message=Documented%20on%20GitBook&logo=data:image/svg%2bxml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iNjUiIHZpZXdCb3g9IjAgMCA2NSA2NSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI3LjM5NjQgMzMuNjc2NEMzMC41MjU1IDM1LjQ4MjQgMzIuMDkgMzYuMzg1NCAzMy44MDgzIDM2LjM4NjlDMzUuNTI2NSAzNi4zODg0IDM3LjA5MjYgMzUuNDg4MiA0MC4yMjQ5IDMzLjY4NzdMNjAuMTkxNCAyMi4yMTA0QzYxLjA5MjcgMjEuNjkyMiA2MS42NDg0IDIwLjczMTggNjEuNjQ4NCAxOS42OTIxQzYxLjY0ODQgMTguNjUyNCA2MS4wOTI3IDE3LjY5MiA2MC4xOTE0IDE3LjE3MzlMNDAuMjE3NyA1LjY5MjQ1QzM3LjA4ODggMy44OTM4NiAzNS41MjQzIDIuOTk0NTcgMzMuODA3OCAyLjk5NTI0QzMyLjA5MTIgMi45OTU5MSAzMC41Mjc1IDMuODk2NDIgMjcuNCA1LjY5NzQ0TDEwLjIyOTMgMTUuNTg1NUMxMC4xMDIgMTUuNjU4OCAxMC4wMzg0IDE1LjY5NTQgOS45NzkwOCAxNS43MzAxQzQuMTEzNzEgMTkuMTYzNyAwLjQ4OTg5MiAyNS40MzIzIDAuNDQxNDM4IDMyLjIyODZDMC40NDA5NDggMzIuMjk3MyAwLjQ0MDk0OCAzMi4zNzA4IDAuNDQwOTQ4IDMyLjUxNzZDMC40NDA5NDggMzIuNjY0MyAwLjQ0MDk0OCAzMi43Mzc2IDAuNDQxNDM3IDMyLjgwNjNDMC40ODk3ODUgMzkuNTk0OSA0LjEwNTUyIDQ1Ljg1NzcgOS45NjA0NCA0OS4yOTRDMTAuMDE5NiA0OS4zMjg3IDEwLjA4MzIgNDkuMzY1NCAxMC4yMTAyIDQ5LjQzODdMMjAuOTY1OSA1NS42NDg3QzI3LjIzMzIgNTkuMjY3MyAzMC4zNjY4IDYxLjA3NjYgMzMuODA4MSA2MS4wNzc3QzM3LjI0OTMgNjEuMDc4OSA0MC4zODQyIDU5LjI3MTcgNDYuNjUzOSA1NS42NTc0TDU4LjAwOCA0OS4xMTIxQzYxLjE0NzQgNDcuMzAyMyA2Mi43MTcxIDQ2LjM5NzQgNjMuNTc5IDQ0LjkwNTZDNjQuNDQwOSA0My40MTM5IDY0LjQ0MDkgNDEuNjAyIDY0LjQ0MDkgMzcuOTc4NFYzMC45NzgxQzY0LjQ0MDkgMjkuOTcyOCA2My44OTY1IDI5LjA0NjQgNjMuMDE4MiAyOC41NTczQzYyLjE2ODQgMjguMDgzOSA2MS4xMzI1IDI4LjA5MSA2MC4yODkxIDI4LjU3NThMMzcuMDA3NCA0MS45NTg4QzM1LjQ0NTQgNDIuODU2NyAzNC42NjQzIDQzLjMwNTYgMzMuODA3MyA0My4zMDU5QzMyLjk1MDIgNDMuMzA2MiAzMi4xNjg5IDQyLjg1NzcgMzAuNjA2MyA0MS45NjA3TDE0Ljg0ODcgMzIuOTE1NUMxNC4wNTk0IDMyLjQ2MjQgMTMuNjY0NyAzMi4yMzU5IDEzLjM0NzcgMzIuMTk1QzEyLjYyNSAzMi4xMDE3IDExLjkzMDEgMzIuNTA2NiAxMS42NTQ4IDMzLjE4MTNDMTEuNTM0MSAzMy40NzcyIDExLjUzNjUgMzMuOTMyMiAxMS41NDE0IDM0Ljg0MjRDMTEuNTQ1IDM1LjUxMjQgMTEuNTQ2OCAzNS44NDc0IDExLjYwOTQgMzYuMTU1NkMxMS43NDk3IDM2Ljg0NTYgMTIuMTEyNyAzNy40NzA1IDEyLjY0MjggMzcuOTM0MUMxMi44Nzk1IDM4LjE0MTEgMTMuMTY5NiAzOC4zMDg1IDEzLjc1IDM4LjY0MzVMMzAuNTk3NCA0OC4zNjcyQzMyLjE2NDEgNDkuMjcxNCAzMi45NDc0IDQ5LjcyMzUgMzMuODA3NSA0OS43MjM3QzM0LjY2NzcgNDkuNzIzOSAzNS40NTEzIDQ5LjI3MjMgMzcuMDE4NCA0OC4zNjg5TDU3LjY2ODQgMzYuNDY1NEM1OC4yMDM3IDM2LjE1NjkgNTguNDcxNCAzNi4wMDI2IDU4LjY3MjEgMzYuMTE4NUM1OC44NzI3IDM2LjIzNDUgNTguODcyNyAzNi41NDM0IDU4Ljg3MjcgMzcuMTYxM1Y0MC4zMzY1QzU4Ljg3MjcgNDEuMjQyNCA1OC44NzI3IDQxLjY5NTQgNTguNjU3MiA0Mi4wNjgzQzU4LjQ0MTggNDIuNDQxMyA1OC4wNDkzIDQyLjY2NzUgNTcuMjY0NCA0My4xMTk5TDQwLjIzMjIgNTIuOTM4QzM3LjA5NjYgNTQuNzQ1NCAzNS41Mjg4IDU1LjY0OTIgMzMuODA3OSA1NS42NDg0QzMyLjA4NjkgNTUuNjQ3NiAzMC41MTk5IDU0Ljc0MjQgMjcuMzg2IDUyLjkzMjFMMTEuNDUwOSA0My43MjdDMTEuNDAwMyA0My42OTc4IDExLjM3NSA0My42ODMyIDExLjM1MTQgNDMuNjY5NEM4LjAxMDIzIDQxLjcxNyA1Ljk0ODU5IDM4LjE0NTEgNS45MjkyNSAzNC4yNzU0QzUuOTI5MTIgMzQuMjQ4IDUuOTI5MTIgMzQuMjE4OCA1LjkyOTEyIDM0LjE2MDRWMzEuMjQ1OEM1LjkyOTEyIDI5LjEwOTUgNy4wNjY4OSAyNy4xMzQ5IDguOTE1MTMgMjYuMDYzNkMxMC41NDgzIDI1LjExNjkgMTIuNTYyOCAyNS4xMTUxIDE0LjE5NzcgMjYuMDU4N0wyNy4zOTY0IDMzLjY3NjRaIiBmaWxsPSIjRjJGN0Y3Ii8+Cjwvc3ZnPgo=&labelColor=5c5c5c&color=3F89A1&label=%20" alt="Documented on GitBook"></a>
   <a href="#"><img src="https://img.shields.io/badge/Open_Source-❤️-FDA599?"/></a>
   <a href="/LICENSE"><img src="https://img.shields.io/badge/License-GNU_GPLv3-F4E28D"/></a>
   <a href="/.github/CONTRIBUTING.md"><img src="https://img.shields.io/github/contributors/gitbookIO/gitbook"/></a>
@@ -119,26 +119,6 @@ If you plan to distribute the code, you must make the source code public to comp
 
 See `LICENSE` for more information.
 
-## Badges
-
-<p align="left">
-  <a href="https://gitbook.com"><img src="https://img.shields.io/static/v1?message=Documented%20on%20GitBook&logo=gitbook&logoColor=ffffff&label=%20&labelColor=5c5c5c&color=3F89A1"></a>
-  <a href="https://gitbook.com"><img src="https://img.shields.io/static/v1?message=Documented%20on%20GitBook&logo=gitbook&logoColor=ffffff&label=%20&labelColor=5c5c5c&color=F4E28D"></a>
-  <a href="https://gitbook.com"><img src="https://img.shields.io/static/v1?message=Documented%20on%20GitBook&logo=gitbook&logoColor=ffffff&label=%20&labelColor=5c5c5c&color=FDA599"></a>
-</p>
-
-```md
-[![GitBook](https://img.shields.io/static/v1?message=Documented%20on%20GitBook&logo=gitbook&logoColor=ffffff&label=%20&labelColor=5c5c5c&color=3F89A1)](https://gitbook.com/)
-```
-
-```html
-<a href="https://gitbook.com">
-    <img
-        src="https://img.shields.io/static/v1?message=Documented%20on%20GitBook&logo=gitbook&logoColor=ffffff&label=%20&labelColor=5c5c5c&color=3F89A1"
-    />
-</a>
-```
-
 ## Acknowledgements
 
 GitBook wouldn't be possible without these projects:

package.json

@@ -1,16 +1,8 @@
 {
     "name": "gitbook",
     "version": "0.1.0",
-    "devDependencies": {
-        "@changesets/cli": "^2.27.7",
-        "prettier": "^3.0.3",
-        "turbo": "^2.1.2"
-    },
-    "packageManager": "bun@1.1.18",
-    "patchedDependencies": {
-        "@vercel/next@4.3.15": "patches/@vercel%2Fnext@4.3.15.patch"
-    },
     "private": true,
+    "packageManager": "bun@1.1.18",
     "scripts": {
         "dev": "turbo run dev",
         "build": "turbo run build",
@@ -30,5 +22,13 @@
     },
     "workspaces": [
         "packages/*"
-    ]
+    ],
+    "devDependencies": {
+        "@changesets/cli": "^2.27.7",
+        "prettier": "^3.0.3",
+        "turbo": "^2.1.2"
+    },
+    "patchedDependencies": {
+        "@vercel/next@4.3.6": "patches/@vercel%2Fnext@4.3.6.patch"
+    }
 }

packages/cache-do/CHANGELOG.md

@@ -1,12 +0,0 @@
-# @gitbook/cache-do
-
-## 0.1.0
-
-### Minor Changes
-
--   9b8d519: Experiment with optimizing billable duration in Cloudflare by using multiple RPC sessions instead of one
--   636b868: First version of a new cache backend powered by Cloudflare Durable Objects
-
-### Patch Changes
-
--   56f5fa1: Enable Workers observability with a sampling of 0.1

packages/cache-do/package.json

@@ -14,14 +14,14 @@
             "default": "./dist/api.js"
         }
     },
-    "version": "0.1.0",
+    "version": "0.0.0",
     "dependencies": {
         "@msgpack/msgpack": "^3.0.0-beta2",
         "lru_map": "^0.4.1"
     },
     "devDependencies": {
         "typescript": "^5.5.3",
-        "wrangler": "3.82.0"
+        "wrangler": "^3.78.7"
     },
     "scripts": {
         "generate": "wrangler types --experimental-include-runtime",

packages/cache-do/src/CacheObject.ts

@@ -53,20 +53,16 @@ export class CacheObject extends DurableObject {
      * Get the value of a property.
      */
     public async get<Value = unknown>(key: string) {
-        return this.logOperation({ operation: 'get', key }, async (setLog) => {
+        return timeFn(`get: ${key}`, async () => {
             // Try the memory state first.
             const memoryEntry = this.lru.get(key);
             if (memoryEntry) {
-                setLog({ memory: true });
-                setLog({ memoryMatch: !!memoryEntry.match });
+                console.log(`get: (memory, ${!!memoryEntry.match}) ${key}`);
                 if (!memoryEntry.match) {
                     return;
                 }
 
-                const isExpired = memoryEntry.match.expiresAt < Date.now();
-                setLog({ memoryExpired: isExpired });
-
-                if (!isExpired) {
+                if (memoryEntry.match.expiresAt > Date.now()) {
                     return memoryEntry.match.value as Value;
                 }
             }
@@ -79,31 +75,28 @@ export class CacheObject extends DurableObject {
      * Get the value of a property from the DO storage.
      */
     public async getFromStorage<Value = unknown>(key: string) {
-        return this.logOperation({ operation: 'getFromStorage', key }, async (setLog) => {
-            const entries = await this.ctx.storage.list<Uint8Array>({
-                prefix: getStoragePropKey(key),
-                noCache: true,
-            });
-            if (entries.size) {
-                const entry = decodeChunks<CacheObjectProp<Value>>(entries);
-                setLog({ chunks: entries.size, chunksSize: entry?.size ?? 0 });
-                if (entry && entry.value.expiresAt > Date.now()) {
-                    // Found
-                    this.lru.set(key, { match: entry.value });
-                    return entry.value.value;
-                }
-            }
-
-            // Not found
-            this.lru.set(key, { match: undefined });
+        const entries = await this.ctx.storage.list<Uint8Array>({
+            prefix: getStoragePropKey(key),
+            noCache: true,
         });
+        if (entries.size) {
+            const entry = decodeChunks<CacheObjectProp<Value>>(entries);
+            if (entry && entry.expiresAt > Date.now()) {
+                // Found
+                this.lru.set(key, { match: entry });
+                return entry.value;
+            }
+        }
+
+        // Not found
+        this.lru.set(key, { match: undefined });
     }
 
     /**
      * Set a value in the cache object.
      */
     public async set<Value = unknown>(key: string, value: Value, expiresAt: number) {
-        return this.logOperation({ operation: 'set', key }, async (setLog) => {
+        return timeFn(`set: ${key}`, async () => {
             const prop: CacheObjectProp<Value> = {
                 value,
                 expiresAt,
@@ -112,12 +105,10 @@ export class CacheObject extends DurableObject {
             this.lru.set(key, { match: prop });
             await this.ctx.storage.transaction(async (tx) => {
                 const entries = encodeChunks(key, prop);
-                const chunks = Object.keys(entries).length;
-                setLog({ chunks });
 
                 const clockValue: CacheObjectExp = {
                     k: key,
-                    c: chunks,
+                    c: Object.keys(entries).length,
                 };
 
                 await tx.put(getGCClockKey(key, expiresAt), clockValue);
@@ -136,101 +127,76 @@ export class CacheObject extends DurableObject {
      * Purge all keys in the cache object.
      */
     public async purge() {
-        return this.logOperation({ operation: 'purge' }, async (setLog) => {
-            let result = new Set<string>();
+        let result = new Set<string>();
 
-            try {
-                // List all the keys in the cache object.
-                const entries = await this.ctx.storage.list<CacheObjectExp>({
-                    prefix: 'exp.',
-                    noCache: true,
-                });
-                setLog({ entries: entries.size });
-                entries.forEach((exp) => {
-                    result.add(exp.k);
-                });
-            } catch (error) {
-                // If an error occurs, reset the cache object.
-                // This is a safety mechanism to prevent the cache object from being stuck in a bad state.
-                console.error('Error during purge, resetting the cache object', error);
-            }
+        try {
+            // List all the keys in the cache object.
+            const entries = await this.ctx.storage.list<CacheObjectExp>({
+                prefix: 'exp.',
+                noCache: true,
+            });
+            console.log(`purge: ${entries.size} entries`);
+            entries.forEach((exp) => {
+                result.add(exp.k);
+            });
+        } catch (error) {
+            // If an error occurs, reset the cache object.
+            // This is a safety mechanism to prevent the cache object from being stuck in a bad state.
+            console.error('Error during purge, resetting the cache object', error);
+        }
 
-            await this.reset();
-            return Array.from(result);
-        });
+        await this.reset();
+
+        console.log(`purge returns`, Array.from(result));
+        return Array.from(result);
     }
 
     /**
      * Alarm to garbage collect all entries that have expired.
      */
     async alarm() {
-        return this.logOperation({ operation: 'alarm' }, async (setLog) => {
-            try {
-                const entries = await this.ctx.storage.list<CacheObjectExp>({
-                    prefix: 'exp.',
-                    noCache: true,
-                });
-                setLog({ entries: entries.size });
-                const toDeleteSet = new Set<string>();
+        try {
+            const entries = await this.ctx.storage.list<CacheObjectExp>({
+                prefix: 'exp.',
+                noCache: true,
+            });
+            const toDeleteSet = new Set<string>();
 
-                for (const [key, exp] of entries) {
-                    const timestamp = parseInt(key.split('.')[1]);
-                    if (timestamp < Date.now()) {
-                        toDeleteSet.add(key);
-                        for (let i = 0; i < exp.c; i++) {
-                            toDeleteSet.add(getStoragePropChunkKey(exp.k, i));
-                        }
+            for (const [key, exp] of entries) {
+                const timestamp = parseInt(key.split('.')[1]);
+                if (timestamp < Date.now()) {
+                    toDeleteSet.add(key);
+                    for (let i = 0; i < exp.c; i++) {
+                        toDeleteSet.add(getStoragePropChunkKey(exp.k, i));
                     }
                 }
-
-                // Delete the keys by batch of 128.
-                const toDelete = Array.from(toDeleteSet);
-                setLog({ toDelete: toDelete.length });
-                for (let i = 0; i < toDelete.length; i += 128) {
-                    await this.ctx.storage.delete(toDelete.slice(i, i + 128));
-                }
-
-                // If there are still keys to delete, set an alarm to continue the deletion in 12h.
-                if (toDelete.length) {
-                    await this.ctx.storage.setAlarm(Date.now() + 12 * 60 * 60 * 1000);
-                }
-            } catch (error) {
-                // If an error occurs, reset the cache object.
-                // This is a safety mechanism to prevent the cache object from being stuck in a bad state.
-                console.error('Error during alarm, reset the cache object', error);
-                await this.reset();
             }
-        });
+
+            // Delete the keys by batch of 128.
+            const toDelete = Array.from(toDeleteSet);
+            for (let i = 0; i < toDelete.length; i += 128) {
+                await this.ctx.storage.delete(toDelete.slice(i, i + 128));
+            }
+
+            // If there are still keys to delete, set an alarm to continue the deletion in 12h.
+            if (toDelete.length) {
+                await this.ctx.storage.setAlarm(Date.now() + 12 * 60 * 60 * 1000);
+            }
+        } catch (error) {
+            // If an error occurs, reset the cache object.
+            // This is a safety mechanism to prevent the cache object from being stuck in a bad state.
+            console.error('Error during alarm, reset the cache object', error);
+            await this.reset();
+        }
     }
 
     /**
      * Reset the cache object.
      */
     async reset() {
-        return this.logOperation({ operation: 'reset' }, async () => {
-            this.lru.clear();
-            await this.ctx.storage.deleteAll();
-        });
-    }
-
-    /**
-     * Time and log an operation.
-     */
-    async logOperation<T>(
-        log: Record<string, unknown>,
-        fn: (update: (log: Record<string, unknown>) => void) => Promise<T>,
-    ): Promise<T> {
-        const objectId = this.ctx.id.name ?? this.ctx.id.toString();
-        let update: Record<string, unknown> = {};
-        const start = performance.now();
-        try {
-            return await fn((arg) => {
-                Object.assign(update, arg);
-            });
-        } finally {
-            const duration = performance.now() - start;
-            console.log({ ...log, ...update, objectId, duration });
-        }
+        console.log('reset: clear all entries');
+        this.lru.clear();
+        await this.ctx.storage.deleteAll();
     }
 }
 
@@ -262,7 +228,7 @@ function encodeChunks<T>(key: string, value: T): Record<string, Uint8Array> {
     return entries;
 }
 
-function decodeChunks<T>(entries: Map<string, Uint8Array>): { value: T; size: number } | undefined {
+function decodeChunks<T>(entries: Map<string, Uint8Array>): T | undefined {
     const chunks = Array.from(entries.entries())
         .map(([key, value]) => {
             const index = parseInt(key.split('.').pop()!);
@@ -276,7 +242,7 @@ function decodeChunks<T>(entries: Map<string, Uint8Array>): { value: T; size: nu
     }
 
     const buf = mergeUint8Array(chunks);
-    return { value: decode(buf) as T, size: buf.length };
+    return decode(buf) as T;
 }
 
 function chunkUint8Array(input: Uint8Array, chunkSize: number): Uint8Array[] {
@@ -297,3 +263,12 @@ function mergeUint8Array(chunks: Uint8Array[]): Uint8Array {
     }
     return result;
 }
+
+async function timeFn<T>(message: string, fn: () => Promise<T>): Promise<T> {
+    const start = performance.now();
+    try {
+        return await fn();
+    } finally {
+        console.log(`${message} (${performance.now() - start}ms)`);
+    }
+}

packages/cache-do/src/CacheObjectStub.ts

@@ -22,7 +22,7 @@ const doLocationHints: {
  * Client to access a cache tag.
  */
 export class CacheObjectStub {
-    private stub: DurableObjectStub<CacheObject>;
+    private opened: CacheObjectDescriptor | null = null;
 
     constructor(
         /** Binding to the CacheObject durable object */
@@ -31,42 +31,41 @@ export class CacheObjectStub {
         private locationId: CacheLocationId,
         /** Name of the tag */
         private tag: string,
-    ) {
-        const groupId = getCacheObjectIdName(this.locationId, this.tag);
-        this.stub = this.doNamespace.get(this.doNamespace.idFromName(groupId), {
-            // Initialize the object with a locaiton hint,
-            // as we might want to purge all locations before the object is created.
-            // https://developers.cloudflare.com/durable-objects/reference/data-location/
-            locationHint: doLocationHints[this.locationId],
-        });
-    }
+    ) {}
 
     /**
-     * Open a descriptor to the cache object.
-     * It can be used to perform multiple operations in a single RPC session.
-     * Ex:
-     * ```ts
-     * using desc = cache.open();
-     * await desc.set('key', 'value', Date.now() + 1000);
-     * await desc.get('key');
-     * ```
+     * Open the cache object.
      */
     async open() {
-        return await this.stub.open();
+        if (!this.opened) {
+            const groupId = getCacheObjectIdName(this.locationId, this.tag);
+            const cacheGroup = this.doNamespace.get(this.doNamespace.idFromName(groupId), {
+                // Initialize the object with a locaiton hint,
+                // as we might want to purge all locations before the object is created.
+                // https://developers.cloudflare.com/durable-objects/reference/data-location/
+                locationHint: doLocationHints[this.locationId],
+            });
+            this.opened = await cacheGroup.open();
+        }
+
+        return this.opened;
     }
 
     /**
      * Get a value from the cache.
      */
     async get<Value = unknown>(key: string) {
-        return (await this.stub.get(key)) as Value | undefined;
+        const desc = await this.open();
+        return await desc.get<Value>(key);
     }
 
     /**
      * Set a value in the cache.
      */
     async set<Value = unknown>(key: string, value: Value, expiresAt: number) {
-        return await this.stub.set(key, value, expiresAt);
+        // TODO: Should we write on all locations instead of just the current one?
+        const desc = await this.open();
+        return await desc.set<Value>(key, value, expiresAt);
     }
 
     /**
@@ -77,12 +76,7 @@ export class CacheObjectStub {
         await Promise.all(
             allLocations.map(async (locationId) => {
                 const groupId = getCacheObjectIdName(locationId, this.tag);
-                const cacheGroup = this.doNamespace.get(this.doNamespace.idFromName(groupId), {
-                    // Initialize the object with a locaiton hint,
-                    // as we might want to purge all locations before the object is created.
-                    // https://developers.cloudflare.com/durable-objects/reference/data-location/
-                    locationHint: doLocationHints[this.locationId],
-                });
+                const cacheGroup = this.doNamespace.get(this.doNamespace.idFromName(groupId));
                 const locationkeys = await cacheGroup.purge();
                 locationkeys.forEach((key) => keys.add(key));
             }),

packages/cache-do/wrangler.toml

@@ -10,19 +10,8 @@ migrations = [
   {tag = "v1", new_classes = ["CacheObject"]}
 ]
 
-[observability]
-enabled = true
-head_sampling_rate = 0.01
-
 [env.preview]
 name = "gitbook-open-cache-preview"
 durable_objects.bindings = [
   {name = "CACHE", class_name = "CacheObject"}
 ]
-migrations = [
-  {tag = "v1", new_classes = ["CacheObject"]}
-]
-
-[env.preview.observability]
-enabled = true
-head_sampling_rate = 1

packages/gitbook/.env.example

@@ -25,6 +25,3 @@
 
 ### Sentry ###
 # SENTRY_DSN=xxx
-
-### Silent logs
-# SILENT=true

packages/gitbook/.gitignore

@@ -32,5 +32,4 @@ screenshots/
 /playwright/.cache/
 
 # Generated public files
-/public/~gitbook/static/*
-!/public/~gitbook/static/images
+/public/~gitbook/static/

packages/gitbook/CHANGELOG.md

@@ -1,100 +1,5 @@
 # gitbook
 
-## 0.4.0
-
-### Minor Changes
-
--   e09f747: Revalidate change request cached content when pressing refresh button
--   2fa0851: Add navigation tabs for sections
--   a4b63b8: Support resolution of new site URLs with sections
--   5c35f36: Replace all icons, previously imported from Geist, by new package `@gitbook/icons`
--   e9b31a5: Unify section tab styles with page item styles
--   f12a215: Add support for Norwegian language
--   f4c9536: Optimize layout shift while transitioning between pages with full width blocks (ex: OpenAPI blocks)
--   1f24fe4: Add support for page icons
--   cda08a9: Add support for searching results in a sections site
--   b32e40c: Persist state of tabs and dynamically sync them based on title
--   15d2ee3: Show the caption for file blocks
--   f885e88: Improve the toolbar for change-requests and revisions to show more actions
--   07ea45b: Remove deprecated synced block from GitBook Open
--   c3675fd: Added support for new Reusable Content block.
--   1f24fe4: Add support for icons style customization for sites
--   4c19014: Prevent search indexation for pages where it's configured as disabled
--   3422ad4: Update rendering of community ads to match new API response, and make it possible to preview ads.
--   1152445: Changed the alternative URL resolution criteria in order to support site URLs without /v/ prefix
--   2c437f7: Fix linking to a tab itself
-
-### Patch Changes
-
--   aa32198: Avoid multiple <h1> in the page by using a <div> for the title in the header
--   51fa3ab: Adds content-visibility css property to OpenAPI Operation for better render performance
--   a7066cc: Fix scroll position when navigating pages on mobile
--   c754fc9: Add automatic color contrast in site header, restyle search button
--   5fe7adb: RND-3532: drop down menu for hidden links at small screen size
--   6295881: Change dark mode shadow for multi-space search toolbar
--   f89b31c: Upgrade the scalar api client package
--   13c7534: Use ellipsis and fix icon color for more links in the header on small screen
--   f885e88: Improve consistency of change request preview by removing cache-control on response
--   16e6171: Improve performances of loading pages with embeds by caching them
--   34d36c6: Fix GitBook specific static assets not being served correctly when deployed on Cloudflare
--   af9e66e: Only display spaces dropdown in compact header when site is multi-variants
--   e3a3d6a: Improve perception of fast loading by not rendering skeletons for individual blocks in the top part of the viewport
--   042b850: Automatically scroll to active item in TOC
--   d43202f: Optimize bundle size of the server output by reducing bundle size of shiki (skipping themes)
--   bfbed1a: Ensure "Sponsored via GitBook" can be translated in all languages
--   fe9e6c1: Update ogimage with new design
--   17f71ba: Use url hash to open Expandable and scroll to anchor
--   3c07e65: Fix margin for paragraphs in quote blocks
--   636b868: Use new cache backend, powered by Durable Objects, alongside the existing ones (KV, etc).
--   f16560c: Include offset in calculations of whether scrollable element is in view
--   689f553: Fix inconsistent click area in table because of scroll indicator
--   6ce3cea: Stop using KV cache backend for now, but also improves it for higher performances
--   e914903: Synchronize response and response example tabs
--   0f990c7: Show definition title when visible in cards
--   e3a3d6a: Fix flickering when displaying an "Ask" answer with code blocks
--   4cbcc5b: Rollback of scalar modal while fixing perf issue
--   3996110: Optimize images rendered in community ads
--   133c3e7: Update design of Checkbox to be more consistent and readable
--   5096f7f: Disable KV cache for docs.gitbook.com as a test, also disable it for change-request to improve consistency
--   0f1565c: Add optional env `GITBOOK_INTEGRATIONS_HOST` to configure the host serving the integrations
--   2ff7ed1: Fix table of contents being visible on mobile when disabled at the page level
--   b075f0f: Fix accessibility of the table of contents by using `aria-current` instead of `aria-selected`
--   cb782a7: Fix "ip" being passed to BSA for community ads
--   a7af3ca: Improving the look and feel of new section tabs
--   0bf985a: Don't show hidden pages in the empty state of a page
--   d6c28a0: Update header styling of sections, variant selector, and button links
-
-    -   Change position of variant selector depending on context (next to logo or in table of contents)
-    -   Update section tab styling and animation
-    -   Make header buttons smaller with a new `medium` button size
-
--   Updated dependencies [51fa3ab]
--   Updated dependencies [9b8d519]
--   Updated dependencies [cf3045a]
--   Updated dependencies [f89b31c]
--   Updated dependencies [d0f4860]
--   Updated dependencies [ef9d012]
--   Updated dependencies [094e9cd]
--   Updated dependencies [636b868]
--   Updated dependencies [56f5fa1]
--   Updated dependencies [5c35f36]
--   Updated dependencies [4247361]
--   Updated dependencies [aa8c49e]
--   Updated dependencies [e914903]
--   Updated dependencies [4cbcc5b]
--   Updated dependencies [0f1565c]
--   Updated dependencies [237b703]
--   Updated dependencies [51955da]
--   Updated dependencies [a679e72]
--   Updated dependencies [c079c3c]
--   Updated dependencies [5c35f36]
--   Updated dependencies [776bc31]
-    -   @gitbook/react-openapi@0.7.0
-    -   @gitbook/cache-do@0.1.0
-    -   @gitbook/icons@0.1.0
-    -   @gitbook/react-contentkit@0.5.1
-    -   @gitbook/react-math@0.6.0
-
 ## 0.3.0
 
 ### Minor Changes

packages/gitbook/_routes.json

@@ -1,4 +0,0 @@
-{
-    "version": 1,
-    "exclude": ["/~gitbook/static/*"]
-}

packages/gitbook/e2e/pages.spec.ts

@@ -1,3 +1,4 @@
+import { DeepPartial } from 'ts-essentials';
 import { argosScreenshot } from '@argos-ci/playwright';
 import {
     CustomizationHeaderPreset,
@@ -8,7 +9,6 @@ import {
 import { test, expect, Page } from '@playwright/test';
 import jwt from 'jsonwebtoken';
 import rison from 'rison';
-import { DeepPartial } from 'ts-essentials';
 
 import { getContentTestURL } from '../tests/utils';
 
@@ -18,7 +18,6 @@ interface Test {
     run?: (page: Page) => Promise<unknown>; // The test to run
     fullPage?: boolean; // Whether the test should be fullscreened during testing
     screenshot?: false; // Should a screenshot be stored
-    only?: boolean; // Only run this test
 }
 
 interface TestsCase {
@@ -105,7 +104,7 @@ const testCases: TestsCase[] = [
             },
             {
                 name: 'RFC variant',
-                url: 'rfcs',
+                url: 'v/rfcs',
             },
             {
                 name: 'Customized variant titles are displayed',
@@ -157,13 +156,13 @@ const testCases: TestsCase[] = [
 
                     // It should keep the current page path, i.e "reference/api-reference/pets" when navigating to the new variant
                     await page.waitForURL(
-                        'https://gitbook-open-e2e-sites.gitbook.io/api-multi-versions/2.0/reference/api-reference/pets?fallback=true',
+                        'https://gitbook-open-e2e-sites.gitbook.io/api-multi-versions/v/2.0/reference/api-reference/pets?fallback=true',
                     );
                 },
             },
             {
                 name: 'Keep navigation path/route when switching variant (Share link)',
-                url: 'api-multi-versions-share-links/8tNo6MeXg7CkFMzSSz81/reference/api-reference/pets',
+                url: 'api-multi-versions-share-links/bRfQbzwsK8rbN1GRxx7K/reference/api-reference/pets',
                 screenshot: false,
                 run: async (page) => {
                     const spaceDrowpdown = await page.waitForSelector(
@@ -180,7 +179,7 @@ const testCases: TestsCase[] = [
 
                     // It should keep the current page path, i.e "reference/api-reference/pets" when navigating to the new variant
                     await page.waitForURL(
-                        'https://gitbook-open-e2e-sites.gitbook.io/api-multi-versions-share-links/8tNo6MeXg7CkFMzSSz81/2.0/reference/api-reference/pets?fallback=true',
+                        'https://gitbook-open-e2e-sites.gitbook.io/api-multi-versions-share-links/bRfQbzwsK8rbN1GRxx7K/v/2.0/reference/api-reference/pets?fallback=true',
                     );
                 },
             },
@@ -215,7 +214,7 @@ const testCases: TestsCase[] = [
 
                     // It should keep the current page path, i.e "reference/api-reference/pets" when navigating to the new variant
                     await page.waitForURL(
-                        'https://gitbook-open-e2e-sites.gitbook.io/api-multi-versions-va/2.0/reference/api-reference/pets?fallback=true',
+                        'https://gitbook-open-e2e-sites.gitbook.io/api-multi-versions-va/v/2.0/reference/api-reference/pets?fallback=true',
                     );
                 },
             },
@@ -372,11 +371,6 @@ const testCases: TestsCase[] = [
                 name: 'Math',
                 url: 'blocks/math',
             },
-            {
-                name: 'Files',
-                url: 'blocks/files',
-                fullPage: true,
-            },
             {
                 name: 'Embeds',
                 url: 'blocks/embeds',
@@ -395,10 +389,6 @@ const testCases: TestsCase[] = [
                     await page.click('[data-testid="annotation-button"]');
                 },
             },
-            {
-                name: 'Stepper',
-                url: 'blocks/stepper',
-            },
         ],
     },
     {
@@ -457,27 +447,6 @@ const testCases: TestsCase[] = [
                     }),
                 run: waitForCookiesDialog,
             },
-            {
-                name: 'With header buttons',
-                url: getCustomizationURL({
-                    header: {
-                        preset: CustomizationHeaderPreset.Default,
-                        links: [
-                            {
-                                title: 'Secondary button',
-                                to: { kind: 'url', url: 'https://www.gitbook.com' },
-                                style: 'button-secondary',
-                            },
-                            {
-                                title: 'Primary button',
-                                to: { kind: 'url', url: 'https://www.gitbook.com' },
-                                style: 'button-primary',
-                            },
-                        ],
-                    },
-                }),
-                run: waitForCookiesDialog,
-            },
         ],
     },
     {
@@ -497,7 +466,7 @@ const testCases: TestsCase[] = [
         tests: [
             {
                 name: 'Valid link',
-                url: 'thDznyWXCeEoT55WB7HC/',
+                url: 'TGs8PkF4GWVtbmPnWhYL/',
             },
             {
                 name: 'Invalid link',
@@ -584,7 +553,7 @@ const testCases: TestsCase[] = [
                             expiresIn: '24h',
                         },
                     );
-                    return `spacea?jwt_token=${token}`;
+                    return `v/spacea?jwt_token=${token}`;
                 })(),
                 run: waitForCookiesDialog,
             },
@@ -601,7 +570,7 @@ const testCases: TestsCase[] = [
                             expiresIn: '24h',
                         },
                     );
-                    return `spaceb?jwt_token=${token}`;
+                    return `v/spaceb?jwt_token=${token}`;
                 })(),
                 run: waitForCookiesDialog,
             },
@@ -618,7 +587,7 @@ const testCases: TestsCase[] = [
                             expiresIn: '24h',
                         },
                     );
-                    return `spacec?jwt_token=${token}`;
+                    return `v/spacec?jwt_token=${token}`;
                 })(),
                 run: waitForCookiesDialog,
             },
@@ -770,8 +739,7 @@ const testCases: TestsCase[] = [
 for (const testCase of testCases) {
     test.describe(testCase.name, () => {
         for (const testEntry of testCase.tests) {
-            const testFn = testEntry.only ? test.only : test;
-            testFn(testEntry.name, async ({ page, baseURL }) => {
+            test(testEntry.name, async ({ page, baseURL }) => {
                 const contentUrl = new URL(testEntry.url, testCase.baseUrl);
                 const url = getContentTestURL(contentUrl.toString(), baseURL);
                 await page.goto(url);

packages/gitbook/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gitbook",
-    "version": "0.4.0",
+    "version": "0.3.0",
     "private": true,
     "scripts": {
         "dev": "env-cmd --silent -f ../../.env.local next dev",
@@ -16,13 +16,13 @@
         "clean": "rm -rf ./.next && rm -rf ./public/~gitbook/static"
     },
     "dependencies": {
-        "@gitbook/api": "^0.73.0",
-        "@gitbook/cache-do": "workspace:*",
-        "@gitbook/emoji-codepoints": "workspace:*",
+        "@gitbook/api": "0.60.0",
         "@gitbook/icons": "workspace:*",
-        "@gitbook/react-contentkit": "workspace:*",
         "@gitbook/react-math": "workspace:*",
         "@gitbook/react-openapi": "workspace:*",
+        "@gitbook/react-contentkit": "workspace:*",
+        "@gitbook/emoji-codepoints": "workspace:*",
+        "@gitbook/cache-do": "workspace:*",
         "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-popover": "^1.0.7",
         "@sentry/nextjs": "^7.94.1",
@@ -41,14 +41,13 @@
         "katex": "^0.16.9",
         "mathjax": "^3.2.2",
         "memoizee": "^0.4.15",
-        "next": "14.2.15",
+        "next": "^14.2.5",
         "next-themes": "^0.2.1",
         "nuqs": "^1.17.4",
         "object-hash": "^3.0.0",
         "openapi-types": "^12.1.3",
         "p-map": "^7.0.0",
         "parse-cache-control": "^1.0.1",
-        "postcss-color-contrast": "^1.1.0",
         "react": "^18",
         "react-dom": "^18",
         "react-hotkeys-hook": "^4.4.1",
@@ -60,7 +59,7 @@
         "remark-rehype": "^11.1.0",
         "rison": "^0.1.1",
         "server-only": "^0.0.1",
-        "shiki": "^1.22.0",
+        "shiki": "^1.11.1",
         "tailwind-merge": "^2.2.0",
         "tailwind-shades": "^1.1.2",
         "unified": "^11.0.4",
@@ -69,7 +68,7 @@
     "devDependencies": {
         "@argos-ci/playwright": "^2.0.0",
         "@playwright/test": "^1.42.1",
-        "@cloudflare/next-on-pages": "^1.13.5",
+        "@cloudflare/next-on-pages": "^1.12.1",
         "@cloudflare/workers-types": "^4.20240725.0",
         "@types/js-cookie": "^3.0.6",
         "@types/jsontoxml": "^1.0.5",

packages/gitbook/public/_headers

@@ -1,3 +0,0 @@
-# GitBook immutable static assets
-/~gitbook/static/*
-  cache-control: public,max-age=31536000,immutable

packages/gitbook/src/app/(site)/(core)/~gitbook/ogimage/[pageId]/route.tsx

@@ -1,223 +0,0 @@
-import { CustomizationHeaderPreset } from '@gitbook/api';
-import { redirect } from 'next/navigation';
-import { ImageResponse } from 'next/og';
-import { NextRequest } from 'next/server';
-import colorContrast from 'postcss-color-contrast/js';
-import React from 'react';
-
-import { absoluteHref } from '@/lib/links';
-import { tcls } from '@/lib/tailwind';
-import { getContentTitle } from '@/lib/utils';
-
-import { PageIdParams, fetchPageData } from '../../../../fetch';
-
-export const runtime = 'edge';
-
-/**
- * Render the OpenGraph image for a space.
- */
-export async function GET(req: NextRequest, { params }: { params: PageIdParams }) {
-    const { space, page, customization, site } = await fetchPageData(params);
-
-    if (customization.socialPreview.url) {
-        // If user configured a custom social preview, we redirect to it.
-        redirect(customization.socialPreview.url);
-    }
-
-    // TODO: Support all fonts available in GitBook
-    // Right now this is impossible since next/font/google does not expose the cached font file
-    // Another option would be to use the Satori prop `loadAdditionalAsset` [example](https://github.com/vercel/satori/blob/main/playground/pages/index.tsx),
-    // but this prop isn't (yet) exposed through `ImageResponse`.
-    const interRegular = await fetch(
-        new URL('../../../../../../fonts/Inter/Inter-Regular.ttf', import.meta.url),
-    ).then((res) => res.arrayBuffer());
-    const interBold = await fetch(
-        new URL('../../../../../../fonts/Inter/Inter-Bold.ttf', import.meta.url),
-    ).then((res) => res.arrayBuffer());
-
-    const theme = customization.themes.default;
-    const useLightTheme = theme === 'light';
-
-    // We have no access to CSS variables, so we'll have to hardcode some values
-    const baseColors = {
-        light: '#ffffff',
-        dark: '#111827',
-    };
-
-    let colors = {
-        background: baseColors[theme],
-        gradient: customization.styling.primaryColor[theme],
-        title: customization.styling.primaryColor[theme],
-        body: baseColors[useLightTheme ? 'dark' : 'light'], // Invert text on background
-    };
-
-    const gridWhite = absoluteHref('~gitbook/static/images/ogimage-grid-white.png', true);
-    const gridBlack = absoluteHref('~gitbook/static/images/ogimage-grid-black.png', true);
-
-    let gridAsset = useLightTheme ? gridBlack : gridWhite;
-
-    switch (customization.header.preset) {
-        case CustomizationHeaderPreset.Custom:
-            colors = {
-                background: customization.header.backgroundColor?.[theme] || colors.background,
-                gradient: customization.header.linkColor?.[theme] || colors.gradient,
-                title: customization.header.linkColor?.[theme] || colors.title,
-                body: colorContrast(
-                    customization.header.backgroundColor?.[theme] || colors.background,
-                    [baseColors.light, baseColors.dark],
-                ),
-            };
-            gridAsset = colors.body == baseColors.light ? gridWhite : gridBlack;
-            break;
-
-        case CustomizationHeaderPreset.Bold:
-            colors = {
-                background: customization.styling.primaryColor[theme],
-                gradient: colorContrast(customization.styling.primaryColor[theme], [
-                    baseColors.light,
-                    baseColors.dark,
-                ]),
-                title: colorContrast(customization.styling.primaryColor[theme], [
-                    baseColors.light,
-                    baseColors.dark,
-                ]),
-                body: colorContrast(customization.styling.primaryColor[theme], [
-                    baseColors.light,
-                    baseColors.dark,
-                ]),
-            };
-            gridAsset = colors.body == baseColors.light ? gridWhite : gridBlack;
-            break;
-    }
-
-    const favicon = function () {
-        if ('icon' in customization.favicon)
-            return (
-                <img
-                    src={customization.favicon.icon[theme]}
-                    width={40}
-                    height={40}
-                    tw={tcls('mr-4')}
-                    alt="Icon"
-                />
-            );
-        if ('emoji' in customization.favicon)
-            return (
-                <span tw={tcls('text-4xl', 'mr-4')}>
-                    {String.fromCodePoint(parseInt('0x' + customization.favicon.emoji))}
-                </span>
-            );
-        return (
-            <img
-                src={absoluteHref(
-                    `~gitbook/icon?size=medium&theme=${customization.themes.default}`,
-                    true,
-                )}
-                alt="Icon"
-                width={40}
-                height={40}
-                tw={tcls('mr-4')}
-            />
-        );
-    };
-
-    return new ImageResponse(
-        (
-            <div
-                tw={tcls(
-                    'justify-between',
-                    'p-20',
-                    'relative',
-                    'w-full',
-                    'h-full',
-                    'flex',
-                    'flex-col',
-                    `bg-[${colors.background}]`,
-                    `text-[${colors.body}]`,
-                )}
-            >
-                {/* Gradient */}
-                <div
-                    tw={tcls('absolute', 'inset-0')}
-                    style={{
-                        backgroundImage: `radial-gradient(ellipse 100% 100% at top right , ${colors.gradient}, ${colors.gradient}00)`,
-                        opacity: 0.5,
-                    }}
-                ></div>
-
-                {/* Grid */}
-                <img
-                    tw={tcls('absolute', 'inset-0', 'w-[100vw]', 'h-[100vh]')}
-                    src={gridAsset}
-                    alt="Grid"
-                />
-
-                {/* Logo */}
-                {customization.header.logo ? (
-                    <img
-                        alt="Logo"
-                        height={60}
-                        src={
-                            useLightTheme
-                                ? customization.header.logo.light
-                                : customization.header.logo.dark
-                        }
-                    />
-                ) : (
-                    <div tw={tcls('flex')}>
-                        {favicon()}
-                        <h3 tw={tcls('text-4xl', 'my-0')}>
-                            {getContentTitle(space, customization, site ?? null)}
-                        </h3>
-                    </div>
-                )}
-
-                {/* Title and description */}
-                <div tw={tcls('flex', 'flex-col')}>
-                    <h1
-                        tw={tcls(
-                            'text-8xl',
-                            'my-0',
-                            'tracking-tight',
-                            'leading-none',
-                            'text-left',
-                            `text-[${colors.title}]`,
-                            'font-bold',
-                        )}
-                    >
-                        {page
-                            ? page.title.length > 64
-                                ? page.title.slice(0, 64) + '...'
-                                : page.title
-                            : 'Not found'}
-                    </h1>
-                    {page?.description && page?.title.length <= 64 ? (
-                        <h2 tw={tcls('text-4xl', 'mb-0', 'mt-8', 'w-[75%]', 'font-normal')}>
-                            {page.description.length > 164
-                                ? page.description.slice(0, 164) + '...'
-                                : page.description}
-                        </h2>
-                    ) : null}
-                </div>
-            </div>
-        ),
-        {
-            width: 1200,
-            height: 630,
-            fonts: [
-                {
-                    name: 'Inter',
-                    data: interRegular,
-                    weight: 400,
-                    style: 'normal',
-                },
-                {
-                    name: 'Inter',
-                    data: interBold,
-                    weight: 700,
-                    style: 'normal',
-                },
-            ],
-        },
-    );
-}

packages/gitbook/src/app/(site)/fetch.ts

@@ -1,219 +0,0 @@
-import { RevisionPage, SiteSection, SiteSpace, Space } from '@gitbook/api';
-import { assert } from 'ts-essentials';
-
-import {
-    getRevisionPageByPath,
-    getDocument,
-    ContentTarget,
-    getSiteData,
-    getSite,
-    getCurrentSiteCustomization,
-    getSiteStructure,
-} from '@/lib/api';
-import { resolvePagePath, resolvePageId } from '@/lib/pages';
-import { getSiteContentPointer } from '@/lib/pointer';
-
-export interface PagePathParams {
-    pathname?: string[];
-}
-
-export interface PageIdParams {
-    pageId: string;
-}
-
-type SectionsList = { list: SiteSection[]; section: SiteSection };
-
-/**
- * Fetch all the data needed to render the content layout.
- */
-export async function fetchContentData() {
-    const content = getSiteContentPointer();
-
-    const [{ space, contentTarget, pages, customization, scripts }, siteStructure] =
-        await Promise.all([
-            getSiteData(content),
-            fetchSiteStructure({
-                organizationId: content.organizationId,
-                siteId: content.siteId,
-                siteShareKey: content.siteShareKey,
-            }),
-        ]);
-
-    const site = siteStructure.site;
-
-    const siteSections =
-        content.siteSectionId && siteStructure.sections
-            ? parseSiteSectionsList(content.siteSectionId, siteStructure.sections)
-            : null;
-
-    const spaces =
-        siteStructure.spaces ??
-        (siteSections ? parseSpacesFromSiteSpaces(siteSections.section.siteSpaces) : []);
-
-    // we grab the space attached to the parent as it contains overriden customizations
-    const spaceRelativeToParent = spaces?.find((space) => space.id === content.spaceId);
-
-    return {
-        content,
-        contentTarget,
-        space: spaceRelativeToParent ?? space,
-        pages,
-        sections: siteSections,
-        site,
-        spaces,
-        customization,
-        scripts,
-        ancestors: [],
-    };
-}
-
-function parseSiteSectionsList(siteSectionId: string, sections: SiteSection[]) {
-    const section = sections.find((section) => section.id === siteSectionId);
-    assert(sectionIsDefined(section), 'A section must be defined when there are multiple sections');
-    return { list: sections, section } satisfies SectionsList;
-}
-
-function sectionIsDefined(section?: SiteSection): section is NonNullable<SiteSection> {
-    return typeof section !== 'undefined' && section !== null;
-}
-
-/**
- * Fetch all the data needed to render the content.
- * Optimized to fetch in parallel as much as possible.
- */
-export async function fetchPageData(params: PagePathParams | PageIdParams) {
-    const content = getSiteContentPointer();
-
-    const { space, contentTarget, pages, customization, scripts } = await getSiteData(content);
-    const page = await resolvePage(contentTarget, pages, params);
-    const [siteStructure, document] = await Promise.all([
-        fetchSiteStructure({
-            organizationId: content.organizationId,
-            siteId: content.siteId,
-            siteShareKey: content.siteShareKey,
-        }),
-        page?.page.documentId ? getDocument(space.id, page.page.documentId) : null,
-    ]);
-
-    return {
-        content,
-        contentTarget,
-        space,
-        pages,
-        customization,
-        scripts,
-        ancestors: [],
-        ...page,
-        ...siteStructure,
-        document,
-    };
-}
-
-/**
- * Resolve a page from the params.
- * If the path can't be found, we try to resolve it from the API to handle redirects.
- */
-async function resolvePage(
-    contentTarget: ContentTarget,
-    pages: RevisionPage[],
-    params: PagePathParams | PageIdParams,
-) {
-    if ('pageId' in params) {
-        return resolvePageId(pages, params.pageId);
-    }
-
-    const rawPathname = getPathnameParam(params);
-    const pathname = normalizePathname(rawPathname);
-
-    // When resolving a page, we use the lowercased pathname
-    const page = resolvePagePath(pages, pathname);
-    if (page) {
-        return page;
-    }
-
-    // If page can't be found, we try with the API, in case we have a redirect
-    // We use the raw pathname to handle special/malformed redirects setup by users in the GitSync.
-    // The page rendering will take care of redirecting to a normalized pathname.
-    //
-    // We don't test path that are too long as GitBook doesn't support them and will return a 404 anyway.
-    if (rawPathname.length <= 512) {
-        const resolved = await getRevisionPageByPath(
-            contentTarget.spaceId,
-            contentTarget.revisionId,
-            rawPathname,
-        );
-        if (resolved) {
-            return resolvePageId(pages, resolved.id);
-        }
-    }
-
-    return undefined;
-}
-
-/**
- * Fetch the structure of an organization site.
- * This includes the site and its sections or spaces.
- */
-async function fetchSiteStructure(args: {
-    organizationId: string;
-    siteId: string;
-    siteShareKey: string | undefined;
-}) {
-    const { organizationId, siteId, siteShareKey } = args;
-    const [orgSite, siteStructure, siteParentCustomizations] = await Promise.all([
-        getSite(organizationId, siteId),
-        getSiteStructure({ organizationId, siteId, siteShareKey }),
-        getCurrentSiteCustomization({ organizationId, siteId, siteSpaceId: undefined }),
-    ]);
-
-    const siteSections =
-        siteStructure.type === 'sections' && siteStructure.structure
-            ? siteStructure.structure
-            : null;
-    const siteSpaces =
-        siteStructure.type === 'siteSpaces' && siteStructure.structure
-            ? parseSpacesFromSiteSpaces(siteStructure.structure)
-            : null;
-
-    // override the title with the customization title
-    const site = {
-        ...orgSite,
-        ...(siteParentCustomizations?.title ? { title: siteParentCustomizations.title } : {}),
-    };
-
-    return {
-        site,
-        spaces: siteSpaces,
-        sections: siteSections,
-    };
-}
-
-function parseSpacesFromSiteSpaces(siteSpaces: SiteSpace[]) {
-    const spaces: Record<string, Space> = {};
-    siteSpaces.forEach((siteSpace) => {
-        spaces[siteSpace.space.id] = {
-            ...siteSpace.space,
-            title: siteSpace.title ?? siteSpace.space.title,
-            urls: {
-                ...siteSpace.space.urls,
-                published: siteSpace.urls.published,
-            },
-        };
-    });
-    return Object.values(spaces);
-}
-
-/**
- * Get the page path from the params.
- */
-export function getPathnameParam(params: PagePathParams): string {
-    const { pathname } = params;
-    return pathname ? pathname.map((part) => decodeURIComponent(part)).join('/') : '';
-}
-
-/**
- * Normalize the URL pathname into the format used in the revision page path.
- */
-export function normalizePathname(pathname: string) {
-    return pathname.toLowerCase();
-}

packages/gitbook/src/app/(site)/layout.tsx

@@ -1,18 +0,0 @@
-import { CustomizationRootLayout } from '@/components/RootLayout';
-import { getSiteLayoutData } from '@/lib/api';
-import { getSiteContentPointer } from '@/lib/pointer';
-
-/**
- * Layout to be used for the site root. It fetches the customization data for the site
- * and initializes the CustomizationRootLayout with it.
- */
-export default async function SiteRootLayout(props: { children: React.ReactNode }) {
-    const { children } = props;
-
-    const pointer = getSiteContentPointer();
-    const { customization } = await getSiteLayoutData(pointer);
-
-    return (
-        <CustomizationRootLayout customization={customization}>{children}</CustomizationRootLayout>
-    );
-}

packages/gitbook/src/app/(space)/(content)/[[...pathname]]/PageClientLayout.tsx

@@ -3,15 +3,15 @@
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import React from 'react';
 
-import { useScrollPage } from '@/components/hooks';
+import { useScrollToHash } from '@/components/hooks';
 
 /**
  * Client component to initialize interactivity for a page.
  */
 export function PageClientLayout(props: {}) {
     // We use this hook in the page layout to ensure the elements for the blocks
-    // are rendered before we scroll to a hash or to the top of the page
-    useScrollPage();
+    // are rendered before we scroll to the hash.
+    useScrollToHash();
 
     useStripFallbackQueryParam();
     return null;

packages/gitbook/src/app/(space)/(content)/[[...pathname]]/not-found.tsx

@@ -1,11 +1,14 @@
 import { getSpaceLanguage, t } from '@/intl/server';
-import { getSiteLayoutData } from '@/lib/api';
-import { getSiteContentPointer } from '@/lib/pointer';
+import { getCurrentSiteLayoutData, getSpaceLayoutData } from '@/lib/api';
 import { tcls } from '@/lib/tailwind';
 
+import { getContentPointer } from '../../fetch';
+
 export default async function NotFound() {
-    const pointer = getSiteContentPointer();
-    const { customization } = await getSiteLayoutData(pointer);
+    const pointer = getContentPointer();
+    const { customization } = await ('siteId' in pointer
+        ? getCurrentSiteLayoutData(pointer)
+        : getSpaceLayoutData(pointer.spaceId));
 
     const language = getSpaceLanguage(customization);
 

packages/gitbook/src/app/(space)/(content)/[[...pathname]]/page.tsx

@@ -29,9 +29,8 @@ export default async function Page(props: {
     const {
         content: contentPointer,
         contentTarget,
-        sections,
         space,
-        site,
+        parent,
         customization,
         pages,
         page,
@@ -66,39 +65,22 @@ export default async function Page(props: {
     const withPageFeedback = customization.feedback.enabled;
 
     const contentRefContext: ContentRefContext = {
-        siteContext: contentPointer,
+        siteContext: 'siteId' in contentPointer ? contentPointer : null,
         space,
         revisionId: contentTarget.revisionId,
         pages,
         page,
     };
 
-    const withSections = Boolean(sections && sections.length > 0);
-    const headerOffset = { sectionsHeader: withSections, topHeader: withTopHeader };
-
     return (
         <>
             {withFullPageCover && page.cover ? (
                 <PageCover as="full" page={page} cover={page.cover} context={contentRefContext} />
             ) : null}
-            {/* We use a flex row reverse to render the aside first because the page is streamed. */}
-            <div className="flex flex-row-reverse justify-end">
-                {page.layout.outline ? (
-                    <PageAside
-                        space={space}
-                        site={site}
-                        customization={customization}
-                        page={page}
-                        document={document}
-                        withHeaderOffset={headerOffset}
-                        withFullPageCover={withFullPageCover}
-                        withPageFeedback={withPageFeedback}
-                        context={contentRefContext}
-                    />
-                ) : null}
+            <div className={tcls('flex', 'flex-row')}>
                 <PageBody
                     space={space}
-                    pointer={contentPointer}
+                    contentPointer={contentPointer}
                     contentTarget={contentTarget}
                     customization={customization}
                     context={contentRefContext}
@@ -109,6 +91,19 @@ export default async function Page(props: {
                         withPageFeedback && !page.layout.outline
                     }
                 />
+                {page.layout.outline ? (
+                    <PageAside
+                        space={space}
+                        site={parent?.object === 'site' ? parent : undefined}
+                        customization={customization}
+                        page={page}
+                        document={document}
+                        withHeaderOffset={withTopHeader}
+                        withFullPageCover={withFullPageCover}
+                        withPageFeedback={withPageFeedback}
+                        context={contentRefContext}
+                    />
+                ) : null}
             </div>
             <React.Suspense fallback={null}>
                 <PageClientLayout />
@@ -135,7 +130,7 @@ export async function generateMetadata({
     params: PagePathParams;
     searchParams: { fallback?: string };
 }): Promise<Metadata> {
-    const { space, pages, page, customization, site, ancestors } = await getPageDataWithFallback({
+    const { space, pages, page, customization, parent, ancestors } = await getPageDataWithFallback({
         pagePathParams: params,
         searchParams,
     });
@@ -145,7 +140,7 @@ export async function generateMetadata({
     }
 
     return {
-        title: [page.title, getContentTitle(space, customization, site ?? null)]
+        title: [page.title, getContentTitle(space, customization, parent)]
             .filter(Boolean)
             .join(' | '),
         description: page.description ?? '',
@@ -159,7 +154,7 @@ export async function generateMetadata({
             ],
         },
         robots:
-            isSpaceIndexable({ space, site: site ?? null }) && isPageIndexable(ancestors, page)
+            isSpaceIndexable({ space, parent }) && isPageIndexable(ancestors, page)
                 ? 'index, follow'
                 : 'noindex, nofollow',
     };

packages/gitbook/src/app/(space)/(content)/layout.tsx

@@ -18,7 +18,7 @@ import { getContentTitle } from '@/lib/utils';
 
 import { ClientContexts } from './ClientContexts';
 import { RocketLoaderDetector } from './RocketLoaderDetector';
-import { fetchContentData } from '../fetch';
+import { fetchSpaceData } from '../fetch';
 
 export const runtime = 'edge';
 
@@ -35,12 +35,11 @@ export default async function ContentLayout(props: { children: React.ReactNode }
         contentTarget,
         customization,
         pages,
-        site,
+        parent,
         spaces,
         ancestors,
         scripts,
-        sections,
-    } = await fetchContentData();
+    } = await fetchSpaceData();
 
     ReactDOM.preconnect(api().endpoint);
     if (assetsDomain) {
@@ -65,9 +64,8 @@ export default async function ContentLayout(props: { children: React.ReactNode }
             <SpaceLayout
                 space={space}
                 contentTarget={contentTarget}
-                site={site}
+                parent={parent}
                 spaces={spaces}
-                sections={sections}
                 customization={customization}
                 pages={pages}
                 ancestors={ancestors}
@@ -99,7 +97,7 @@ export default async function ContentLayout(props: { children: React.ReactNode }
 }
 
 export async function generateViewport(): Promise<Viewport> {
-    const { customization } = await fetchContentData();
+    const { customization } = await fetchSpaceData();
     return {
         colorScheme: customization.themes.toggeable
             ? customization.themes.default === CustomizationThemeMode.Dark
@@ -110,11 +108,11 @@ export async function generateViewport(): Promise<Viewport> {
 }
 
 export async function generateMetadata(): Promise<Metadata> {
-    const { space, site, customization } = await fetchContentData();
+    const { space, parent, customization } = await fetchSpaceData();
     const customIcon = 'icon' in customization.favicon ? customization.favicon.icon : null;
 
     return {
-        title: getContentTitle(space, customization, site),
+        title: getContentTitle(space, customization, parent),
         generator: `GitBook (${buildVersion()})`,
         metadataBase: new URL(baseUrl()),
         icons: {
@@ -135,7 +133,7 @@ export async function generateMetadata(): Promise<Metadata> {
                 },
             ],
         },
-        robots: isSpaceIndexable({ space, site }) ? 'index, follow' : 'noindex, nofollow',
+        robots: isSpaceIndexable({ space, parent }) ? 'index, follow' : 'noindex, nofollow',
     };
 }
 

packages/gitbook/src/app/(space)/(core)/robots.txt/route.ts

@@ -3,25 +3,32 @@ import { NextRequest } from 'next/server';
 
 import { getCollection, getSite, getSpace } from '@/lib/api';
 import { absoluteHref } from '@/lib/links';
-import { getSiteContentPointer } from '@/lib/pointer';
 import { isSpaceIndexable } from '@/lib/seo';
 
+import { getContentPointer } from '../../fetch';
+
 export const runtime = 'edge';
 
 /**
  * Generate a robots.txt for the current space.
  */
 export async function GET(req: NextRequest) {
-    const pointer = getSiteContentPointer();
-    const [site, space] = await Promise.all([
-        getSite(pointer.organizationId, pointer.siteId),
-        getSpace(pointer.spaceId, pointer.siteShareKey),
-    ]);
+    const pointer = getContentPointer();
+    const space = await getSpace(
+        pointer.spaceId,
+        'siteId' in pointer ? pointer.siteShareKey : undefined,
+    );
+    const parent =
+        'siteId' in pointer
+            ? await getSite(pointer.organizationId, pointer.siteId)
+            : space.visibility === ContentVisibility.InCollection && space.parent
+              ? await getCollection(space.parent)
+              : null;
 
     const lines = [
         `User-agent: *`,
         'Disallow: /~gitbook/',
-        ...(isSpaceIndexable({ space, site })
+        ...(isSpaceIndexable({ space, parent })
             ? [`Allow: /`, `Sitemap: ${absoluteHref(`/sitemap.xml`, true)}`]
             : [`Disallow: /`]),
     ];

packages/gitbook/src/app/(space)/(core)/sitemap.xml/route.ts

@@ -5,17 +5,21 @@ import { NextRequest } from 'next/server';
 import { getSpaceContentData } from '@/lib/api';
 import { absoluteHref } from '@/lib/links';
 import { getPagePath } from '@/lib/pages';
-import { getSiteContentPointer } from '@/lib/pointer';
 import { isPageIndexable } from '@/lib/seo';
 
+import { getContentPointer } from '../../fetch';
+
 export const runtime = 'edge';
 
 /**
  * Generate a sitemap.xml for the current space.
  */
 export async function GET(req: NextRequest) {
-    const pointer = getSiteContentPointer();
-    const { pages: rootPages } = await getSpaceContentData(pointer, pointer.siteShareKey);
+    const pointer = getContentPointer();
+    const { pages: rootPages } = await getSpaceContentData(
+        pointer,
+        'siteId' in pointer ? pointer.siteShareKey : undefined,
+    );
 
     const pages = flattenPages(rootPages, (page) => !page.hidden && isPageIndexable([], page));
     const urls = pages.map(({ page, depth }) => {
@@ -84,12 +88,10 @@ function flattenPages(
         return [
             ...(page.type === 'document' ? [{ page, depth }] : []),
             ...page.pages.flatMap((child) =>
-                child.type === 'document' ? flattenPage(child, depth + 1) : [],
+                child.type === 'link' ? [] : flattenPage(child, depth + 1),
             ),
         ];
     };
 
-    return rootPags.flatMap((page) =>
-        page.type === 'group' || page.type === 'document' ? flattenPage(page, 0) : [],
-    );
+    return rootPags.flatMap((page) => (page.type === 'link' ? [] : flattenPage(page, 0)));
 }

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

@@ -1,11 +1,18 @@
+import { ContentVisibility } from '@gitbook/api';
 import { notFound } from 'next/navigation';
 import { ImageResponse } from 'next/og';
 import { NextRequest } from 'next/server';
 import React from 'react';
 
-import { getCurrentSiteCustomization, getSite, getSpace } from '@/lib/api';
+import { getContentPointer } from '@/app/(space)/fetch';
+import {
+    getCollection,
+    getCurrentSiteCustomization,
+    getSite,
+    getSpace,
+    getSpaceCustomization,
+} from '@/lib/api';
 import { getEmojiForCode } from '@/lib/emojis';
-import { getSiteContentPointer } from '@/lib/pointer';
 import { tcls } from '@/lib/tailwind';
 import { getContentTitle } from '@/lib/utils';
 
@@ -35,15 +42,20 @@ export async function GET(req: NextRequest) {
     const options = getOptions(req.url);
     const size = SIZES[options.size];
 
-    const pointer = getSiteContentPointer();
+    const pointer = getContentPointer();
     const spaceId = pointer.spaceId;
 
     const [space, customization] = await Promise.all([
-        getSpace(spaceId, pointer.siteShareKey),
-        getCurrentSiteCustomization(pointer),
+        getSpace(spaceId, 'siteId' in pointer ? pointer.siteShareKey : undefined),
+        'siteId' in pointer ? getCurrentSiteCustomization(pointer) : getSpaceCustomization(spaceId),
     ]);
-    const site = await getSite(pointer.organizationId, pointer.siteId);
-    const contentTitle = getContentTitle(space, customization, site);
+    const parent =
+        'siteId' in pointer
+            ? await getSite(pointer.organizationId, pointer.siteId)
+            : space.visibility === ContentVisibility.InCollection && space.parent
+              ? await getCollection(space.parent)
+              : null;
+    const contentTitle = getContentTitle(space, customization, parent);
 
     return new ImageResponse(
         (

packages/gitbook/src/app/(space)/(core)/~gitbook/ogimage/[pageId]/route.tsx

@@ -0,0 +1,53 @@
+import { redirect } from 'next/navigation';
+import { ImageResponse } from 'next/og';
+import { NextRequest } from 'next/server';
+import React from 'react';
+
+import { getContentTitle } from '@/lib/utils';
+
+import { PageIdParams, fetchPageData } from '../../../../fetch';
+
+export const runtime = 'edge';
+
+/**
+ * Render the OpenGraph image for a space.
+ */
+export async function GET(req: NextRequest, { params }: { params: PageIdParams }) {
+    const { space, page, customization, parent } = await fetchPageData(params);
+    const url = new URL(space.urls.published ?? space.urls.app);
+
+    if (customization.socialPreview.url) {
+        // If user configured a custom social preview, we redirect to it.
+        redirect(customization.socialPreview.url);
+    }
+
+    return new ImageResponse(
+        (
+            <div
+                tw="bg-gray-50 py-16 px-14"
+                style={{
+                    height: '100%',
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                }}
+            >
+                <h2 tw="text-7xl font-bold tracking-tight text-left">
+                    {getContentTitle(space, customization, parent)}
+                </h2>
+                <div tw="flex flex-1">
+                    <p tw="text-4xl">{page ? page.title : 'Not found'}</p>
+                </div>
+                <div tw="flex">
+                    <p tw="text-4xl">
+                        {url.hostname + (url.pathname.length > 1 ? url.pathname : '')}
+                    </p>
+                </div>
+            </div>
+        ),
+        {
+            width: 1200,
+            height: 630,
+        },
+    );
+}

packages/gitbook/src/app/(space)/(core)/~gitbook/pdf/page.tsx

@@ -11,6 +11,7 @@ import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import * as React from 'react';
 
+import { getContentPointer } from '@/app/(space)/fetch';
 import { DocumentView, createHighlightingContext } from '@/components/DocumentView';
 import { TrademarkLink } from '@/components/TableOfContents/Trademark';
 import { PolymorphicComponentProp } from '@/components/utils/types';
@@ -31,7 +32,6 @@ import { PDFSearchParams, getPDFSearchParams } from '@/lib/urls';
 
 import './pdf.css';
 import { PageControlButtons } from './PageControlButtons';
-import { getSiteOrSpacePointerForPDF } from './pointer';
 import { PrintButton } from './PrintButton';
 
 const DEFAULT_LIMIT = 100;
@@ -39,12 +39,15 @@ const DEFAULT_LIMIT = 100;
 export const runtime = 'edge';
 
 export async function generateMetadata(): Promise<Metadata> {
-    const pointer = getSiteOrSpacePointerForPDF();
+    const contentPointer = getContentPointer();
     const [space, customization] = await Promise.all([
-        getSpace(pointer.spaceId, 'siteId' in pointer ? pointer.siteShareKey : undefined),
-        'siteId' in pointer
-            ? getCurrentSiteCustomization(pointer)
-            : getSpaceCustomization(pointer.spaceId),
+        getSpace(
+            contentPointer.spaceId,
+            'siteId' in contentPointer ? contentPointer.siteShareKey : undefined,
+        ),
+        'siteId' in contentPointer
+            ? getCurrentSiteCustomization(contentPointer)
+            : getSpaceCustomization(contentPointer.spaceId),
     ]);
 
     return {
@@ -57,7 +60,7 @@ export async function generateMetadata(): Promise<Metadata> {
  * Render a space as a standalone HTML page that can be printed as a PDF.
  */
 export default async function PDFHTMLOutput(props: { searchParams: { [key: string]: string } }) {
-    const pointer = getSiteOrSpacePointerForPDF();
+    const contentPointer = getContentPointer();
 
     const searchParams = new URLSearchParams(props.searchParams);
     const pdfParams = getPDFSearchParams(new URLSearchParams(searchParams));
@@ -68,10 +71,13 @@ export default async function PDFHTMLOutput(props: { searchParams: { [key: strin
 
     // Load the content,
     const [customization, { space, contentTarget, pages: rootPages }] = await Promise.all([
-        'siteId' in pointer
-            ? getCurrentSiteCustomization(pointer)
-            : getSpaceCustomization(pointer.spaceId),
-        getSpaceContentData(pointer, 'siteId' in pointer ? pointer.siteShareKey : undefined),
+        'siteId' in contentPointer
+            ? getCurrentSiteCustomization(contentPointer)
+            : getSpaceCustomization(contentPointer.spaceId),
+        getSpaceContentData(
+            contentPointer,
+            'siteId' in contentPointer ? contentPointer.siteShareKey : undefined,
+        ),
     ]);
     const language = getSpaceLanguage(customization);
 
@@ -169,7 +175,7 @@ export default async function PDFHTMLOutput(props: { searchParams: { [key: strin
                             space={space}
                             page={page}
                             refContext={{
-                                siteContext: 'siteId' in pointer ? pointer : null,
+                                siteContext: 'siteId' in contentPointer ? contentPointer : null,
                                 space,
                                 revisionId: contentTarget.revisionId,
                                 pages: rootPages,
@@ -315,7 +321,7 @@ function selectPages(
         return [
             { page, depth },
             ...page.pages.flatMap((child) => {
-                if (child.type !== 'document') {
+                if (child.type === 'link') {
                     return [];
                 }
 
@@ -350,7 +356,7 @@ function selectPages(
     }
 
     const allPages = rootPages.flatMap((page) => {
-        if (page.type !== 'document' && page.type !== 'group') {
+        if (page.type === 'link') {
             return [];
         }
 

packages/gitbook/src/app/(space)/fetch.ts

@@ -0,0 +1,244 @@
+import { ContentVisibility, RevisionPage, Space } from '@gitbook/api';
+import { headers } from 'next/headers';
+
+import {
+    getCollectionSpaces,
+    getCollection,
+    ContentPointer,
+    getRevisionPageByPath,
+    getDocument,
+    getSpaceData,
+    ContentTarget,
+    SiteContentPointer,
+    getCurrentSiteData,
+    getSite,
+    getSiteSpaces,
+    getCurrentSiteCustomization,
+} from '@/lib/api';
+import { resolvePagePath, resolvePageId } from '@/lib/pages';
+
+export interface PagePathParams {
+    pathname?: string[];
+}
+
+export interface PageIdParams {
+    pageId: string;
+}
+
+/**
+ * Get the current content pointer from the params.
+ */
+export function getContentPointer(): ContentPointer | SiteContentPointer {
+    const headerSet = headers();
+    const spaceId = headerSet.get('x-gitbook-content-space');
+    if (!spaceId) {
+        throw new Error(
+            'getContentPointer is called outside the scope of a request processed by the middleware',
+        );
+    }
+
+    const siteId = headerSet.get('x-gitbook-content-site');
+    if (siteId) {
+        const organizationId = headerSet.get('x-gitbook-content-organization');
+        const siteSpaceId = headerSet.get('x-gitbook-content-site-space');
+        const siteShareKey = headerSet.get('x-gitbook-content-site-share-key');
+        if (!organizationId) {
+            throw new Error('Missing site content headers');
+        }
+
+        const siteContent: SiteContentPointer = {
+            siteId,
+            spaceId,
+            siteSpaceId: siteSpaceId ?? undefined,
+            siteShareKey: siteShareKey ?? undefined,
+            organizationId,
+            revisionId: headerSet.get('x-gitbook-content-revision') ?? undefined,
+            changeRequestId: headerSet.get('x-gitbook-content-changerequest') ?? undefined,
+        };
+        return siteContent;
+    } else {
+        const content: ContentPointer = {
+            spaceId,
+            revisionId: headerSet.get('x-gitbook-content-revision') ?? undefined,
+            changeRequestId: headerSet.get('x-gitbook-content-changerequest') ?? undefined,
+        };
+        return content;
+    }
+}
+
+/**
+ * Fetch all the data needed to render the space layout.
+ */
+export async function fetchSpaceData() {
+    const content = getContentPointer();
+
+    const siteShareKey = 'siteId' in content ? content.siteShareKey : undefined;
+
+    const [{ space, contentTarget, pages, customization, scripts }, parentSite] = await Promise.all(
+        'siteId' in content
+            ? [
+                  getCurrentSiteData(content),
+                  fetchParentSite({
+                      organizationId: content.organizationId,
+                      siteId: content.siteId,
+                      siteShareKey,
+                  }),
+              ]
+            : [getSpaceData(content, siteShareKey)],
+    );
+
+    const parent = await (parentSite ?? fetchParentCollection(space));
+    // we grab the space attached to the parent as it contains overriden customizations
+    const spaceRelativeToParent = parent?.spaces.find((space) => space.id === content.spaceId);
+
+    return {
+        content,
+        contentTarget,
+        space: spaceRelativeToParent ?? space,
+        pages,
+        customization,
+        scripts,
+        ancestors: [],
+        ...parent,
+    };
+}
+
+/**
+ * Fetch all the data needed to render the content.
+ * Optimized to fetch in parallel as much as possible.
+ */
+export async function fetchPageData(params: PagePathParams | PageIdParams) {
+    const content = getContentPointer();
+    const siteShareKey = 'siteId' in content ? content.siteShareKey : undefined;
+    const { space, contentTarget, pages, customization, scripts } = await ('siteId' in content
+        ? getCurrentSiteData(content)
+        : getSpaceData(content, siteShareKey));
+
+    const page = await resolvePage(contentTarget, pages, params);
+    const [parent, document] = await Promise.all([
+        'siteId' in content
+            ? fetchParentSite({
+                  organizationId: content.organizationId,
+                  siteId: content.siteId,
+                  siteShareKey: content.siteShareKey,
+              })
+            : fetchParentCollection(space),
+        page?.page.documentId ? getDocument(space.id, page.page.documentId) : null,
+    ]);
+
+    return {
+        content,
+        contentTarget,
+        space,
+        pages,
+        customization,
+        scripts,
+        ancestors: [],
+        ...page,
+        ...parent,
+        document,
+    };
+}
+
+/**
+ * Resolve a page from the params.
+ * If the path can't be found, we try to resolve it from the API to handle redirects.
+ */
+async function resolvePage(
+    contentTarget: ContentTarget,
+    pages: RevisionPage[],
+    params: PagePathParams | PageIdParams,
+) {
+    if ('pageId' in params) {
+        return resolvePageId(pages, params.pageId);
+    }
+
+    const rawPathname = getPathnameParam(params);
+    const pathname = normalizePathname(rawPathname);
+
+    // When resolving a page, we use the lowercased pathname
+    const page = resolvePagePath(pages, pathname);
+    if (page) {
+        return page;
+    }
+
+    // If page can't be found, we try with the API, in case we have a redirect
+    // We use the raw pathname to handle special/malformed redirects setup by users in the GitSync.
+    // The page rendering will take care of redirecting to a normalized pathname.
+    //
+    // We don't test path that are too long as GitBook doesn't support them and will return a 404 anyway.
+    if (rawPathname.length <= 512) {
+        const resolved = await getRevisionPageByPath(
+            contentTarget.spaceId,
+            contentTarget.revisionId,
+            rawPathname,
+        );
+        if (resolved) {
+            return resolvePageId(pages, resolved.id);
+        }
+    }
+
+    return undefined;
+}
+
+async function fetchParentCollection(space: Space) {
+    const parentCollectionId =
+        space.visibility === ContentVisibility.InCollection ? space.parent : undefined;
+    const [collection, spaces] = await Promise.all([
+        parentCollectionId ? getCollection(parentCollectionId) : null,
+        parentCollectionId ? getCollectionSpaces(parentCollectionId) : ([] as Space[]),
+    ]);
+
+    return { parent: collection, spaces };
+}
+
+async function fetchParentSite(args: {
+    organizationId: string;
+    siteId: string;
+    siteShareKey: string | undefined;
+}) {
+    const { organizationId, siteId, siteShareKey } = args;
+    const [site, siteSpaces, siteParentCustomizations] = await Promise.all([
+        getSite(organizationId, siteId),
+        getSiteSpaces({ organizationId, siteId, siteShareKey }),
+        getCurrentSiteCustomization({ organizationId, siteId, siteSpaceId: undefined }),
+    ]);
+
+    const spaces: Array<Space> = [];
+    siteSpaces.forEach((siteSpace) => {
+        spaces.push({
+            ...siteSpace.space,
+            title: siteSpace.title ?? siteSpace.space.title,
+            urls: {
+                ...siteSpace.space.urls,
+                published: siteSpace.urls.published,
+            },
+        });
+    });
+
+    // override the title with the customization title
+    const parent = {
+        ...site,
+        ...(siteParentCustomizations?.title ? { title: siteParentCustomizations.title } : {}),
+    };
+
+    return {
+        parent,
+        spaces,
+    };
+}
+
+/**
+ * Get the page path from the params.
+ */
+export function getPathnameParam(params: PagePathParams): string {
+    const { pathname } = params;
+    return pathname ? pathname.map((part) => decodeURIComponent(part)).join('/') : '';
+}
+
+/**
+ * Normalize the URL pathname into the format used in the revision page path.
+ */
+export function normalizePathname(pathname: string) {
+    return pathname.toLowerCase();
+}

packages/gitbook/src/app/(space)/layout.tsx

@@ -1,38 +1,39 @@
 import {
     CustomizationBackground,
     CustomizationCorners,
-    CustomizationHeaderPreset,
     CustomizationIconsStyle,
+    CustomizationHeaderPreset,
     CustomizationSettings,
     SiteCustomizationSettings,
 } from '@gitbook/api';
 import { IconsProvider, IconStyle } from '@gitbook/icons';
 import assertNever from 'assert-never';
-import colorContrast from 'postcss-color-contrast/js';
 import colors from 'tailwindcss/colors';
 
+import { emojiFontClassName } from '@/components/primitives';
 import { fonts, ibmPlexMono } from '@/fonts';
 import { getSpaceLanguage } from '@/intl/server';
+import { getCurrentSiteLayoutData, getSpaceLayoutData } from '@/lib/api';
 import { getStaticFileURL } from '@/lib/assets';
 import { hexToRgb, shadesOfColor } from '@/lib/colors';
 import { tcls } from '@/lib/tailwind';
 
 import { ClientContexts } from './ClientContexts';
-import { emojiFontClassName } from '../primitives';
-
 import './globals.css';
 import '@gitbook/icons/style.css';
+import { getContentPointer } from './fetch';
 
 /**
  * Layout shared between the content and the PDF renderer.
  * It takes care of setting the theme and the language.
  */
-export async function CustomizationRootLayout(props: {
-    customization: SiteCustomizationSettings | CustomizationSettings;
-    children: React.ReactNode;
-}) {
-    const { customization, children } = props;
+export default async function SpaceRootLayout(props: { children: React.ReactNode }) {
+    const { children } = props;
 
+    const pointer = getContentPointer();
+    const { customization } = await ('siteId' in pointer
+        ? getCurrentSiteLayoutData(pointer)
+        : getSpaceLayoutData(pointer.spaceId));
     const headerTheme = generateHeaderTheme(customization);
     const language = getSpaceLanguage(customization);
 
@@ -72,21 +73,6 @@ export async function CustomizationRootLayout(props: {
                             'primary-color',
                             customization.styling.primaryColor.light,
                         )}
-                        ${
-                            // Generate the right contrast color for each shade of primary-color
-                            generateColorVariable(
-                                'contrast-primary',
-                                Object.fromEntries(
-                                    Object.entries(
-                                        shadesOfColor(customization.styling.primaryColor.light),
-                                    ).map(([index, color]) => [
-                                        index,
-                                        colorContrast(color, ['#000', '#fff']),
-                                    ]),
-                                ),
-                            )
-                        }
-
                         ${generateColorVariable(
                             'primary-base',
                             customization.styling.primaryColor.light,
@@ -96,7 +82,6 @@ export async function CustomizationRootLayout(props: {
                             headerTheme.backgroundColor.light,
                         )}
                         ${generateColorVariable('header-link', headerTheme.linkColor.light)}
-                        ${generateColorVariable('header-button-text', colorContrast(headerTheme.linkColor.light as string, ['#000', '#fff']))}
                     }
                     .dark {
                         ${generateColorVariable(
@@ -107,26 +92,11 @@ export async function CustomizationRootLayout(props: {
                             'primary-base',
                             customization.styling.primaryColor.dark,
                         )}
-                        ${
-                            // Generate the right contrast color for each shade of primary-color
-                            generateColorVariable(
-                                'contrast-primary',
-                                Object.fromEntries(
-                                    Object.entries(
-                                        shadesOfColor(customization.styling.primaryColor.dark),
-                                    ).map(([index, color]) => [
-                                        index,
-                                        colorContrast(color, ['#000', '#fff']),
-                                    ]),
-                                ),
-                            )
-                        }
                         ${generateColorVariable(
                             'header-background',
                             headerTheme.backgroundColor.dark,
                         )}
                         ${generateColorVariable('header-link', headerTheme.linkColor.dark)}
-                        ${generateColorVariable('header-button-text', colorContrast(headerTheme.linkColor.dark as string, ['#000', '#fff']))}
                     }
                 `}</style>
             </head>
@@ -198,16 +168,9 @@ function generateHeaderTheme(customization: CustomizationSettings | SiteCustomiz
                     dark: customization.styling.primaryColor.dark,
                 },
                 linkColor: {
-                    light: colorContrast(
-                        customization.styling.primaryColor.light,
-                        [colors.white, colors.black],
-                        'aaa',
-                    ),
-                    dark: colorContrast(
-                        customization.styling.primaryColor.dark,
-                        [colors.white, colors.black],
-                        'aaa',
-                    ),
+                    // TODO: should depend on the color of the background
+                    light: colors.white,
+                    dark: colors.black,
                 },
             };
         }

packages/gitbook/src/app/(space)/~gitbook/pdf/layout.tsx

@@ -1,38 +0,0 @@
-import { SpaceIntegrationScript } from '@gitbook/api';
-
-import { CustomizationRootLayout } from '@/components/RootLayout';
-import { getSiteLayoutData, getSpaceCustomization } from '@/lib/api';
-
-import { getSiteOrSpacePointerForPDF } from './pointer';
-
-/**
- * Layout to be used for the site root. It fetches the customization data for the
- * site or space and initializes the CustomizationRootLayout with it.
- */
-export default async function PDFRootLayout(props: { children: React.ReactNode }) {
-    const { children } = props;
-
-    const pointer = getSiteOrSpacePointerForPDF();
-    const { customization } = await ('siteId' in pointer
-        ? getSiteLayoutData(pointer)
-        : getSpaceLayoutData(pointer.spaceId));
-
-    return (
-        <CustomizationRootLayout customization={customization}>{children}</CustomizationRootLayout>
-    );
-}
-
-/**
- * Fetch all the layout data about a space at once.
- */
-async function getSpaceLayoutData(spaceId: string) {
-    const [customization, scripts] = await Promise.all([
-        getSpaceCustomization(spaceId),
-        [] as SpaceIntegrationScript[],
-    ]);
-
-    return {
-        customization,
-        scripts,
-    };
-}

packages/gitbook/src/app/(space)/~gitbook/pdf/pointer.ts

@@ -1,17 +0,0 @@
-import { SiteContentPointer, SpaceContentPointer } from '@/lib/api';
-import { getSiteContentPointer, getSpacePointer } from '@/lib/pointer';
-
-/**
- * PDF generation can be done at the site level (e.g. docs.foo.com/~gitbook/pdf) or
- * at the space level (e.g. open.gitbook.com/~space/:spaceId/~gitbook/pdf) which is
- * for PDF export of in-app private spaces.
- *
- * This function returns the pointer depending on the context.
- */
-export function getSiteOrSpacePointerForPDF(): SiteContentPointer | SpaceContentPointer {
-    try {
-        return getSiteContentPointer();
-    } catch (error) {
-        return getSpacePointer();
-    }
-}

packages/gitbook/src/components/AdminToolbar/AdminToolbar.tsx

@@ -1,16 +1,11 @@
 import { Space } from '@gitbook/api';
-import { Icon } from '@gitbook/icons';
 import React from 'react';
 
-import { getChangeRequest, getRevision, SiteContentPointer } from '@/lib/api';
+import { ContentPointer, getChangeRequest, getRevision } from '@/lib/api';
 import { tcls } from '@/lib/tailwind';
 
-import { RefreshChangeRequestButton } from './RefreshChangeRequestButton';
-import { Toolbar, ToolbarBody, ToolbarButton, ToolbarButtonGroups } from './Toolbar';
-import { DateRelative } from '../primitives';
-
 interface AdminToolbarProps {
-    content: SiteContentPointer;
+    content: ContentPointer;
     space: Space;
 }
 
@@ -72,30 +67,9 @@ async function ChangeRequestToolbar(props: { spaceId: string; changeRequestId: s
     const changeRequest = await getChangeRequest(spaceId, changeRequestId);
 
     return (
-        <Toolbar>
-            <ToolbarButton title="Open in application" href={changeRequest.urls.app}>
-                <Icon icon="code-branch" className="size-4" />
-            </ToolbarButton>
-            <ToolbarBody>
-                <p>
-                    #{changeRequest.number}: {changeRequest.subject ?? 'No subject'}
-                </p>
-                <p className="text-xs text-light/8 dark:text-light/8">
-                    Change request updated <DateRelative value={changeRequest.updatedAt} />
-                </p>
-            </ToolbarBody>
-            <ToolbarButtonGroups>
-                <ToolbarButton title="Open in application" href={changeRequest.urls.app}>
-                    <Icon icon="arrow-up-right-from-square" className="size-4" />
-                </ToolbarButton>
-                <RefreshChangeRequestButton
-                    spaceId={spaceId}
-                    changeRequestId={changeRequestId}
-                    revisionId={changeRequest.revision}
-                    updatedAt={new Date(changeRequest.updatedAt).getTime()}
-                />
-            </ToolbarButtonGroups>
-        </Toolbar>
+        <ToolbarButton href={changeRequest.urls.app}>
+            Change request #{changeRequest.number}: {changeRequest.subject ?? 'No subject'}
+        </ToolbarButton>
     );
 }
 
@@ -103,35 +77,37 @@ async function RevisionToolbar(props: { spaceId: string; revisionId: string }) {
     const { spaceId, revisionId } = props;
 
     const revision = await getRevision(spaceId, revisionId, {
-        metadata: true,
+        metadata: false,
     });
 
     return (
-        <Toolbar>
-            <ToolbarButton title="Open in application" href={revision.urls.app}>
-                <Icon icon="code-commit" className="size-4" />
-            </ToolbarButton>
-            <ToolbarBody>
-                <p>
-                    Revision created <DateRelative value={revision.createdAt} />
-                </p>
-                {revision.git ? (
-                    <p className="text-xs text-light/8 dark:text-light/8">{revision.git.message}</p>
-                ) : null}
-            </ToolbarBody>
-            <ToolbarButtonGroups>
-                <ToolbarButton title="Open in application" href={revision.urls.app}>
-                    <Icon icon="arrow-up-right-from-square" className="size-4" />
-                </ToolbarButton>
-                {revision.git?.url ? (
-                    <ToolbarButton title="Open git commit" href={revision.git.url}>
-                        <Icon
-                            icon={revision.git.url.includes('github.com') ? 'github' : 'gitlab'}
-                            className="size-4"
-                        />
-                    </ToolbarButton>
-                ) : null}
-            </ToolbarButtonGroups>
-        </Toolbar>
+        <ToolbarButton href={revision.urls.app}>
+            Revision created on {new Date(revision.createdAt).toLocaleDateString()}
+        </ToolbarButton>
+    );
+}
+
+function ToolbarButton(props: { href: string; children: React.ReactNode }) {
+    const { href, children } = props;
+
+    return (
+        <a
+            href={href}
+            className={tcls(
+                'block',
+                'text-sm',
+                'px-4',
+                'py-1',
+                'rounded-full',
+                'hover:bg-dark-1',
+                'hover:text-white',
+                'truncate',
+                'text-light',
+                'dark:text-light',
+                'dark:hover:bg-dark-2',
+            )}
+        >
+            {children}
+        </a>
     );
 }

packages/gitbook/src/components/AdminToolbar/RefreshChangeRequestButton.tsx

@@ -1,70 +0,0 @@
-'use client';
-import { Icon } from '@gitbook/icons';
-import React from 'react';
-
-import { useCheckForContentUpdate } from '@/components/AutoRefreshContent';
-import { tcls } from '@/lib/tailwind';
-
-import { ToolbarButton } from './Toolbar';
-
-// We don't show the button if the content has been updated 30s ago or less.
-const minInterval = 1000 * 30; // 5 minutes
-
-/**
- * Button to refresh the page if the content has been updated.
- */
-export function RefreshChangeRequestButton(props: {
-    spaceId: string;
-    changeRequestId: string;
-    revisionId: string;
-    updatedAt: number;
-}) {
-    const { updatedAt } = props;
-
-    const [visible, setVisible] = React.useState(false);
-    const [loading, setLoading] = React.useState(false);
-    const checkForUpdates = useCheckForContentUpdate(props);
-
-    const refresh = React.useCallback(async () => {
-        setLoading(true);
-        try {
-            await checkForUpdates();
-        } finally {
-            setLoading(false);
-            setVisible(false);
-        }
-    }, [checkForUpdates]);
-
-    // Show the button if the content has been updated more than 30s ago.
-    React.useEffect(() => {
-        if (updatedAt < Date.now() - minInterval) {
-            setVisible(true);
-        }
-    }, [updatedAt]);
-
-    // 30sec after being hidden, we show the button again
-    React.useEffect(() => {
-        if (!visible) {
-            const timeout = setTimeout(() => {
-                setVisible(true);
-            }, minInterval);
-            return () => clearTimeout(timeout);
-        }
-    }, [visible]);
-
-    if (!visible) {
-        return null;
-    }
-
-    return (
-        <ToolbarButton
-            title="Refresh"
-            onClick={(event) => {
-                event.preventDefault();
-                refresh();
-            }}
-        >
-            <Icon icon="rotate" className={tcls('size-4', loading ? 'animate-spin' : null)} />
-        </ToolbarButton>
-    );
-}

packages/gitbook/src/components/AdminToolbar/Toolbar.tsx

@@ -1,66 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import { tcls } from '@/lib/tailwind';
-
-export function Toolbar(props: { children: React.ReactNode }) {
-    const { children } = props;
-
-    return (
-        <div
-            className={tcls(
-                'flex',
-                'flex-row',
-                'items-center',
-                'gap-4',
-                'text-sm',
-                'px-4',
-                'py-1',
-                'rounded-full',
-                'truncate',
-                'text-light',
-                'dark:text-light',
-            )}
-        >
-            {children}
-        </div>
-    );
-}
-
-export function ToolbarBody(props: { children: React.ReactNode }) {
-    return <div className="flex flex-col gap-1">{props.children}</div>;
-}
-
-export function ToolbarButtonGroups(props: { children: React.ReactNode }) {
-    return <div className="flex flex-row gap-2">{props.children}</div>;
-}
-
-export function ToolbarButton(props: React.HTMLProps<HTMLAnchorElement>) {
-    const { children, ...rest } = props;
-    return (
-        <a
-            {...rest}
-            className={tcls(
-                'flex',
-                'flex-col',
-                'items-center',
-                'justify-center',
-                'size-11',
-                'gap-1',
-                'text-sm',
-                'rounded-full',
-                'hover:bg-dark-1',
-                'hover:text-white',
-                'truncate',
-                'text-light',
-                'dark:text-light',
-                'dark:hover:bg-dark-2',
-                'hover:shadow-lg',
-                'cursor-pointer',
-            )}
-        >
-            {children}
-        </a>
-    );
-}

packages/gitbook/src/components/Ads/Ad.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { SiteAds, SiteAdsStatus } from '@gitbook/api';
 import * as React from 'react';
 
 import { t, useLanguage } from '@/intl/client';
@@ -22,7 +21,6 @@ export function Ad({
     spaceId,
     placement,
     ignore,
-    siteAdsStatus,
     style,
     mode = 'auto',
 }: {
@@ -31,7 +29,6 @@ export function Ad({
     placement: string;
     ignore: boolean;
     style?: ClassValue;
-    siteAdsStatus?: SiteAds['status'];
     mode?: 'classic' | 'auto' | 'cover';
 }) {
     const containerRef = React.useRef<HTMLDivElement>(null);
@@ -73,31 +70,20 @@ export function Ad({
 
         let cancelled = false;
 
-        const previewParam = new URL(window.location.href).searchParams.get('ads_preview');
-        const preview = !!previewParam;
+        const preview = new URL(window.location.href).searchParams.has('ads_preview');
         const realZoneId = preview ? PREVIEW_ZONE_ID : zoneId;
-        const showPlaceholderAd =
-            previewParam === 'placeholder' ||
-            (siteAdsStatus &&
-                (siteAdsStatus === SiteAdsStatus.Pending ||
-                    siteAdsStatus === SiteAdsStatus.InReview));
 
-        if (!realZoneId && !showPlaceholderAd) {
+        if (!realZoneId) {
             return;
         }
 
         (async () => {
-            const result = showPlaceholderAd
-                ? await renderAd({ source: 'placeholder' })
-                : realZoneId
-                  ? await renderAd({
-                        placement,
-                        ignore: ignore || preview,
-                        zoneId: realZoneId,
-                        mode,
-                        source: 'live',
-                    })
-                  : undefined;
+            const result = await renderAd({
+                placement,
+                ignore: ignore || preview,
+                zoneId: realZoneId,
+                mode,
+            });
 
             if (cancelled) {
                 return;
@@ -111,10 +97,15 @@ export function Ad({
         return () => {
             cancelled = true;
         };
-    }, [visible, zoneId, ignore, placement, mode, siteAdsStatus]);
+    }, [visible, zoneId, ignore, placement, mode]);
+
+    const viaUrl = new URL('https://www.gitbook.com');
+    viaUrl.searchParams.set('utm_source', 'content');
+    viaUrl.searchParams.set('utm_medium', 'ads');
+    viaUrl.searchParams.set('utm_campaign', spaceId);
 
     return (
-        <div ref={containerRef} className={tcls(style)} data-visual-test="removed">
+        <div ref={containerRef} className={tcls(style)}>
             {ad ? (
                 <>
                     {ad}
@@ -131,7 +122,7 @@ function AdSponsoredLink(props: { spaceId: string }) {
 
     const viaUrl = new URL('https://www.gitbook.com');
     viaUrl.searchParams.set('utm_source', 'content');
-    viaUrl.searchParams.set('utm_medium', 'sponsored-by-gitbook');
+    viaUrl.searchParams.set('utm_medium', 'sponsoring');
     viaUrl.searchParams.set('utm_campaign', spaceId);
 
     return (

packages/gitbook/src/components/Ads/AdClassicRendering.tsx

@@ -8,7 +8,7 @@ import { AdItem } from './types';
 /**
  * Classic rendering for an ad.
  */
-export function AdClassicRendering({ ad }: { ad: AdItem }) {
+export async function AdClassicRendering({ ad }: { ad: AdItem }) {
     return (
         <a
             className={tcls(
@@ -33,7 +33,7 @@ export function AdClassicRendering({ ad }: { ad: AdItem }) {
                     <img
                         alt="Ads logo"
                         className={tcls('rounded-md')}
-                        src={getResizedImageURL(ad.smallImage, { width: 192, dpr: 2 })}
+                        src={await getResizedImageURL(ad.smallImage, { width: 192, dpr: 2 })}
                     />
                 </div>
             ) : (
@@ -43,7 +43,7 @@ export function AdClassicRendering({ ad }: { ad: AdItem }) {
                 >
                     <img
                         alt="Ads logo"
-                        src={getResizedImageURL(ad.logo, { width: 192 - 48, dpr: 2 })}
+                        src={await getResizedImageURL(ad.logo, { width: 192 - 48, dpr: 2 })}
                     />
                 </div>
             )}

packages/gitbook/src/components/Ads/AdCoverRendering.tsx

@@ -9,8 +9,8 @@ import { AdCover } from './types';
 /**
  * Cover rendering for an ad.
  */
-export function AdCoverRendering({ ad }: { ad: AdCover }) {
-    const largeImage = getResizedImageURL(ad.largeImage, { width: 128, dpr: 2 });
+export async function AdCoverRendering({ ad }: { ad: AdCover }) {
+    const largeImage = await getResizedImageURL(ad.largeImage, { width: 128, dpr: 2 });
 
     return (
         <a

packages/gitbook/src/components/Ads/assets/ad-rainbow.svg

@@ -1,62 +0,0 @@
-<svg width="193" height="120" viewBox="0 0 193 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M183.432 0.776855H10.2788C5.07442 0.776855 0.855469 4.14309 0.855469 8.29556V111.678C0.855469 115.831 5.07442 119.197 10.2788 119.197H183.432C188.637 119.197 192.855 115.831 192.855 111.678V8.29556C192.855 4.14309 188.637 0.776855 183.432 0.776855Z"
-        fill="#14171C" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M96.8556 72.2159C84.724 72.2159 74.8894 82.0505 74.8894 94.1818C74.8894 95.9661 73.4431 97.4124 71.659 97.4124C69.875 97.4124 68.4287 95.9661 68.4287 94.1818C68.4287 78.4825 81.1558 65.7554 96.8556 65.7554C112.556 65.7554 125.282 78.4825 125.282 94.1818C125.282 95.9661 123.836 97.4124 122.053 97.4124C120.268 97.4124 118.822 95.9661 118.822 94.1818C118.822 82.0505 108.987 72.2159 96.8556 72.2159Z"
-        fill="url(#paint0_radial_3089_1090)" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M129.621 94.1816C129.621 76.0865 114.951 61.4172 96.8558 61.4172C78.7603 61.4172 64.091 76.0865 64.091 94.1816C64.091 95.9658 62.6447 97.4122 60.8607 97.4122C59.0766 97.4122 57.6304 95.9658 57.6304 94.1816C57.6304 72.5183 75.1922 54.9565 96.8558 54.9565C118.52 54.9565 136.081 72.5183 136.081 94.1816C136.081 95.9658 134.635 97.4122 132.85 97.4122C131.067 97.4122 129.621 95.9658 129.621 94.1816Z"
-        fill="url(#paint1_radial_3089_1090)" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M96.856 50.3419C72.6438 50.3419 53.0159 69.9698 53.0159 94.1818C53.0159 95.966 51.5695 97.4124 49.7855 97.4124C48.0014 97.4124 46.5552 95.966 46.5552 94.1818C46.5552 66.4018 69.0756 43.8813 96.856 43.8813C124.637 43.8813 147.157 66.4018 147.157 94.1818C147.157 95.966 145.711 97.4124 143.927 97.4124C142.142 97.4124 140.696 95.966 140.696 94.1818C140.696 69.9698 121.068 50.3419 96.856 50.3419Z"
-        fill="url(#paint2_radial_3089_1090)" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M151.587 94.1815C151.587 63.9548 127.083 39.4509 96.8557 39.4509C66.6286 39.4509 42.1246 63.9548 42.1246 94.1815C42.1246 95.9658 40.6784 97.4121 38.8943 97.4121C37.1103 97.4121 35.6641 95.9658 35.6641 94.1815C35.6641 60.3866 63.0605 32.9902 96.8557 32.9902C130.651 32.9902 158.047 60.3866 158.047 94.1815C158.047 95.9658 156.601 97.4121 154.818 97.4121C153.033 97.4121 151.587 95.9658 151.587 94.1815Z"
-        fill="url(#paint3_radial_3089_1090)" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M96.8554 29.0217C60.8683 29.0217 31.6951 58.195 31.6951 94.1817C31.6951 95.966 30.2488 97.4123 28.4647 97.4123C26.6807 97.4123 25.2344 95.966 25.2344 94.1817C25.2344 54.6269 57.3003 22.561 96.8554 22.561C136.411 22.561 168.477 54.6269 168.477 94.1817C168.477 95.966 167.03 97.4123 165.246 97.4123C163.462 97.4123 162.015 95.966 162.015 94.1817C162.015 58.195 132.842 29.0217 96.8554 29.0217Z"
-        fill="url(#paint4_radial_3089_1090)" />
-    <defs>
-        <radialGradient id="paint0_radial_3089_1090" cx="0" cy="0" r="1"
-            gradientUnits="userSpaceOnUse"
-            gradientTransform="translate(88.9053 80.4777) rotate(64.8515) scale(18.7082 33.8612)">
-            <stop stop-color="#3F89A1" />
-            <stop offset="0.339725" stop-color="#F4E28D" />
-            <stop offset="0.505624" stop-color="#BBDDE5" />
-            <stop offset="0.848958" stop-color="#FDA599" />
-        </radialGradient>
-        <radialGradient id="paint1_radial_3089_1090" cx="0" cy="0" r="1"
-            gradientUnits="userSpaceOnUse"
-            gradientTransform="translate(143.478 58.0317) rotate(168.06) scale(87.7455 57.2588)">
-            <stop stop-color="#3F89A1" />
-            <stop offset="0.19" stop-color="#F4E28D" />
-            <stop offset="0.614011" stop-color="#BBDDE5" />
-            <stop offset="1" stop-color="#FDA599" />
-        </radialGradient>
-        <radialGradient id="paint2_radial_3089_1090" cx="0" cy="0" r="1"
-            gradientUnits="userSpaceOnUse"
-            gradientTransform="translate(82.7879 68.7762) rotate(63.8366) scale(31.9052 59.4091)">
-            <stop stop-color="#3F89A1" />
-            <stop offset="0.339725" stop-color="#F4E28D" />
-            <stop offset="0.505624" stop-color="#BBDDE5" />
-            <stop offset="0.848958" stop-color="#FDA599" />
-        </radialGradient>
-        <radialGradient id="paint3_radial_3089_1090" cx="0" cy="0" r="1"
-            gradientUnits="userSpaceOnUse"
-            gradientTransform="translate(101.132 56.1925) rotate(172.165) scale(66.0854 41.9909)">
-            <stop stop-color="#3F89A1" />
-            <stop offset="0.339725" stop-color="#F4E28D" />
-            <stop offset="0.505624" stop-color="#BBDDE5" />
-            <stop offset="0.848958" stop-color="#FDA599" />
-        </radialGradient>
-        <radialGradient id="paint4_radial_3089_1090" cx="0" cy="0" r="1"
-            gradientUnits="userSpaceOnUse"
-            gradientTransform="translate(76.8246 57.371) rotate(63.4233) scale(44.7721 84.288)">
-            <stop stop-color="#3F89A1" />
-            <stop offset="0.339725" stop-color="#F4E28D" />
-            <stop offset="0.505624" stop-color="#BBDDE5" />
-            <stop offset="0.848958" stop-color="#FDA599" />
-        </radialGradient>
-    </defs>
-</svg>

packages/gitbook/src/components/Ads/renderAd.tsx

@@ -5,16 +5,9 @@ import { headers } from 'next/headers';
 import { AdClassicRendering } from './AdClassicRendering';
 import { AdCoverRendering } from './AdCoverRendering';
 import { AdPixels } from './AdPixels';
-import adRainbow from './assets/ad-rainbow.svg';
 import { AdItem, AdsResponse } from './types';
 
-type FetchAdOptions = FetchLiveAdOptions | FetchPlaceholderAdOptions;
-
-interface FetchLiveAdOptions {
-    /**
-     * Source of the ad (live: from the platform)
-     */
-    source: 'live';
+interface FetchAdOptions {
     /** ID of the zone to fetch Ads for */
     zoneId: string;
     /** Mode to render the Ad */
@@ -25,22 +18,14 @@ interface FetchLiveAdOptions {
     ignore: boolean;
 }
 
-interface FetchPlaceholderAdOptions {
-    /**
-     * Source of the ad (placeholder: static placeholder ad)
-     */
-    source: 'placeholder';
-}
-
 /**
  * Server action to render the Ad placement.
  * We use a server-action to avoid caching issues with server-side components,
  * and properly access user-agent and IP.
  */
 export async function renderAd(options: FetchAdOptions) {
-    const mode = options.source === 'live' ? options.mode : 'classic';
-
-    const result = options.source === 'live' ? await fetchAd(options) : getPlaceholderAd();
+    const { mode } = options;
+    const result = await fetchAd(options);
     if (!result || !result.ad.description || !result.ad.statlink) {
         return null;
     }
@@ -63,8 +48,16 @@ async function fetchAd({
     zoneId,
     placement,
     ignore,
-}: FetchLiveAdOptions): Promise<{ ad: AdItem; ip: string } | null> {
-    const { ip, userAgent } = getUserAgentAndIp();
+}: FetchAdOptions): Promise<{ ad: AdItem; ip: string } | null> {
+    const headersSet = headers();
+    const ip =
+        headersSet.get('x-gitbook-ipv4') ??
+        headersSet.get('x-gitbook-ip') ??
+        headersSet.get('cf-pseudo-ipv4') ??
+        headersSet.get('cf-connecting-ip') ??
+        headersSet.get('x-forwarded-for') ??
+        '';
+    const userAgent = headersSet.get('user-agent') ?? '';
 
     const url = new URL(`https://srv.buysellads.com/ads/${zoneId}.json`);
     url.searchParams.set('segment', `placement:${placement}`);
@@ -85,50 +78,3 @@ async function fetchAd({
 
     return null;
 }
-
-function getPlaceholderAd(): { ad: AdItem; ip: string } {
-    const { ip } = getUserAgentAndIp();
-
-    return {
-        ad: {
-            active: '1',
-            ad_via_link: '',
-            bannerid: '',
-            creativeid: '',
-            description:
-                'Your docs could be this good.\nPublish incredible open source docs for free with GitBook',
-            evenodd: '0',
-            external_id: '',
-            height: '0',
-            i: '0',
-            identifier: '',
-            longimp: '',
-            longlink: '',
-            num_slots: '1',
-            rendering: 'carbon',
-            smallImage: adRainbow.src,
-            statimp: '',
-            statlink:
-                'https://www.gitbook.com/solutions/open-source?utm_campaign=sponsored-content&utm_medium=ad&utm_source=content',
-            timestamp: Date.now().toString(),
-            width: '0',
-            zoneid: '',
-            zonekey: '',
-        },
-        ip,
-    };
-}
-
-function getUserAgentAndIp() {
-    const headersSet = headers();
-    const ip =
-        headersSet.get('x-gitbook-ipv4') ??
-        headersSet.get('x-gitbook-ip') ??
-        headersSet.get('cf-pseudo-ipv4') ??
-        headersSet.get('cf-connecting-ip') ??
-        headersSet.get('x-forwarded-for') ??
-        '';
-    const userAgent = headersSet.get('user-agent') ?? '';
-
-    return { ip, userAgent };
-}

packages/gitbook/src/components/AutoRefreshContent/index.ts

@@ -1 +0,0 @@
-export * from './useCheckForContentUpdate';

packages/gitbook/src/components/AutoRefreshContent/server-actions.ts

@@ -1,15 +0,0 @@
-'use server';
-
-import { getChangeRequest } from '@/lib/api';
-
-/**
- * Return true if a change-request has been updated.
- */
-export async function hasContentBeenUpdated(props: {
-    spaceId: string;
-    changeRequestId: string;
-    revisionId: string;
-}) {
-    const changeRequest = await getChangeRequest.revalidate(props.spaceId, props.changeRequestId);
-    return changeRequest.revision !== props.revisionId;
-}

packages/gitbook/src/components/AutoRefreshContent/useCheckForContentUpdate.ts

@@ -1,24 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { hasContentBeenUpdated } from './server-actions';
-
-/**
- * Return a callback to check if a change request has been updated and to refresh the page if it has.
- */
-export function useCheckForContentUpdate(props: {
-    spaceId: string;
-    changeRequestId: string;
-    revisionId: string;
-}) {
-    const { spaceId, changeRequestId, revisionId } = props;
-
-    return React.useCallback(async () => {
-        const updated = await hasContentBeenUpdated({ spaceId, changeRequestId, revisionId });
-
-        if (updated) {
-            window.location.reload();
-        }
-    }, [spaceId, changeRequestId, revisionId]);
-}

packages/gitbook/src/components/Cookies/CookiesToast.tsx

@@ -27,6 +27,7 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
 
     const onUpdateState = (enabled: boolean) => {
         setCookiesTracking(enabled);
+
         // Reload the page to take the change in consideration
         window.location.reload();
     };
@@ -74,7 +75,6 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
                 )}
             </p>
             <button
-                type="button"
                 onClick={() => setShow(false)}
                 aria-label={tString(language, 'cookies_close')}
                 className={tcls(

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

@@ -1,4 +1,5 @@
 import { DocumentBlock, JSONDocument } from '@gitbook/api';
+import assertNever from 'assert-never';
 import React from 'react';
 
 import {
@@ -11,6 +12,7 @@ import {
 import { ClassValue } from '@/lib/tailwind';
 
 import { BlockContentRef } from './BlockContentRef';
+import { BlockSyncedBlock } from './BlockSyncedBlock';
 import { CodeBlock } from './CodeBlock';
 import { Divider } from './Divider';
 import { DocumentContextProps } from './DocumentView';
@@ -30,9 +32,6 @@ import { BlockMath } from './Math';
 import { OpenAPI } from './OpenAPI';
 import { Paragraph } from './Paragraph';
 import { Quote } from './Quote';
-import { ReusableContent } from './ReusableContent';
-import { Stepper } from './Stepper';
-import { StepperStep } from './StepperStep';
 import { Table } from './Table';
 import { Tabs } from './Tabs';
 
@@ -40,100 +39,77 @@ export interface BlockProps<Block extends DocumentBlock> extends DocumentContext
     block: Block;
     document: JSONDocument;
     ancestorBlocks: DocumentBlock[];
-    /** If true, we estimate that the block will be outside the initial viewport */
-    isEstimatedOffscreen: boolean;
-    /** Class names to be passed to the underlying DOM element */
     style?: ClassValue;
 }
 
-/**
- * Alternative to `assertNever` that returns `null` instead of throwing an error.
- */
-function nullIfNever(value: never): null {
-    return null;
-}
-
 export function Block<T extends DocumentBlock>(props: BlockProps<T>) {
-    const { block, style, isEstimatedOffscreen, context } = props;
+    const { block, style, ...contextProps } = props;
 
     const content = (() => {
         switch (block.type) {
             case 'paragraph':
-                return <Paragraph {...props} block={block} />;
+                return <Paragraph {...props} {...contextProps} block={block} />;
             case 'heading-1':
             case 'heading-2':
             case 'heading-3':
-                return <Heading {...props} block={block} />;
+                return <Heading {...props} {...contextProps} block={block} />;
             case 'list-ordered':
-                return <ListOrdered {...props} block={block} />;
+                return <ListOrdered {...props} {...contextProps} block={block} />;
             case 'list-unordered':
-                return <ListUnordered {...props} block={block} />;
+                return <ListUnordered {...props} {...contextProps} block={block} />;
             case 'list-tasks':
-                return <ListTasks {...props} block={block} />;
+                return <ListTasks {...props} {...contextProps} block={block} />;
             case 'list-item':
-                return <ListItem {...props} block={block} />;
+                return <ListItem {...props} {...contextProps} block={block} />;
             case 'code':
-                return <CodeBlock {...props} block={block} />;
+                return <CodeBlock {...props} {...contextProps} block={block} />;
             case 'hint':
-                return <Hint {...props} block={block} />;
+                return <Hint {...props} {...contextProps} block={block} />;
             case 'images':
-                return <Images {...props} block={block} />;
+                return <Images {...props} {...contextProps} block={block} />;
             case 'tabs':
-                return <Tabs {...props} block={block} />;
+                return <Tabs {...props} {...contextProps} block={block} />;
             case 'expandable':
-                return <Expandable {...props} block={block} />;
+                return <Expandable {...props} {...contextProps} block={block} />;
             case 'table':
-                return <Table {...props} block={block} />;
+                return <Table {...props} {...contextProps} block={block} />;
             case 'swagger':
-                return <OpenAPI {...props} block={block} />;
+                return <OpenAPI {...props} {...contextProps} block={block} />;
             case 'embed':
-                return <Embed {...props} block={block} />;
+                return <Embed {...props} {...contextProps} block={block} />;
             case 'blockquote':
-                return <Quote {...props} block={block} />;
+                return <Quote {...props} {...contextProps} block={block} />;
             case 'math':
-                return <BlockMath {...props} block={block} />;
+                return <BlockMath {...props} {...contextProps} block={block} />;
             case 'file':
-                return <File {...props} block={block} />;
+                return <File {...props} {...contextProps} block={block} />;
             case 'divider':
-                return <Divider {...props} block={block} />;
+                return <Divider {...props} {...contextProps} block={block} />;
             case 'drawing':
-                return <Drawing {...props} block={block} />;
+                return <Drawing {...props} {...contextProps} block={block} />;
             case 'content-ref':
-                return <BlockContentRef {...props} block={block} />;
+                return <BlockContentRef {...props} {...contextProps} block={block} />;
             case 'image':
             case 'code-line':
             case 'tabs-item':
                 throw new Error('Blocks should be directly rendered by parent');
             case 'integration':
-                return <IntegrationBlock {...props} block={block} />;
-            case 'reusable-content':
-                return <ReusableContent {...props} block={block} />;
-            case 'stepper':
-                return <Stepper {...props} block={block} />;
-            case 'stepper-step':
-                return <StepperStep {...props} block={block} />;
+                return <IntegrationBlock {...props} {...contextProps} block={block} />;
+            case 'synced-block':
+                return <BlockSyncedBlock {...props} {...contextProps} block={block} />;
             default:
-                return nullIfNever(block);
+                assertNever(block);
         }
     })();
 
-    if (!isEstimatedOffscreen || context.wrapBlocksInSuspense === false) {
-        // When blocks are estimated to be on the initial viewport, we render them immediately
-        // to avoid a flash of a loading skeleton.
-        return content;
-    }
-
     return (
-        <React.Suspense fallback={<BlockSkeleton block={block} style={style} />}>
+        <React.Suspense fallback={<BlockPlaceholder block={block} style={style} />}>
             {content}
         </React.Suspense>
     );
 }
 
-/**
- * Skeleton for a block while it is being loaded.
- */
-export function BlockSkeleton(props: { block: DocumentBlock; style: ClassValue }) {
+function BlockPlaceholder(props: { block: DocumentBlock; style: ClassValue }) {
     const { block, style } = props;
     const id = 'meta' in block && block.meta && 'id' in block.meta ? block.meta.id : undefined;
 
@@ -153,6 +129,7 @@ export function BlockSkeleton(props: { block: DocumentBlock; style: ClassValue }
         case 'code':
         case 'hint':
         case 'tabs':
+        case 'synced-block':
             return <SkeletonParagraph id={id} style={style} />;
         case 'expandable':
         case 'table':
@@ -161,8 +138,6 @@ export function BlockSkeleton(props: { block: DocumentBlock; style: ClassValue }
         case 'divider':
         case 'content-ref':
         case 'integration':
-        case 'stepper':
-        case 'reusable-content':
             return <SkeletonCard id={id} style={style} />;
         case 'embed':
         case 'images':
@@ -171,9 +146,8 @@ export function BlockSkeleton(props: { block: DocumentBlock; style: ClassValue }
         case 'image':
         case 'code-line':
         case 'tabs-item':
-        case 'stepper-step':
             throw new Error('Blocks should be directly rendered by parent');
         default:
-            return nullIfNever(block);
+            assertNever(block);
     }
 }

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

@@ -0,0 +1,53 @@
+import { DocumentBlockSyncedBlock } from '@gitbook/api';
+
+import { getSyncedBlockContent } from '@/lib/api';
+import { resolveContentRefWithFiles } from '@/lib/references';
+
+import { BlockProps } from './Block';
+import { Blocks } from './Blocks';
+
+export async function BlockSyncedBlock(props: BlockProps<DocumentBlockSyncedBlock>) {
+    const { block, ancestorBlocks, context, style } = props;
+
+    const apiToken = block.meta?.apiToken;
+    if (!apiToken) {
+        return null;
+    }
+
+    // We can't resolve the synced block without an organization context.
+    if (!context.contentRefContext) {
+        return null;
+    }
+
+    const syncedBlock = await getSyncedBlockContent(
+        apiToken,
+        context.contentRefContext.space.organization,
+        block.data.ref.syncedBlock,
+    );
+
+    if (!syncedBlock) {
+        return null;
+    }
+
+    return (
+        <Blocks
+            nodes={syncedBlock.document.nodes}
+            document={syncedBlock.document}
+            ancestorBlocks={[...ancestorBlocks, block]}
+            context={{
+                ...context,
+                resolveContentRef: async (ref, options) => {
+                    if (!syncedBlock?.files) {
+                        return context.resolveContentRef(ref, options);
+                    }
+                    const result = resolveContentRefWithFiles(syncedBlock.files, ref);
+                    if (result !== undefined) {
+                        return result;
+                    }
+                    return context.resolveContentRef(ref, options);
+                },
+            }}
+            style={style}
+        />
+    );
+}

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

@@ -4,81 +4,51 @@ import { tcls, ClassValue } from '@/lib/tailwind';
 
 import { Block } from './Block';
 import { DocumentContextProps } from './DocumentView';
-import { isBlockOffscreen } from './utils';
 
-/**
- * Renders a list of blocks with a wrapper element.
- */
-export function Blocks<TBlock extends DocumentBlock, Tag extends React.ElementType = 'div'>(
-    props: UnwrappedBlocksProps<TBlock> & {
+export function Blocks<T extends DocumentBlock, Tag extends React.ElementType = 'div'>(
+    props: DocumentContextProps & {
+        /** Blocks to render */
+        nodes: T[];
+
+        /** Document being rendered */
+        document: JSONDocument;
+
+        /** Ancestors of the blocks */
+        ancestorBlocks: DocumentBlock[];
+
         /** HTML tag to use for the wrapper */
         tag?: Tag;
 
         /** Style passed to the wrapper */
         style?: ClassValue;
 
+        /** Style passed to all blocks */
+        blockStyle?: ClassValue;
+
         /** Props to pass to the wrapper element */
         wrapperProps?: React.ComponentProps<Tag>;
     },
 ) {
-    const { tag: Tag = 'div', style, wrapperProps, ...blocksProps } = props;
+    const { nodes, tag: Tag = 'div', style, blockStyle, wrapperProps, ...contextProps } = props;
 
     return (
         <Tag {...wrapperProps} className={tcls(style)}>
-            <UnwrappedBlocks {...blocksProps} />
+            {nodes.map((node, index) => (
+                <Block
+                    key={node.key}
+                    block={node}
+                    style={[
+                        node.data && 'fullWidth' in node.data && node.data.fullWidth
+                            ? 'max-w-screen-xl'
+                            : 'max-w-3xl',
+                        'w-full',
+                        'mx-auto',
+                        'decoration-primary/6',
+                        blockStyle,
+                    ]}
+                    {...contextProps}
+                />
+            ))}
         </Tag>
     );
 }
-
-type UnwrappedBlocksProps<TBlock extends DocumentBlock> = DocumentContextProps & {
-    /** Blocks to render */
-    nodes: TBlock[];
-
-    /** Document being rendered */
-    document: JSONDocument;
-
-    /** Ancestors of the blocks */
-    ancestorBlocks: DocumentBlock[];
-
-    /** Style passed to all blocks */
-    blockStyle?: ClassValue;
-};
-
-/**
- * Renders a list of blocks without a wrapper element.
- */
-export function UnwrappedBlocks<TBlock extends DocumentBlock>(props: UnwrappedBlocksProps<TBlock>) {
-    const { nodes, blockStyle, ...contextProps } = props;
-
-    let isOffscreen = false;
-
-    return (
-        <>
-            {nodes.map((node) => {
-                isOffscreen =
-                    isOffscreen ||
-                    isBlockOffscreen({
-                        document: props.document,
-                        block: node,
-                        ancestorBlocks: props.ancestorBlocks,
-                    });
-
-                return (
-                    <Block
-                        key={node.key}
-                        block={node}
-                        style={[
-                            'w-full mx-auto decoration-primary/6',
-                            node.data && 'fullWidth' in node.data && node.data.fullWidth
-                                ? 'max-w-screen-xl'
-                                : 'max-w-3xl',
-                            blockStyle,
-                        ]}
-                        isEstimatedOffscreen={isOffscreen}
-                        {...contextProps}
-                    />
-                );
-            })}
-        </>
-    );
-}