Merge remote-tracking branch 'origin/main' into brett/RND-5227-site-tabs

Author: BrettJephson

.changeset/bright-cars-explain.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Add automatic color contrast in site header, restyle search button

.changeset/nice-waves-compare.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Update ogimage with new design

bun.lockb

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

packages/gitbook/.gitignore

@@ -395,6 +395,10 @@ const testCases: TestsCase[] = [
                     await page.click('[data-testid="annotation-button"]');
                 },
             },
+            {
+                name: 'Stepper',
+                url: 'blocks/stepper',
+            },
         ],
     },
     {
@@ -495,7 +499,7 @@ const testCases: TestsCase[] = [
         tests: [
             {
                 name: 'Valid link',
-                url: 'TGs8PkF4GWVtbmPnWhYL/',
+                url: 'thDznyWXCeEoT55WB7HC/',
             },
             {
                 name: 'Invalid link',

packages/gitbook/e2e/pages.spec.ts

@@ -16,7 +16,7 @@
         "clean": "rm -rf ./.next && rm -rf ./public/~gitbook/static"
     },
     "dependencies": {
-        "@gitbook/api": "^0.66.0",
+        "@gitbook/api": "^0.69.0",
         "@gitbook/cache-do": "workspace:*",
         "@gitbook/emoji-codepoints": "workspace:*",
         "@gitbook/icons": "workspace:*",

packages/gitbook/package.json

@@ -1,5 +1,5 @@
 import { getSpaceLanguage, t } from '@/intl/server';
-import { getSiteLayoutData, getSpaceLayoutData } from '@/lib/api';
+import { getSiteLayoutData } from '@/lib/api';
 import { getSiteContentPointer } from '@/lib/pointer';
 import { tcls } from '@/lib/tailwind';
 

packages/gitbook/public/~gitbook/static/images/ogimage-grid-black.png

@@ -1,8 +1,12 @@
+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';
@@ -14,40 +18,206 @@ export const runtime = 'edge';
  */
 export async function GET(req: NextRequest, { params }: { params: PageIdParams }) {
     const { space, page, customization, site } = 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);
     }
 
+    // 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="bg-gray-50 py-16 px-14"
-                style={{
-                    height: '100%',
-                    width: '100%',
-                    display: 'flex',
-                    flexDirection: 'column',
-                }}
+                tw={tcls(
+                    'justify-between',
+                    'p-20',
+                    'relative',
+                    'w-full',
+                    'h-full',
+                    'flex',
+                    'flex-col',
+                    `bg-[${colors.background}]`,
+                    `text-[${colors.body}]`,
+                )}
             >
-                <h2 tw="text-7xl font-bold tracking-tight text-left">
-                    {getContentTitle(space, customization, site ?? null)}
-                </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>
+                {/* Gradient */}
+                <div
+                    tw={tcls('absolute', 'inset-0')}
+                    style={{
+                        backgroundImage: `radial-gradient(ellipse 100% 100% at top right , ${colors.gradient}, ${colors.gradient}00)`,
+                        opacity: 0.5,
+                    }}
+                ></div>
+
+                {/* Grid */}
+                <img
+                    tw={tcls('absolute', 'inset-0', 'w-[100vw]', 'h-[100vh]')}
+                    src={gridAsset}
+                    alt="Grid"
+                />
+
+                {/* Logo */}
+                {customization.header.logo ? (
+                    <img
+                        alt="Logo"
+                        height={60}
+                        src={
+                            useLightTheme
+                                ? customization.header.logo.light
+                                : customization.header.logo.dark
+                        }
+                    />
+                ) : (
+                    <div tw={tcls('flex')}>
+                        {favicon()}
+                        <h3 tw={tcls('text-4xl', 'my-0')}>
+                            {getContentTitle(space, customization, site ?? null)}
+                        </h3>
+                    </div>
+                )}
+
+                {/* Title and description */}
+                <div tw={tcls('flex', 'flex-col')}>
+                    <h1
+                        tw={tcls(
+                            'text-8xl',
+                            'my-0',
+                            'tracking-tight',
+                            'leading-none',
+                            'text-left',
+                            `text-[${colors.title}]`,
+                            'font-bold',
+                        )}
+                    >
+                        {page
+                            ? page.title.length > 64
+                                ? page.title.slice(0, 64) + '...'
+                                : page.title
+                            : 'Not found'}
+                    </h1>
+                    {page?.description && page?.title.length <= 64 ? (
+                        <h2 tw={tcls('text-4xl', 'mb-0', 'mt-8', 'w-[75%]', 'font-normal')}>
+                            {page.description.length > 164
+                                ? page.description.slice(0, 164) + '...'
+                                : page.description}
+                        </h2>
+                    ) : null}
                 </div>
             </div>
         ),
         {
             width: 1200,
             height: 630,
+            fonts: [
+                {
+                    name: 'Inter',
+                    data: interRegular,
+                    weight: 400,
+                    style: 'normal',
+                },
+                {
+                    name: 'Inter',
+                    data: interBold,
+                    weight: 700,
+                    style: 'normal',
+                },
+            ],
         },
     );
 }

