diff --git a/packages/gitbook/src/components/DocumentView/Annotation/Annotation.tsx b/packages/gitbook/src/components/DocumentView/Annotation/Annotation.tsx index c0300fc01..72600864e 100644 --- a/packages/gitbook/src/components/DocumentView/Annotation/Annotation.tsx +++ b/packages/gitbook/src/components/DocumentView/Annotation/Annotation.tsx @@ -4,16 +4,13 @@ import { getNodeFragmentByType } from '@/lib/document'; import { Blocks } from '../Blocks'; import type { InlineProps } from '../Inline'; -import { Inlines } from '../Inlines'; import { AnnotationPopover } from './AnnotationPopover'; export function Annotation(props: InlineProps) { const { inline, context, document, children } = props; const fragment = getNodeFragmentByType(inline, 'annotation-body'); - const content = children ?? ( - - ); + const content = children; if (!fragment) { return <>{content}; diff --git a/packages/gitbook/src/components/DocumentView/Block.tsx b/packages/gitbook/src/components/DocumentView/Block.tsx index c9f4ef493..c44312dbe 100644 --- a/packages/gitbook/src/components/DocumentView/Block.tsx +++ b/packages/gitbook/src/components/DocumentView/Block.tsx @@ -46,7 +46,7 @@ export interface BlockProps extends DocumentContext style?: ClassValue; } -export function Block(props: BlockProps) { +export function renderBlock(props: BlockProps) { const { block, style, isEstimatedOffscreen, context } = props; const content = (() => { diff --git a/packages/gitbook/src/components/DocumentView/Blocks.tsx b/packages/gitbook/src/components/DocumentView/Blocks.tsx index 4bbe605d8..5641d271e 100644 --- a/packages/gitbook/src/components/DocumentView/Blocks.tsx +++ b/packages/gitbook/src/components/DocumentView/Blocks.tsx @@ -1,8 +1,7 @@ import type { DocumentBlock, JSONDocument } from '@gitbook/api'; import { type ClassValue, tcls } from '@/lib/tailwind'; - -import { Block } from './Block'; +import { renderBlock } from './Block'; import type { DocumentContextProps } from './DocumentView'; import { isBlockOffscreen } from './utils'; @@ -25,7 +24,7 @@ export function Blocks - + {renderUnwrappedBlocks(blocksProps)} ); } @@ -50,7 +49,9 @@ type UnwrappedBlocksProps = DocumentContextProps & /** * Renders a list of blocks without a wrapper element. */ -export function UnwrappedBlocks(props: UnwrappedBlocksProps) { +export function renderUnwrappedBlocks( + props: UnwrappedBlocksProps +) { const { nodes, blockStyle, isOffscreen: defaultIsOffscreen = false, ...contextProps } = props; let isOffscreen = defaultIsOffscreen; @@ -63,20 +64,18 @@ export function UnwrappedBlocks(props: UnwrappedBl ancestorBlocks: props.ancestorBlocks, }); - return ( - - ); + return renderBlock({ + key: node.key || `${node.type}-${index}`, + block: node, + style: [ + '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', + blockStyle, + ], + isEstimatedOffscreen: isOffscreen, + ...contextProps, + }); }); } diff --git a/packages/gitbook/src/components/DocumentView/Caption.tsx b/packages/gitbook/src/components/DocumentView/Caption.tsx index c7075e6ba..f38487f5d 100644 --- a/packages/gitbook/src/components/DocumentView/Caption.tsx +++ b/packages/gitbook/src/components/DocumentView/Caption.tsx @@ -10,7 +10,6 @@ import { getNodeFragmentByName, isNodeEmpty } from '@/lib/document'; import { type ClassValue, tcls } from '@/lib/tailwind'; import type { DocumentContextProps } from './DocumentView'; -import { Inlines } from './Inlines'; /** * Wrap a content of a block that has a potential caption. @@ -62,14 +61,6 @@ export function Caption( return (
{children}
-
- -
); } diff --git a/packages/gitbook/src/components/DocumentView/Expandable/Expandable.tsx b/packages/gitbook/src/components/DocumentView/Expandable/Expandable.tsx index d6d0ce034..2d8f07712 100644 --- a/packages/gitbook/src/components/DocumentView/Expandable/Expandable.tsx +++ b/packages/gitbook/src/components/DocumentView/Expandable/Expandable.tsx @@ -6,7 +6,6 @@ import { tcls } from '@/lib/tailwind'; import type { BlockProps } from '../Block'; import { Blocks } from '../Blocks'; -import { Inlines } from '../Inlines'; import { Details } from './Details'; export function Expandable(props: BlockProps) { @@ -54,12 +53,6 @@ export function Expandable(props: BlockProps) { 'group-open/expandable:rotate-90' )} /> - ) { @@ -46,9 +45,7 @@ export function Heading(props: BlockProps) { textStyle.lineHeight, textStyle.marginTop )} - > - - + > ); } diff --git a/packages/gitbook/src/components/DocumentView/Hint.tsx b/packages/gitbook/src/components/DocumentView/Hint.tsx index 79961ee17..975c1c733 100644 --- a/packages/gitbook/src/components/DocumentView/Hint.tsx +++ b/packages/gitbook/src/components/DocumentView/Hint.tsx @@ -3,7 +3,7 @@ import { Icon, type IconName } from '@gitbook/icons'; import { type ClassValue, tcls } from '@/lib/tailwind'; -import { Block, type BlockProps } from './Block'; +import type { BlockProps } from './Block'; import { Blocks } from './Blocks'; import { getBlockTextStyle } from './spacing'; @@ -49,17 +49,6 @@ export function Hint(props: BlockProps) { className={tcls('size-[1.2em]', 'mt-px', firstLine.lineHeight)} /> - {hasHeading ? ( - - ) : null} ) { const { inline, document, context, ancestorInlines } = props; @@ -20,12 +20,12 @@ export async function InlineLink(props: InlineProps) { if (!context.contentContext || !resolved) { return ( - + {renderInlines({ + context, + document, + nodes: inline.nodes, + ancestorInlines: [...ancestorInlines, inline], + })} ); } @@ -43,12 +43,12 @@ export async function InlineLink(props: InlineProps) { }, }} > - + {renderInlines({ + context, + document, + nodes: inline.nodes, + ancestorInlines: [...ancestorInlines, inline], + })} {isExternal ? ( ( +export function renderInlines( props: DocumentContextProps & { /** * Document being rendered. diff --git a/packages/gitbook/src/components/DocumentView/ListItem.tsx b/packages/gitbook/src/components/DocumentView/ListItem.tsx index d290de807..a9b0702d4 100644 --- a/packages/gitbook/src/components/DocumentView/ListItem.tsx +++ b/packages/gitbook/src/components/DocumentView/ListItem.tsx @@ -12,7 +12,11 @@ import { tcls } from '@/lib/tailwind'; import type { BlockProps } from './Block'; import { Blocks } from './Blocks'; -import { getBlockTextStyle } from './spacing'; + +const UNORDERED_STYLE = { + '--font-family': 'inherit', + fontSize: 'min(1em, 24px)', +}; export function ListItem(props: BlockProps) { const { block, ancestorBlocks, ...contextProps } = props; @@ -25,31 +29,15 @@ export function ListItem(props: BlockProps) { 'Invalid parent list type' ); - const blocksElement = ( - div]:mt-0', - '[&:is(h3)>div]:mt-0', - '[&:is(h4)>div]:mt-0', - // Override the "mx-auto" class from UnwrappedBlocks - 'mx-0' - )} - style="flex min-w-0 flex-1 flex-col space-y-2" - /> - ); - switch (parent.type) { case 'list-tasks': return ( - - +
  • +
    ) { className="relative" size="small" /> - +
    - +
  • ); case 'list-ordered': return ( - - - +
    +
    - - {blocksElement} - +
    + div]:mt-0', + '[&:is(h3)>div]:mt-0', + '[&:is(h4)>div]:mt-0', + // Override the "mx-auto" class from UnwrappedBlocks + 'mx-0' + )} + style="flex min-w-0 flex-1 flex-col space-y-2" + /> + ); case 'list-unordered': return ( - - - +
    +
    - - {blocksElement} - +
    + div]:mt-0', + '[&:is(h3)>div]:mt-0', + '[&:is(h4)>div]:mt-0', + // Override the "mx-auto" class from UnwrappedBlocks + 'mx-0' + )} + style="flex min-w-0 flex-1 flex-col space-y-2" + /> + ); default: assertNever(parent); @@ -125,26 +185,6 @@ function getListItemDepth(input: { return depth; } -function ListItemLI(props: { block: DocumentBlockListItem; children: React.ReactNode }) { - const textStyle = getBlockTextStyle(props.block); - return
  • {props.children}
  • ; -} - -function ListItemPrefix(props: { block: DocumentBlockListItem; children: React.ReactNode }) { - const textStyle = getBlockTextStyle(props.block); - return ( -
    - {props.children} -
    - ); -} - function getUnorderedListItemsPrefixContent(input: { depth: number }): string { switch (input.depth % 3) { case 0: diff --git a/packages/gitbook/src/components/DocumentView/Paragraph.tsx b/packages/gitbook/src/components/DocumentView/Paragraph.tsx index d407f7406..8026b779e 100644 --- a/packages/gitbook/src/components/DocumentView/Paragraph.tsx +++ b/packages/gitbook/src/components/DocumentView/Paragraph.tsx @@ -3,14 +3,18 @@ import type { DocumentBlockParagraph } from '@gitbook/api'; import { tcls } from '@/lib/tailwind'; import type { BlockProps } from './Block'; -import { Inlines } from './Inlines'; +import { renderInlines } from './Inlines'; export function Paragraph(props: BlockProps) { const { block, style, ...contextProps } = props; return (

    - + {renderInlines({ + ...contextProps, + nodes: block.nodes, + ancestorInlines: [], + })}

    ); } diff --git a/packages/gitbook/src/components/DocumentView/ReusableContent.tsx b/packages/gitbook/src/components/DocumentView/ReusableContent.tsx index ccb66babd..d61e47d6f 100644 --- a/packages/gitbook/src/components/DocumentView/ReusableContent.tsx +++ b/packages/gitbook/src/components/DocumentView/ReusableContent.tsx @@ -5,7 +5,7 @@ import { resolveContentRef } from '@/lib/references'; import type { GitBookSpaceContext } from '@v2/lib/context'; import { getDataOrNull } from '@v2/lib/data'; import type { BlockProps } from './Block'; -import { UnwrappedBlocks } from './Blocks'; +import { renderUnwrappedBlocks } from './Blocks'; export async function ReusableContent(props: BlockProps) { const { block, context, ancestorBlocks } = props; @@ -62,15 +62,13 @@ export async function ReusableContent(props: BlockProps - ); + return renderUnwrappedBlocks({ + nodes: document.nodes, + document: document, + ancestorBlocks: [...ancestorBlocks, block], + context: { + ...context, + contentContext: reusableContentContext, + }, + }); } diff --git a/packages/gitbook/src/components/SiteLayout/SiteLayout.tsx b/packages/gitbook/src/components/SiteLayout/SiteLayout.tsx index 83211354f..09e3e35af 100644 --- a/packages/gitbook/src/components/SiteLayout/SiteLayout.tsx +++ b/packages/gitbook/src/components/SiteLayout/SiteLayout.tsx @@ -1,3 +1,8 @@ +import { CookiesToast } from '@/components/Cookies'; +import { LoadIntegrations } from '@/components/Integrations'; +import { SpaceLayout } from '@/components/SpaceLayout'; +import { buildVersion } from '@/lib/build'; +import { isSiteIndexable } from '@/lib/seo'; import { CustomizationThemeMode } from '@gitbook/api'; import type { GitBookSiteContext } from '@v2/lib/context'; import type { Metadata, Viewport } from 'next'; @@ -5,17 +10,9 @@ import { NuqsAdapter } from 'nuqs/adapters/next/app'; import React from 'react'; import * as ReactDOM from 'react-dom'; -import { AdminToolbar } from '@/components/AdminToolbar'; -import { CookiesToast } from '@/components/Cookies'; -import { LoadIntegrations } from '@/components/Integrations'; -import { SpaceLayout } from '@/components/SpaceLayout'; -import { buildVersion } from '@/lib/build'; -import { isSiteIndexable } from '@/lib/seo'; - import type { VisitorAuthClaims } from '@/lib/adaptive'; import { GITBOOK_API_PUBLIC_URL, GITBOOK_ASSETS_URL, GITBOOK_ICONS_URL } from '@v2/lib/env'; import { getResizedImageURL } from '@v2/lib/images'; -import { ClientContexts } from './ClientContexts'; import { RocketLoaderDetector } from './RocketLoaderDetector'; /** @@ -48,40 +45,30 @@ export async function SiteLayout(props: { return ( - - - {children} - + {children} + - {scripts.length > 0 ? ( - <> - - {scripts.map(({ script }) => ( -