Updated lockfile

Co-authored-by: Brett Jephson <brett@gitbook.io>

.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/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/config.json

@@ -4,7 +4,7 @@
     "commit": false,
     "fixed": [],
     "linked": [],
-    "access": "restricted",
+    "access": "public",
     "baseBranch": "main",
     "updateInternalDependencies": "patch",
     "ignore": []

.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/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/nervous-chicken-pull.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Update lockfile

.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/poor-emus-remember.md

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

.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/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/tender-onions-jog.md

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

.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

.github/actions/setup-playwright/action.yml

@@ -7,7 +7,7 @@ runs:
         - name: 🏗 Prepare Playwright env
           shell: bash
           run: |
-              PLAYWRIGHT_VERSION=$(npm ls --json @playwright/test | jq --raw-output '.dependencies["@playwright/test"].version')
+              PLAYWRIGHT_VERSION=$(npm ls --json @playwright/test | jq --raw-output '.dependencies["gitbook"].dependencies["@playwright/test"].version')
               echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
 
         # Cache browser binaries, cache key is based on Playwright version and OS
@@ -24,6 +24,7 @@ runs:
         - name: 🏗 Install Playwright browser binaries & OS dependencies
           if: steps.playwright-cache.outputs.cache-hit != 'true'
           shell: bash
+          working-directory: packages/gitbook
           run: |
               bun x playwright install --with-deps chromium
 
@@ -31,5 +32,6 @@ runs:
         - name: 🏗 Install Playwright OS dependencies
           if: steps.playwright-cache.outputs.cache-hit == 'true'
           shell: bash
+          working-directory: packages/gitbook
           run: |
               bun x playwright install-deps

.github/workflows/ci.yaml

@@ -4,7 +4,8 @@ on:
     push:
         branches:
             - main
-
+env:
+    NPMRC_FONT_AWESOME_TOKEN: ${{ secrets.NPMRC_FONT_AWESOME_TOKEN }}
 jobs:
     deploy:
         name: Deploy to Cloudflare Pages
@@ -58,7 +59,7 @@ jobs:
                   apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
                   accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
                   projectName: ${{ vars.CLOUDFLARE_PROJECT_NAME }}
-                  directory: ./.vercel/output/static
+                  directory: ./packages/gitbook/.vercel/output/static
                   gitHubToken: ${{ secrets.GITHUB_TOKEN }}
                   workingDirectory: ./
             - name: Outputs
@@ -108,7 +109,7 @@ jobs:
               env:
                   PUPPETEER_SKIP_DOWNLOAD: 1
             - name: Run pagespeed tests
-              run: bun ./tests/pagespeed-testing.ts $DEPLOYMENT_URL
+              run: bun ./packages/gitbook/tests/pagespeed-testing.ts $DEPLOYMENT_URL
               env:
                   DEPLOYMENT_URL: ${{needs.deploy.outputs.deployment_url}}
                   PAGESPEED_API_KEY: ${{ secrets.PAGESPEED_API_KEY }}
@@ -157,6 +158,24 @@ jobs:
               env:
                   PUPPETEER_SKIP_DOWNLOAD: 1
             - run: bun unit
+    build-oss:
+        # CI to check that the repository builds correctly on a machine without the credentials
+        runs-on: ubuntu-latest
+        name: Build (Open Source)
+        env:
+            NPMRC_FONT_AWESOME_TOKEN: ''
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+            - name: Setup bun
+              uses: oven-sh/setup-bun@v1
+              with:
+                  bun-version: 1.1.18
+            - name: Install dependencies
+              run: bun install --frozen-lockfile
+              env:
+                  PUPPETEER_SKIP_DOWNLOAD: 1
+            - run: bun run build
     typecheck:
         runs-on: ubuntu-latest
         name: Typecheck

.github/workflows/publish.yaml

@@ -31,5 +31,7 @@ jobs:
               with:
                   publish: npm run release
               env:
-                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+                  # Using a PAT instead of GITHUB_TOKEN because we need to run workflows when releases are created
+                  # https://github.com/orgs/community/discussions/26875#discussioncomment-3253761
+                  GITHUB_TOKEN: ${{ secrets.GH_PERSONAL_TOKEN }}
                   NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -5,16 +5,6 @@ node_modules
 /.pnp
 .pnp.js
 
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
 # misc
 .DS_Store
 *.pem
@@ -24,25 +14,11 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# local env files
+# Turbo
-.env*.local
+.turbo
 
-# vercel
+# Vercel
 .vercel
 
-# typescript
+# Env files
-*.tsbuildinfo
+.env.local
-next-env.d.ts
-
-# visual tests
-screenshots/
-
-# Sentry Config File
-.sentryclirc
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache/
-
-# Generated public files
-/public/~gitbook/static/

.nvmrc

@@ -0,0 +1 @@
+v20.6

.prettierignore

@@ -1,4 +1,10 @@
 .next
+.vercel
 
 # Generated
 packages/emoji-codepoints/index.ts
