Docs

There are a few components to create documentation pages.

Docs Structure

Create a route structure like this:

src/routes
├── docs
|   ├── [[slug]]
|   |   ├── content
|   |   |   ├── Index.svelte
|   |   |   ├── ...
|   |   ├── +page.svelte
|   |   ├── +page.ts
|   |   ├── docs.ts

First, define the docs categories and pages in the docs.ts file.

export const categories = [
    {
        name: 'Getting Started',
        pages: [
            {
                name: 'Introduction',
                slug: 'introduction'
            },
            {
                name: 'Installation',
                slug: 'installation'
            }
        ]
    },
    ...
] as Category[];
export const pages = categories.reduce((acc, category) => acc.concat(category.pages), [] as Page[]);

interface Category {
    name: string,
    pages: Page[]
}

interface Page {
    slug: string,
    name: string,
    component: ComponentType
}

Then, load the docs content in the page.ts file.

import { error } from "@sveltejs/kit";
import { pages } from "./docs";

export async function load({ params }) {
    const slug = params.slug;
    const page = slug === undefined ? pages[0] : pages.find(p => p.slug === slug);

    if(!page) {
        error(404, 'Not found');
    }

    return {
        slug: params.slug,
        name: page.name,
        component: page.component
    }
}

Then, design the layout in the +page.svelte file using the data from the previous step.

<script lang="ts">
    import { 
        Docs, 
        DocsNav as Nav, 
        DocsNavCategory as NavCategory, 
        DocsNavItem as NavItem, 
        DocsContent as Content
    } from '@hyvor/design/marketing';
    import { categories } from "./docs";
    export let data;
</script>
<Docs>
    <Nav slot="nav">
        {#each categories as category}
            <NavCategory name={category.name}>
                {#each category.pages as page}
                    <NavItem 
                        href={page.slug === '' ? '/docs' : `/docs/${page.slug}`}
                    >{page.name}</NavItem>
                {/each}
            </NavCategory>
        {/each}
    </Nav>
    <Content slot="content">
        <svelte:component this={data.component} />
    </Content>
</Docs>

Content Components

There are a few components to create content pages.

DocsImage

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

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

Document

This component is used for documents such as privacy policy, terms of service, etc. It supports headings, paragraphs, lists, and hr tags.

<script lang="ts">
    import { Document } from '@hyvor/design/marketing';
</script>

<Document title="Titles goes here" subtitle="Subtitle goes here">
    <p>Content goes here</p>
</Document>