Documenting Pages

We provide a starter template for new documentation pages in /src/routes/(inner)/template/+page.svelte. This implements our Doc Shell component, which ensures a consistent layout for all feature pages.

Using the Doc Shell

This covers accessability details, source links, keyboard interactions, classes, parameters, and more.

Reference all available Doc Shell settings from the Typescript interface.

View Available Settings

Implementing Sveld

Use the following format to import component data from Sveld. Note the unique naming structure and how ?raw&sveld is appended at the end.

typescript

import sveldAccordion from '@skeletonlabs/skeleton/components/Accordion/Accordion.svelte?raw&sveld';

Each imported Sveld component reference is then passed to the DocsShellSettings via components.

typescript

const settings: DocsShellSettings = {
	// ...
	components: [
		{ label: 'Accordion', sveld: sveldAccordion }
	]
	// ...
};

Providing Examples

Make sure to provide at least one featured example at the top of the page within the sandbox slot. Feature examples can be presented using the DocsPreview component, which provides a number of slots and properties.

html

<DocsPreview>
	<svelte:fragment slot="preview">
		<p>(the visible example)</p>
	</svelte:fragment>
	<svelte:fragment slot="source">
		<p>(codeblocks and implementation details)</p>
	</svelte:fragment>
</DocsPreview>

Usage

The bulk of your documentation can be inserted into the usage slot for the Doc Shell. We recommend you view existing documentation pages to reference how we implement the usage page structure.