From ca9d2833368888f1522010c3e2f5e3f0b15a1cfc Mon Sep 17 00:00:00 2001 From: Valentino Hudhra Date: Fri, 13 Dec 2024 12:25:09 +0100 Subject: [PATCH 01/13] Bump API version --- .changeset/dull-parents-breathe.md | 5 ++ .../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 + 13 files changed, 162 insertions(+), 102 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 0000000000..75752a98e3 --- /dev/null +++ b/.changeset/dull-parents-breathe.md @@ -0,0 +1,5 @@ +--- +'gitbook': minor +--- + +Add support for sidebar background styles diff --git a/packages/gitbook/src/components/Header/CompactHeader.tsx b/packages/gitbook/src/components/Header/CompactHeader.tsx index 50335487b5..9ff5faad10 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 c539db2151..03d0d8dc2f 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 c85ae84414..4966c720d2 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'; @@ -76,7 +76,7 @@ export async 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]', @@ -117,7 +117,7 @@ export async 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 e16173495b..0bef7e8206 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'; @@ -23,6 +25,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. @@ -36,8 +42,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 ( @@ -185,7 +205,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) { @@ -196,6 +216,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 e864406d31..3a22bac055 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 505f72c10f..48b3f902ec 100644 --- a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx +++ b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx @@ -13,8 +13,10 @@ import React from 'react'; import { Footer } from '@/components/Footer'; import { CompactHeader, Header } from '@/components/Header'; import { CONTAINER_STYLE } from '@/components/layout'; -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 { api, ContentTarget, type SectionsList, SiteContentPointer } from '@/lib/api'; import { ContentRefContext } from '@/lib/references'; import { tcls } from '@/lib/tailwind'; @@ -63,7 +65,10 @@ export async 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, + }; const apiHost = (await api()).client.endpoint; const visitorAuthToken = await getCurrentVisitorToken(); const enabled = await shouldTrackEvents(); @@ -116,13 +121,43 @@ export async 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 d1e42fc1c0..c226412635 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 89ae8e1269..6e291f5a14 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 3c12e37ed3..b52347af35 100644 --- a/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx +++ b/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx @@ -105,14 +105,14 @@ export function ToggleableLinkItem( '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 0bc7b0eee3..cf0af714c5 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 20c54dc532..690f2e49e2 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 7d7e6d1bef..366fc976dd 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 f4b5690df5846c430397c4baf3313fbb558d6a67 Mon Sep 17 00:00:00 2001 From: Valentino Hudhra Date: Wed, 18 Dec 2024 14:51:05 +0100 Subject: [PATCH 02/13] Remove compact header --- .../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 +- 9 files changed, 30 insertions(+), 56 deletions(-) delete mode 100644 packages/gitbook/src/components/Header/CompactHeader.tsx diff --git a/packages/gitbook/src/components/Header/CompactHeader.tsx b/packages/gitbook/src/components/Header/CompactHeader.tsx deleted file mode 100644 index 9ff5faad10..0000000000 --- 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 03d0d8dc2f..c539db2151 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 b6e6bbfc03..e64ecdd216 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 4966c720d2..6d9f5c4d8a 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 3a22bac055..e864406d31 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 48b3f902ec..0e3290218b 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 { SearchButton, SearchModal } from '@/components/Search'; import { TableOfContents } from '@/components/TableOfContents'; @@ -112,17 +112,28 @@ export async function SpaceLayout(props: { context={contentRefContext} header={ withTopHeader ? null : ( - +
+ +
) } innerHeader={ withVariants || !withTopHeader ? ( -
+
{!withTopHeader ? (
Date: Wed, 18 Dec 2024 18:20:32 +0100 Subject: [PATCH 03/13] 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 bf87510b44..e5aba1afde 100644 --- a/packages/gitbook/e2e/pages.spec.ts +++ b/packages/gitbook/e2e/pages.spec.ts @@ -60,6 +60,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' }); @@ -545,40 +550,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 54271f60d18ff1b9b9afacf772bdc646858c9f25 Mon Sep 17 00:00:00 2001 From: Valentino Hudhra Date: Wed, 18 Dec 2024 18:34:12 +0100 Subject: [PATCH 04/13] 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 0e3290218b..e8357f4d89 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, @@ -68,6 +69,9 @@ export async function SpaceLayout(props: { const headerOffset = { sectionsHeader: withSections, topHeader: withTopHeader, + sidebarBackgroundFilled: + 'sidebar' in customization.styling && + customization.styling.sidebar.background === CustomizationSidebarBackgroundStyle.Filled, }; const apiHost = (await api()).client.endpoint; const visitorAuthToken = await getCurrentVisitorToken(); diff --git a/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx b/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx index a8b7b1a1a9..1aea8a6c0f 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 53bc7aab9156470ffe21a698fe084f2d51532783 Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Thu, 2 Jan 2025 21:09:48 +0100 Subject: [PATCH 05/13] First pass --- .../RootLayout/CustomizationRootLayout.tsx | 36 ++------ .../SiteSectionTabs/SiteSectionTabs.tsx | 3 +- .../components/SpaceLayout/SpaceLayout.tsx | 4 +- .../TableOfContents/PageGroupItem.tsx | 22 +++-- .../TableOfContents/TableOfContents.tsx | 90 ++++++++++++------- .../components/TableOfContents/Trademark.tsx | 85 ++++++++++-------- packages/gitbook/tailwind.config.ts | 18 ++-- 7 files changed, 143 insertions(+), 115 deletions(-) diff --git a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx b/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx index 0bef7e8206..ab6cf15f5c 100644 --- a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx +++ b/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx @@ -44,33 +44,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 ? ( @@ -123,7 +99,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( @@ -167,7 +142,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}; } `} @@ -178,6 +152,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 1aea8a6c0f..f04bb96239 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 3f8323ed37..182604e4c2 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 f04bb96239..6b437f558a 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 ( -