Docs

The Docs component renders a full documentation site: a collapsible nav with breadcrumbs, the page content, and a table of contents sidebar generated from the page's headings. It is fully mobile responsive.

Folder Structure

Create a route structure like this:

src/routes
├── my-docs
│   ├── [[slug]]
│   │   ├── docs
│   │   │   ├── Introduction.svelte
│   │   │   ├── Installation.svelte
│   │   │   ├── ...
│   │   ├── +page.svelte
│   │   ├── +page.ts

Each file in docs is a plain Svelte component that renders the content of a single page - headings, paragraphs, code blocks, images, or whatever else the page needs.

In +page.ts, build a NavSectionConfig[] tree describing every page and pass it, along with the current slug, to loadDocsPage inside the load function.

import { loadDocsPage } from '@hyvor/design/marketing';
import type { NavSectionConfig } from '@hyvor/design/marketing';
import Introduction from './docs/Introduction.svelte';
import Installation from './docs/Installation.svelte';
import Configuration from './docs/Configuration.svelte';

const SECTIONS: NavSectionConfig[] = [
    {
        navs: [
            { type: 'page', name: 'Introduction', slug: '', content: Introduction }
        ]
    },
    {
        name: 'Getting Started',
        navs: [
            { type: 'page', name: 'Installation', slug: 'installation', content: Installation },
            { type: 'page', name: 'Configuration', slug: 'configuration', content: Configuration }
        ]
    }
];

export async function load({ params }) {
    return loadDocsPage({
        basepath: '/my-docs',
        sections: SECTIONS,
        slug: params.slug ?? ''
    });
}

A NavSectionConfig is a group of nav items with an optional name, shown as a heading above the group (omit it for an untitled top group, as with "Introduction" above). Each item inside navs is a NavConfig, one of three types:

  • page - a leaf page. Needs a unique slug and a content component. Set wide: true on a page to make it take the full content width, with no fixed reading column and no table of contents sidebar - useful for API references.
  • folding-section - a collapsible group of nav items, nested inline in the same nav list.
  • sub-section - an entirely separate NavSectionConfig[] tree, reached by navigating to it. The nav swaps to show only that sub-section's own items, and a breadcrumb (e.g. "Docs -> Self Hosting") appears above it to navigate back out. Useful for keeping large, self-contained parts of the docs out of the main nav list. Sub-sections can be nested within each other, and within folding sections.
{
    type: 'folding-section',
    name: 'Guides',
    navs: [
        { type: 'page', name: 'Overview', slug: 'guides-overview', content: GuidesOverview }
    ]
}

{
    type: 'sub-section',
    name: 'Self Hosting',
    sections: [
        {
            navs: [
                {
                    type: 'page',
                    name: 'Installation',
                    slug: 'self-hosting-installation',
                    content: SelfHostingInstallation
                }
            ]
        }
    ]
}

The root breadcrumb label defaults to "Docs" - pass rootName to loadDocsPage to customize it.

The Page Component

In +page.svelte, render the Docs component with the data returned by load. Wrap it with your own header/footer as needed (see Page Structure).

<script lang="ts">
    import { Docs } from '@hyvor/design/marketing';
    let { data } = $props();
</script>

<Docs {...data} />

Content Components

There are a few components to use inside your content pages.

DocsImage

<script>
    import { DocsImage } from '@hyvor/design/marketing';
    import img from './img.png';
</script>

<DocsImage src={img} alt="Desert" />
img