From 96914a7c41ae435894684e4d20a61ab04fc2830f Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Tue, 17 Jun 2025 18:50:32 +0200 Subject: [PATCH 1/6] Add fullwidth page option --- .../src/components/DocumentView/Blocks.tsx | 18 ++++++++++++++++++ .../src/components/PageBody/PageBody.tsx | 2 +- .../components/PageBody/PageBodyBlankslate.tsx | 4 +++- 3 files changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/gitbook/src/components/DocumentView/Blocks.tsx b/packages/gitbook/src/components/DocumentView/Blocks.tsx index 4bbe605d87..8285af2721 100644 --- a/packages/gitbook/src/components/DocumentView/Blocks.tsx +++ b/packages/gitbook/src/components/DocumentView/Blocks.tsx @@ -47,6 +47,23 @@ type UnwrappedBlocksProps = DocumentContextProps & isOffscreen?: boolean; }; +/* Blocks that can be full width are automatically expanded on full-width pages. + * Ideally we'd rely on the block type to determine if it can be full width, but + * the block's `fullWidth` property does not differentiate between `undefined` and `false`. + * So instead we hardcode a list of blocks that can be full width. */ +const FULL_WIDTH_BLOCKS = [ + 'table', + 'tabs', + 'integration', + 'openapi', + 'images', + 'embed', + 'columns', + 'code', + 'content-ref', + 'hint', +]; + /** * Renders a list of blocks without a wrapper element. */ @@ -72,6 +89,7 @@ export function UnwrappedBlocks(props: UnwrappedBl node.data && 'fullWidth' in node.data && node.data.fullWidth ? 'max-w-screen-2xl' : 'page-full-width:ml-0 max-w-3xl', + FULL_WIDTH_BLOCKS.includes(node.type) && 'page-full-width:max-w-screen-2xl', blockStyle, ]} isEstimatedOffscreen={isOffscreen} diff --git a/packages/gitbook/src/components/PageBody/PageBody.tsx b/packages/gitbook/src/components/PageBody/PageBody.tsx index 801db03ce2..71cbb791a1 100644 --- a/packages/gitbook/src/components/PageBody/PageBody.tsx +++ b/packages/gitbook/src/components/PageBody/PageBody.tsx @@ -28,7 +28,7 @@ export function PageBody(props: { const { customization } = context; const contentFullWidth = document ? hasFullWidthBlock(document) : false; - const pageFullWidth = page.id === 'wtthNFMqmEQmnt5LKR0q'; + const pageFullWidth = page.layout.width === 'wide'; const asFullWidth = pageFullWidth || contentFullWidth; const language = getSpaceLanguage(customization); const updatedAt = page.updatedAt ?? page.createdAt; diff --git a/packages/gitbook/src/components/PageBody/PageBodyBlankslate.tsx b/packages/gitbook/src/components/PageBody/PageBodyBlankslate.tsx index 86187cea55..b90e61c6ca 100644 --- a/packages/gitbook/src/components/PageBody/PageBodyBlankslate.tsx +++ b/packages/gitbook/src/components/PageBody/PageBodyBlankslate.tsx @@ -68,11 +68,13 @@ export async function PageBodyBlankslate(props: { className={tcls( 'grid', 'max-w-3xl', + 'page-full-width:max-w-screen-2xl', 'w-full', 'mx-auto', 'gap-4', 'grid-cols-1', - 'sm:grid-cols-2' + 'sm:grid-cols-2', + 'page-full-width:md:grid-cols-3' )} > {pageElements} From 4f2e05f2edec589194361a8dad81656a5e900061 Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Thu, 3 Jul 2025 12:49:55 +0200 Subject: [PATCH 2/6] Make pageaside transition conditional To prevent unnecessary layout shift when resizing the window smaller --- 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 caf3d42e5d..c2b2be70e1 100644 --- a/packages/gitbook/src/components/PageAside/PageAside.tsx +++ b/packages/gitbook/src/components/PageAside/PageAside.tsx @@ -55,7 +55,7 @@ export function PageAside(props: { 'chat-open:xl:max-3xl:max-w-0', 'chat-open:xl:max-3xl:ml-0', - 'transition-all duration-300', + 'xl:transition-all xl:duration-300', '[transition-behavior:allow-discrete]', 'flex-col', From 28d69a063756de9564ccb2a138e6ed3ce0fa4371 Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Thu, 3 Jul 2025 12:53:33 +0200 Subject: [PATCH 3/6] Changeset --- .changeset/fuzzy-bulldogs-listen.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fuzzy-bulldogs-listen.md diff --git a/.changeset/fuzzy-bulldogs-listen.md b/.changeset/fuzzy-bulldogs-listen.md new file mode 100644 index 0000000000..e58b92c18e --- /dev/null +++ b/.changeset/fuzzy-bulldogs-listen.md @@ -0,0 +1,5 @@ +--- +"gitbook": patch +--- + +Add fullwidth page option From 11df1765e5d56d35adca0a8d5c64e5dbda84c336 Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Thu, 3 Jul 2025 13:46:19 +0200 Subject: [PATCH 4/6] Rename variants --- .../src/components/DocumentView/Blocks.tsx | 4 ++-- .../src/components/DocumentView/Divider.tsx | 2 +- .../gitbook/src/components/Footer/Footer.tsx | 12 ++++++------ .../src/components/PageBody/PageBody.tsx | 10 +++++----- .../components/PageBody/PageBodyBlankslate.tsx | 4 ++-- .../src/components/PageBody/PageCover.tsx | 2 +- .../PageBody/PageFooterNavigation.tsx | 2 +- .../src/components/PageBody/PageHeader.tsx | 2 +- .../components/PageBody/PreservePageLayout.tsx | 18 +++++++++--------- .../components/SitePage/SitePageSkeleton.tsx | 2 +- .../src/components/SpaceLayout/SpaceLayout.tsx | 2 +- packages/gitbook/src/components/layout.ts | 1 - packages/gitbook/tailwind.config.ts | 6 +++--- 13 files changed, 33 insertions(+), 34 deletions(-) diff --git a/packages/gitbook/src/components/DocumentView/Blocks.tsx b/packages/gitbook/src/components/DocumentView/Blocks.tsx index 8285af2721..cdb165cb6f 100644 --- a/packages/gitbook/src/components/DocumentView/Blocks.tsx +++ b/packages/gitbook/src/components/DocumentView/Blocks.tsx @@ -88,8 +88,8 @@ export function UnwrappedBlocks(props: UnwrappedBl 'mx-auto w-full decoration-primary/6', node.data && 'fullWidth' in node.data && node.data.fullWidth ? 'max-w-screen-2xl' - : 'page-full-width:ml-0 max-w-3xl', - FULL_WIDTH_BLOCKS.includes(node.type) && 'page-full-width:max-w-screen-2xl', + : 'page-width-wide:ml-0 max-w-3xl', + FULL_WIDTH_BLOCKS.includes(node.type) && 'page-width-wide:max-w-screen-2xl', blockStyle, ]} isEstimatedOffscreen={isOffscreen} diff --git a/packages/gitbook/src/components/DocumentView/Divider.tsx b/packages/gitbook/src/components/DocumentView/Divider.tsx index f787d044b5..15302df475 100644 --- a/packages/gitbook/src/components/DocumentView/Divider.tsx +++ b/packages/gitbook/src/components/DocumentView/Divider.tsx @@ -7,5 +7,5 @@ import type { BlockProps } from './Block'; export function Divider(props: BlockProps) { const { style } = props; - return
; + return
; } diff --git a/packages/gitbook/src/components/Footer/Footer.tsx b/packages/gitbook/src/components/Footer/Footer.tsx index eaeb6cc95e..31c2c5fd59 100644 --- a/packages/gitbook/src/components/Footer/Footer.tsx +++ b/packages/gitbook/src/components/Footer/Footer.tsx @@ -36,16 +36,16 @@ export function Footer(props: { context: GitBookSiteContext }) {
{ @@ -106,7 +106,7 @@ export function Footer(props: { context: GitBookSiteContext }) { 'col-span-2 page-has-toc:lg:col-span-1 page-has-toc:lg:col-start-2 page-no-toc:xl:col-span-1 page-no-toc:xl:col-start-2' )} > -
+
{partition(customization.footer.groups, FOOTER_COLUMNS).map( (column, columnIndex) => (
- + {page.cover && page.layout.cover && page.layout.coverSize === 'hero' ? ( ) : null} diff --git a/packages/gitbook/src/components/PageBody/PageBodyBlankslate.tsx b/packages/gitbook/src/components/PageBody/PageBodyBlankslate.tsx index d1a29608d8..6eb6c039bb 100644 --- a/packages/gitbook/src/components/PageBody/PageBodyBlankslate.tsx +++ b/packages/gitbook/src/components/PageBody/PageBodyBlankslate.tsx @@ -71,13 +71,13 @@ export async function PageBodyBlankslate(props: { className={tcls( 'grid', 'max-w-3xl', - 'page-full-width:max-w-screen-2xl', + 'page-width-wide:max-w-screen-2xl', 'w-full', 'mx-auto', 'gap-4', 'grid-cols-1', 'sm:grid-cols-2', - 'page-full-width:md:grid-cols-3' + 'page-width-wide:md:grid-cols-3' )} > {pageElements} diff --git a/packages/gitbook/src/components/PageBody/PageCover.tsx b/packages/gitbook/src/components/PageBody/PageCover.tsx index 9c8113e8dd..5e52ddf8a4 100644 --- a/packages/gitbook/src/components/PageBody/PageCover.tsx +++ b/packages/gitbook/src/components/PageBody/PageCover.tsx @@ -95,7 +95,7 @@ export async function PageCover(props: { : [ 'sm:mx-auto', 'max-w-3xl ', - 'page-full-width:max-w-screen-2xl', + 'page-width-wide:max-w-screen-2xl', 'sm:rounded-md', 'mb-8', ] diff --git a/packages/gitbook/src/components/PageBody/PageFooterNavigation.tsx b/packages/gitbook/src/components/PageBody/PageFooterNavigation.tsx index 465eb81ca7..1e9df3be27 100644 --- a/packages/gitbook/src/components/PageBody/PageFooterNavigation.tsx +++ b/packages/gitbook/src/components/PageBody/PageFooterNavigation.tsx @@ -34,7 +34,7 @@ export async function PageFooterNavigation(props: { 'mt-6', 'gap-2', 'max-w-3xl', - 'page-full-width:max-w-screen-2xl', + 'page-width-wide:max-w-screen-2xl', 'mx-auto', 'text-tint' )} diff --git a/packages/gitbook/src/components/PageBody/PageHeader.tsx b/packages/gitbook/src/components/PageBody/PageHeader.tsx index 89390ce3fe..355bd26801 100644 --- a/packages/gitbook/src/components/PageBody/PageHeader.tsx +++ b/packages/gitbook/src/components/PageBody/PageHeader.tsx @@ -25,7 +25,7 @@ export async function PageHeader(props: {
{ // We use the header as it's an element preserved between page transitions @@ -23,12 +23,12 @@ export function PreservePageLayout(props: { asFullWidth: boolean }) { return; } - if (asFullWidth) { - header.classList.add('site-full-width'); + if (siteWidthWide) { + header.classList.add('site-width-wide'); } else { - header.classList.remove('site-full-width'); + header.classList.remove('site-width-wide'); } - }, [asFullWidth]); + }, [siteWidthWide]); return null; } diff --git a/packages/gitbook/src/components/SitePage/SitePageSkeleton.tsx b/packages/gitbook/src/components/SitePage/SitePageSkeleton.tsx index 7b840afbb0..2f18c0b8c6 100644 --- a/packages/gitbook/src/components/SitePage/SitePageSkeleton.tsx +++ b/packages/gitbook/src/components/SitePage/SitePageSkeleton.tsx @@ -19,7 +19,7 @@ export function SitePageSkeleton() { 'lg:items-start' )} > -
+
diff --git a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx index 6a77fcd799..c22ba13bbe 100644 --- a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx +++ b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx @@ -87,7 +87,7 @@ export function SpaceLayout(props: { 'flex-col', 'lg:flex-row', CONTAINER_STYLE, - 'site-full-width:max-w-full', + 'site-width-wide:max-w-full', // Ensure the footer is display below the viewport even if the content is not enough withFooter && 'min-h-[calc(100vh-64px)]', diff --git a/packages/gitbook/src/components/layout.ts b/packages/gitbook/src/components/layout.ts index 6a9b39a982..4f6579ab6a 100644 --- a/packages/gitbook/src/components/layout.ts +++ b/packages/gitbook/src/components/layout.ts @@ -14,7 +14,6 @@ export const CONTAINER_STYLE: ClassValue = [ 'md:px-8', 'max-w-screen-2xl', 'mx-auto', - // 'site-full-width:max-w-full', ]; /** diff --git a/packages/gitbook/tailwind.config.ts b/packages/gitbook/tailwind.config.ts index 363c0ca671..d7996a637d 100644 --- a/packages/gitbook/tailwind.config.ts +++ b/packages/gitbook/tailwind.config.ts @@ -537,9 +537,9 @@ const config: Config = { /** * Variant when the page contains a block that will be rendered in full-width mode. */ - addVariant('site-full-width', 'body:has(.site-full-width) &'); - addVariant('site-default-width', 'body:has(.site-default-width) &'); - addVariant('page-full-width', 'body:has(.page-full-width) &'); + addVariant('site-width-wide', 'body:has(.site-width-wide) &'); + addVariant('site-width-default', 'body:has(.site-width-default) &'); + addVariant('page-width-wide', 'body:has(.page-width-wide) &'); /** * Variant when the page is configured to hide the table of content. From bf892bce7105c58db4a4503af3de7bb6c4c442f9 Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Wed, 9 Jul 2025 15:50:10 +0200 Subject: [PATCH 5/6] Fix alignment --- packages/gitbook/src/components/DocumentView/Blocks.tsx | 4 ++-- packages/gitbook/src/components/DocumentView/Heading.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/gitbook/src/components/DocumentView/Blocks.tsx b/packages/gitbook/src/components/DocumentView/Blocks.tsx index cdb165cb6f..1fa50dd7fd 100644 --- a/packages/gitbook/src/components/DocumentView/Blocks.tsx +++ b/packages/gitbook/src/components/DocumentView/Blocks.tsx @@ -85,10 +85,10 @@ export function UnwrappedBlocks(props: UnwrappedBl key={node.key || `${node.type}-${index}`} block={node} style={[ - 'mx-auto w-full decoration-primary/6', + 'site-width-default:mx-auto w-full decoration-primary/6', node.data && 'fullWidth' in node.data && node.data.fullWidth ? 'max-w-screen-2xl' - : 'page-width-wide:ml-0 max-w-3xl', + : 'max-w-3xl', FULL_WIDTH_BLOCKS.includes(node.type) && 'page-width-wide:max-w-screen-2xl', blockStyle, ]} diff --git a/packages/gitbook/src/components/DocumentView/Heading.tsx b/packages/gitbook/src/components/DocumentView/Heading.tsx index 9ac7476f69..6603df0e1e 100644 --- a/packages/gitbook/src/components/DocumentView/Heading.tsx +++ b/packages/gitbook/src/components/DocumentView/Heading.tsx @@ -26,6 +26,7 @@ export function Heading(props: BlockProps) { 'heading', 'grid', 'scroll-m-12', + getTextAlignment(block.data.align), hashLinkButtonWrapperStyles, style )} From 11e9f108d95ab171c08f93a90939d404598108fa Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Wed, 9 Jul 2025 16:13:21 +0200 Subject: [PATCH 6/6] Update Blocks.tsx --- packages/gitbook/src/components/DocumentView/Blocks.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gitbook/src/components/DocumentView/Blocks.tsx b/packages/gitbook/src/components/DocumentView/Blocks.tsx index 1fa50dd7fd..be09f2b42d 100644 --- a/packages/gitbook/src/components/DocumentView/Blocks.tsx +++ b/packages/gitbook/src/components/DocumentView/Blocks.tsx @@ -85,7 +85,7 @@ export function UnwrappedBlocks(props: UnwrappedBl key={node.key || `${node.type}-${index}`} block={node} style={[ - 'site-width-default:mx-auto w-full decoration-primary/6', + 'mx-auto page-width-wide:mx-0 w-full decoration-primary/6', node.data && 'fullWidth' in node.data && node.data.fullWidth ? 'max-w-screen-2xl' : 'max-w-3xl',