Skip to content

Commit 4fb2a4a

Browse files
zenoachtigconico974
zenoachtig
and
conico974
authored
Rework full-width layout, add support for full-width page option (#3293)
Co-authored-by: conico974 <[email protected]>
1 parent 2d64c78 commit 4fb2a4a

File tree

18 files changed

+63
-42
lines changed

18 files changed

+63
-42
lines changed

‎.changeset/long-cameras-protect.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"gitbook": minor
3+
---
4+
5+
Rework full-width layout, add support for full-width page option

‎packages/gitbook/src/components/DocumentView/Blocks.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,8 @@ export function UnwrappedBlocks<TBlock extends DocumentBlock>(props: UnwrappedBl
7070
style={[
7171
'mx-auto w-full decoration-primary/6',
7272
node.data && 'fullWidth' in node.data && node.data.fullWidth
73-
? 'max-w-screen-xl'
74-
: 'max-w-3xl',
73+
? 'max-w-screen-2xl'
74+
: 'page-full-width:ml-0 max-w-3xl',
7575
blockStyle,
7676
]}
7777
isEstimatedOffscreen={isOffscreen}

‎packages/gitbook/src/components/DocumentView/Columns/Columns.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export function Columns(props: BlockProps<DocumentBlockColumns>) {
1919
ancestorBlocks={[...ancestorBlocks, block, columnBlock]}
2020
context={context}
2121
blockStyle="flip-heading-hash"
22-
style="w-full space-y-4"
22+
style="w-full space-y-4 *:max-w-full"
2323
/>
2424
</Column>
2525
);

‎packages/gitbook/src/components/DocumentView/Divider.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,5 @@ import type { BlockProps } from './Block';
77
export function Divider(props: BlockProps<DocumentBlockDivider>) {
88
const { style } = props;
99

10-
return <hr className={tcls(style, 'border-tint-subtle')} />;
10+
return <hr className={tcls(style, 'page-full-width:max-w-full border-tint-subtle')} />;
1111
}

‎packages/gitbook/src/components/Footer/Footer.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,16 @@ export function Footer(props: { context: GitBookSiteContext }) {
3636
<div className={tcls(CONTAINER_STYLE, 'px-4', 'py-8', 'lg:py-12', 'mx-auto')}>
3737
<div
3838
className={tcls(
39-
'mx-auto grid max-w-3xl justify-between gap-12 lg:max-w-none',
39+
'lg:!max-w-none mx-auto grid max-w-3xl site-full-width:max-w-screen-2xl justify-between gap-12',
4040
'grid-cols-[auto_auto]',
4141
'lg:grid-cols-[18rem_minmax(auto,_48rem)_auto]',
4242
'xl:grid-cols-[18rem_minmax(auto,_48rem)_14rem]',
43+
'site-full-width:lg:grid-cols-[18rem_minmax(auto,_80rem)_auto]',
44+
'site-full-width:xl:grid-cols-[18rem_minmax(auto,_80rem)_14rem]',
4345
'page-no-toc:lg:grid-cols-[minmax(auto,_48rem)_auto]',
44-
'page-no-toc:xl:grid-cols-[14rem_minmax(auto,_48rem)_14rem]'
46+
'page-no-toc:xl:grid-cols-[14rem_minmax(auto,_48rem)_14rem]',
47+
'[body:has(.site-full-width,.page-no-toc)_&]:lg:grid-cols-[minmax(auto,_90rem)_auto]',
48+
'[body:has(.site-full-width,.page-no-toc)_&]:xl:grid-cols-[14rem_minmax(auto,_90rem)_14rem]'
4549
)}
4650
>
4751
{
@@ -102,7 +106,7 @@ export function Footer(props: { context: GitBookSiteContext }) {
102106
'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'
103107
)}
104108
>
105-
<div className="mx-auto flex max-w-3xl flex-col gap-10 sm:flex-row sm:gap-6">
109+
<div className="mx-auto flex max-w-3xl site-full-width:max-w-screen-2xl flex-col gap-10 sm:flex-row sm:gap-6">
106110
{partition(customization.footer.groups, FOOTER_COLUMNS).map(
107111
(column, columnIndex) => (
108112
<div

‎packages/gitbook/src/components/Header/Header.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -104,11 +104,9 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
104104
'lg:basis-40',
105105
'md:max-w-[40%]',
106106
'lg:max-w-lg',
107-
'lg:ml-[max(calc((100%-18rem-48rem-3rem)/2),1.5rem)]', // container (100%) - sidebar (18rem) - content (48rem) - margin (3rem)
107+
'lg:ml-[max(calc((100%-18rem-48rem)/2),1.5rem)]', // container (100%) - sidebar (18rem) - content (48rem)
108108
'xl:ml-[max(calc((100%-18rem-48rem-14rem-3rem)/2),1.5rem)]', // container (100%) - sidebar (18rem) - content (48rem) - outline (14rem) - margin (3rem)
109109
'page-no-toc:lg:ml-[max(calc((100%-18rem-48rem-18rem-3rem)/2),0rem)]',
110-
'page-full-width:lg:ml-[max(calc((100%-18rem-103rem-3rem)/2),1.5rem)]',
111-
'page-full-width:2xl:ml-[max(calc((100%-18rem-96rem-14rem+3rem)/2),1.5rem)]',
112110
'md:mr-auto',
113111
'order-last',
114112
'md:order-[unset]',
@@ -195,7 +193,6 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
195193
<div
196194
className={tcls(
197195
CONTAINER_STYLE,
198-
'page-default-width:max-w-[unset]',
199196
'grow',
200197
'flex',
201198
'items-end',

‎packages/gitbook/src/components/PageAside/PageAside.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,9 @@ export function PageAside(props: {
4848
'group/aside',
4949
'hidden',
5050
'xl:flex',
51-
// 'page-no-toc:lg:flex',
5251
'flex-col',
5352
'basis-56',
54-
// 'page-no-toc:basis-40',
55-
// 'page-no-toc:xl:basis-56',
53+
'xl:ml-12',
5654
'grow-0',
5755
'shrink-0',
5856
'break-anywhere', // To prevent long words in headings from breaking the layout

‎packages/gitbook/src/components/PageBody/PageBody.tsx

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,9 @@ export function PageBody(props: {
2727
const { page, context, ancestors, document, withPageFeedback } = props;
2828
const { customization } = context;
2929

30-
const asFullWidth = document ? hasFullWidthBlock(document) : false;
30+
const contentFullWidth = document ? hasFullWidthBlock(document) : false;
31+
const pageFullWidth = page.id === 'wtthNFMqmEQmnt5LKR0q';
32+
const asFullWidth = pageFullWidth || contentFullWidth;
3133
const language = getSpaceLanguage(customization);
3234
const updatedAt = page.updatedAt ?? page.createdAt;
3335

@@ -36,15 +38,11 @@ export function PageBody(props: {
3638
<main
3739
className={tcls(
3840
'relative min-w-0 flex-1',
39-
'py-8 lg:px-12',
41+
'mx-auto max-w-screen-2xl py-8',
4042
// Allow words to break if they are too long.
4143
'break-anywhere',
42-
// When in api page mode without the aside, we align with the border of the main content
43-
'page-api-block:xl:max-2xl:pr-0',
44-
// Max size to ensure one column in api is aligned with rest of content (2 x 3xl) + (gap-3 + 2) * px-12
45-
'page-api-block:mx-auto page-api-block:max-w-screen-2xl',
46-
// page.layout.tableOfContents ? null : 'xl:ml-56',
47-
asFullWidth ? 'page-full-width' : 'page-default-width',
44+
pageFullWidth ? 'page-full-width 2xl:px-8' : 'page-default-width',
45+
asFullWidth ? 'site-full-width' : 'site-default-width',
4846
page.layout.tableOfContents ? 'page-has-toc' : 'page-no-toc'
4947
)}
5048
>
@@ -81,7 +79,7 @@ export function PageBody(props: {
8179
<PageFooterNavigation context={context} page={page} />
8280
) : null}
8381

84-
<div className="mx-auto mt-6 page-api-block:ml-0 flex max-w-3xl flex-row flex-wrap items-center gap-4 text-tint contrast-more:text-tint-strong">
82+
<div className="mx-auto mt-6 page-api-block:ml-0 flex max-w-3xl page-full-width:max-w-screen-2xl flex-row flex-wrap items-center gap-4 text-tint contrast-more:text-tint-strong">
8583
{updatedAt ? (
8684
<p className="mr-auto text-sm">
8785
{t(language, 'page_last_modified', <DateRelative value={updatedAt} />)}

‎packages/gitbook/src/components/PageBody/PageCover.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,20 @@ export async function PageCover(props: {
3434
? [
3535
'sm:-mx-6',
3636
'md:-mx-8',
37-
'-lg:mr-8',
38-
'lg:ml-0',
37+
'lg:-mr-8',
38+
'lg:-ml-12',
3939
!page.layout.tableOfContents &&
4040
context.customization.header.preset !== 'none'
41-
? 'xl:-ml-64'
41+
? 'xl:-ml-[19rem]'
4242
: null,
4343
]
44-
: ['sm:mx-auto', 'max-w-3xl', 'sm:rounded-md', 'mb-8']
44+
: [
45+
'sm:mx-auto',
46+
'max-w-3xl ',
47+
'page-full-width:max-w-screen-2xl',
48+
'sm:rounded-md',
49+
'mb-8',
50+
]
4551
)}
4652
>
4753
<Image

‎packages/gitbook/src/components/PageBody/PageFooterNavigation.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ export async function PageFooterNavigation(props: {
3232
'mt-6',
3333
'gap-2',
3434
'max-w-3xl',
35+
'page-full-width:max-w-screen-2xl',
3536
'mx-auto',
36-
'page-api-block:ml-0',
3737
'text-tint'
3838
)}
3939
>

‎packages/gitbook/src/components/PageBody/PageHeader.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,14 @@ export async function PageHeader(props: {
2323

2424
return (
2525
<header
26-
className={tcls('max-w-3xl', 'mx-auto', 'mb-6', 'space-y-3', 'page-api-block:ml-0')}
26+
className={tcls(
27+
'max-w-3xl',
28+
'page-full-width:max-w-screen-2xl',
29+
'mx-auto',
30+
'mb-6',
31+
'space-y-3',
32+
'page-api-block:ml-0'
33+
)}
2734
>
2835
{ancestors.length > 0 && (
2936
<nav>

‎packages/gitbook/src/components/PageBody/PreservePageLayout.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import * as React from 'react';
33

44
/**
55
* This component preserves the layout of the page while loading a new one.
6-
* This approach is needed as page layout (full width block) is done using CSS (`body:has(.page-full-width)`),
6+
* This approach is needed as page layout (full width block) is done using CSS (`body:has(.full-width)`),
77
* which becomes false while transitioning between the 2 page states:
88
*
9-
* 1. Page 1 with full width block: `body:has(.page-full-width)` is true
10-
* 2. Loading skeleton while transitioning to page 2: `body:has(.page-full-width)` is false
11-
* 3. Page 2 with full width block: `body:has(.page-full-width)` is true
9+
* 1. Page 1 with full width block: `body:has(.site-full-width)` is true
10+
* 2. Loading skeleton while transitioning to page 2: `body:has(.site-full-width)` is false
11+
* 3. Page 2 with full width block: `body:has(.site-full-width)` is true
1212
*
1313
* This component ensures that the layout is preserved while transitioning between the 2 page states (in step 2).
1414
*/
@@ -24,9 +24,9 @@ export function PreservePageLayout(props: { asFullWidth: boolean }) {
2424
}
2525

2626
if (asFullWidth) {
27-
header.classList.add('page-full-width');
27+
header.classList.add('site-full-width');
2828
} else {
29-
header.classList.remove('page-full-width');
29+
header.classList.remove('site-full-width');
3030
}
3131
}, [asFullWidth]);
3232

‎packages/gitbook/src/components/RootLayout/globals.css

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -143,10 +143,6 @@
143143
margin-right: 0;
144144
width: calc(100% - var(--scrollbar-width));
145145
}
146-
body:has(.page-full-width) .scroll-nojump {
147-
margin-left: 0;
148-
width: 100%;
149-
}
150146
}
151147

152148
.elevate-link {

‎packages/gitbook/src/components/SitePage/SitePageSkeleton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export function SitePageSkeleton() {
1919
'lg:items-start'
2020
)}
2121
>
22-
<div className={tcls('flex-1', 'max-w-3xl', 'mx-auto', 'page-full-width:mx-0')}>
22+
<div className={tcls('flex-1', 'max-w-3xl', 'mx-auto', 'site-full-width:mx-0')}>
2323
<SkeletonHeading style={tcls('mb-8')} />
2424
<SkeletonParagraph style={tcls('mb-4')} />
2525
</div>

‎packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ export function SpaceLayout(props: {
7373
'flex-col',
7474
'lg:flex-row',
7575
CONTAINER_STYLE,
76+
'site-full-width:max-w-full',
7677

7778
// Ensure the footer is display below the viewport even if the content is not enough
7879
withFooter && 'min-h-[calc(100vh-64px)]',

‎packages/gitbook/src/components/TableOfContents/TableOfContents.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export function TableOfContents(props: {
3535
'relative',
3636
'z-[1]',
3737
'lg:sticky',
38+
'lg:mr-12',
3839

3940
// Server-side static positioning
4041
'lg:top-0',

‎packages/gitbook/src/components/layout.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const CONTAINER_STYLE: ClassValue = [
1414
'md:px-8',
1515
'max-w-screen-2xl',
1616
'mx-auto',
17-
'page-full-width:max-w-full',
17+
// 'site-full-width:max-w-full',
1818
];
1919

2020
/**

‎packages/gitbook/tailwind.config.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -447,6 +447,13 @@ const config: Config = {
447447
},
448448
},
449449
opacity: opacity(),
450+
screens: {
451+
sm: '640px',
452+
md: '768px',
453+
lg: '1024px',
454+
xl: '1280px',
455+
'2xl': '1536px',
456+
},
450457
},
451458
plugins: [
452459
plugin(({ addVariant }) => {
@@ -514,8 +521,9 @@ const config: Config = {
514521
/**
515522
* Variant when the page contains a block that will be rendered in full-width mode.
516523
*/
524+
addVariant('site-full-width', 'body:has(.site-full-width) &');
525+
addVariant('site-default-width', 'body:has(.site-default-width) &');
517526
addVariant('page-full-width', 'body:has(.page-full-width) &');
518-
addVariant('page-default-width', 'body:has(.page-default-width) &');
519527

520528
/**
521529
* Variant when the page is configured to hide the table of content.

0 commit comments

Comments
 (0)