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.js';
  import {tomes} from '$routes/docs/tomes.js';

  const {children} = $props();

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

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

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