Docs #

Docs is the top-level component behind fuz_ui's docs system, which is used to construct this page, and all of the other /docs pages in the Fuz stack. It has a three-column responsive layout with managed navigation and uses ordinary SvelteKit patterns: it takes an array of Tomes and renders the current page as children, so it lives in a +layout.svelte wrapping your docs routes.

It requires two contexts: site_context (a SiteState for components like Breadcrumb) set once at the root layout (typically the root, anywhere up the tree works), and library_context (a Library) set in the docs layout:

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import {SiteState, site_context} from '@fuzdev/fuz_ui/site.svelte.js';
  import pkg_json from 'virtual:pkg.json';

  site_context.set(new SiteState({pkg_json}));
</script>

<!-- src/routes/docs/+layout.svelte -->
<script lang="ts">
  import Docs from '@fuzdev/fuz_ui/Docs.svelte';
  import {Library, library_context} from '@fuzdev/fuz_ui/library.svelte.js';
  import {library_json} from '#routes/library.ts';
  import {tomes} from '#routes/docs/tomes.ts';

  const {children} = $props();

  const library = new Library(library_json);
  library_context.set(() => library);
</script>

<Docs {tomes}>
  {@render children()}
</Docs>

Optional snippets add to the layout: primary_nav renders in the top bar after the breadcrumb, secondary_nav_header and secondary_nav_footer above and below the tome menu (in the sidebar, and in the menu dialog on narrow screens, where the top bar has little room), and footer replaces the default footer, which links to fuz.dev:

<Docs {tomes}>
  {#snippet primary_nav()}
    <a href={resolve('/results')}>results</a>
  {/snippet}
  {#snippet footer()}
    <DocsFooter repo_url={site.repo_url} />
  {/snippet}
  {@render children()}
</Docs>

For live and complete examples, see the docs layouts in fuz_ui or fuz_css.