Improve detection of code path not supported in v2, add visual tests (#2884)

Author: SamyPesse

.github/workflows/ci.yaml

@@ -255,6 +255,31 @@ jobs:
                   name: playwright-test-results
                   path: packages/gitbook/test-results/
                   retention-days: 3
+    visual-testing-v2:
+        runs-on: ubuntu-latest
+        name: Visual Testing v2
+        needs: deploy-v2-vercel
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+            - name: Setup Bun
+              uses: ./.github/composite/setup-bun
+            - name: Install dependencies
+              run: bun install --frozen-lockfile
+            - name: Setup Playwright
+              uses: ./.github/actions/setup-playwright
+            - name: Run Playwright tests
+              run: bun e2e
+              env:
+                  BASE_URL: ${{needs.deploy-v2-vercel.outputs.deployment-url }}/url/
+                  ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
+                  ARGOS_BUILD_NAME: 'v2'
+            - uses: actions/upload-artifact@v4
+              if: ${{ !cancelled() }}
+              with:
+                  name: playwright-test-results
+                  path: packages/gitbook/test-results/
+                  retention-days: 3
     visual-testing-customers:
         runs-on: ubuntu-latest
         name: Visual Testing Customers
@@ -280,6 +305,31 @@ jobs:
                   name: playwright-test-results-customers
                   path: packages/gitbook/test-results/
                   retention-days: 3
+    visual-testing-customers-v2:
+        runs-on: ubuntu-latest
+        name: Visual Testing Customers v2
+        needs: deploy-v2-vercel
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+            - name: Setup Bun
+              uses: ./.github/composite/setup-bun
+            - name: Install dependencies
+              run: bun install --frozen-lockfile
+            - name: Setup Playwright
+              uses: ./.github/actions/setup-playwright
+            - name: Run Playwright tests
+              run: bun e2e-customers
+              env:
+                  BASE_URL: ${{needs.deploy-v2-vercel.outputs.deployment-url }}/url/
+                  ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
+                  ARGOS_BUILD_NAME: 'customers-v2'
+            - uses: actions/upload-artifact@v4
+              if: ${{ !cancelled() }}
+              with:
+                  name: playwright-test-results-customers
+                  path: packages/gitbook/test-results/
+                  retention-days: 3
     pagespeed-testing:
         runs-on: ubuntu-latest
         name: PageSpeed Testing

biome.json

@@ -58,7 +58,8 @@
                 "noUnusedImports": "error",
                 "noVoidElementsWithChildren": "warn",
                 "useJsxKeyInIterable": "warn",
-                "useExhaustiveDependencies": "warn"
+                "useExhaustiveDependencies": "warn",
+                "noUnknownFunction": "warn"
             },
             "style": {
                 "noNonNullAssertion": "warn",

packages/gitbook-v2/next.config.mjs

@@ -15,6 +15,9 @@ const nextConfig = {
         GITBOOK_ICONS_URL: process.env.GITBOOK_ICONS_URL,
         GITBOOK_ICONS_TOKEN: process.env.GITBOOK_ICONS_TOKEN,
         NEXT_SERVER_ACTIONS_ENCRYPTION_KEY: process.env.NEXT_SERVER_ACTIONS_ENCRYPTION_KEY,
+
+        // Used to detect if the app is running in V2 mode
+        GITBOOK_V2: 'true',
     },
 
     assetPrefix: process.env.GITBOOK_ASSETS_PREFIX,

packages/gitbook-v2/package.json

@@ -18,7 +18,7 @@
     },
     "scripts": {
         "generate": "rm -rf ./public && cp -r ../gitbook/public ./public",
-        "dev:v2": "env-cmd --silent -f ../../.env.local next",
+        "dev:v2": "env-cmd --silent -f ../../.env.local next --turbopack",
         "build": "next build",
         "build:v2": "next build",
         "start": "next start",

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

@@ -1,9 +1,8 @@
 import type { NextRequest } from 'next/server';
 
-import { getSite } from '@/lib/api';
-import { getAbsoluteHref } from '@/lib/links';
 import { getSiteContentPointer } from '@/lib/pointer';
 import { isSiteIndexable } from '@/lib/seo';
+import { fetchV1ContextForSitePointer } from '@/lib/v1';
 
 export const runtime = 'edge';
 
@@ -12,13 +11,14 @@ export const runtime = 'edge';
  */
 export async function GET(_req: NextRequest) {
     const pointer = await getSiteContentPointer();
-    const site = await getSite(pointer.organizationId, pointer.siteId);
+    const context = await fetchV1ContextForSitePointer(pointer);
+    const { linker } = context;
 
     const lines = [
         'User-agent: *',
         'Disallow: /~gitbook/',
-        ...((await isSiteIndexable(site))
-            ? ['Allow: /', `Sitemap: ${await getAbsoluteHref('/sitemap.xml', true)}`]
+        ...((await isSiteIndexable(context))
+            ? ['Allow: /', `Sitemap: ${linker.toAbsoluteURL(linker.toPathInSpace('/sitemap.xml'))}`]
             : ['Disallow: /']),
     ];
     const content = lines.join('\n');

packages/gitbook/src/components/DocumentView/CodeBlock/theme.css

@@ -1,30 +1,30 @@
 :root {
-    --shiki-color-text: var(--color-tint-11);
+    --shiki-color-text: theme("colors.tint.11");
     --shiki-token-constant: #0a6355;
     --shiki-token-string: #8b6d32;
-    --shiki-token-comment: var(--color-teal-700 / 0.64);
-    --shiki-token-keyword: var(--color-pomegranate-600);
+    --shiki-token-comment: theme("colors.teal.700/.64");
+    --shiki-token-keyword: theme("colors.pomegranate.600");
     --shiki-token-parameter: #0a3069;
     --shiki-token-function: #8250df;
     --shiki-token-string-expression: #6a4906;
-    --shiki-token-punctuation: var(--color-pomegranate-700 / 0.92);
-    --shiki-token-link: var(--color-tint-12);
+    --shiki-token-punctuation: theme("colors.pomegranate.700/.92");
+    --shiki-token-link: theme("colors.tint.12");
     --shiki-token-inserted: #22863a;
     --shiki-token-deleted: #b31d28;
     --shiki-token-changed: #8250df;
 }
 
 html.dark {
-    --shiki-color-text: var(--color-tint-11);
+    --shiki-color-text: theme("colors.tint.11");
     --shiki-token-constant: #d19a66;
-    --shiki-token-string: var(--color-pomegranate-300);
-    --shiki-token-comment: var(--color-teal-300 / 0.64);
-    --shiki-token-keyword: var(--color-pomegranate-400);
-    --shiki-token-parameter: var(--color-yellow-500);
+    --shiki-token-string: theme("colors.pomegranate.300");
+    --shiki-token-comment: theme("colors.teal.300/.64");
+    --shiki-token-keyword: theme("colors.pomegranate.400");
+    --shiki-token-parameter: theme("colors.yellow.500");
     --shiki-token-function: #56b6c2;
-    --shiki-token-string-expression: var(--color-tint-11);
+    --shiki-token-string-expression: theme("colors.tint.11");
     --shiki-token-punctuation: #acc6ee;
-    --shiki-token-link: var(--color-pomegranate-400);
+    --shiki-token-link: theme("colors.pomegranate.400");
     --shiki-token-inserted: #85e89d;
     --shiki-token-deleted: #fdaeb7;
     --shiki-token-changed: #56b6c2;

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

@@ -12,7 +12,6 @@ import urlJoin from 'url-join';
 
 import { getSpaceLanguage, t } from '@/intl/server';
 import { getDocumentSections } from '@/lib/document-sections';
-import { getAbsoluteHref } from '@/lib/links';
 import { tcls } from '@/lib/tailwind';
 import { getPDFUrlSearchParams } from '@/lib/urls';
 
@@ -24,7 +23,7 @@ import { ScrollSectionsList } from './ScrollSectionsList';
 /**
  * Aside listing the headings in the document.
  */
-export async function PageAside(props: {
+export function PageAside(props: {
     page: RevisionPageDocument;
     document: JSONDocument | null;
     context: GitBookSiteContext;
@@ -36,7 +35,7 @@ export async function PageAside(props: {
     const { customization, site, space } = context;
     const language = getSpaceLanguage(customization);
 
-    const pdfHref = await getAbsoluteHref(
+    const pdfHref = context.linker.toPathInSpace(
         `~gitbook/pdf?${getPDFUrlSearchParams({
             page: page.id,
             only: true,

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

@@ -26,7 +26,7 @@ export function PageBody(props: {
     withPageFeedback: boolean;
 }) {
     const { page, context, ancestors, document, withPageFeedback } = props;
-    const { space, customization } = context;
+    const { customization } = context;
 
     const asFullWidth = document ? hasFullWidthBlock(document) : false;
     const language = getSpaceLanguage(customization);
@@ -60,7 +60,7 @@ export function PageBody(props: {
                     <PageCover as="hero" page={page} cover={page.cover} context={context} />
                 ) : null}
 
-                <PageHeader page={page} ancestors={ancestors} pages={context.pages} />
+                <PageHeader context={context} page={page} ancestors={ancestors} />
                 {document && !isNodeEmpty(document) ? (
                     <React.Suspense
                         fallback={
@@ -85,12 +85,7 @@ export function PageBody(props: {
                 )}
 
                 {page.layout.pagination && customization.pagination.enabled ? (
-                    <PageFooterNavigation
-                        space={space}
-                        customization={customization}
-                        pages={context.pages}
-                        page={page}
-                    />
+                    <PageFooterNavigation context={context} page={page} />
                 ) : null}
 
                 <div

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

@@ -1,35 +1,27 @@
-import {
-    type CustomizationSettings,
-    type Revision,
-    type RevisionPageDocument,
-    type SiteCustomizationSettings,
-    SiteInsightsLinkPosition,
-    type Space,
-} from '@gitbook/api';
+import { type RevisionPageDocument, SiteInsightsLinkPosition } from '@gitbook/api';
 import { Icon, type IconName } from '@gitbook/icons';
 import type React from 'react';
 
 import { getSpaceLanguage, t } from '@/intl/server';
-import { getPageHref } from '@/lib/links';
 import { resolvePrevNextPages } from '@/lib/pages';
 import { tcls } from '@/lib/tailwind';
 
+import type { GitBookSiteContext } from '@v2/lib/context';
 import { Link, type LinkInsightsProps } from '../primitives';
 
 /**
  * Show cards to go to previous/next pages at the bottom.
  */
 export async function PageFooterNavigation(props: {
-    space: Space;
-    customization: CustomizationSettings | SiteCustomizationSettings;
-    pages: Revision['pages'];
+    context: GitBookSiteContext;
     page: RevisionPageDocument;
 }) {
-    const { customization, pages, page } = props;
+    const { context, page } = props;
+    const { customization, pages, linker } = context;
     const { previous, next } = resolvePrevNextPages(pages, page);
     const language = getSpaceLanguage(customization);
-    const previousHref = previous ? await getPageHref(pages, previous) : '';
-    const nextHref = next ? await getPageHref(pages, next) : '';
+    const previousHref = previous ? linker.toPathForPage({ pages, page: previous }) : '';
+    const nextHref = next ? linker.toPathForPage({ pages, page: next }) : '';
 
     return (
         <div

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

@@ -1,70 +1,70 @@
-import type { RevisionPage, RevisionPageDocument } from '@gitbook/api';
+import type { RevisionPageDocument } from '@gitbook/api';
 import { Icon } from '@gitbook/icons';
 import { Fragment } from 'react';
 
-import { getPageHref } from '@/lib/links';
 import type { AncestorRevisionPage } from '@/lib/pages';
 import { tcls } from '@/lib/tailwind';
+import type { GitBookSiteContext } from '@v2/lib/context';
 
 import { PageIcon } from '../PageIcon';
 import { StyledLink } from '../primitives';
 
 export async function PageHeader(props: {
+    context: GitBookSiteContext;
     page: RevisionPageDocument;
     ancestors: AncestorRevisionPage[];
-    pages: RevisionPage[];
 }) {
-    const { page, ancestors, pages } = props;
+    const { context, page, ancestors } = props;
+    const { pages, linker } = context;
 
     if (!page.layout.title && !page.layout.description) {
         return null;
     }
 
-    const ancestorElements = await Promise.all(
-        ancestors.map(async (breadcrumb, index) => {
-            const href = await getPageHref(pages, breadcrumb);
-            return (
-                <Fragment key={breadcrumb.id}>
-                    <li key={breadcrumb.id}>
-                        <StyledLink
-                            href={href}
-                            style={tcls(
-                                'no-underline',
-                                'hover:underline',
-                                'text-xs',
-                                'tracking-wide',
-                                'font-semibold',
-                                'uppercase',
-                                'flex',
-                                'items-center',
-                                'gap-1.5',
-                                'contrast-more:underline',
-                                'contrast-more:decoration-current'
-                            )}
-                        >
-                            <PageIcon
-                                page={breadcrumb}
-                                style="flex size-4 items-center justify-center text-base leading-none"
-                            />
-                            {breadcrumb.title}
-                        </StyledLink>
-                    </li>
-                    {index !== ancestors.length - 1 && (
-                        <Icon icon="chevron-right" className={tcls('size-3', 'text-tint-subtle')} />
-                    )}
-                </Fragment>
-            );
-        })
-    );
-
     return (
         <header
             className={tcls('max-w-3xl', 'mx-auto', 'mb-6', 'space-y-3', 'page-api-block:ml-0')}
         >
             {ancestors.length > 0 && (
                 <nav>
                     <ol className={tcls('flex', 'flex-wrap', 'items-center', 'gap-2')}>
-                        {ancestorElements}
+                        {ancestors.map((breadcrumb, index) => {
+                            const href = linker.toPathForPage({ pages, page: breadcrumb });
+                            return (
+                                <Fragment key={breadcrumb.id}>
+                                    <li key={breadcrumb.id}>
+                                        <StyledLink
+                                            href={href}
+                                            style={tcls(
+                                                'no-underline',
+                                                'hover:underline',
+                                                'text-xs',
+                                                'tracking-wide',
+                                                'font-semibold',
+                                                'uppercase',
+                                                'flex',
+                                                'items-center',
+                                                'gap-1.5',
+                                                'contrast-more:underline',
+                                                'contrast-more:decoration-current'
+                                            )}
+                                        >
+                                            <PageIcon
+                                                page={breadcrumb}
+                                                style="flex size-4 items-center justify-center text-base leading-none"
+                                            />
+                                            {breadcrumb.title}
+                                        </StyledLink>
+                                    </li>
+                                    {index !== ancestors.length - 1 && (
+                                        <Icon
+                                            icon="chevron-right"
+                                            className={tcls('size-3', 'text-tint-subtle')}
+                                        />
+                                    )}
+                                </Fragment>
+                            );
+                        })}
                     </ol>
                 </nav>
             )}