Merge branch 'main' into viktor/rnd-3264/table-widths-to-flex

GitbookIO · Dec 11, 2024 · c001411 · c001411
2 parents 2ff1075 + 29a0d7e
commit c001411
Show file tree

Hide file tree

Showing 18 changed files with 333 additions and 95 deletions.
diff --git a/.github/actions/setup-playwright/action.yml b/.github/actions/setup-playwright/action.yml
@@ -12,7 +12,7 @@ runs:
 
         # Cache browser binaries, cache key is based on Playwright version and OS
         - name: 🧰 Cache Playwright browser binaries
-          uses: actions/cache@v3
+          uses: actions/cache@v4
           id: playwright-cache
           with:
               path: '~/.cache/ms-playwright'

diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -30,16 +30,6 @@ jobs:
               run: bun install --frozen-lockfile
               env:
                   PUPPETEER_SKIP_DOWNLOAD: 1
-            - name: Cache Next.js build
-              uses: actions/cache@v3
-              with:
-                  path: |
-                      ${{ github.workspace }}/.next/cache
-                  # Generate a new cache whenever packages or source files change.
-                  key: ${{ runner.os }}-nextjs-${{ hashFiles('**/bun.lockb') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
-                  # If source files changed but packages didn't, rebuild from a prior cache.
-                  restore-keys: |
-                      ${{ runner.os }}-nextjs-${{ hashFiles('**/bun.lockb') }}-
             - name: Sets env vars for production
               run: |
                   echo "SENTRY_ENVIRONMENT=production" >> $GITHUB_ENV

diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/gitbook/e2e/pages.spec.ts b/packages/gitbook/e2e/pages.spec.ts
@@ -10,10 +10,10 @@ import {
     SiteCustomizationSettings,
 } from '@gitbook/api';
 import { test, expect, Page } from '@playwright/test';
+import deepMerge from 'deepmerge';
 import jwt from 'jsonwebtoken';
 import rison from 'rison';
 import { DeepPartial } from 'ts-essentials';
-import deepMerge from 'deepmerge';
 
 import { getContentTestURL } from '../tests/utils';
 
@@ -930,6 +930,94 @@ const testCases: TestsCase[] = [
             },
         ],
     },
