Compare commits

..

6 Commits

Author SHA1 Message Date
taranvohra d6b9fe6643 Bump api package 2024-10-11 12:58:44 +05:30
taranvohra 766c97a100 Merge remote-tracking branch 'origin/main' into cleanup-legacy-code 2024-10-11 12:58:05 +05:30
taranvohra 29fca1e835 bun.lockb 2024-10-07 02:01:02 +05:30
taranvohra 48b5c0707b Merge main 2024-10-07 01:52:50 +05:30
taranvohra 434cfd7a08 WIP 2024-09-12 18:02:33 +02:00
taranvohra e3587d59aa use gitbook/api version 0.61 2024-09-12 17:40:55 +02:00
171 changed files with 1427 additions and 2238 deletions
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Avoid multiple <h1> in the page by using a <div> for the title in the header
+6
View File
@@ -0,0 +1,6 @@
---
'@gitbook/react-openapi': patch
'gitbook': patch
---
Adds content-visibility css property to OpenAPI Operation for better render performance
+5
View File
@@ -0,0 +1,5 @@
---
'@gitbook/cache-do': minor
---
Experiment with optimizing billable duration in Cloudflare by using multiple RPC sessions instead of one
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Fix scroll position when navigating pages on mobile
+5
View File
@@ -0,0 +1,5 @@
---
'@gitbook/react-openapi': minor
---
Add Python support in Code Samples
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
RND-3532: drop down menu for hidden links at small screen size
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Change dark mode shadow for multi-space search toolbar
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Use ellipsis and fix icon color for more links in the header on small screen
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Improve consistency of change request preview by removing cache-control on response
+5
View File
@@ -0,0 +1,5 @@
---
'@gitbook/icons': patch
---
Update version for static assets to fix invalid caching
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': minor
---
Revalidate change request cached content when pressing refresh button
+5
View File
@@ -0,0 +1,5 @@
---
'@gitbook/icons': patch
---
Fix first run of the package in development mode
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Improve performances of loading pages with embeds by caching them
+5
View File
@@ -0,0 +1,5 @@
---
'@gitbook/react-openapi': patch
---
bump: scalar from 1.0.5 to 1.0.7
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': minor
---
Replace all icons, previously imported from Geist, by new package `@gitbook/icons`
+5
View File
@@ -0,0 +1,5 @@
---
'@gitbook/cache-do': minor
---
First version of a new cache backend powered by Cloudflare Durable Objects
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': minor
---
Add support for Norwegian language
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': minor
---
Optimize layout shift while transitioning between pages with full width blocks (ex: OpenAPI blocks)
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': minor
---
Add support for page icons
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Fix GitBook specific static assets not being served correctly when deployed on Cloudflare
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Only display spaces dropdown in compact header when site is multi-variants
+5
View File
@@ -0,0 +1,5 @@
---
'@gitbook/cache-do': patch
---
Enable Workers observability with a sampling of 0.1
+5
View File
@@ -0,0 +1,5 @@
---
'@gitbook/icons': minor
---
Initial release for `@gitbook/icons`, a package of content icons to be used for pages, documents, etc.
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Automatically scroll to active item in TOC
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': minor
---
Persist state of tabs and dynamically sync them based on title
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Ensure "Sponsored via GitBook" can be translated in all languages
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': minor
---
Show the caption for file blocks
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Use url hash to open Expandable and scroll to anchor
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Fix margin for paragraphs in quote blocks
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Use new cache backend, powered by Durable Objects, alongside the existing ones (KV, etc).
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Include offset in calculations of whether scrollable element is in view
+5
View File
@@ -0,0 +1,5 @@
---
'@gitbook/react-openapi': minor
---
Add required query parameters to the code sample
+5
View File
@@ -0,0 +1,5 @@
---
'@gitbook/react-openapi': minor
---
Display pattern if available in parmas in OpenAPI block
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Fix inconsistent click area in table because of scroll indicator
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Stop using KV cache backend for now, but also improves it for higher performances
+6
View File
@@ -0,0 +1,6 @@
---
'@gitbook/react-openapi': minor
'gitbook': patch
---
Synchronize response and response example tabs
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Show definition title when visible in cards
+6
View File
@@ -0,0 +1,6 @@
---
'@gitbook/react-openapi': minor
'gitbook': patch
---
Rollback of scalar modal while fixing perf issue
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Optimize images rendered in community ads
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Update design of Checkbox to be more consistent and readable
+5
View File
@@ -0,0 +1,5 @@
---
'@gitbook/react-contentkit': patch
---
Fix rendering of webframe with SSR causing wrong communication between frame and renderer
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Disable KV cache for docs.gitbook.com as a test, also disable it for change-request to improve consistency
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Add optional env `GITBOOK_INTEGRATIONS_HOST` to configure the host serving the integrations
+5
View File
@@ -0,0 +1,5 @@
---
'@gitbook/react-openapi': patch
---
Fix crash when `example` is undefined for a response
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': minor
---
Improve the toolbar for change-requests and revisions to show more actions
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': minor
---
Add support for icons style customization for sites
+5
View File
@@ -0,0 +1,5 @@
---
'@gitbook/react-openapi': patch
---
Adds tabs to Response Example section e.g. for status code examples
+5
View File
@@ -0,0 +1,5 @@
---
'@gitbook/react-openapi': patch
---
Render mandatory headers in code sample
+5
View File
@@ -0,0 +1,5 @@
---
'@gitbook/react-openapi': patch
---
Update Scalar client to latest version
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': minor
---
Prevent search indexation for pages where it's configured as disabled
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Fix table of contents being visible on mobile when disabled at the page level
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Fix accessibility of the table of contents by using `aria-current` instead of `aria-selected`
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': minor
---
Update rendering of community ads to match new API response, and make it possible to preview ads.
+5
View File
@@ -0,0 +1,5 @@
---
'@gitbook/react-math': minor
---
Export binary `gitbook-math` to copy assets to a directory
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Fix "ip" being passed to BSA for community ads
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': minor
---
Changed the alternative URL resolution criteria in order to support site URLs without /v/ prefix
+5
View File
@@ -0,0 +1,5 @@
---
'@gitbook/icons': minor
---
Fix bin gitbook-icons when installed without the Pro token
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Don't show hidden pages in the empty state of a page
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': minor
---
Fix linking to a tab itself
+11 -43
View File
@@ -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
BIN
View File
Binary file not shown.
+1 -1
View File
@@ -8,7 +8,7 @@
},
"packageManager": "bun@1.1.18",
"patchedDependencies": {
"@vercel/next@4.3.15": "patches/@vercel%2Fnext@4.3.15.patch"
"@vercel/next@4.3.6": "patches/@vercel%2Fnext@4.3.6.patch"
},
"private": true,
"scripts": {
-12
View File
@@ -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
+2 -2
View File
@@ -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",
+1 -2
View File
@@ -32,5 +32,4 @@ screenshots/
/playwright/.cache/
# Generated public files
/public/~gitbook/static/*
!/public/~gitbook/static/images
/public/~gitbook/static/
-95
View File
@@ -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
+3 -5
View File
@@ -395,10 +395,6 @@ const testCases: TestsCase[] = [
await page.click('[data-testid="annotation-button"]');
},
},
{
name: 'Stepper',
url: 'blocks/stepper',
},
],
},
{
@@ -466,11 +462,13 @@ const testCases: TestsCase[] = [
{
title: 'Secondary button',
to: { kind: 'url', url: 'https://www.gitbook.com' },
// @ts-ignore Remove once we upgrade to the latest version of the API
style: 'button-secondary',
},
{
title: 'Primary button',
to: { kind: 'url', url: 'https://www.gitbook.com' },
// @ts-ignore Remove once we upgrade to the latest version of the API
style: 'button-primary',
},
],
@@ -497,7 +495,7 @@ const testCases: TestsCase[] = [
tests: [
{
name: 'Valid link',
url: 'thDznyWXCeEoT55WB7HC/',
url: 'TGs8PkF4GWVtbmPnWhYL/',
},
{
name: 'Invalid link',
+5 -5
View File
@@ -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,7 +16,7 @@
"clean": "rm -rf ./.next && rm -rf ./public/~gitbook/static"
},
"dependencies": {
"@gitbook/api": "^0.73.0",
"@gitbook/api": "0.64.1",
"@gitbook/cache-do": "workspace:*",
"@gitbook/emoji-codepoints": "workspace:*",
"@gitbook/icons": "workspace:*",
@@ -41,7 +41,7 @@
"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",
@@ -60,7 +60,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 +69,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.13.3",
"@cloudflare/workers-types": "^4.20240725.0",
"@types/js-cookie": "^3.0.6",
"@types/jsontoxml": "^1.0.5",
Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

@@ -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',
},
],
},
);
}
@@ -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>
);
}
@@ -1,11 +1,12 @@
import { getSpaceLanguage, t } from '@/intl/server';
import { getSiteLayoutData } from '@/lib/api';
import { getSiteContentPointer } from '@/lib/pointer';
import { getCurrentSiteLayoutData } from '@/lib/api';
import { tcls } from '@/lib/tailwind';
import { getSiteContentPointer } from '../../fetch';
export default async function NotFound() {
const pointer = getSiteContentPointer();
const { customization } = await getSiteLayoutData(pointer);
const { customization } = await getCurrentSiteLayoutData(pointer);
const language = getSpaceLanguage(customization);
@@ -29,9 +29,8 @@ export default async function Page(props: {
const {
content: contentPointer,
contentTarget,
sections,
space,
site,
parent,
customization,
pages,
page,
@@ -73,32 +72,15 @@ export default async function Page(props: {
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',
};
@@ -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',
};
}
@@ -3,9 +3,10 @@ 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 { getSiteContentPointer } from '../../fetch';
export const runtime = 'edge';
/**
@@ -13,15 +14,13 @@ export const runtime = 'edge';
*/
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 space = await getSpace(pointer.spaceId, pointer.siteShareKey);
const parent = await getSite(pointer.organizationId, pointer.siteId);
const lines = [
`User-agent: *`,
'Disallow: /~gitbook/',
...(isSpaceIndexable({ space, site })
...(isSpaceIndexable({ space, parent })
? [`Allow: /`, `Sitemap: ${absoluteHref(`/sitemap.xml`, true)}`]
: [`Disallow: /`]),
];
@@ -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 { getSiteContentPointer } 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)));
}
@@ -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 { getSiteContentPointer } 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';
@@ -42,8 +49,9 @@ export async function GET(req: NextRequest) {
getSpace(spaceId, pointer.siteShareKey),
getCurrentSiteCustomization(pointer),
]);
const site = await getSite(pointer.organizationId, pointer.siteId);
const contentTitle = getContentTitle(space, customization, site);
const parent = await getSite(pointer.organizationId, pointer.siteId);
const contentTitle = getContentTitle(space, customization, parent);
return new ImageResponse(
(
@@ -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,
},
);
}
@@ -11,6 +11,7 @@ import { Metadata } from 'next';
import { notFound } from 'next/navigation';
import * as React from 'react';
import { getSiteContentPointer } 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,10 @@ const DEFAULT_LIMIT = 100;
export const runtime = 'edge';
export async function generateMetadata(): Promise<Metadata> {
const pointer = getSiteOrSpacePointerForPDF();
const contentPointer = getSiteContentPointer();
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, contentPointer.siteShareKey),
getCurrentSiteCustomization(contentPointer),
]);
return {
@@ -57,7 +55,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 = getSiteContentPointer();
const searchParams = new URLSearchParams(props.searchParams);
const pdfParams = getPDFSearchParams(new URLSearchParams(searchParams));
@@ -68,10 +66,8 @@ 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),
getCurrentSiteCustomization(contentPointer),
getSpaceContentData(contentPointer),
]);
const language = getSpaceLanguage(customization);
@@ -169,7 +165,7 @@ export default async function PDFHTMLOutput(props: { searchParams: { [key: strin
space={space}
page={page}
refContext={{
siteContext: 'siteId' in pointer ? pointer : null,
siteContext: contentPointer,
space,
revisionId: contentTarget.revisionId,
pages: rootPages,
@@ -315,7 +311,7 @@ function selectPages(
return [
{ page, depth },
...page.pages.flatMap((child) => {
if (child.type !== 'document') {
if (child.type === 'link') {
return [];
}
@@ -350,7 +346,7 @@ function selectPages(
}
const allPages = rootPages.flatMap((page) => {
if (page.type !== 'document' && page.type !== 'group') {
if (page.type === 'link') {
return [];
}
@@ -1,17 +1,19 @@
import { RevisionPage, SiteSection, SiteSpace, Space } from '@gitbook/api';
import { assert } from 'ts-essentials';
import { ContentVisibility, RevisionPage, Space } from '@gitbook/api';
import { headers } from 'next/headers';
import {
getCollectionSpaces,
getCollection,
getRevisionPageByPath,
getDocument,
ContentTarget,
getSiteData,
SiteContentPointer,
getCurrentSiteData,
getSite,
getSiteSpaces,
getCurrentSiteCustomization,
getSiteStructure,
} from '@/lib/api';
import { resolvePagePath, resolvePageId } from '@/lib/pages';
import { getSiteContentPointer } from '@/lib/pointer';
export interface PagePathParams {
pathname?: string[];
@@ -21,73 +23,91 @@ export interface PageIdParams {
pageId: string;
}
type SectionsList = { list: SiteSection[]; section: SiteSection };
/**
* Get the current site content pointer from the params.
*/
export function getSiteContentPointer(): SiteContentPointer {
const headerSet = headers();
const spaceId = headerSet.get('x-gitbook-content-space');
if (!spaceId) {
throw new Error(
'getSiteContentPointer is called outside the scope of a request processed by the middleware',
);
}
const siteId = headerSet.get('x-gitbook-content-site');
if (!siteId) {
throw new Error('Expected site content headers');
}
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;
}
/**
* Fetch all the data needed to render the content layout.
* Fetch all the data needed to render the space layout.
*/
export async function fetchContentData() {
export async function fetchSpaceData() {
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 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) : []);
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 = spaces?.find((space) => space.id === content.spaceId);
const spaceRelativeToParent = parent?.spaces.find((space) => space.id === content.spaceId);
return {
content,
contentTarget,
space: spaceRelativeToParent ?? space,
pages,
sections: siteSections,
site,
spaces,
customization,
scripts,
ancestors: [],
...parent,
};
}
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 getCurrentSiteData(content);
const { space, contentTarget, pages, customization, scripts } = await getSiteData(content);
const page = await resolvePage(contentTarget, pages, params);
const [siteStructure, document] = await Promise.all([
fetchSiteStructure({
const [parent, document] = await Promise.all([
fetchParentSite({
organizationId: content.organizationId,
siteId: content.siteId,
siteShareKey: content.siteShareKey,
@@ -104,7 +124,7 @@ export async function fetchPageData(params: PagePathParams | PageIdParams) {
scripts,
ancestors: [],
...page,
...siteStructure,
...parent,
document,
};
}
@@ -150,45 +170,18 @@ async function resolvePage(
return undefined;
}
/**
* Fetch the structure of an organization site.
* This includes the site and its sections or spaces.
*/
async function fetchSiteStructure(args: {
async function fetchParentSite(args: {
organizationId: string;
siteId: string;
siteShareKey: string | undefined;
}) {
const { organizationId, siteId, siteShareKey } = args;
const [orgSite, siteStructure, siteParentCustomizations] = await Promise.all([
const [site, siteSpaces, siteParentCustomizations] = await Promise.all([
getSite(organizationId, siteId),
getSiteStructure({ organizationId, siteId, siteShareKey }),
getSiteSpaces({ 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] = {
@@ -200,7 +193,17 @@ function parseSpacesFromSiteSpaces(siteSpaces: SiteSpace[]) {
},
};
});
return Object.values(spaces);
// override the title with the customization title
const parent = {
...site,
...(siteParentCustomizations?.title ? { title: siteParentCustomizations.title } : {}),
};
return {
parent,
spaces: Object.values(spaces),
};
}
/**
@@ -1,8 +1,8 @@
import {
CustomizationBackground,
CustomizationCorners,
CustomizationHeaderPreset,
CustomizationIconsStyle,
CustomizationHeaderPreset,
CustomizationSettings,
SiteCustomizationSettings,
} from '@gitbook/api';
@@ -11,27 +11,28 @@ 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 } 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 { getSiteContentPointer } 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 = getSiteContentPointer();
const { customization } = await getCurrentSiteLayoutData(pointer);
const headerTheme = generateHeaderTheme(customization);
const language = getSpaceLanguage(customization);
@@ -86,7 +87,7 @@ export async function CustomizationRootLayout(props: {
),
)
}
${generateColorVariable(
'primary-base',
customization.styling.primaryColor.light,
@@ -198,16 +199,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,
},
};
}
@@ -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,
};
}
@@ -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();
}
}
@@ -2,7 +2,7 @@ import { Space } from '@gitbook/api';
import { Icon } from '@gitbook/icons';
import React from 'react';
import { getChangeRequest, getRevision, SiteContentPointer } from '@/lib/api';
import { SiteContentPointer, getChangeRequest, getRevision } from '@/lib/api';
import { tcls } from '@/lib/tailwind';
import { RefreshChangeRequestButton } from './RefreshChangeRequestButton';
+16 -25
View File
@@ -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 (
@@ -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>
)}
@@ -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
@@ -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>

Before

Width:  |  Height:  |  Size: 5.1 KiB

@@ -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 };
}

Some files were not shown because too many files have changed in this diff Show More