+packages/gitbook/public/~gitbook/static/
+packages/icons/src/data/*.json
+
+# Build files
+dist/

README.md

@@ -106,7 +106,7 @@ On the con side, you become responsible for the reliability of your published si
 
 Distributed under the [GNU GPLv3 License](https://github.com/GitBookIO/gitbook/blob/main/LICENSE).
 
-If you plan to distribute the code, you must the source code public to comply with GNU GPLv3. To clone in a private repository, acquire a [commercial license](https://www.gitbook.com/pricing).
+If you plan to distribute the code, you must make the source code public to comply with the GNU GPLv3. To clone in a private repository, acquire a [commercial license](https://www.gitbook.com/pricing).
 
 See `LICENSE` for more information.
 

bunfig.toml

@@ -0,0 +1,2 @@
+[install.scopes]
+"awesome.me" = { token = "$NPMRC_FONT_AWESOME_TOKEN", url = "https://npm.fontawesome.com/" }

package.json

@@ -2,95 +2,34 @@
     "name": "gitbook",
     "version": "0.1.0",
     "private": true,
+    "packageManager": "bun@1.1.18",
     "scripts": {
-        "dev": "next dev",
+        "dev": "turbo run dev",
-        "build": "next build",
+        "build": "turbo run build",
-        "build:cloudflare": "next-on-pages",
+        "build:cloudflare": "turbo run build:cloudflare",
-        "start": "next start",
+        "lint": "turbo run lint",
-        "lint": "next lint",
+        "lint:fix": "turbo run lint -- --fix",
+        "typecheck": "turbo run typecheck",
         "format": "prettier ./ --ignore-unknown --write",
         "format:check": "prettier ./ --ignore-unknown --list-different",
-        "typecheck": "tsc --noEmit",
+        "unit": "turbo run unit",
-        "unit": "bun test {src,packages}",
+        "e2e": "turbo run e2e",
-        "e2e": "playwright test",
         "changeset": "changeset",
-        "release": "changeset publish",
+        "release": "turbo run release && changeset publish",
-        "postinstall": "rm -rf ./public/~gitbook/static/mathjax@3.2.2 && mkdir -p ./public/~gitbook/static/ && cp -R node_modules/mathjax/es5 ./public/~gitbook/static/mathjax@3.2.2"
+        "download:env": "op read op://gitbook-x-dev/gitbook-open/.env.local >> .env.local"
     },
     "workspaces": [
         "packages/*"
     ],
-    "dependencies": {
-        "@geist-ui/icons": "^1.0.2",
-        "@gitbook/api": "^0.56.0",
-        "@radix-ui/react-checkbox": "^1.0.4",
-        "@radix-ui/react-popover": "^1.0.7",
-        "@sentry/nextjs": "^7.94.1",
-        "@sindresorhus/fnv1a": "^3.1.0",
-        "@tailwindcss/container-queries": "^0.1.1",
-        "@tailwindcss/typography": "^0.5.10",
-        "@upstash/redis": "^1.27.1",
-        "ajv": "^8.12.0",
-        "assert-never": "^1.2.1",
-        "bun-types": "^1.0.7",
-        "classnames": "^2.5.1",
-        "content-security-policy-merger": "^1.0.0",
-        "framer-motion": "^10.16.14",
-        "js-cookie": "^3.0.5",
-        "jsontoxml": "^1.0.1",
-        "katex": "^0.16.9",
-        "mathjax": "^3.2.2",
-        "memoizee": "^0.4.15",
-        "next": "^14.1.3",
-        "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",
-        "react": "^18",
-        "react-dom": "^18",
-        "react-hotkeys-hook": "^4.4.1",
-        "recoil": "^0.7.7",
-        "rehype-sanitize": "^6.0.0",
-        "rehype-stringify": "^10.0.0",
-        "remark-gfm": "^4.0.0",
-        "remark-parse": "^11.0.0",
-        "remark-rehype": "^11.1.0",
-        "rison": "^0.1.1",
-        "server-only": "^0.0.1",
-        "shiki": "^1.2.0",
-        "tailwind-merge": "^2.2.0",
-        "tailwind-shades": "^1.1.2",
-        "unified": "^11.0.4",
-        "url-join": "^5.0.0"
-    },
     "devDependencies": {
-        "@argos-ci/playwright": "^2.0.0",
         "@changesets/cli": "^2.27.7",
-        "@cloudflare/next-on-pages": "^1.11.3",
-        "@cloudflare/workers-types": "^4.20231218.0",
-        "@playwright/test": "^1.42.1",
-        "@types/js-cookie": "^3.0.6",
-        "@types/jsontoxml": "^1.0.5",
-        "@types/jsonwebtoken": "^9.0.6",
-        "@types/katex": "^0.16.5",
-        "@types/node": "^20",
-        "@types/object-hash": "^3.0.6",
-        "@types/parse-cache-control": "^1.0.4",
-        "@types/psi": "^4.1.6",
-        "@types/react": "^18",
-        "@types/react-dom": "^18",
-        "@types/rison": "^0.0.9",
-        "autoprefixer": "^10",
-        "eslint": "^8",
-        "eslint-config-next": "13.5.6",
-        "eslint-plugin-import": "^2.29.0",
-        "jsonwebtoken": "^9.0.2",
-        "postcss": "^8",
         "prettier": "^3.0.3",
-        "psi": "^4.1.0",
+        "turbo": "^2.0.9"
-        "tailwindcss": "^3.4.0",
+    },
-        "typescript": "^5"
+    "patchedDependencies": {
+        "@vercel/next@4.3.6": "patches/@vercel%2Fnext@4.3.6.patch"
+    },
+    "dependencies": {
+        "@scalar/api-client-react": "0.3.7"
     }
 }

packages/emoji-codepoints/.gitignore

@@ -1 +1 @@
-index.ts
+dist/

packages/emoji-codepoints/build.ts

@@ -1,4 +1,5 @@
-import fs from 'fs';
+import fs from 'node:fs';
+import path from 'node:path';
 import emojisRaws from 'emoji-assets/emoji.json';
 
 interface EmojiData {
@@ -20,7 +21,8 @@ Object.entries(emojis).forEach(([key, value]) => {
     }
 });
 
+fs.mkdirSync(path.resolve(__dirname, 'dist'), { recursive: true });
 fs.writeFileSync(
-    'index.ts',
+    path.resolve(__dirname, 'dist/index.ts'),
     `export const emojiCodepoints: Record<string, string> = ${JSON.stringify(output, null, 4)};`,
 );

packages/emoji-codepoints/package.json

@@ -3,12 +3,12 @@
     "description": "Optimized mapping of codepoints to the fully qualified emoji codepoints",
     "version": "0.2.0",
     "private": true,
-    "exports": "./index.ts",
+    "exports": "./dist/index.ts",
     "dependencies": {},
     "devDependencies": {
         "emoji-assets": "^8.0.0"
     },
     "scripts": {
-        "postinstall": "bun ./build.ts"
+        "generate": "bun ./build.ts"
     }
 }

packages/gitbook/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# visual tests
+screenshots/
+
+# Sentry Config File
+.sentryclirc
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
+# Generated public files
+/public/~gitbook/static/

packages/gitbook/CHANGELOG.md

@@ -0,0 +1,47 @@
+# gitbook
+
+## 0.3.0
+
+### Minor Changes
+
+-   24b785c: Update shiki for code block syntax highlighting, with support for more languages and fixes for diffs. It also patches the deployment on Cloudflare to support edge functions larger than 4MB.
+
+### Patch Changes
+
+-   acc3f2f: Fix error with the "Try it" of OpenAPI block because of the Scalar proxy failing on Cloudflare with the `cache` option
+-   Updated dependencies [709f1a1]
+-   Updated dependencies [ede2335]
+-   Updated dependencies [0426312]
+    -   @gitbook/react-openapi@0.6.0
+
+## 0.2.2
+
+### Patch Changes
+
+-   Updated dependencies [3445db4]
+    -   @gitbook/react-contentkit@0.5.0
+    -   @gitbook/react-openapi@0.5.0
+    -   @gitbook/react-math@0.5.0
+
+## 0.2.1
+
+### Patch Changes
+
+-   Updated dependencies [24cd72e]
+    -   @gitbook/react-contentkit@0.4.0
+    -   @gitbook/react-math@0.4.0
+    -   @gitbook/react-openapi@0.4.0
+
+## 0.2.0
+
+### Minor Changes
+
+-   de747b7: Refactor the repository to be a proper monorepo and publish JS files on NPM instead of TypeScript files.
+
+### Patch Changes
+
+-   Updated dependencies [de747b7]
+-   Updated dependencies [de747b7]
+    -   @gitbook/react-contentkit@0.3.0
+    -   @gitbook/react-openapi@0.3.0
+    -   @gitbook/react-math@0.3.0

packages/gitbook/e2e/pages.spec.ts

@@ -1,8 +1,10 @@
+import { DeepPartial } from 'ts-essentials';
 import { argosScreenshot } from '@argos-ci/playwright';
 import {
     CustomizationHeaderPreset,
+    CustomizationIconsStyle,
     CustomizationLocale,
-    CustomizationSettings,
+    SiteCustomizationSettings,
 } from '@gitbook/api';
 import { test, expect, Page } from '@playwright/test';
 import jwt from 'jsonwebtoken';
@@ -230,7 +232,7 @@ const testCases: TestsCase[] = [
     },
     {
         name: 'Versioning',
-        baseUrl: 'https://gitbook.gitbook.io/test-1-1/',
+        baseUrl: 'https://gitbook.gitbook.io/test-gitbook-open/',
         tests: [
             {
                 name: 'Revision',
@@ -241,7 +243,7 @@ const testCases: TestsCase[] = [
     },
     {
         name: 'PDF',
-        baseUrl: 'https://gitbook.gitbook.io/test-1-1/',
+        baseUrl: 'https://gitbook.gitbook.io/test-gitbook-open/',
         tests: [
             {
                 name: 'PDF',
@@ -251,7 +253,7 @@ const testCases: TestsCase[] = [
     },
     {
         name: 'Content tests',
-        baseUrl: 'https://gitbook.gitbook.io/test-1-1/',
+        baseUrl: 'https://gitbook.gitbook.io/test-gitbook-open/',
         tests: [
             {
                 name: 'Text',
@@ -349,6 +351,11 @@ const testCases: TestsCase[] = [
                 url: 'blocks/embeds',
                 fullPage: true,
             },
+            {
+                name: 'Page links',
+                url: 'blocks/page-links',
+                fullPage: true,
+            },
             {
                 name: 'Annotations',
                 url: 'blocks/annotations',
@@ -361,7 +368,7 @@ const testCases: TestsCase[] = [
     },
     {
         name: 'Page options',
-        baseUrl: 'https://gitbook.gitbook.io/test-1-1/',
+        baseUrl: 'https://gitbook.gitbook.io/test-gitbook-open/',
         tests: [
             {
                 name: 'Hidden',
@@ -383,11 +390,16 @@ const testCases: TestsCase[] = [
                 url: 'page-options/page-with-cover-and-no-toc',
                 run: waitForCookiesDialog,
             },
+            {
+                name: 'With icon',
+                url: 'page-options/page-with-icon',
+                run: waitForCookiesDialog,
+            },
         ],
     },
     {
         name: 'Customization',
-        baseUrl: 'https://gitbook.gitbook.io/test-1-1/',
+        baseUrl: 'https://gitbook.gitbook.io/test-gitbook-open/',
         tests: [
             {
                 name: 'Without header',
@@ -399,16 +411,37 @@ const testCases: TestsCase[] = [
                 }),
                 run: waitForCookiesDialog,
             },
+            {
+                name: 'With duotone icons',
+                url:
+                    'page-options/page-with-icon' +
+                    getCustomizationURL({
+                        styling: {
+                            icons: CustomizationIconsStyle.Duotone,
+                        },
+                    }),
+                run: waitForCookiesDialog,
+            },
+        ],
+    },
+    {
+        name: 'Ads',
+        baseUrl: 'https://gitbook.gitbook.io/test-gitbook-open/',
+        tests: [
+            {
+                name: 'Without previewed ads',
+                url: 'text-page?ads_preview=1',
+                run: waitForCookiesDialog,
+            },
         ],
     },
     {
         name: 'Share links',
-        baseUrl: 'https://gitbook.gitbook.io/test-share-links/',
+        baseUrl: 'https://gitbook.gitbook.io/gbo-tests-share-links/',
         tests: [
             {
                 name: 'Valid link',
-                url: 'Fc6mMII9FKgnwm7qqynx/',
+                url: 'TGs8PkF4GWVtbmPnWhYL/',
-                run: waitForCookiesDialog,
             },
             {
                 name: 'Invalid link',
@@ -611,13 +644,12 @@ const testCases: TestsCase[] = [
     },
     {
         name: 'Languages',
-        baseUrl: 'https://gitbook.gitbook.io/test-1-1/',
+        baseUrl: 'https://gitbook.gitbook.io/test-gitbook-open/',
         tests: allLocales.map((locale) => ({
             name: locale,
             url: getCustomizationURL({
                 internationalization: {
                     locale,
-                    inherit: false,
                 },
             }),
             run: async (page) => {
@@ -658,7 +690,7 @@ for (const testCase of testCases) {
 /**
  * Create a URL with customization settings.
  */
