Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. ui.lukebennett.dev
Something went wrong. Try again.
2.4 kB · 84 lines
TSX
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485import { Box } from '@luke-ui/react/box';import { Heading } from '@luke-ui/react/heading';import { Prose } from '@luke-ui/react/prose';import { Stack } from '@luke-ui/react/stack';import { Text } from '@luke-ui/react/text';import type { Root } from 'fumadocs-core/page-tree';import type { TOCItemType } from 'fumadocs-core/toc';import { AnchorProvider } from 'fumadocs-core/toc';import type { ReactNode } from 'react';import { docsContentPaddingBlockStart } from '../docs-nav.js';import * as styles from './docs-article.css.js';import { DocsPager } from './docs-pager.js';import { DocsTocBar, DocsTocColumn } from './docs-toc.js';
/** Roughly 75 characters of body text; still leaves room for example frames. */const ARTICLE_MAX_INLINE_SIZE = '52rem';
interface DocsArticleProps { /** Rendered MDX body. */ children: ReactNode; /** Rendered below the description, such as the page actions. */ actions: ReactNode; description: ReactNode; title: ReactNode; toc: Array<TOCItemType>; /** Page tree that orders the previous and next links. */ tree: Root;}
/** * One documentation page: title block, MDX body, previous and next links, and the table of * contents. It renders into the `main` and `toc` areas of `DocsShell`. */export function DocsArticle({ actions, children, description, title, toc, tree,}: DocsArticleProps) { const hasToc = toc.length > 0;
return ( <AnchorProvider toc={toc}> <Box elementType="main" gridArea="main" minInlineSize="0"> {hasToc ? <DocsTocBar toc={toc} /> : null} <Box paddingBlockEnd={{ initial: 'sp64', bp768: 'sp96', }} paddingBlockStart={docsContentPaddingBlockStart} paddingInline={{ initial: 'sp16', bp768: 'sp24', bp1024: 'sp32', }} > <Box className={styles.article} elementType="article" maxInlineSize={ARTICLE_MAX_INLINE_SIZE} > <Stack elementType="header" gap="sp24" marginBlockEnd="sp48"> <Stack gap="sp24"> <Heading level={1}>{title}</Heading> {description ? ( <Text color="secondary" elementType="p" typography="lead"> {description} </Text> ) : null} </Stack> {actions} </Stack> <Prose>{children}</Prose> <DocsPager tree={tree} /> </Box> </Box> </Box> {hasToc ? <DocsTocColumn toc={toc} /> : null} </AnchorProvider> );}