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 diff --git a/packages/gitbook/src/components/DocumentView/Blocks.tsx b/packages/gitbook/src/components/DocumentView/Blocks.tsx index 4bbe605d87..be09f2b42d 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. */ @@ -68,10 +85,11 @@ export function UnwrappedBlocks(props: UnwrappedBl key={node.key || `${node.type}-${index}`} block={node} style={[ - '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' - : 'page-full-width:ml-0 max-w-3xl', + : '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/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 )} 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 1bf4a84281..6eb6c039bb 100644 --- a/packages/gitbook/src/components/PageBody/PageBodyBlankslate.tsx +++ b/packages/gitbook/src/components/PageBody/PageBodyBlankslate.tsx @@ -71,11 +71,13 @@ export async function PageBodyBlankslate(props: { className={tcls( 'grid', 'max-w-3xl', + 'page-width-wide:max-w-screen-2xl', 'w-full', 'mx-auto', 'gap-4', 'grid-cols-1', - 'sm:grid-cols-2' + 'sm:grid-cols-2', + '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 d974319ff3..34f97f7446 100644 --- a/packages/gitbook/src/components/PageBody/PageHeader.tsx +++ b/packages/gitbook/src/components/PageBody/PageHeader.tsx @@ -30,7 +30,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 4f7e76a37a..cd97c59467 100644 --- a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx +++ b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx @@ -88,7 +88,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 90211f8be0..e606215db8 100644 --- a/packages/gitbook/tailwind.config.ts +++ b/packages/gitbook/tailwind.config.ts @@ -560,9 +560,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.