packages/gitbook/public/~gitbook/static/images/ogimage-grid-white.png

@@ -1,5 +1,5 @@
 import { CustomizationRootLayout } from '@/components/RootLayout';
-import { getSiteLayoutData, getSpaceLayoutData } from '@/lib/api';
+import { getSiteLayoutData } from '@/lib/api';
 import { getSiteContentPointer } from '@/lib/pointer';
 
 /**

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

@@ -1,5 +1,7 @@
+import { SpaceIntegrationScript } from '@gitbook/api';
+
 import { CustomizationRootLayout } from '@/components/RootLayout';
-import { getSiteLayoutData, getSpaceLayoutData } from '@/lib/api';
+import { getSiteLayoutData, getSpaceCustomization } from '@/lib/api';
 
 import { getSiteOrSpacePointerForPDF } from './pointer';
 
@@ -19,3 +21,18 @@ export default async function PDFRootLayout(props: { children: React.ReactNode }
         <CustomizationRootLayout customization={customization}>{children}</CustomizationRootLayout>
     );
 }
+
+/**
+ * Fetch all the layout data about a space at once.
+ */
+async function getSpaceLayoutData(spaceId: string) {
+    const [customization, scripts] = await Promise.all([
+        getSpaceCustomization(spaceId),
+        [] as SpaceIntegrationScript[],
+    ]);
+
+    return {
+        customization,
+        scripts,
+    };
+}

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

@@ -32,6 +32,8 @@ import { BlockMath } from './Math';
 import { OpenAPI } from './OpenAPI';
 import { Paragraph } from './Paragraph';
 import { Quote } from './Quote';
+import { Stepper } from './Stepper';
+import { StepperStep } from './StepperStep';
 import { Table } from './Table';
 import { Tabs } from './Tabs';
 
@@ -42,6 +44,13 @@ export interface BlockProps<Block extends DocumentBlock> extends DocumentContext
     style?: ClassValue;
 }
 
+/**
+ * Alternative to `assertNever` that returns `null` instead of throwing an error.
+ */
+function nullIfNever(value: never): null {
+    return null;
+}
+
 export function Block<T extends DocumentBlock>(props: BlockProps<T>) {
     const { block, style, ...contextProps } = props;
 
@@ -97,8 +106,14 @@ export function Block<T extends DocumentBlock>(props: BlockProps<T>) {
                 return <IntegrationBlock {...props} {...contextProps} block={block} />;
             case 'synced-block':
                 return <BlockSyncedBlock {...props} {...contextProps} block={block} />;
+            case 'reusable-content':
+                return null;
+            case 'stepper':
+                return <Stepper {...props} {...contextProps} block={block} />;
+            case 'stepper-step':
+                return <StepperStep {...props} {...contextProps} block={block} />;
             default:
-                assertNever(block);
+                return nullIfNever(block);
         }
     })();
 
@@ -129,7 +144,6 @@ function BlockPlaceholder(props: { block: DocumentBlock; style: ClassValue }) {
         case 'code':
         case 'hint':
         case 'tabs':
-        case 'synced-block':
             return <SkeletonParagraph id={id} style={style} />;
         case 'expandable':
         case 'table':
@@ -138,6 +152,9 @@ function BlockPlaceholder(props: { block: DocumentBlock; style: ClassValue }) {
         case 'divider':
         case 'content-ref':
         case 'integration':
+        case 'stepper':
+        case 'synced-block':
+        case 'reusable-content':
             return <SkeletonCard id={id} style={style} />;
         case 'embed':
         case 'images':
@@ -146,8 +163,9 @@ function BlockPlaceholder(props: { block: DocumentBlock; style: ClassValue }) {
         case 'image':
         case 'code-line':
         case 'tabs-item':
+        case 'stepper-step':
             throw new Error('Blocks should be directly rendered by parent');
         default:
-            assertNever(block);
+            return nullIfNever(block);
     }
 }