Add fullwidth page option

.changeset/fuzzy-bulldogs-listen.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Add fullwidth page option

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

@@ -47,6 +47,23 @@ type UnwrappedBlocksProps<TBlock extends DocumentBlock> = 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<TBlock extends DocumentBlock>(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}

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',

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

@@ -40,7 +40,7 @@ export function PageBody(props: {
               LINK_PREVIEW_MAX_COUNT
           )
         : 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;

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

@@ -71,11 +71,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}