From 34f8630a6fff2f5af2aa345174ed405c6ebd087e Mon Sep 17 00:00:00 2001 From: Valentino Hudhra Date: Mon, 16 Dec 2024 09:53:52 +0100 Subject: [PATCH 01/29] New styling and placement for the variant picker --- packages/gitbook/src/components/Header/Header.tsx | 5 ----- .../src/components/Header/SpacesDropdown.tsx | 14 +++++++++----- .../src/components/SpaceLayout/SpaceLayout.tsx | 13 +++++-------- 3 files changed, 14 insertions(+), 18 deletions(-) diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx index 37bf182da..f6965673b 100644 --- a/packages/gitbook/src/components/Header/Header.tsx +++ b/packages/gitbook/src/components/Header/Header.tsx @@ -93,11 +93,6 @@ export function Header(props: { )} /> - {!hasSiteSections && isMultiVariants ? ( -
- -
- ) : null} {customization.header.links.length > 0 && ( diff --git a/packages/gitbook/src/components/Header/SpacesDropdown.tsx b/packages/gitbook/src/components/Header/SpacesDropdown.tsx index c539db215..0c8032f65 100644 --- a/packages/gitbook/src/components/Header/SpacesDropdown.tsx +++ b/packages/gitbook/src/components/Header/SpacesDropdown.tsx @@ -18,12 +18,16 @@ export function SpacesDropdown(props: { space: Space; spaces: Space[]; className 'flex', 'flex-row', 'items-center', - 'rounded-2xl', - 'straight-corners:rounded-none', + 'gap-2', + 'straight-corners:rounded-none', + 'rounded-2xl', + 'border-1', + 'shadow-[0_0_2px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.12)]', + 'dark:shadow-[0_1px_2px_rgba(0,0,0,0.5),0_0_1px_rgba(0,0,0,0.3)]', 'hover:cursor-pointer', - 'bg-dark/1', - 'dark:bg-light/1', + 'bg-light', + 'dark:bg-dark-3', 'text-sm', 'text-dark-4', @@ -36,7 +40,7 @@ export function SpacesDropdown(props: { space: Space; spaces: Space[]; className 'dark:contrast-more:bg-dark', 'px-3', - 'py-1', + 'py-1.5', className, )} > diff --git a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx index 8899b99c8..51829db78 100644 --- a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx +++ b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx @@ -61,7 +61,10 @@ export function SpaceLayout(props: { const withSections = Boolean(sections && sections.list.length > 0); const withVariants = Boolean(site && spaces.length > 1); - const headerOffset = { sectionsHeader: withSections, topHeader: withTopHeader }; + const headerOffset = { + sectionsHeader: withSections, + topHeader: withTopHeader, + }; return ( <> @@ -106,13 +109,7 @@ export function SpaceLayout(props: { ) } innerHeader={ - withVariants && ( - - ) + withVariants && } headerOffset={headerOffset} /> From d2fb2753617f951668288f7d0accb36d4bc4842c Mon Sep 17 00:00:00 2001 From: Valentino Hudhra Date: Mon, 16 Dec 2024 10:04:10 +0100 Subject: [PATCH 02/29] top padding --- .../gitbook/src/components/TableOfContents/TableOfContents.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx b/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx index 89ae8e126..f162c2815 100644 --- a/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx +++ b/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx @@ -73,6 +73,7 @@ export function TableOfContents(props: { - {innerHeader &&
{innerHeader}
} + {innerHeader &&
{innerHeader}
} Date: Fri, 13 Dec 2024 12:25:09 +0100 Subject: [PATCH 03/29] Bump API version --- .changeset/dull-parents-breathe.md | 5 ++ bun.lockb | Bin 574840 -> 574840 bytes packages/gitbook/package.json | 2 +- .../src/components/Header/CompactHeader.tsx | 49 ++--------- .../src/components/Header/SpacesDropdown.tsx | 5 +- .../src/components/PageAside/PageAside.tsx | 6 +- .../RootLayout/CustomizationRootLayout.tsx | 44 +++++++++- .../SiteSectionTabs/SiteSectionTabs.tsx | 6 +- .../components/SpaceLayout/SpaceLayout.tsx | 53 +++++++++-- .../TableOfContents/PageGroupItem.tsx | 3 +- .../TableOfContents/TableOfContents.tsx | 82 ++++++++++-------- .../TableOfContents/ToggleableLinkItem.tsx | 4 +- .../components/TableOfContents/Trademark.tsx | 3 +- packages/gitbook/src/lib/cache/backends.ts | 2 +- packages/gitbook/tailwind.config.ts | 2 + 15 files changed, 163 insertions(+), 103 deletions(-) create mode 100644 .changeset/dull-parents-breathe.md diff --git a/.changeset/dull-parents-breathe.md b/.changeset/dull-parents-breathe.md new file mode 100644 index 000000000..75752a98e --- /dev/null +++ b/.changeset/dull-parents-breathe.md @@ -0,0 +1,5 @@ +--- +'gitbook': minor +--- + +Add support for sidebar background styles diff --git a/bun.lockb b/bun.lockb index 55de3ded1de276d255454b74fdcfc39d5b212df4..8456dd81be5e615dd2dbeb209d603d1525f418f2 100755 GIT binary patch delta 178 zcmV;j08Rh+iX-@nBakj2Kwfof5L`X;fAV8j>%Z&vBo)|em_v?_M6aS z0hZfk+FCx@c!SP3twvYGEbf}huVQ#=yvJ*W+&GPIEnw?tY0=f`hjk?bhjk?cw{;~2 g+rt4fhf(PThf(PUw^8W_P8F8{S_dMx!Ttxg#$M1>umAu6 delta 178 zcmV;j08Rh+iX-@nBakj2l+a;Ud$TfJ7!de6vFZ}CzR!kUbXuJfS*2zo+M}$a+i6xP;4gx8$?Mye0!UGx)7DE> zg(ed@cNWd_R7C^GFil^A5nAk@pxYu5r*eRri*krN{a!OPM$|hnhjk?bhjk?cw{;~2 g+rt4dhf(PThf(PUw^8W_P8FBI8V4e`!Ttxg#=eS9F8}}l diff --git a/packages/gitbook/package.json b/packages/gitbook/package.json index f359a16ae..e508d3287 100644 --- a/packages/gitbook/package.json +++ b/packages/gitbook/package.json @@ -16,7 +16,7 @@ "clean": "rm -rf ./.next && rm -rf ./public/~gitbook/static" }, "dependencies": { - "@gitbook/api": "^0.81.0", + "@gitbook/api": "^0.83.0", "@gitbook/cache-do": "workspace:*", "@gitbook/emoji-codepoints": "workspace:*", "@gitbook/icons": "workspace:*", diff --git a/packages/gitbook/src/components/Header/CompactHeader.tsx b/packages/gitbook/src/components/Header/CompactHeader.tsx index 50335487b..9ff5faad1 100644 --- a/packages/gitbook/src/components/Header/CompactHeader.tsx +++ b/packages/gitbook/src/components/Header/CompactHeader.tsx @@ -1,19 +1,8 @@ -import { - Collection, - CustomizationSettings, - Site, - SiteCustomizationSettings, - Space, -} from '@gitbook/api'; -import React from 'react'; +import { CustomizationSettings, Site, SiteCustomizationSettings, Space } from '@gitbook/api'; -import { t } from '@/intl/server'; -import { getSpaceLanguage } from '@/intl/server'; import { tcls } from '@/lib/tailwind'; import { HeaderLogo } from './HeaderLogo'; -import { SpacesDropdown } from './SpacesDropdown'; -import { SearchButton } from '../Search'; /** * Header to display on top of the table of contents when the space has no header configured. @@ -24,49 +13,21 @@ export function CompactHeader(props: { spaces: Space[]; customization: CustomizationSettings | SiteCustomizationSettings; }) { - const { space, spaces, site, customization } = props; - const isMultiVariants = site && spaces.length > 1; + const { space, site, customization } = props; return (
-
- -
-
- - - - {t( - getSpaceLanguage(customization), - customization.aiSearch.enabled ? 'search_or_ask' : 'search', - )} - - - -
+
); } diff --git a/packages/gitbook/src/components/Header/SpacesDropdown.tsx b/packages/gitbook/src/components/Header/SpacesDropdown.tsx index c539db215..03d0d8dc2 100644 --- a/packages/gitbook/src/components/Header/SpacesDropdown.tsx +++ b/packages/gitbook/src/components/Header/SpacesDropdown.tsx @@ -52,7 +52,10 @@ export function SpacesDropdown(props: { space: Space; spaces: Space[]; className variantSpace={{ id: otherSpace.id, title: otherSpace.title, - url: otherSpace.urls.published ?? otherSpace.urls.app, + url: + process.env.NODE_ENV === 'development' + ? `http://localhost:3000/${otherSpace.urls.published?.replace(/https?:\/\//, '')}` + : (otherSpace.urls.published ?? otherSpace.urls.app), }} active={otherSpace.id === space.id} /> diff --git a/packages/gitbook/src/components/PageAside/PageAside.tsx b/packages/gitbook/src/components/PageAside/PageAside.tsx index 12d95b60e..103fc6836 100644 --- a/packages/gitbook/src/components/PageAside/PageAside.tsx +++ b/packages/gitbook/src/components/PageAside/PageAside.tsx @@ -26,7 +26,7 @@ function getTopOffset(props: { sectionsHeader: boolean; topHeader: boolean }) { if (props.sectionsHeader && props.topHeader) { return 'lg:max-h-[calc(100vh_-_8rem)] top-32 page-api-block:xl:max-2xl:top-32'; } - if (props.sectionsHeader || props.topHeader) { + if (props.topHeader) { return 'lg:max-h-[calc(100vh_-_4rem)] top-16 page-api-block:xl:max-2xl:top-16'; } return 'lg:max-h-screen top-0 page-api-block:xl:max-2xl:top-0'; @@ -70,7 +70,7 @@ export function PageAside(props: { 'grow-0', 'shrink-0', 'sticky', - 'py-8', + withHeaderOffset.topHeader ? 'py-4' : 'py-8', 'break-anywhere', // To prevent long words in headings from breaking the layout 'lg:h-full', 'h-[100vh]', @@ -111,7 +111,7 @@ export function PageAside(props: { 'flex-1', 'flex', 'flex-col', - 'gap-4', + 'gap-6', '[&::-webkit-scrollbar]:bg-transparent', '[&::-webkit-scrollbar-thumb]:bg-transparent', diff --git a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx b/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx index 05475df6d..54feac886 100644 --- a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx +++ b/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx @@ -3,6 +3,8 @@ import { CustomizationHeaderPreset, CustomizationIconsStyle, CustomizationSettings, + CustomizationSidebarBackgroundStyle, + CustomizationSidebarListStyle, CustomizationTint, SiteCustomizationSettings, } from '@gitbook/api'; @@ -24,6 +26,10 @@ import '@gitbook/icons/style.css'; import './globals.css'; const DEFAULT_TINT_COLOR = '#787878'; +const SIDEBAR_TINT_COLOR_LIGHT = '#FFFFFF'; +const SIDEBAR_TINT_COLOR_DARK = '#000000'; +const SIDEBAR_NO_TINT_COLOR_LIGHT = 'var(--light-2)'; +const SIDEBAR_NO_TINT_COLOR_DARK = 'var(--dark-2)'; /** * Layout shared between the content and the PDF renderer. @@ -37,8 +43,20 @@ export async function CustomizationRootLayout(props: { const headerTheme = generateHeaderTheme(customization); const language = getSpaceLanguage(customization); - const tintColor = getTintColor(customization); + const sidebarStyles = getSidebarStyles(customization); + const sidebarBackgroundColorLight = + sidebarStyles.background === CustomizationSidebarBackgroundStyle.Filled + ? tintColor + ? SIDEBAR_TINT_COLOR_LIGHT + : SIDEBAR_NO_TINT_COLOR_LIGHT + : 'var(--light-DEFAULT)'; + const sidebarBackgroundColorDark = + sidebarStyles.background === CustomizationSidebarBackgroundStyle.Filled + ? tintColor + ? SIDEBAR_TINT_COLOR_DARK + : SIDEBAR_NO_TINT_COLOR_DARK + : 'var(--dark-DEFAULT)'; return ( @@ -186,7 +206,7 @@ export async function CustomizationRootLayout(props: { * Get the tint color from the customization settings. * If the tint color is not set or it is a space customization, it will return the default color. */ -export function getTintColor( +function getTintColor( customization: CustomizationSettings | SiteCustomizationSettings, ): CustomizationTint['color'] | undefined { if ('tint' in customization.styling && customization.styling.tint) { @@ -197,6 +217,26 @@ export function getTintColor( } } +/** + * Get the sidebar styles from the customization settings. + * If it is a space customization, it will return the default styles. + */ +function getSidebarStyles( + customization: CustomizationSettings | SiteCustomizationSettings, +): SiteCustomizationSettings['styling']['sidebar'] { + if ('sidebar' in customization.styling) { + return { + background: customization.styling.sidebar.background, + list: customization.styling.sidebar.list, + }; + } + + return { + background: CustomizationSidebarBackgroundStyle.Default, + list: CustomizationSidebarListStyle.Default, + }; +} + type ColorInput = string | Record; function generateColorVariable(name: string, color: ColorInput) { const shades: Record = typeof color === 'string' ? shadesOfColor(color) : color; diff --git a/packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx b/packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx index e864406d3..3a22bac05 100644 --- a/packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx +++ b/packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx @@ -91,7 +91,11 @@ export function SiteSectionTabs(props: { active={isActive} key={id} label={title} - href={urls.published ?? ''} + href={ + process.env.NODE_ENV === 'development' + ? `http://localhost:3000/${urls.published?.replace(/https?:\/\//, '')}` + : (urls.published ?? '') + } ref={isActive ? currentTabRef : null} icon={ icon ? ( diff --git a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx index 8899b99c8..3b2bb5f1c 100644 --- a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx +++ b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx @@ -14,8 +14,10 @@ import { Footer } from '@/components/Footer'; import { CompactHeader, Header } from '@/components/Header'; import { CONTAINER_STYLE } from '@/components/layout'; import { ColorDebugger } from '@/components/primitives/ColorDebugger'; -import { SearchModal } from '@/components/Search'; +import { SearchButton, SearchModal } from '@/components/Search'; import { TableOfContents } from '@/components/TableOfContents'; +import { getSpaceLanguage } from '@/intl/server'; +import { t } from '@/intl/translate'; import { ContentTarget, type SectionsList, SiteContentPointer } from '@/lib/api'; import { ContentRefContext } from '@/lib/references'; import { tcls } from '@/lib/tailwind'; @@ -61,7 +63,10 @@ export function SpaceLayout(props: { const withSections = Boolean(sections && sections.list.length > 0); const withVariants = Boolean(site && spaces.length > 1); - const headerOffset = { sectionsHeader: withSections, topHeader: withTopHeader }; + const headerOffset = { + sectionsHeader: withSections, + topHeader: withTopHeader, + }; return ( <> @@ -106,13 +111,43 @@ export function SpaceLayout(props: { ) } innerHeader={ - withVariants && ( - - ) + withVariants || !withTopHeader ? ( +
+ {!withTopHeader ? ( +
+ + + + {t( + getSpaceLanguage(customization), + customization.aiSearch.enabled + ? 'search_or_ask' + : 'search', + )} + + + +
+ ) : null} + {withVariants && ( + + )} +
+ ) : null } headerOffset={headerOffset} /> diff --git a/packages/gitbook/src/components/TableOfContents/PageGroupItem.tsx b/packages/gitbook/src/components/TableOfContents/PageGroupItem.tsx index d1e42fc1c..c22641263 100644 --- a/packages/gitbook/src/components/TableOfContents/PageGroupItem.tsx +++ b/packages/gitbook/src/components/TableOfContents/PageGroupItem.tsx @@ -33,11 +33,10 @@ export function PageGroupItem(props: { '-top-4', 'bg-gradient-to-b', 'from-light', + 'lg:from-sidebar-background', 'to-transparent', 'from-65%', - 'dark:from-dark', 'dark:tracking-wider', - 'dark:to-transparent', )} > diff --git a/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx b/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx index 89ae8e126..6e291f5a1 100644 --- a/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx +++ b/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx @@ -20,7 +20,7 @@ function getTopOffset(props: { sectionsHeader: boolean; topHeader: boolean }) { if (props.sectionsHeader && props.topHeader) { return 'lg:top-32 lg:h-[calc(100vh_-_8rem)]'; } - if (props.sectionsHeader || props.topHeader) { + if (props.topHeader) { return 'lg:top-16 lg:h-[calc(100vh_-_4rem)]'; } return 'lg:top-0 lg:h-[100vh]'; @@ -35,12 +35,11 @@ export function TableOfContents(props: { ancestors: Array; header?: React.ReactNode; // Displayed outside the scrollable TOC as a sticky header headerOffset: { sectionsHeader: boolean; topHeader: boolean }; - innerHeader?: React.ReactNode; // Displayed inside the scrollable TOC, directly above the page list + innerHeader?: React.ReactNode; // Displayed outside the scrollable TOC, directly above the page list }) { const { innerHeader, space, customization, pages, ancestors, header, context, headerOffset } = props; - const withHeaderOffset = headerOffset.sectionsHeader || headerOffset.topHeader; const topOffset = getTopOffset(headerOffset); return ( @@ -50,8 +49,8 @@ export function TableOfContents(props: { 'group', 'flex', 'flex-col', + 'gap-4', 'basis-full', - 'bg-light', 'grow-0', 'shrink-0', 'shadow-transparent', @@ -59,7 +58,7 @@ export function TableOfContents(props: { 'navigation-open:shadow-dark/2', 'z-[1]', 'top-0', - `h-[100vh]`, + 'h-[100vh]', 'lg:basis-72', 'lg:navigation-open:border-b-0', 'lg:sticky', @@ -70,40 +69,53 @@ export function TableOfContents(props: { )} > {header ? header : null} - - {innerHeader &&
{innerHeader}
} - - {customization.trademark.enabled ? ( - - ) : null} - + {innerHeader ?
{innerHeader}
: null} + + + {customization.trademark.enabled ? ( + + ) : null} + + ); } diff --git a/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx b/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx index f0b511223..43c6f52fd 100644 --- a/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx +++ b/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx @@ -102,14 +102,14 @@ export function ToggleableLinkItem(props: { 'flex', 'flex-row', 'justify-between', - 'pl-5', + 'ms-2', + 'pl-3', 'pr-1.5', 'py-1.5', 'text-sm', 'transition-colors', 'relative', 'text-balance', - 'before:border-l', 'before:absolute', 'before:left-[-1px]', 'before:top-0', diff --git a/packages/gitbook/src/components/TableOfContents/Trademark.tsx b/packages/gitbook/src/components/TableOfContents/Trademark.tsx index 0bc7b0eee..cf0af714c 100644 --- a/packages/gitbook/src/components/TableOfContents/Trademark.tsx +++ b/packages/gitbook/src/components/TableOfContents/Trademark.tsx @@ -83,8 +83,7 @@ export function TrademarkLink(props: { 'flex-row', 'items-center', 'hover:bg-dark/1', - 'bg-light', - 'dark:bg-dark', + 'lg:bg-sidebar-background', 'px-4', 'py-4', 'rounded-lg', diff --git a/packages/gitbook/src/lib/cache/backends.ts b/packages/gitbook/src/lib/cache/backends.ts index 20c54dc53..690f2e49e 100644 --- a/packages/gitbook/src/lib/cache/backends.ts +++ b/packages/gitbook/src/lib/cache/backends.ts @@ -5,7 +5,7 @@ import { memoryCache } from './memory'; export const cacheBackends = [ // Cache local to the process // (can't be globally purged or shared between processes) - memoryCache, + // memoryCache, // Cache local to the datacenter // It can't be purged globally but it's faster cloudflareCache, diff --git a/packages/gitbook/tailwind.config.ts b/packages/gitbook/tailwind.config.ts index 7d7e6d1be..366fc976d 100644 --- a/packages/gitbook/tailwind.config.ts +++ b/packages/gitbook/tailwind.config.ts @@ -79,6 +79,8 @@ const config: Config = { 'header-link': generateVarShades('header-link'), 'header-button-text': generateVarShades('header-button-text'), + 'sidebar-background': 'var(--sidebar-background)', + light: { 1: `color-mix(in srgb, var(--light-1), transparent calc(100% - 100% * ))`, //1 99% DEFAULT: `color-mix(in srgb, var(--light-DEFAULT), transparent calc(100% - 100% * ))`, //(default) 96% From 949987dd57908f3fd50ccc6dd821224773fb358a Mon Sep 17 00:00:00 2001 From: Valentino Hudhra Date: Wed, 18 Dec 2024 14:51:05 +0100 Subject: [PATCH 04/29] Remove compact header --- packages/gitbook/e2e/pages.spec.ts | 6 ++++ .../src/components/Header/CompactHeader.tsx | 33 ------------------- .../src/components/Header/SpacesDropdown.tsx | 5 +-- .../gitbook/src/components/Header/index.ts | 2 +- .../src/components/PageAside/PageAside.tsx | 2 +- .../SiteSectionTabs/SiteSectionTabs.tsx | 6 +--- .../components/SpaceLayout/SpaceLayout.tsx | 27 ++++++++++----- .../TableOfContents/TableOfContents.tsx | 7 ++-- .../components/TableOfContents/Trademark.tsx | 2 +- packages/gitbook/src/lib/cache/backends.ts | 2 +- 10 files changed, 36 insertions(+), 56 deletions(-) delete mode 100644 packages/gitbook/src/components/Header/CompactHeader.tsx diff --git a/packages/gitbook/e2e/pages.spec.ts b/packages/gitbook/e2e/pages.spec.ts index 7d545604d..42f83f326 100644 --- a/packages/gitbook/e2e/pages.spec.ts +++ b/packages/gitbook/e2e/pages.spec.ts @@ -6,6 +6,8 @@ import { CustomizationHeaderPreset, CustomizationIconsStyle, CustomizationLocale, + CustomizationSidebarBackgroundStyle, + CustomizationSidebarListStyle, CustomizationThemeMode, SiteCustomizationSettings, } from '@gitbook/api'; @@ -1152,6 +1154,10 @@ function getCustomizationURL(partial: DeepPartial): s font: CustomizationFont.Inter, background: CustomizationBackground.Plain, icons: CustomizationIconsStyle.Regular, + sidebar: { + background: CustomizationSidebarBackgroundStyle.Default, + list: CustomizationSidebarListStyle.Default, + }, }, internationalization: { locale: CustomizationLocale.En, diff --git a/packages/gitbook/src/components/Header/CompactHeader.tsx b/packages/gitbook/src/components/Header/CompactHeader.tsx deleted file mode 100644 index 9ff5faad1..000000000 --- a/packages/gitbook/src/components/Header/CompactHeader.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { CustomizationSettings, Site, SiteCustomizationSettings, Space } from '@gitbook/api'; - -import { tcls } from '@/lib/tailwind'; - -import { HeaderLogo } from './HeaderLogo'; - -/** - * Header to display on top of the table of contents when the space has no header configured. - */ -export function CompactHeader(props: { - space: Space; - site: Site | null; - spaces: Space[]; - customization: CustomizationSettings | SiteCustomizationSettings; -}) { - const { space, site, customization } = props; - - return ( -
- -
- ); -} diff --git a/packages/gitbook/src/components/Header/SpacesDropdown.tsx b/packages/gitbook/src/components/Header/SpacesDropdown.tsx index 03d0d8dc2..c539db215 100644 --- a/packages/gitbook/src/components/Header/SpacesDropdown.tsx +++ b/packages/gitbook/src/components/Header/SpacesDropdown.tsx @@ -52,10 +52,7 @@ export function SpacesDropdown(props: { space: Space; spaces: Space[]; className variantSpace={{ id: otherSpace.id, title: otherSpace.title, - url: - process.env.NODE_ENV === 'development' - ? `http://localhost:3000/${otherSpace.urls.published?.replace(/https?:\/\//, '')}` - : (otherSpace.urls.published ?? otherSpace.urls.app), + url: otherSpace.urls.published ?? otherSpace.urls.app, }} active={otherSpace.id === space.id} /> diff --git a/packages/gitbook/src/components/Header/index.ts b/packages/gitbook/src/components/Header/index.ts index b6e6bbfc0..e64ecdd21 100644 --- a/packages/gitbook/src/components/Header/index.ts +++ b/packages/gitbook/src/components/Header/index.ts @@ -1,2 +1,2 @@ export * from './Header'; -export * from './CompactHeader'; +export * from './HeaderLogo'; diff --git a/packages/gitbook/src/components/PageAside/PageAside.tsx b/packages/gitbook/src/components/PageAside/PageAside.tsx index 103fc6836..458bc895e 100644 --- a/packages/gitbook/src/components/PageAside/PageAside.tsx +++ b/packages/gitbook/src/components/PageAside/PageAside.tsx @@ -27,7 +27,7 @@ function getTopOffset(props: { sectionsHeader: boolean; topHeader: boolean }) { return 'lg:max-h-[calc(100vh_-_8rem)] top-32 page-api-block:xl:max-2xl:top-32'; } if (props.topHeader) { - return 'lg:max-h-[calc(100vh_-_4rem)] top-16 page-api-block:xl:max-2xl:top-16'; + return 'lg:max-h-[calc(100vh_-_6rem)] top-24 page-api-block:xl:max-2xl:top-24'; } return 'lg:max-h-screen top-0 page-api-block:xl:max-2xl:top-0'; } diff --git a/packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx b/packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx index 3a22bac05..e864406d3 100644 --- a/packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx +++ b/packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx @@ -91,11 +91,7 @@ export function SiteSectionTabs(props: { active={isActive} key={id} label={title} - href={ - process.env.NODE_ENV === 'development' - ? `http://localhost:3000/${urls.published?.replace(/https?:\/\//, '')}` - : (urls.published ?? '') - } + href={urls.published ?? ''} ref={isActive ? currentTabRef : null} icon={ icon ? ( diff --git a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx index 3b2bb5f1c..39222ce6f 100644 --- a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx +++ b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx @@ -11,7 +11,7 @@ import { import React from 'react'; import { Footer } from '@/components/Footer'; -import { CompactHeader, Header } from '@/components/Header'; +import { Header, HeaderLogo } from '@/components/Header'; import { CONTAINER_STYLE } from '@/components/layout'; import { ColorDebugger } from '@/components/primitives/ColorDebugger'; import { SearchButton, SearchModal } from '@/components/Search'; @@ -102,17 +102,28 @@ export function SpaceLayout(props: { context={contentRefContext} header={ withTopHeader ? null : ( - +
+ +
) } innerHeader={ withVariants || !withTopHeader ? ( -
+
{!withTopHeader ? (
Date: Wed, 18 Dec 2024 18:20:32 +0100 Subject: [PATCH 05/29] add background test --- packages/gitbook/e2e/pages.spec.ts | 78 +++++++++++++++++------------- 1 file changed, 45 insertions(+), 33 deletions(-) diff --git a/packages/gitbook/e2e/pages.spec.ts b/packages/gitbook/e2e/pages.spec.ts index 42f83f326..40ba3a3a5 100644 --- a/packages/gitbook/e2e/pages.spec.ts +++ b/packages/gitbook/e2e/pages.spec.ts @@ -53,6 +53,11 @@ const allThemePresets: CustomizationHeaderPreset[] = [ CustomizationHeaderPreset.Custom, ]; +const allSidebarBackgroundStyles: CustomizationSidebarBackgroundStyle[] = [ + CustomizationSidebarBackgroundStyle.Default, + CustomizationSidebarBackgroundStyle.Filled, +]; + async function waitForCookiesDialog(page: Page) { const dialog = page.getByRole('dialog', { name: 'Cookies' }); const accept = dialog.getByRole('button', { name: 'Accept' }); @@ -538,40 +543,47 @@ const testCases: TestsCase[] = [ }), run: waitForCookiesDialog, }, - ...allThemePresets.flatMap((preset) => ({ - name: `With tint - Preset ${preset} - Theme ${theme}`, - url: getCustomizationURL({ - styling: { - tint: { color: { light: '#346DDB', dark: '#346DDB' } }, - }, - header: { - preset, - ...(preset === CustomizationHeaderPreset.Custom - ? { - backgroundColor: { light: '#C62C68', dark: '#EF96B8' }, - linkColor: { light: '#4DDE98', dark: '#0C693D' }, - } - : {}), - links: [ - { - title: 'Secondary button', - to: { kind: 'url', url: 'https://www.gitbook.com' }, - style: 'button-secondary', - }, - { - title: 'Primary button', - to: { kind: 'url', url: 'https://www.gitbook.com' }, - style: 'button-primary', + // Theme-specific tests + ...allThemePresets.flatMap((preset) => [ + ...allSidebarBackgroundStyles.flatMap((sidebarStyle) => ({ + name: `With tint - Preset ${preset} - Sidebar ${sidebarStyle} - Theme ${theme}`, + url: getCustomizationURL({ + styling: { + tint: { color: { light: '#346DDB', dark: '#346DDB' } }, + sidebar: { + background: sidebarStyle, + list: CustomizationSidebarListStyle.Default, }, - ], - }, - themes: { - default: theme, - toggeable: false, - }, - }), - run: waitForCookiesDialog, - })), + }, + header: { + preset, + ...(preset === CustomizationHeaderPreset.Custom + ? { + backgroundColor: { light: '#C62C68', dark: '#EF96B8' }, + linkColor: { light: '#4DDE98', dark: '#0C693D' }, + } + : {}), + links: [ + { + title: 'Secondary button', + to: { kind: 'url', url: 'https://www.gitbook.com' }, + style: 'button-secondary', + }, + { + title: 'Primary button', + to: { kind: 'url', url: 'https://www.gitbook.com' }, + style: 'button-primary', + }, + ], + }, + themes: { + default: theme, + toggeable: false, + }, + }), + run: waitForCookiesDialog, + })), + ]), { name: `With tint - Legacy background match - Theme ${theme}`, url: getCustomizationURL({ From 1b4d94d63d1c12a9bc17429240d915d74610b8fa Mon Sep 17 00:00:00 2001 From: Valentino Hudhra Date: Wed, 18 Dec 2024 18:34:12 +0100 Subject: [PATCH 06/29] less drastic offset --- .../components/SpaceLayout/SpaceLayout.tsx | 4 ++++ .../TableOfContents/TableOfContents.tsx | 20 +++++++++++++++---- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx index 39222ce6f..8ef7d3c73 100644 --- a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx +++ b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx @@ -1,6 +1,7 @@ import { CustomizationHeaderPreset, CustomizationSettings, + CustomizationSidebarBackgroundStyle, Revision, RevisionPageDocument, RevisionPageGroup, @@ -66,6 +67,9 @@ export function SpaceLayout(props: { const headerOffset = { sectionsHeader: withSections, topHeader: withTopHeader, + sidebarBackgroundFilled: + 'sidebar' in customization.styling && + customization.styling.sidebar.background === CustomizationSidebarBackgroundStyle.Filled, }; return ( diff --git a/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx b/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx index a8b7b1a1a..1aea8a6c0 100644 --- a/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx +++ b/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx @@ -16,15 +16,23 @@ import { PagesList } from './PagesList'; import { TOCScrollContainer } from './TOCScroller'; import { Trademark } from './Trademark'; -function getTopOffset(props: { sectionsHeader: boolean; topHeader: boolean }) { - if (props.sectionsHeader && props.topHeader) { +function getTopOffset(props: { + sectionsHeader: boolean; + topHeader: boolean; + sidebarBackgroundFilled: boolean; +}) { + if (props.topHeader && props.sectionsHeader) { return 'lg:top-32 lg:h-[calc(100vh_-_8rem)]'; } - if (props.topHeader) { + if (props.topHeader && props.sidebarBackgroundFilled) { return 'lg:top-24 lg:h-[calc(100vh_-_6rem)]'; } + if (props.topHeader && !props.sidebarBackgroundFilled) { + return 'lg:top-16 lg:h-[calc(100vh_-_4rem)]'; + } + return 'lg:top-0 lg:h-[100vh]'; } @@ -36,7 +44,11 @@ export function TableOfContents(props: { pages: Revision['pages']; ancestors: Array; header?: React.ReactNode; // Displayed outside the scrollable TOC as a sticky header - headerOffset: { sectionsHeader: boolean; topHeader: boolean }; + headerOffset: { + sectionsHeader: boolean; + topHeader: boolean; + sidebarBackgroundFilled: boolean; + }; innerHeader?: React.ReactNode; // Displayed outside the scrollable TOC, directly above the page list }) { const { innerHeader, space, customization, pages, ancestors, header, context, headerOffset } = From 02b4d2cfbdace267525b894b1d61a8b768f36bff Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Thu, 2 Jan 2025 21:09:48 +0100 Subject: [PATCH 07/29] First pass --- .../RootLayout/CustomizationRootLayout.tsx | 36 ++------ .../SiteSectionTabs/SiteSectionTabs.tsx | 3 +- .../components/SpaceLayout/SpaceLayout.tsx | 5 +- .../TableOfContents/PageGroupItem.tsx | 22 +++-- .../TableOfContents/TableOfContents.tsx | 90 ++++++++++++------- .../components/TableOfContents/Trademark.tsx | 85 ++++++++++-------- packages/gitbook/tailwind.config.ts | 18 ++-- 7 files changed, 143 insertions(+), 116 deletions(-) diff --git a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx b/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx index 54feac886..453e16e65 100644 --- a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx +++ b/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx @@ -45,33 +45,9 @@ export async function CustomizationRootLayout(props: { const language = getSpaceLanguage(customization); const tintColor = getTintColor(customization); const sidebarStyles = getSidebarStyles(customization); - const sidebarBackgroundColorLight = - sidebarStyles.background === CustomizationSidebarBackgroundStyle.Filled - ? tintColor - ? SIDEBAR_TINT_COLOR_LIGHT - : SIDEBAR_NO_TINT_COLOR_LIGHT - : 'var(--light-DEFAULT)'; - const sidebarBackgroundColorDark = - sidebarStyles.background === CustomizationSidebarBackgroundStyle.Filled - ? tintColor - ? SIDEBAR_TINT_COLOR_DARK - : SIDEBAR_NO_TINT_COLOR_DARK - : 'var(--dark-DEFAULT)'; return ( - + {customization.privacyPolicy.url ? ( @@ -124,7 +100,6 @@ export async function CustomizationRootLayout(props: { )} ${generateColorVariable('header-link', headerTheme.linkColor.light)} ${generateColorVariable('header-button-text', colorContrast(headerTheme.linkColor.light as string, ['#000', '#fff']))} - --sidebar-background: ${sidebarBackgroundColorLight} } .dark { ${generateColorVariable( @@ -168,7 +143,6 @@ export async function CustomizationRootLayout(props: { )} ${generateColorVariable('header-link', headerTheme.linkColor.dark)} ${generateColorVariable('header-button-text', colorContrast(headerTheme.linkColor.dark as string, ['#000', '#fff']))} - --sidebar-background: ${sidebarBackgroundColorDark}; } `} @@ -179,6 +153,14 @@ export async function CustomizationRootLayout(props: { `${ibmPlexMono.variable}`, 'bg-light', 'dark:bg-dark', + customization.header.preset === CustomizationHeaderPreset.None + ? null + : 'scroll-pt-[76px]', // Take the sticky header in consideration for the scrolling + customization.styling.corners === CustomizationCorners.Straight + ? ' straight-corners' + : '', + tintColor ? ' tint' : 'no-tint', + 'sidebar-filled', // sidebarStyles.background && ' sidebar-' + sidebarStyles.background, )} > - {/* */}
+
{!withTopHeader ? (
+
  • diff --git a/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx b/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx index 1aea8a6c0..f04bb9623 100644 --- a/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx +++ b/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx @@ -22,18 +22,14 @@ function getTopOffset(props: { sidebarBackgroundFilled: boolean; }) { if (props.topHeader && props.sectionsHeader) { - return 'lg:top-32 lg:h-[calc(100vh_-_8rem)]'; + return 'lg:top-[6.75rem] lg:h-[calc(100vh_-_6.75rem)]'; } - if (props.topHeader && props.sidebarBackgroundFilled) { - return 'lg:top-24 lg:h-[calc(100vh_-_6rem)]'; - } - - if (props.topHeader && !props.sidebarBackgroundFilled) { + if (props.topHeader) { return 'lg:top-16 lg:h-[calc(100vh_-_4rem)]'; } - return 'lg:top-0 lg:h-[100vh]'; + return 'lg:top-0 lg:h-screen'; } export function TableOfContents(props: { @@ -59,55 +55,80 @@ export function TableOfContents(props: { return (
    + ) : null } headerOffset={headerOffset} diff --git a/packages/gitbook/src/components/TableOfContents/PageGroupItem.tsx b/packages/gitbook/src/components/TableOfContents/PageGroupItem.tsx index 3f8323ed3..182604e4c 100644 --- a/packages/gitbook/src/components/TableOfContents/PageGroupItem.tsx +++ b/packages/gitbook/src/components/TableOfContents/PageGroupItem.tsx @@ -25,12 +25,11 @@ export function PageGroupItem(props: { 'px-5', 'z-[1]', 'sticky', - - '-top-4', + '-top-5', 'pt-6', - 'group-first/page-group-item:-mt-4', - 'pb-4', - '-mb-2', + 'group-first/page-group-item:-mt-5', + 'pb-3', // Add extra padding to make the header fade a bit nicer + '-mb-1.5', // Then pull the page items a bit closer, effective bottom padding is 1.5 units / 6px. 'text-xs', 'tracking-wide', @@ -38,11 +37,14 @@ export function PageGroupItem(props: { 'uppercase', 'bg-gradient-to-b', + 'from-70%', // We want the fade to start past the header, this is a good approximation. 'from-light', 'sidebar-filled:from-light-2', - 'sidebar-filled:dark:from-dark-2', + '[html.tint.sidebar-filled_&]:from-light-1', + 'dark:from-dark', + 'dark:sidebar-filled:from-dark-1', + 'dark:[html.tint.sidebar-filled_&]:from-dark-1', 'to-transparent', - 'from-70%', )} > diff --git a/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx b/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx index f04bb9623..6b437f558 100644 --- a/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx +++ b/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx @@ -53,9 +53,10 @@ export function TableOfContents(props: { const topOffset = getTopOffset(headerOffset); return ( - ); From 9cab85c22cf50025c0f8b3dc809dd620d5b6e278 Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Tue, 7 Jan 2025 15:13:08 +0100 Subject: [PATCH 19/29] Remove comments --- .../gitbook/src/components/PageAside/PageAside.tsx | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/packages/gitbook/src/components/PageAside/PageAside.tsx b/packages/gitbook/src/components/PageAside/PageAside.tsx index 6cb727156..c60f4705c 100644 --- a/packages/gitbook/src/components/PageAside/PageAside.tsx +++ b/packages/gitbook/src/components/PageAside/PageAside.tsx @@ -32,13 +32,6 @@ function getTopOffset(props: { sectionsHeader: boolean; topHeader: boolean }) { } return 'lg:top-0 lg:max-h-screen'; - if (props.sectionsHeader && props.topHeader) { - return 'lg:max-h-[calc(100vh_-_8rem)] top-32 page-api-block:xl:max-2xl:top-32'; - } - if (props.topHeader) { - return 'lg:max-h-[calc(100vh_-_6rem)] top-24 page-api-block:xl:max-2xl:top-24'; - } - return 'lg:max-h-screen top-0 page-api-block:xl:max-2xl:top-0'; } /** @@ -85,10 +78,7 @@ export async function PageAside(props: { 'grow-0', 'shrink-0', 'sticky', - // withHeaderOffset.topHeader ? 'py-4' : 'py-8', 'break-anywhere', // To prevent long words in headings from breaking the layout - // 'lg:h-full', - // 'h-screen', 'text-dark/7', 'dark:text-light/7', @@ -109,12 +99,8 @@ export async function PageAside(props: { 'page-api-block:xl:max-2xl:dark:border-light/2', 'page-api-block:xl:max-2xl:hover:shadow-lg', 'page-api-block:xl:max-2xl:hover:shadow-dark/2', - - // 'page-api-block:xl:max-2xl:border', - // 'page-api-block:xl:max-2xl:border-dark/2', 'page-api-block:xl:max-2xl:rounded-md', 'page-api-block:xl:max-2xl:h-auto', - // 'page-api-block:xl:max-2xl:py-0', 'page-api-block:xl:max-2xl:my-8', 'dark:page-api-block:xl:max-2xl:bg-dark-2/8', From c7f55a50b1eb9b055c78a378231ad76bae5e10b5 Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Tue, 7 Jan 2025 15:18:44 +0100 Subject: [PATCH 20/29] Fix padding of feedback container --- packages/gitbook/src/components/PageAside/PageAside.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gitbook/src/components/PageAside/PageAside.tsx b/packages/gitbook/src/components/PageAside/PageAside.tsx index c60f4705c..042e5a77c 100644 --- a/packages/gitbook/src/components/PageAside/PageAside.tsx +++ b/packages/gitbook/src/components/PageAside/PageAside.tsx @@ -166,7 +166,7 @@ export async function PageAside(props: { 'first:border-none', 'border-dark/2', 'dark:border-light/2', - 'pt-4', + 'py-4', 'first:pt-0', 'page-api-block:xl:max-2xl:px-3', )} From e3bff9c13bd7c8b73823fc87ebb1a40c053cfeaa Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Tue, 7 Jan 2025 17:37:43 +0100 Subject: [PATCH 21/29] Restyle variant selector --- .../src/components/Header/Dropdown.tsx | 5 ++- .../src/components/Header/SpacesDropdown.tsx | 45 ++++++++++++++----- .../components/SpaceLayout/SpaceLayout.tsx | 2 +- 3 files changed, 39 insertions(+), 13 deletions(-) diff --git a/packages/gitbook/src/components/Header/Dropdown.tsx b/packages/gitbook/src/components/Header/Dropdown.tsx index 2ce03cc72..b1d2f5b4a 100644 --- a/packages/gitbook/src/components/Header/Dropdown.tsx +++ b/packages/gitbook/src/components/Header/Dropdown.tsx @@ -91,8 +91,9 @@ export function DropdownChevron() { 'opacity-6', 'size-3', 'ms-1', - 'transition-transform', - 'group-hover/dropdown:rotate-180', + 'transition-all', + 'group-hover/dropdown:opacity-11', + 'group-focus-within/dropdown:rotate-180', )} /> ); diff --git a/packages/gitbook/src/components/Header/SpacesDropdown.tsx b/packages/gitbook/src/components/Header/SpacesDropdown.tsx index 0c8032f65..1ba930a2a 100644 --- a/packages/gitbook/src/components/Header/SpacesDropdown.tsx +++ b/packages/gitbook/src/components/Header/SpacesDropdown.tsx @@ -10,6 +10,10 @@ export function SpacesDropdown(props: { space: Space; spaces: Space[]; className return ( (
    - {space.title} + {space.title}
    )} diff --git a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx index c5bce5ffd..d661ee3e0 100644 --- a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx +++ b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx @@ -128,7 +128,7 @@ export async function SpaceLayout(props: { ) } innerHeader={ - withVariants && + withVariants && } headerOffset={headerOffset} /> From 93e1326ab1aab0f0c5aa21302e5a91f831fba5a7 Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Tue, 7 Jan 2025 18:40:10 +0100 Subject: [PATCH 22/29] If `no-toc`, put variant selector in header And make it wrap on mobile to accomodate all necessary items --- packages/gitbook/src/components/Header/Header.tsx | 10 +++++++++- .../gitbook/src/components/SpaceLayout/SpaceLayout.tsx | 8 +++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx index f6965673b..9306c9633 100644 --- a/packages/gitbook/src/components/Header/Header.tsx +++ b/packages/gitbook/src/components/Header/Header.tsx @@ -74,10 +74,12 @@ export function Header(props: { 'gap-4', 'lg:gap-8', 'flex', - 'h-16', 'items-center', 'justify-between', 'w-full', + 'py-3', + 'sm:h-16', + 'page-no-toc:max-[400px]:flex-wrap', CONTAINER_STYLE, )} > @@ -95,6 +97,12 @@ export function Header(props: {
    • + {isMultiVariants && ( +
    + +
    + )} + {customization.header.links.length > 0 && ( {customization.header.links.map((link, index) => { diff --git a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx index d661ee3e0..4e785bae2 100644 --- a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx +++ b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx @@ -128,7 +128,13 @@ export async function SpaceLayout(props: { ) } innerHeader={ - withVariants && + withVariants && ( + + ) } headerOffset={headerOffset} /> From c0a6afccf20082bae5ff59468e2cfc5aa810f012 Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Tue, 7 Jan 2025 23:40:46 +0100 Subject: [PATCH 23/29] Update Header.tsx --- packages/gitbook/src/components/Header/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx index 9306c9633..55f261ec6 100644 --- a/packages/gitbook/src/components/Header/Header.tsx +++ b/packages/gitbook/src/components/Header/Header.tsx @@ -77,7 +77,7 @@ export function Header(props: { 'items-center', 'justify-between', 'w-full', - 'py-3', + 'py-4', 'sm:h-16', 'page-no-toc:max-[400px]:flex-wrap', CONTAINER_STYLE, From 626a6bf594e1362dd7eed9b4d1383134bd8e9080 Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Wed, 8 Jan 2025 00:45:47 +0100 Subject: [PATCH 24/29] Update Header.tsx --- packages/gitbook/src/components/Header/Header.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx index 55f261ec6..dcc16aca1 100644 --- a/packages/gitbook/src/components/Header/Header.tsx +++ b/packages/gitbook/src/components/Header/Header.tsx @@ -77,7 +77,8 @@ export function Header(props: { 'items-center', 'justify-between', 'w-full', - 'py-4', + 'py-3', + 'min-h-16', 'sm:h-16', 'page-no-toc:max-[400px]:flex-wrap', CONTAINER_STYLE, From 57c3b0d1ed4973df85fb1a856694b48941139b7b Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Wed, 8 Jan 2025 17:40:24 +0100 Subject: [PATCH 25/29] Add search box for sidebar-only themes --- .../components/SpaceLayout/SpaceLayout.tsx | 33 +++++++++++++++---- 1 file changed, 26 insertions(+), 7 deletions(-) diff --git a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx index 4e785bae2..6f350222d 100644 --- a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx +++ b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx @@ -128,13 +128,32 @@ export async function SpaceLayout(props: { ) } innerHeader={ - withVariants && ( - - ) + // displays the search button and/or the space dropdown in the ToC according to the header/variant settings. E.g if there is no header, the search button will be displayed in the ToC. + <> + {!withTopHeader && ( +
    + + + + {t( + getSpaceLanguage(customization), + customization.aiSearch.enabled + ? 'search_or_ask' + : 'search', + )} + + + +
    + )} + {withVariants && ( + + )} + } headerOffset={headerOffset} /> From 22888832893cd4b25aa53f0d6065d371f0a66a51 Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Thu, 9 Jan 2025 11:37:44 +0100 Subject: [PATCH 26/29] Changeset --- .changeset/gorgeous-horses-grow.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/gorgeous-horses-grow.md diff --git a/.changeset/gorgeous-horses-grow.md b/.changeset/gorgeous-horses-grow.md new file mode 100644 index 000000000..62e013835 --- /dev/null +++ b/.changeset/gorgeous-horses-grow.md @@ -0,0 +1,5 @@ +--- +'gitbook': patch +--- + +Position the variant picker in the ToC From de74e722c7312bc3480b3cd986d340697b1ea7b9 Mon Sep 17 00:00:00 2001 From: Valentino Hudhra <2587839+valentin0h@users.noreply.github.com> Date: Thu, 9 Jan 2025 11:59:15 +0100 Subject: [PATCH 27/29] Update packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx --- .../src/components/RootLayout/CustomizationRootLayout.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx b/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx index ca509158b..b102522a6 100644 --- a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx +++ b/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx @@ -25,10 +25,6 @@ import '@gitbook/icons/style.css'; import './globals.css'; const DEFAULT_TINT_COLOR = '#787878'; -const SIDEBAR_TINT_COLOR_LIGHT = '#FFFFFF'; -const SIDEBAR_TINT_COLOR_DARK = '#000000'; -const SIDEBAR_NO_TINT_COLOR_LIGHT = 'var(--light-2)'; -const SIDEBAR_NO_TINT_COLOR_DARK = 'var(--dark-2)'; /** * Layout shared between the content and the PDF renderer. From c0b27d271debe1fb98548a0307bd7a7810c7a8b7 Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Thu, 9 Jan 2025 12:29:14 +0100 Subject: [PATCH 28/29] Fix no-toc positioning --- packages/gitbook/src/components/Header/Header.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx index dcc16aca1..399c7fb98 100644 --- a/packages/gitbook/src/components/Header/Header.tsx +++ b/packages/gitbook/src/components/Header/Header.tsx @@ -84,7 +84,7 @@ export function Header(props: { CONTAINER_STYLE, )} > -
    +
    {isMultiVariants && ( -
    +
    )} From 5bc13ad52fa37925b427a96b125bba1b5cd7d0c4 Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Thu, 9 Jan 2025 12:45:30 +0100 Subject: [PATCH 29/29] Fix `no-toc` header without variants --- packages/gitbook/src/components/Header/Header.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx index 399c7fb98..9bccae3e7 100644 --- a/packages/gitbook/src/components/Header/Header.tsx +++ b/packages/gitbook/src/components/Header/Header.tsx @@ -80,11 +80,17 @@ export function Header(props: { 'py-3', 'min-h-16', 'sm:h-16', - 'page-no-toc:max-[400px]:flex-wrap', + isMultiVariants && 'page-no-toc:max-[400px]:flex-wrap', CONTAINER_STYLE, )} > -
    +