+    {
+        name: 'Adaptive Content - VA',
+        baseUrl: `https://gitbook-open-e2e-sites.gitbook.io/adaptive-content-va/`,
+        tests: [
+            {
+                name: 'isAlphaUser',
+                url: (() => {
+                    const privateKey = 'afe09cdf-0f43-480a-b54c-8b1f62f174f9';
+                    const token = jwt.sign(
+                        {
+                            name: 'gitbook-open-tests',
+                            isAlphaUser: true,
+                        },
+                        privateKey,
+                        {
+                            expiresIn: '24h',
+                        },
+                    );
+                    return `?jwt_token=${token}`;
+                })(),
+                run: async (page) => {
+                    const alphaUserPage = page
+                        .locator('a[class*="group\\/toclink"]')
+                        .filter({ hasText: 'Alpha users' });
+                    const betaUserPage = page
+                        .locator('a[class*="group\\/toclink"]')
+                        .filter({ hasText: 'Beta users' });
+                    await expect(alphaUserPage).toBeVisible();
+                    await expect(betaUserPage).toHaveCount(0);
+                },
+            },
+            {
+                name: 'isBetaUser',
+                url: (() => {
+                    const privateKey = 'afe09cdf-0f43-480a-b54c-8b1f62f174f9';
+                    const token = jwt.sign(
+                        {
+                            name: 'gitbook-open-tests',
+                            isBetaUser: true,
+                        },
+                        privateKey,
+                        {
+                            expiresIn: '24h',
+                        },
+                    );
+                    return `?jwt_token=${token}`;
+                })(),
+                run: async (page) => {
+                    const alphaUserPage = page
+                        .locator('a[class*="group\\/toclink"]')
+                        .filter({ hasText: 'Alpha users' });
+                    const betaUserPage = page
+                        .locator('a[class*="group\\/toclink"]')
+                        .filter({ hasText: 'Beta users' });
+                    await expect(betaUserPage).toBeVisible();
+                    await expect(alphaUserPage).toHaveCount(0);
+                },
+            },
+            {
+                name: 'isAlphaUser & isBetaUser',
+                url: (() => {
+                    const privateKey = 'afe09cdf-0f43-480a-b54c-8b1f62f174f9';
+                    const token = jwt.sign(
+                        {
+                            name: 'gitbook-open-tests',
+                            isAlphaUser: true,
+                            isBetaUser: true,
+                        },
+                        privateKey,
+                        {
+                            expiresIn: '24h',
+                        },
+                    );
+                    return `?jwt_token=${token}`;
+                })(),
+                run: async (page) => {
+                    const alphaUserPage = page
+                        .locator('a[class*="group\\/toclink"]')
+                        .filter({ hasText: 'Alpha users' });
+                    const betaUserPage = page
+                        .locator('a[class*="group\\/toclink"]')
+                        .filter({ hasText: 'Beta users' });
+                    await expect(alphaUserPage).toBeVisible();
+                    await expect(betaUserPage).toBeVisible();
+                },
+            },
+        ],
+    },
 ];
 
 for (const testCase of testCases) {

diff --git a/packages/gitbook/src/app/(site)/(content)/[[...pathname]]/page.tsx b/packages/gitbook/src/app/(site)/(content)/[[...pathname]]/page.tsx
@@ -150,7 +150,8 @@ export async function generateMetadata({
             .join(' | '),
         description: page.description ?? '',
         alternates: {
-            canonical: absoluteHref(getPagePath(pages, page), true),
+            // Trim trailing slashes in canonical URL to match the redirect behavior
+            canonical: absoluteHref(getPagePath(pages, page), true).replace(/\/+$/, ''),
         },
         openGraph: {
             images: [

diff --git a/packages/gitbook/src/app/(site)/(content)/layout.tsx b/packages/gitbook/src/app/(site)/(content)/layout.tsx
@@ -42,7 +42,7 @@ export default async function ContentLayout(props: { children: React.ReactNode }
         sections,
     } = await fetchContentData();
 
-    ReactDOM.preconnect(api().endpoint);
+    ReactDOM.preconnect(api().client.endpoint);
     if (assetsDomain) {
         ReactDOM.preconnect(assetsDomain);
     }

diff --git a/packages/gitbook/src/components/Header/Dropdown.tsx b/packages/gitbook/src/components/Header/Dropdown.tsx
@@ -39,7 +39,7 @@ export function Dropdown<E extends HTMLElement>(props: {
                 aria-labelledby={dropdownId}
                 className={tcls(
                     'w-52',
-                    'max-h-56',
+                    'max-h-80',
                     'flex',
                     'absolute',
                     'top-full',
@@ -111,31 +111,38 @@ export function DropdownMenu(props: { children: React.ReactNode }) {
  * Menu item in a dropdown.
  */
 export function DropdownMenuItem(props: {
-    href: string;
+    href: string | null;
     active?: boolean;
+    className?: ClassValue;
     children: React.ReactNode;
 }) {
-    const { children, active = false, href } = props;
+    const { children, active = false, href, className } = props;
+
+    if (href) {
+        return (
+            <Link
+                href={href}
+                prefetch={false}
+                className={tcls(
+                    'px-3 py-1 text-sm rounded straight-corners:rounded-sm',
+                    active ? 'bg-primary/3 dark:bg-light/2 text-primary-600' : null,
+                    'hover:bg-dark/2 dark:hover:bg-light/2',
+                    className,
+                )}
+            >
+                {children}
+            </Link>
+        );
+    }
 
     return (
-        <Link
-            href={href}
-            prefetch={false}
+        <div
             className={tcls(
-                'flex',
-                'flex-row',
-                'items-center',
-                'text-sm',
-                'px-3',
-                'py-1',
-                'rounded',
-                'straight-corners:rounded-sm',
-                active
-                    ? ['bg-primary/3', 'dark:bg-light/2', 'text-primary-600']
-                    : ['hover:bg-dark/2', 'dark:hover:bg-light/2'],
+                'text-xs px-3 py-1 font-medium text-dark/8 dark:text-light/8',
+                className,
             )}
         >
             {children}
-        </Link>
+        </div>
     );
 }
diff --git a/packages/gitbook/src/components/Header/HeaderLink.tsx b/packages/gitbook/src/components/Header/HeaderLink.tsx
@@ -104,7 +104,7 @@ function HeaderItemButton(
         linkStyle: 'button-secondary' | 'button-primary';
     },
 ) {
-    const { linkStyle, headerPreset, title, href, ...rest } = props;
+    const { linkStyle, headerPreset, title, href, isDropdown, ...rest } = props;
     const variant = (() => {
         switch (linkStyle) {
             case 'button-secondary':

diff --git a/packages/gitbook/src/components/Header/HeaderLinkMore.tsx b/packages/gitbook/src/components/Header/HeaderLinkMore.tsx
@@ -1,4 +1,5 @@
 import {
+    CustomizationContentLink,
     CustomizationHeaderItem,
     CustomizationHeaderPreset,
     CustomizationSettings,
@@ -55,14 +56,25 @@ export function HeaderLinkMore(props: {
     );
 }
 
-async function MoreMenuLink(props: { context: ContentRefContext; link: CustomizationHeaderItem }) {
+async function MoreMenuLink(props: {
+    context: ContentRefContext;
+    link: CustomizationHeaderItem | CustomizationContentLink;
+}) {
     const { context, link } = props;
 
     const target = link.to ? await resolveContentRef(link.to, context) : null;
 
-    if (!target) {
-        return null;
-    }
-
-    return <DropdownMenuItem href={target.href}>{link.title}</DropdownMenuItem>;
+    return (
+        <>
+            {'links' in link && link.links.length > 0 && (
+                <hr className="first:hidden border-t border-light-3 dark:border-dark-3 my-1 -mx-2" />
+            )}
+            <DropdownMenuItem href={target?.href ?? null}>{link.title}</DropdownMenuItem>
+            {'links' in link
+                ? link.links.map((subLink, index) => (
+                      <MoreMenuLink key={index} {...props} link={subLink} />
+                  ))
+                : null}
+        </>
+    );
 }
diff --git a/packages/gitbook/src/components/PageBody/PageBody.tsx b/packages/gitbook/src/components/PageBody/PageBody.tsx
@@ -148,7 +148,7 @@ export function PageBody(props: {
                     sitePointer={pointer}
                     spaceId={space.id}
                     pageId={page.id}
-                    apiHost={api().endpoint}
+                    apiHost={api().client.endpoint}
                 />
             ) : null}
         </>

diff --git a/packages/gitbook/src/components/PageFeedback/server-actions.ts b/packages/gitbook/src/components/PageFeedback/server-actions.ts
@@ -18,7 +18,7 @@ export async function postPageFeedback(args: {
         `No siteSpaceId in pointer. organizationId: ${organizationId}, siteId: ${siteId}, pageId: ${args.pageId}`,
     );
 
-    await api().orgs.createSitesPageFeedback(
+    await api().client.orgs.createSitesPageFeedback(
         organizationId,
         siteId,
         siteSpaceId,

diff --git a/packages/gitbook/src/components/Search/server-actions.tsx b/packages/gitbook/src/components/Search/server-actions.tsx
@@ -158,7 +158,7 @@ export const streamAskQuestion = streamResponse(async function* (
     siteSpaceId: string | null,
     question: string,
 ) {
-    const stream = api.api().orgs.streamAskInSite(
+    const stream = api.api().client.orgs.streamAskInSite(
         organizationId,
         siteId,
         {