ShellDocs.Components

ShellDocs.Components is the visible layer of ShellDocs. Everything you see on a rendered page : the sidebar, the header, the search dialog, the layouts, and every primitive you drop into markdown : lives in this Razor Class Library.

You already depend on it

shelldocs init adds ShellDocs.Components to your .csproj automatically. ShellDocs.Core and ShellDocs.Markdown come in transitively : nothing else to add.

Install

dotnet add package ShellDocs.Components --prerelease

What's inside

Two categories: chrome (the layout, header, sidebar, search : the site's skeleton) and content primitives (the components authors drop into markdown).

Chrome

Prop Type Default Description
DocsLayout component — Full-page layout. Two variants: TopNav (classic header + sidebar) and Sidebar (floating card, this site's variant).
DocsHeader component — Top nav bar : logo, primary nav links, theme toggle, GitHub link, search trigger.
DocsSidebar component — Sidebar nav tree : auto-populated from the content folder. Collapsible sections, active-path highlighting.
DocsSidebarHeader component — Sidebar top : brand logo + collapse toggle + search field (Sidebar variant only).
DocsFooter component — Footer band : brand, tagline, socials, columns of links.
DocsMobileBar component — Sticky top bar on mobile : hamburger opens the sidebar drawer.
DocsBreadcrumb component — Trail from root → current page, auto-derived from the nav graph.
TableOfContents component — Right-rail on-this-page nav, scroll-spy indicator.
PrevNextNav component — Bottom-of-page prev/next cards, auto-derived from nav adjacency.
SearchDialog component — Cmd+K modal with client-side substring scoring against titles, sections, and body text.
PackageSelector component — Sidebar dropdown for switching between package families.
BrandLogo component — Renders your `LogoSvg` (inline) or `LogoLight`/`LogoDark` (URLs), with a placeholder dot fallback.
ThemeToggle component — Sun/moon theme switch. Persists to localStorage.

Content primitives (author these in .md)

Prop Type Default Description
Callout component — Info / warning / danger / tip box with icon, title, body.
Steps / Step component — Numbered ordered list with a rail; badges centered on the spine.
FileTree / FileTreeItem component — Recursive project-layout diagram with folder/file glyphs.
CodeGroup / CodeTab component — Tabbed code samples. `SyncKey` groups tabs across the page.
TypeTable / TypeRow component — Props / API reference table with type-code chips and required badge.
ComponentPreview component — Declarative single-component demo with reveal-on-click source view.
MarkdownContent component — The renderer itself. `DocsPage.razor` calls this with the resolved `.md` document.

The layout variant

The two DocsLayoutVariant options shape the whole site:

Prop Type Default Description
TopNav DocsLayoutVariant — Classic docs shape : full-width header at the top spanning nav + logo + search, sidebar below on the left, TOC on the right.
Sidebar DocsLayoutVariant — Floating-card sidebar on the left, containing brand + search + nav. Content area is flush to the page background. This site uses it.
csharp 
o.LayoutVariant = DocsLayoutVariant.Sidebar;   // or TopNav

Auto-chrome

DocsLayout auto-renders <DocsBreadcrumb />, <PrevNextNav />, and <TableOfContents /> from a shared scoped service (DocsPageState). When MarkdownContent publishes the current document, all three chrome components pick up the state and render. Your DocsPage.razor collapses to a single call:

razor 
@page "/docs/{*Path:nonfile}"
@layout DocsLayout
@inject NavigationGraph Graph
@inject MarkdownRenderer Renderer

<MarkdownContent Document="@_document" />

@code {
    [Parameter] public string? Path { get; set; }
    RenderedDocument? _document;

    protected override void OnParametersSet()
    {
        var url = "/docs" + (Path is null ? "" : "/" + Path);
        var node = Graph.ResolveByUrl(url);
        if (node?.Path is not null) _document = Renderer.RenderFile(node.Path);
    }
}

No <TableOfContents Headings="..." /> boilerplate, no <SectionContent> slot wiring, no explicit <PrevNextNav Prev="_prev" Next="_next" />. All three appear automatically as long as MarkdownContent published the current document to state.

Learn more

Callout
Info / warning / danger / tip.
Card
Anchor-or-div cards with icon + title + description.
Steps
Numbered walkthrough with a rail.
CodeGroup
Tabbed code samples with cross-page sync.
FileTree
Recursive project-layout diagram.
TypeTable
Props / API reference table.