DocumentationHomePagecomponent

DocumentationHomePage({ title, name, description, content, children }: TreeElementProps): ReactNode

Param	Type
`props`	`TreeElementProps`	Props for a tree element — must have a tree- prefixed type. required
`.name`	`string`	The primary identifier shown in menus, cards, and other listings. - Always set. For files this is the basename (e.g. `"array"` from `array.ts`); for directories it's the directory name; for documented symbols it's the declared name (e.g. `"getFirst"`). - `key` is typically the slugified version of `name`. required readonly
`.title`	`string`	Optional visual-only override for `name`, set only when a confident source is available (e.g. a markdown `<h1>`, a docblock title). - Renderers should fall back to `name` when `title` is missing. readonly
`.description`	`string`	Short summary used for the page's `<meta name="description">` tag — not rendered as visible page body. - Pages plumb this through `Meta.description`; `<Head>` emits the meta tag. - For visible body content (rendered inside the page) use `content` instead. readonly
`.content`	`string`	Markup source string that should be rendered as the element's visible body content. - Rendered via the `<Markup>` component (typically inside a `<Prose>` wrapper). - For Markdown files this is the file's body (the title `# h1` is lifted into `title`); for TypeScript symbols this is the JSDoc description. readonly
`.source`	`AbsolutePath`	Source location for the element — the absolute filesystem path it was extracted from. - For directories this is the directory path; for files this is the file path. - Optional: synthesised elements (e.g. `kind: "module"` documentation) have no single source. readonly
`.path`	`AbsolutePath`	Canonical site-root-relative URL path of this element (e.g. `"/schema/BooleanSchema"`), stamped by `flattenTree()`. - This is the exact URL the element renders at, and the canonical key it's registered under in `flattenTree()`. - Absent on a freshly-extracted tree — paths are derived from tree structure when the tree is flattened, not at extraction. readonly
`.children`	`TreeElements`	Children of a tree element must be other tree elements. readonly

Return
`ReactNode`	A `<Page>` with a coloured hero panel followed by the module listing.

Page renderer for the documentation site's home page — a bold coloured hero panel over the module listing.

The whole page sits in a single color="red" <Block>, so the hero panel, prose, and child cards all pick up the red tint.
The hero is a padding="5x" <Panel> with the package name centred as a <Title>.
Below the hero it renders any absorbed prose content, then the root's children (the modules) as a stack of cards.

The landing page for a documentation site — a bold coloured hero panel with the package name, sitting above the listing of every module. Swap it in for the root element via TreeRouterMapping so the home route (/) renders this instead of the generic <TreePage>.

Things to know:

The whole page sits inside one color="red" <Block>, so the hero <Panel>, prose, and child <DocumentationCard>s all inherit the red tint and re-derive together.
The hero is a padding="5x" <Panel> with the package name centred as a <Title> (center).
Below the hero it renders any absorbed README prose, then the root's children (the modules) as a stack of cards via <TreeCards>.
It consumes the same shelving/util/tree as <TreePage>, so it's a drop-in replacement for the tree-element renderer.

Usage

Wire it in as the renderer for the root tree-element so the home route uses it:

tsx

import { DocumentationHomePage, TreeApp, TreeRouterMapping } from "shelving/ui";

<TreeRouterMapping mapping={{ "tree-element": DocumentationHomePage }}>
  <TreeApp tree={tree} />
</TreeRouterMapping>

Or render a single page manually by spreading the root element's props:

tsx

import { DocumentationHomePage } from "shelving/ui";

<DocumentationHomePage {...root.props} />

Styling

DocumentationHomePage has no own CSS hooks — it composes <Page>, <Block>, <Panel>, <Title>, <Section>, and <TreeCards>, which carry their own themeable surfaces. Retheme through those, or change the hero colour via the color= on the wrapping Block.

Examples

<DocumentationHomePage {...root.props} />