-function getCustomizationURL(partial: Partial<CustomizationSettings>): string {
+function getCustomizationURL(partial: DeepPartial<SiteCustomizationSettings>): string {
     const encoded = rison.encode_object(partial);
 
     const searchParams = new URLSearchParams();

packages/gitbook/next.config.js

@@ -7,6 +7,8 @@ module.exports = withSentryConfig(
             SENTRY_DSN: process.env.SENTRY_DSN ?? '',
             SENTRY_ENVIRONMENT: process.env.SENTRY_ENVIRONMENT ?? 'development',
             GITBOOK_ASSETS_PREFIX: process.env.GITBOOK_ASSETS_PREFIX,
+            GITBOOK_ICONS_URL: process.env.GITBOOK_ICONS_URL,
+            GITBOOK_ICONS_TOKEN: process.env.GITBOOK_ICONS_TOKEN,
         },
 
         webpack(config, { dev, webpack }) {

packages/gitbook/package.json

@@ -0,0 +1,93 @@
+{
+    "name": "gitbook",
+    "version": "0.3.0",
+    "private": true,
+    "scripts": {
+        "dev": "env-cmd --silent -f ../../.env.local next dev",
+        "build": "next build",
+        "build:cloudflare": "next-on-pages",
+        "start": "next start",
+        "lint": "next lint",
+        "typecheck": "tsc --noEmit",
+        "e2e": "playwright test",
+        "unit": "bun test {src,packages}",
+        "generate": "gitbook-icons ./public/~gitbook/static/icons custom-icons && gitbook-math ./public/~gitbook/static/math",
+        "copy:icons": "gitbook-icons ./public/~gitbook/static/icons"
+    },
+    "dependencies": {
+        "@gitbook/api": "^0.60.0",
+        "@gitbook/icons": "workspace:*",
+        "@gitbook/react-math": "workspace:*",
+        "@gitbook/react-openapi": "workspace:*",
+        "@gitbook/react-contentkit": "workspace:*",
+        "@gitbook/emoji-codepoints": "workspace:*",
+        "@radix-ui/react-checkbox": "^1.0.4",
+        "@radix-ui/react-popover": "^1.0.7",
+        "@sentry/nextjs": "^7.94.1",
+        "@sindresorhus/fnv1a": "^3.1.0",
+        "@tailwindcss/container-queries": "^0.1.1",
+        "@tailwindcss/typography": "^0.5.10",
+        "@upstash/redis": "^1.27.1",
+        "ajv": "^8.12.0",
+        "assert-never": "^1.2.1",
+        "bun-types": "^1.1.20",
+        "classnames": "^2.5.1",
+        "content-security-policy-merger": "^1.0.0",
+        "framer-motion": "^10.16.14",
+        "js-cookie": "^3.0.5",
+        "jsontoxml": "^1.0.1",
+        "katex": "^0.16.9",
+        "mathjax": "^3.2.2",
+        "memoizee": "^0.4.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",
+        "react": "^18",
+        "react-dom": "^18",
+        "react-hotkeys-hook": "^4.4.1",
+        "recoil": "^0.7.7",
+        "rehype-sanitize": "^6.0.0",
+        "rehype-stringify": "^10.0.0",
+        "remark-gfm": "^4.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.1.0",
+        "rison": "^0.1.1",
+        "server-only": "^0.0.1",
+        "shiki": "^1.11.1",
+        "tailwind-merge": "^2.2.0",
+        "tailwind-shades": "^1.1.2",
+        "unified": "^11.0.4",
+        "url-join": "^5.0.0"
+    },
+    "devDependencies": {
+        "@argos-ci/playwright": "^2.0.0",
+        "@playwright/test": "^1.42.1",
+        "@cloudflare/next-on-pages": "^1.12.1",
+        "@cloudflare/workers-types": "^4.20240725.0",
+        "@types/js-cookie": "^3.0.6",
+        "@types/jsontoxml": "^1.0.5",
+        "@types/jsonwebtoken": "^9.0.6",
+        "@types/node": "^20",
+        "@types/object-hash": "^3.0.6",
+        "@types/parse-cache-control": "^1.0.4",
+        "@types/psi": "^4.1.6",
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
+        "@types/rison": "^0.0.9",
+        "autoprefixer": "^10",
+        "eslint": "^8",
+        "eslint-config-next": "^14.2.5",
+        "eslint-plugin-import": "^2.29.1",
+        "jsonwebtoken": "^9.0.2",
+        "postcss": "^8",
+        "psi": "^4.1.0",
+        "tailwindcss": "^3.4.0",
+        "typescript": "^5.5.3",
+        "env-cmd": "^10.1.0",
+        "ts-essentials": "^10.0.1"
+    }
+}

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

@@ -64,6 +64,7 @@ export default async function Page(props: {
     const withPageFeedback = customization.feedback.enabled;
 
     const contentRefContext: ContentRefContext = {
+        siteContext: 'siteId' in contentPointer ? contentPointer : null,
         space,
         revisionId: contentTarget.revisionId,
         pages,

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

@@ -14,7 +14,10 @@ export const runtime = 'edge';
  */
 export async function GET(req: NextRequest) {
     const pointer = getContentPointer();
-    const space = await getSpace(pointer.spaceId);
+    const space = await getSpace(
+        pointer.spaceId,
+        'siteId' in pointer ? pointer.siteShareKey : undefined,
+    );
     const parent =
         'siteId' in pointer
             ? await getSite(pointer.organizationId, pointer.siteId)

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

@@ -14,7 +14,11 @@ export const runtime = 'edge';
  * Generate a sitemap.xml for the current space.
  */
 export async function GET(req: NextRequest) {
-    const { pages: rootPages } = await getSpaceContentData(getContentPointer());
+    const pointer = getContentPointer();
+    const { pages: rootPages } = await getSpaceContentData(
+        pointer,
+        'siteId' in pointer ? pointer.siteShareKey : undefined,
+    );
     const pages = flattenPages(rootPages, (page) => !page.hidden);
     const urls = pages.map(({ page, depth }) => {
         // Decay priority with depth

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

@@ -46,7 +46,7 @@ export async function GET(req: NextRequest) {
     const spaceId = pointer.spaceId;
 
     const [space, customization] = await Promise.all([
-        getSpace(spaceId),
+        getSpace(spaceId, 'siteId' in pointer ? pointer.siteShareKey : undefined),
         'siteId' in pointer ? getCurrentSiteCustomization(pointer) : getSpaceCustomization(spaceId),
     ]);
     const parent =

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { AlertTriangle } from '@geist-ui/icons';
+import { Icon } from '@gitbook/icons';
 import React from 'react';
 
 import { useScrollActiveId } from '@/components/hooks';
@@ -105,7 +105,10 @@ export function PageControlButtons(props: {
                             'max-w-sm',
                         )}
                     >
-                        <AlertTriangle className={tcls('size-6', 'mr-3', 'mt-1')} />{' '}
+                        <Icon
+                            icon="triangle-exclamation"
+                            className={tcls('size-6', 'mr-3', 'mt-1')}
+                        />{' '}
                         <div>
                             <div>{t(language, 'pdf_limit_reached', total, pageIds.length)}</div>
                             <div>

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

@@ -1,13 +1,12 @@
-import { ArrowLeft, Printer } from '@geist-ui/icons';
 import {
     CustomizationSettings,
     Revision,
     RevisionPageDocument,
     RevisionPageGroup,
-    RevisionPageLink,
     SiteCustomizationSettings,
     Space,
 } from '@gitbook/api';
+import { Icon } from '@gitbook/icons';
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import * as React from 'react';
@@ -42,7 +41,10 @@ export const runtime = 'edge';
 export async function generateMetadata(): Promise<Metadata> {
     const contentPointer = getContentPointer();
     const [space, customization] = await Promise.all([
-        getSpace(contentPointer.spaceId),
+        getSpace(
+            contentPointer.spaceId,
+            'siteId' in contentPointer ? contentPointer.siteShareKey : undefined,
+        ),
         'siteId' in contentPointer
             ? getCurrentSiteCustomization(contentPointer)
             : getSpaceCustomization(contentPointer.spaceId),
@@ -72,7 +74,10 @@ export default async function PDFHTMLOutput(props: { searchParams: { [key: strin
         'siteId' in contentPointer
             ? getCurrentSiteCustomization(contentPointer)
             : getSpaceCustomization(contentPointer.spaceId),
-        getSpaceContentData(contentPointer),
+        getSpaceContentData(
+            contentPointer,
+            'siteId' in contentPointer ? contentPointer.siteShareKey : undefined,
+        ),
     ]);
     const language = getSpaceLanguage(customization);
 
@@ -110,7 +115,7 @@ export default async function PDFHTMLOutput(props: { searchParams: { [key: strin
                             'border',
                         )}
                     >
-                        <ArrowLeft className={tcls('size-6')} />
+                        <Icon icon="arrow-left" className={tcls('size-6')} />
                     </a>
                 </div>
             ) : null}
@@ -136,7 +141,7 @@ export default async function PDFHTMLOutput(props: { searchParams: { [key: strin
                         'border',
                     )}
                 >
-                    <Printer className={tcls('size-6')} />
+                    <Icon icon="print" className={tcls('size-6')} />
                 </PrintButton>
             </div>
 
@@ -170,6 +175,7 @@ export default async function PDFHTMLOutput(props: { searchParams: { [key: strin
                             space={space}
                             page={page}
                             refContext={{
+                                siteContext: 'siteId' in contentPointer ? contentPointer : null,
                                 space,
                                 revisionId: contentTarget.revisionId,
                                 pages: rootPages,

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

@@ -71,6 +71,8 @@ export function getContentPointer(): ContentPointer | SiteContentPointer {
 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
             ? [
@@ -78,10 +80,10 @@ export async function fetchSpaceData() {
                   fetchParentSite({
                       organizationId: content.organizationId,
                       siteId: content.siteId,
-                      siteShareKey: content.siteShareKey,
+                      siteShareKey,
                   }),
               ]
-            : [getSpaceData(content)],
+            : [getSpaceData(content, siteShareKey)],
     );
 
     const parent = await (parentSite ?? fetchParentCollection(space));
@@ -104,9 +106,10 @@ export async function fetchSpaceData() {
  */
 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));
+        : getSpaceData(content, siteShareKey));
 
     const page = await resolvePage(contentTarget, pages, params);
     const [parent, document] = await Promise.all([

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

@@ -1,10 +1,12 @@
 import {
     CustomizationBackground,
     CustomizationCorners,
+    CustomizationIconsStyle,
     CustomizationHeaderPreset,
     CustomizationSettings,
     SiteCustomizationSettings,
 } from '@gitbook/api';
+import { IconsProvider, IconStyle } from '@gitbook/icons';
 import assertNever from 'assert-never';
 import colors from 'tailwindcss/colors';
 
@@ -12,11 +14,13 @@ 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 './globals.css';
+import '@gitbook/icons/style.css';
 import { getContentPointer } from './fetch';
 
 /**
@@ -104,8 +108,23 @@ export default async function SpaceRootLayout(props: { children: React.ReactNode
                     'bg-light',
                     'dark:bg-dark',
                 )}
+            >
+                <IconsProvider
+                    assetsURL={process.env.GITBOOK_ICONS_URL ?? getStaticFileURL('icons')}
+                    assetsURLToken={process.env.GITBOOK_ICONS_TOKEN}
+                    assetsByStyles={{
+                        'custom-icons': {
+                            assetsURL: getStaticFileURL('icons'),
+                        },
+                    }}
+                    iconStyle={
+                        ('icons' in customization.styling
+                            ? apiToIconsStyles[customization.styling.icons]
+                            : null) || IconStyle.Regular
+                    }
                 >
                     <ClientContexts language={language}>{children}</ClientContexts>
+                </IconsProvider>
             </body>
         </html>
     );
@@ -188,3 +207,13 @@ function generateHeaderTheme(customization: CustomizationSettings | SiteCustomiz
         }
     }
 }
+
+const apiToIconsStyles: {
+    [key in CustomizationIconsStyle]: IconStyle;
+} = {
+    [CustomizationIconsStyle.Regular]: IconStyle.Regular,
+    [CustomizationIconsStyle.Solid]: IconStyle.Solid,
+    [CustomizationIconsStyle.Duotone]: IconStyle.Duotone,
+    [CustomizationIconsStyle.Thin]: IconStyle.Thin,
+    [CustomizationIconsStyle.Light]: IconStyle.Light,
+};

packages/gitbook/src/app/~scalar/proxy/route.ts

@@ -30,7 +30,7 @@ export async function POST(req: NextRequest) {
             // no-cors, *cors, same-origin
             // mode: 'cors', // Not supported on Cloudflare Workers
             // *default, no-cache, reload, force-cache, only-if-cached
-            cache: 'no-cache',
+            // cache: 'no-cache', // Not supported on Cloudflare Workers
             // include, *same-origin, omit
             // credentials: 'include', // Not supported on Cloudflare Workers
             headers: requestBody.headers,

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

@@ -0,0 +1,112 @@
+'use client';
+
+import * as React from 'react';
+
+import { ClassValue, tcls } from '@/lib/tailwind';
+
+import { renderAd } from './renderAd';
+
+/**
+ * Zone ID provided by BuySellAds for the preview.
+ */
+const PREVIEW_ZONE_ID = 'CVAIKKQM';
+
+/**
+ * Fetch and render the Ad placement.
+ * https://docs.buysellads.com/ad-serving-api
+ */
+export function Ad({
+    zoneId,
+    spaceId,
+    placement,
+    ignore,
+    style,
+    mode = 'auto',
+}: {
+    zoneId: string | null;
+    spaceId: string;
+    placement: string;
+    ignore: boolean;
+    style?: ClassValue;
+    mode?: 'classic' | 'auto' | 'cover';
+}) {
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const [visible, setVisible] = React.useState(false);
+    const [ad, setAd] = React.useState<React.ReactNode | undefined>(undefined);
+
+    // Observe the container visibility
+    React.useEffect(() => {
+        if (!containerRef.current) {
+            return;
+        }
+
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    setVisible(true);
+                }
+            },
+            {
+                root: null,
+                rootMargin: '0px',
+                threshold: 0.1,
+            },
+        );
+
+        observer.observe(containerRef.current);
+
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+
+    // When the container is visible,
+    // track an impression on the ad and fetch it
+    React.useEffect(() => {
+        if (!visible) {
+            return;
+        }
+
+        let cancelled = false;
+
+        const preview = new URL(window.location.href).searchParams.has('ads_preview');
+        const realZoneId = preview ? PREVIEW_ZONE_ID : zoneId;
+
+        if (!realZoneId) {
+            return;
+        }
+
+        (async () => {
+            const result = await renderAd({
+                spaceId,
+                placement,
+                ignore: ignore || preview,
+                zoneId: realZoneId,
+                mode,
+            });
+
+            if (cancelled) {
+                return;
+            }
+
+            if (result) {
+                setAd(result);
+            }
+        })();
+
+        return () => {
+            cancelled = true;
+        };
+    }, [visible, spaceId, 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)}>
+            {ad ? ad : null}
+        </div>
+    );
+}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { getResizedImageURL } from '@/lib/images';
 import { tcls } from '@/lib/tailwind';
 
 import { AdItem } from './types';
@@ -7,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(
@@ -29,14 +30,21 @@ export function AdClassicRendering({ ad }: { ad: AdItem }) {
         >
             {'smallImage' in ad ? (
                 <div>
-                    <img alt="Ads logo" className={tcls('rounded-md')} src={ad.smallImage} />
+                    <img
+                        alt="Ads logo"
+                        className={tcls('rounded-md')}
+                        src={await getResizedImageURL(ad.smallImage, { width: 192, dpr: 2 })}
+                    />
                 </div>
             ) : (
                 <div
                     className={tcls('px-6', 'py-4', 'rounded-md')}
                     style={{ backgroundColor: ad.backgroundColor }}
                 >
-                    <img alt="Ads logo" src={ad.logo} />
+                    <img
+                        alt="Ads logo"
+                        src={await getResizedImageURL(ad.logo, { width: 192 - 48, dpr: 2 })}
+                    />
                 </div>
             )}
             <div className={tcls('flex', 'flex-col')}>

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { hexToRgba } from '@/lib/colors';
+import { getResizedImageURL } from '@/lib/images';
 import { tcls } from '@/lib/tailwind';
 
 import { AdCover } from './types';
@@ -8,7 +9,9 @@ import { AdCover } from './types';
 /**
  * Cover rendering for an ad.
  */
-export function AdCoverRendering({ ad }: { ad: AdCover }) {
+export async function AdCoverRendering({ ad }: { ad: AdCover }) {
+    const largeImage = await getResizedImageURL(ad.largeImage, { width: 128, dpr: 2 });
+
     return (
         <a
             className={tcls(
@@ -43,14 +46,14 @@ export function AdCoverRendering({ ad }: { ad: AdCover }) {
                     'z-0',
                 )}
                 style={{
-                    backgroundImage: `url(${ad.largeImage})`,
+                    backgroundImage: `url(${largeImage})`,
                 }}
             />
 
             <div className={tcls('z-[2]')}>
                 <img
                     alt="Large image"
-                    src={ad.largeImage}
+                    src={largeImage}
                     className={tcls(
                         'rounded-md',
                         'shadow-md',

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import { tcls } from '@/lib/tailwind';
+
+/**
+ * Render attribution or verification pixels.
+ * https://docs.buysellads.com/ad-serving-api#pixels
+ */
+export function AdPixels({ rawPixel }: { rawPixel: string }) {
+    const pixels = rawPixel.split('||');
+    const time = String(Math.round(Date.now() / 1e4) | 0);
+
+    return (
+        <div className={tcls('hidden')}>
+            {pixels.map((pixel, index) => {
+                return (
+                    <img
+                        key={index}
+                        src={pixel.replace('[timestamp]', time)}
+                        width="1"
+                        height="1"
+                        style={{ display: 'none' }}
+                        alt="Ads tracking pixel"
+                    />
+                );
+            })}
+        </div>
+    );
+}

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

@@ -0,0 +1,104 @@
+'use server';
+
+import { headers } from 'next/headers';
+
+import { tcls } from '@/lib/tailwind';
+
+import { AdClassicRendering } from './AdClassicRendering';
+import { AdCoverRendering } from './AdCoverRendering';
+import { AdPixels } from './AdPixels';
+import { AdItem, AdsResponse } from './types';
+
+interface FetchAdOptions {
+    /** ID of the zone to fetch Ads for */
+    zoneId: string;
+    /** ID of the space */
+    spaceId: string;
+    /** Mode to render the Ad */
+    mode: 'classic' | 'auto' | 'cover';
+    /** Name of the placement for the ad */
+    placement: string;
+    /** If true, we'll not track it as an impression */
+    ignore: boolean;
+}
+
+/**
+ * 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 { spaceId, mode } = options;
+    const result = await fetchAd(options);
+    if (!result || !result.ad.description || !result.ad.statlink) {
+        return null;
+    }
+
+    const { ad, ip } = result;
+
+    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 (
+        <>
+            {mode === 'classic' || !('callToAction' in ad) ? (
+                <AdClassicRendering ad={ad} />
+            ) : (
+                <AdCoverRendering ad={ad} />
+            )}
+            {ad.pixel ? <AdPixels rawPixel={ad.pixel} /> : null}
+            <p
+                className={tcls(
+                    'mt-2',
+                    'mr-2',
+                    'text-xs',
+                    'text-right',
+                    'text-dark/5',
+                    'dark:text-light/5',
+                )}
+                data-debug-ip={ip}
+            >
+                <a target="_blank" href={viaUrl.toString()} className={tcls('hover:underline')}>
+                    Sponsored via GitBook
+                </a>
+            </p>
+        </>
+    );
+}
+
+async function fetchAd({
+    zoneId,
+    placement,
+    ignore,
+}: 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}`);
+    url.searchParams.set('v', 'true');
+    url.searchParams.set('forwardedip', ip);
+    url.searchParams.set('useragent', userAgent);
+    if (ignore) {
+        url.searchParams.set('ignore', 'true');
+    }
+
+    const res = await fetch(url);
+    const json: AdsResponse = await res.json();
+
+    const first = json.ads[0];
+    if (first && 'active' in first) {
+        return { ad: first, ip };
+    }
+
+    return null;
+}

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

@@ -1,6 +1,6 @@
 'use client';
 
-import IconX from '@geist-ui/icons/x';
+import { Icon } from '@gitbook/icons';
 import * as React from 'react';
 
 import { Button } from '@/components/primitives';
@@ -92,7 +92,7 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
                 )}
                 title={tString(language, 'cookies_close')}
             >
-                <IconX className={tcls('w-4')} />
+                <Icon icon="xmark" className={tcls('size-4')} />
             </button>
             <div className={tcls('mt-3', 'flex', 'flex-row', 'gap-2')}>
                 <Button

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

@@ -27,6 +27,7 @@ export async function Annotation(props: InlineProps<DocumentInlineAnnotation>) {
                     ancestorBlocks={[]}
                     context={context}
                     nodes={fragment.nodes}
+                    style={['space-y-4']}
                 />
             }
         >

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

@@ -1,17 +1,18 @@
 import { DocumentBlockContentRef } from '@gitbook/api';
 
-import { LogoIcon } from '@/components/icons';
 import { Card, Emoji } from '@/components/primitives';
 import { getSpaceCustomization, ignoreAPIError } from '@/lib/api';
 import { ResolvedContentRef } from '@/lib/references';
 
 import { BlockProps } from './Block';
+import { SpaceIcon } from '../Space/SpaceIcon';
 
 export async function BlockContentRef(props: BlockProps<DocumentBlockContentRef>) {
     const { block, context, style } = props;
 
     const resolved = await context.resolveContentRef(block.data.ref, {
         resolveAnchorText: true,
+        iconStyle: ['text-xl', 'text-dark/6', 'dark:text-light/6'],
     });
 
     if (!resolved) {
@@ -29,7 +30,7 @@ export async function BlockContentRef(props: BlockProps<DocumentBlockContentRef>
 
     return (
         <Card
-            leadingIcon={resolved.emoji ? <Emoji code={resolved.emoji} style="text-xl" /> : null}
+            leadingIcon={resolved.icon ? resolved.icon : null}
             href={resolved.href}
             title={resolved.text}
             style={style}
@@ -55,7 +56,7 @@ async function SpaceRefCard(
     return (
         <Card
             leadingIcon={
-                <LogoIcon
+                <SpaceIcon
                     icon={customIcon}
                     emoji={customEmoji}
                     alt=""