### Create New SvelteKit App (Bash)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Initialize a new SvelteKit project using the standard Svelte create command, navigate into the directory, and install dependencies.

```bash
npm create svelte mydocs
cd mydocs
npm i
```

--------------------------------

### Install KitDocs Dependencies (Bash)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Install KitDocs and its required dependencies (iconify, unplugin-icons, clsx, shiki) as development dependencies using npm.

```bash
npm i @svelteness/kit-docs @iconify-json/ri unplugin-icons clsx shiki -D
```

--------------------------------

### Scaffold SvelteKit App with KitDocs (Bash)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Use the KitDocs initializer to quickly create a new SvelteKit project with KitDocs boilerplate.

```bash
npm init @svelteness/kit-docs mydocs
```

--------------------------------

### Setting up Svelteness Kit Docs Development Environment (Shell)

Source: https://github.com/svelteness/kit-docs/blob/main/demo/README.md

Executes necessary commands to build the parent project, install dependencies, synchronize files, and start the development server for the Svelteness Kit documentation.

```sh
$ (cd ../; pnpm run build)
$ pnpm install
$ pnpm run sync
$ pnpm run dev
```

--------------------------------

### Example Sidebar Configuration Object (JS)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Shows the structure of the JavaScript object used to define the sidebar navigation in Svelteness Kit Docs, including nested categories as keys and arrays of link objects with `title` and `slug` properties.

```js
const sidebar = {
  links: {
    'First Category': [
      { title: 'First Page', slug: '/docs/first-category/first-page' },
      { title: 'Second Page', slug: '/docs/first-category/second-page' },
    ],
    'Second Category': [
      // ...
    ],
  },
};
```

--------------------------------

### Create KitDocs Meta Endpoint (JS)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Create a SvelteKit server endpoint at `src/routes/kit-docs/[slug].meta/+server.js` that handles requests for markdown meta information using `createMetaRequestHandler`.

```js
import { createMetaRequestHandler } from '@svelteness/kit-docs/node';

export const GET = createMetaRequestHandler();
```

--------------------------------

### Create KitDocs Sidebar Endpoint (JS)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Create a SvelteKit server endpoint at `src/routes/kit-docs/[dir].sidebar/+server.js` that handles requests for sidebar data using `createSidebarRequestHandler`.

```js
import { createSidebarRequestHandler } from '@svelteness/kit-docs/node';

export const GET = createSidebarRequestHandler();
```

--------------------------------

### Create KitDocs Root Layout (Svelte)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Create the main SvelteKit layout file (`src/routes/+layout.svelte`) that imports and uses the `KitDocs` component, handles meta and sidebar data, and sets page title and description.

```svelte
<script>
  import { page } from '$app/stores';

  import { KitDocs, createKitDocsLoader, createSidebarContext } from '@svelteness/kit-docs';

  /** @type {import('@svelteness/kit-docs').MarkdownMeta | null} */
  export let meta = null;

  /** @type {import('@svelteness/kit-docs').ResolvedSidebarConfig | null} */
  export let sidebar = null;

  const { activeCategory } = createSidebarContext(sidebar);

  $: category = $activeCategory ? `${$activeCategory}: ` : '';
  $: title = meta ? `${category}${meta.title} | KitDocs` : null;
  $: description = meta?.description;
</script>

<svelte:head>
  {#key $page.url.pathname}
    {#if title}
      <title>{title}</title>
    {/if}
    {#if description}
      <meta name="description" content={description} />
    {/if}
  {/key}
</svelte:head>

<KitDocs {meta}>
  <slot />
</KitDocs>
```

--------------------------------

### Create First KitDocs Markdown File (Svelte/Markdown)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Create a sample markdown file (`src/routes/docs/[...1]first-category/[...1]hello-world.md`) with frontmatter to demonstrate the basic structure of a KitDocs content file.

```svelte
---
description: My first markdown file.
---


```

--------------------------------

### Log Message in Svelte Markdown

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Demonstrates that markdown files are processed as Svelte components by including a script block that logs a message to the browser console.

```Svelte
<script>
  console.log('Markdown files are Svelte components!');
</script>
```

--------------------------------

### Writable Store Usage (With Start/Stop Functions)

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...3]runtime/[...2]stores/+page.md

Example demonstrating the use of the optional start function, which is called on the first subscription, and the returned stop function, called on the last unsubscription.

```js
import { writable } from 'svelte/store';

const count = writable(0, () => {
  console.log('got a subscriber');
  return () => console.log('no more subscribers');
});

count.set(1); // does nothing

const unsubscribe = count.subscribe((value) => {
  console.log(value);
}); // logs 'got a subscriber', then '1'

unsubscribe(); // logs 'no more subscribers'
```

--------------------------------

### Create KitDocs Root Layout Loader (JS)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Create the SvelteKit layout load function (`src/routes/+layout.js`) that uses `createKitDocsLoader` to fetch meta and sidebar data for the layout, configuring sidebar paths.

```js
import { createKitDocsLoader } from '@svelteness/kit-docs';

export const prerender = true;

/** @type {import('./$types').LayoutLoad} */
export const load = createKitDocsLoader({
  sidebar: {
    '/': null,
    '/docs': '/docs'
  }
});
```

--------------------------------

### Configure SvelteKit for Markdown (JS)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Modify the `svelte.config.js` file to include the `.md` file extension in the `extensions` array, allowing SvelteKit to process markdown files.

```js
import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  extensions: ['.svelte', '.md'],

  kit: {
    adapter: adapter()
  }
};

export default config;
```

--------------------------------

### Redirect Root Page in SvelteKit

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Shows how to create a redirect from the root path (/) to another page (/docs/first-category/first-page) using SvelteKit's `redirect` function in a `+page.js` file. The `prerender` export is set to true.

```JavaScript
import { redirect } from '@sveltejs/kit';

export const prerender = true;

/** @type {import('./$types').PageLoad} */
export function load() {
  throw redirect(307, '/docs/first-category/first-page');
}
```

--------------------------------

### Configure Vite for KitDocs and Icons (JS)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Update the `vite.config.js` file to add the `unplugin-icons` and `kitDocs` plugins to the Vite configuration, enabling icon processing and KitDocs features.

```js
import { sveltekit } from '@sveltejs/kit/vite';
import icons from 'unplugin-icons/vite';
import kitDocs from '@svelteness/kit-docs/node';

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [icons({ compiler: 'svelte' }), kitDocs(), sveltekit()]
};

export default config;
```

--------------------------------

### Add KitDocs Global TypeScript Types (TS)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Include the KitDocs global TypeScript types reference in the `src/app.d.ts` file to provide type checking for KitDocs features.

```ts
/// <reference types="@sveltejs/kit" />
/// <reference types="@svelteness/kit-docs/globals" />
// ...
```

--------------------------------

### Accessing KitDocs Metadata and Frontmatter Stores (Svelte)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

This Svelte script block demonstrates importing and accessing the `kitDocs` and `frontmatter` stores provided by `@svelteness/kit-docs`. These stores allow reactive access to the loaded Markdown metadata and frontmatter within Svelte components.

```Svelte
<script>
  import { kitDocs, frontmatter } from '@svelteness/kit-docs';

  $: console.log($kitDocs.meta);

  // shorthand for $kitDocs.meta.frontmatter
  $: console.log($frontmatter);
</script>
```

--------------------------------

### Override Meta Endpoint Slug Resolver

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Configures the `kit-docs/[slug].meta/+server.js` endpoint to use a custom function for resolving slugs to file paths. The example shows how to use the default `resolve` helper or provide an array of resolvers.

```JavaScript
import { createMetaRequestHandler } from '@svelteness/kit-docs/node';

export const GET = createMetaRequestHandler({
  // map slug to absolute or relative file path to `routes` directory.
  // returning `null` or `undefined` will fallback to default resolver.
  // `resolve` helper will return default value.
  resolve: (slug, { resolve }) => resolve(slug),

  // you can provide an array and first to resolve will be accepted.
  resolve: [(slug) => ``, null, undefined, false, async (slug) => null],
});
```

--------------------------------

### Configure Tailwind Content for Kit-Docs

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Updates the Tailwind CSS configuration file (`tailwind.config.cjs`) to include the paths for Svelte files and the kit-docs client components, ensuring Tailwind styles are applied correctly.

```JavaScript
module.exports = {
  content: [
    './src/**/*.{html,svelte}',
    './node_modules/@svelteness/kit-docs/client/kit-docs/**/*.svelte',
  ],
};
```

--------------------------------

### Combine Slug Resolution and Meta Transformation

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Shows how to return a `transform` function directly from the `resolve` function within the `kit-docs/[slug].meta/+server.js` endpoint configuration. This allows applying specific transformations based on the resolved file.

```JavaScript
import { createMetaRequestHandler } from '@svelteness/kit-docs/node';

export const GET = createMetaRequestHandler({
  resolve: (slug, { resolve }) => {
    return {
      file: resolve(slug),
      // this can also be an array of transformers.
      transform: ({ slug, filePath, meta }) => {
        // ...
      },
    };
  },
});
```

--------------------------------

### Creating KitDocs Loader with Simple Sidebar Config (Svelte)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

This Svelte script block shows how to use `createKitDocsLoader` to generate a SvelteKit `load` function. It configures the loader to build the sidebar from the specified directory path (`/docs`). This simplifies loading Markdown data into Svelte components.

```Svelte
<script context="module">
  import { createKitDocsLoader } from '@svelteness/kit-docs';

  export const load = createKitDocsLoader({ sidebar: '/docs' });
</script>
```

--------------------------------

### Add Color Scheme Script (HTML)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...2]default-layout/[...1]installation/+page.md

Adds a script to the `<head>` of `app.html` to handle color scheme detection and application based on local storage or system preference.

```html
<head>
  <!-- ... -->
  <script>
    const key = 'svelteness::color-scheme';
    const scheme = localStorage[key];
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (scheme === 'dark' || (scheme !== 'light' && prefersDark)) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  </script>
</head>
```

--------------------------------

### Filter Files for Meta Endpoint

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Configures the `kit-docs/[slug].meta/+server.js` endpoint to include or exclude files based on Rollup filter patterns (`include` and `exclude`). Patterns are matched against file paths relative to `src/routes`.

```JavaScript
import { createMetaRequestHandler } from '@svelteness/kit-docs/node';

export const GET = createMetaRequestHandler({
  // These are Rollup filter patterns.
  // Filters match against file paths relative to `src/routes` dir.
  // Paths are cleaned. No rest params `[...1]` or layout id `@...`.
  include: /\.md/,
  exclude: ['/docs/**/file.md', /some-regex/, '**/ignored-dir'],
});
```

--------------------------------

### Example Usage of Svelte Compiler Parse

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...5]compiler/[...2]parse/+page.md

An example demonstrating how to use the `svelte.parse` function. It requires the `svelte/compiler` module and calls `svelte.parse` with the source code and a filename option to get the component's AST.

```js
const svelte = require('svelte/compiler');

const ast = svelte.parse(source, { filename: 'App.svelte' });
```

--------------------------------

### Manually Loading KitDocs Meta and Sidebar Data (Svelte)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

This SvelteKit `load` function shows how to manually fetch Markdown metadata and sidebar data using `loadKitDocsMeta` and `loadKitDocsSidebar`. It retrieves meta for the current page and sidebar data for a specific path, returning them as props.

```Svelte
<script context="module">
  import { loadKitDocsMeta, loadKitDocsSidebar } from '@svelteness/kit-docs';

  /** @type {import('@sveltejs/kit').Load} */
  export async function load({ url, fetch }) {
    const meta = await loadKitDocsMeta(url.pathname, { fetch });
    const sidebar = await loadKitDocsSidebar('/docs', { url, fetch });
    return {
      props: {
        meta,
        sidebar,
      }
    }
  }
</script>
```

--------------------------------

### Implementing Copy Highlight Steps in JavaScript

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...3]markdown/[...2]extensions/+page.md

This example shows how to combine `copySteps` with line highlighting (`{1,3-5}`). Only the specified lines (1 and 3 through 5) will be highlighted and copied one by one when the user interacts with the copy button.

```js
const foo = 1;

function bar() {
  // ...
}
```

--------------------------------

### Creating KitDocs Loader with Multi-Path Sidebar Config (Svelte)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

This Svelte script block demonstrates configuring `createKitDocsLoader` with a multi-path sidebar object. The loader will select the sidebar directory based on the current route path, allowing different sidebars for different sections of the site.

```Svelte
<script context="module">
  import { createKitDocsLoader } from '@svelteness/kit-docs';

  export const load = createKitDocsLoader({
    sidebar: {
      '/': null,
      '/docs': '/docs',
      '/docs/faq': '/faq',
    }
  });
</script>
```

--------------------------------

### Using Global Svelte Components in Markdown

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

This Markdown snippet shows two ways to use Svelte components made global via the `src/kit-docs` directory: as standard HTML-like tags and as markdown containers (`:::component-name`). It demonstrates passing attributes and slot content.

```Markdown
<!-- Use the component as-is. -->
<Button />

<!-- Or, use a markdown container. -->
:::button propA="valueA"|propB=10
Default slot content here.
:::

<!-- You can pass in dynamic slot elements! -->
<!-- If you omit `tag`, it'll default to `<p>`. -->
:::button (tag=h1&slot=title)=Title
Default slot content here.
:::
```

--------------------------------

### Transform Meta Endpoint Data

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Demonstrates how to modify the meta data object returned by the `kit-docs/[slug].meta/+server.js` endpoint using a `transform` function. This allows customizing properties like title, description, frontmatter, and headers.

```JavaScript
import { createMetaRequestHandler } from '@svelteness/kit-docs/node';

export const GET = createMetaRequestHandler({
  transform: ({ slug, filePath, meta, html, links }) => {
    meta.title = '...';
    meta.description = '...';
    meta.frontmatter.prop = '...';
    meta.headers = [
      ...meta.headers,
      { level: 2, title: 'Custom Heading', slug: '#custom-heading' },
      // ...
    ];
  },

  // you can provide an array and they will all be called.
  transform: [({ slug }) => {}, null, undefined, false, async () => {}],
});
```

--------------------------------

### Implementing Copy Steps in Bash

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...3]markdown/[...2]extensions/+page.md

This code block demonstrates how to use the `copySteps` option with a bash script. Each line will be highlighted and copied sequentially upon user interaction, guiding the user through a multi-step process.

```bash
npm create svelte docs
cd docs
npm i
```

--------------------------------

### Installing Svelte Static Adapter (Bash)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...4]production/[...6]deploying/+page.md

Installs the static adapter for SvelteKit as a development dependency using npm. This adapter is required for generating static builds of the site.

```bash
npm i @sveltejs/adapter-static -D
```

--------------------------------

### Writable Store Basic Usage (Set and Update)

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...3]runtime/[...2]stores/+page.md

Example demonstrating the creation of a writable store and the usage of its subscribe, set, and update methods.

```js
import { writable } from 'svelte/store';

const count = writable(0);

count.subscribe((value) => {
  console.log(value);
}); // logs '0'

count.set(1); // logs '1'

count.update((n) => n + 1); // logs '2'
```

--------------------------------

### Copy Font Files (Bash)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...2]default-layout/[...1]installation/+page.md

Copies the theme font files from the installed package's `node_modules` directory to the project's `src/fonts` directory.

```bash
cp -R node_modules/@svelteness/kit-docs/client/fonts src/fonts
```

--------------------------------

### Markdown Input Example for Component Mapping

Source: https://github.com/svelteness/kit-docs/blob/main/packages/create-kit-docs/template-base/src/kit-docs/README.md

Provides the example Markdown syntax (`![]`, `>`, `!!!button`) that corresponds to the component mapping configuration shown in `svelte.config.js`, serving as the input for the transformation.

```markdown
![alt text](https://...)

> This is a blockquote.

!!!button
...
!!!
```

--------------------------------

### Handling Sidebar Requests in SvelteKit Server (JavaScript)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

This SvelteKit server handler demonstrates how to process incoming requests for sidebar data. It uses `paramToDir` to convert URL parameters into a directory path and `handleSidebarRequest` to fetch the sidebar data, optionally filtering results. It returns the sidebar data or null on error.

```JavaScript
import {
  handleSidebarRequest,
  paramToDir,
} from '@svelteness/kit-docs/node';

/** @type {import('@sveltejs/kit').RequestHandler} */
export function get({ params }) {
  try {
    const dir = paramToDir(params.dir);
    const sidebar = await handleSidebarRequest(dir, {
      filter: (id) => id.endsWith('.md')
    });
    return { body: sidebar };
  } catch (e) {
    // no-op
  }

  return { body: null };
}
```

--------------------------------

### Handling Meta Requests in SvelteKit Endpoint (JS)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Demonstrates how to create a SvelteKit endpoint (`+server.js`) to handle meta requests using `@svelteness/kit-docs/node`. It shows how to extract the slug from parameters, call `handleMetaRequest` to parse the file, and return the extracted meta data in the response body.

```js
import {
  handleMetaRequest,
  paramToSlug,
} from '@svelteness/kit-docs/node';

/** @type {import('@sveltejs/kit').RequestHandler} */
export function get({ params }) {
  try {
    const slug = paramToSlug(params.slug);
    const parserResult = await handleMetaRequest(slug);
    return { body: parserResult.meta };
  } catch (e) {
    // no-op
  }

  return { body: null };
}
```

--------------------------------

### Configure Tailwind Content (JS)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...2]default-layout/[...1]installation/+page.md

Adds the Svelteness Kit-Docs client files to the Tailwind CSS `content` configuration array to ensure utility classes from the library are included in the build.

```js
module.exports = {
  content: ['./src/**/*.{html,svelte}', './node_modules/@svelteness/kit-docs/client/**/*.svelte'],
};
```

--------------------------------

### Svelte Output Example from Component Mapping

Source: https://github.com/svelteness/kit-docs/blob/main/packages/create-kit-docs/template-base/src/kit-docs/README.md

Shows the resulting Svelte code (`<Image>`, `<Blockquote>`, `<Button>`) generated by `kit-docs` after processing the example Markdown input according to the component mapping configuration defined in `svelte.config.js`.

```svelte
<Image href="https://..." alt="alt text" />

<Blockquote>
  This is a blockquote.
</Blockquote>

<Button>
  ...
</Button>
```

--------------------------------

### Writable Store Signature (With Start Function)

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...3]runtime/[...2]stores/+page.md

Function signature for creating a writable store with an optional initial value and a start function that runs when the first subscriber subscribes.

```js
store = writable(value?: any, start?: (set: (value: any) => void) => () => void)
```

--------------------------------

### Define FilterPattern Type

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Provides the TypeScript definition for the `FilterPattern` type used in the `include` and `exclude` options for the meta endpoint configuration. It specifies valid types for filter patterns.

```TypeScript
/**
 * A valid \`picomatch\` glob pattern, or array of patterns.
 */
export type FilterPattern = ReadonlyArray<string | RegExp> | string | RegExp | null;
```

--------------------------------

### Setting Sidebar Title via Frontmatter (MD)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Shows how to use the `sidebar_title` property within the Markdown frontmatter block to explicitly define the title used for the page's entry in the generated sidebar, taking precedence over other title inference methods.

```md
---
sidebar_title: Custom Sidebar Title
---
```

--------------------------------

### Example of If/Else If/Else Block

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...2]template-syntax/[...1]foundation/+page.md

Provides a practical example demonstrating the use of {#if}, {:else if}, and {:else} clauses together to render different content based on multiple conditions related to porridge.temperature.

```svelte
{#if porridge.temperature > 100}\n\t<p>too hot!</p>\n{:else if 80 > porridge.temperature}\n\t<p>too cold!</p>\n{:else}\n\t<p>just right!</p>\n{/if}
```

--------------------------------

### Defining and Accessing YAML Frontmatter in Markdown

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

This Markdown snippet illustrates how to include YAML frontmatter at the top of a file, delimited by triple dashes. It shows common fields like `title` and `description` and how these values can be accessed within the Markdown content using template syntax.

```Markdown
---
title: Page Title
description: Page description.
---

# {$frontmatter.title}

{$frontmatter.description}

...
```

--------------------------------

### Formatting Sidebar Category Names in SvelteKit Endpoint (JS)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Demonstrates how to use the `formatCategoryName` option with `createSidebarRequestHandler` to provide a custom function for formatting the display names of categories in the generated sidebar. The default formatter converts `kebab-case` to `Title Case`.

```js
import { createSidebarRequestHandler } from '@svelteness/kit-docs/node';

export const GET = createSidebarRequestHandler({
  // Default formatter maps `kebab-case` to `Title Case`.
  formatCategoryName: (name, { format }) => format(name),
});
```

--------------------------------

### Filtering Sidebar Files in SvelteKit Endpoint (JS)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Explains how to use the `include` and `exclude` options with `createSidebarRequestHandler` to filter which files are processed for the sidebar. These options accept Rollup filter patterns (strings, RegExp, or arrays) that match against file paths relative to `src/routes`.

```js
import { createSidebarRequestHandler } from '@svelteness/kit-docs/node';

export const GET = createSidebarRequestHandler({
  // These are Rollup filter patterns.
  // Filters match against file paths relative to `src/routes` dir.
  // Paths are cleaned. No rest params `[...1]` or layout id `@...`.
  include: /\.md/,
  exclude: ['/docs/**/file.md', /some-regex/, '**/ignored-dir'],
});
```

--------------------------------

### Import Assets (Svelte)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...2]default-layout/[...1]installation/+page.md

Imports necessary polyfills and CSS styles (normalize, fonts, theme, vars) for the default layout into a Svelte layout file.

```svelte
<script>
  import '@svelteness/kit-docs/client/polyfills/index.js';
  import '@svelteness/kit-docs/client/styles/normalize.css';
  import '@svelteness/kit-docs/client/styles/fonts.css';
  import '@svelteness/kit-docs/client/styles/theme.css';
  import '@svelteness/kit-docs/client/styles/vars.css';
</script>
```

--------------------------------

### Add Default Layout (Svelte)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...2]default-layout/[...1]installation/+page.md

Imports the `KitDocsLayout` component and adds it to the Svelte layout markup, passing configuration for the navbar and sidebar.

```svelte
<script>
  import { KitDocsLayout } from '@svelteness/kit-docs';

  // ...

  /** @type {import('@svelteness/kit-docs').NavbarConfig} */
  const navbar = {
    links: [{ title: 'Documentation', slug: '/docs', match: /\/docs/ }],
  };
</script>

<KitDocs>
  <KitDocsLayout {navbar} {sidebar}>
    <slot />
  </KitDocsLayout>
</KitDocs>
```

--------------------------------

### Using the Scale Transition in Svelte

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...3]runtime/[...4]transitions/+page.md

Shows how to implement the `scale` transition in a Svelte component. It imports `scale` and the `quintOut` easing function. The `transition:scale` directive is used with parameters (`duration`, `delay`, `opacity`, `start`, `easing`) to control the scaling and opacity animation from a specified starting point.

```Svelte
<script>
	import { scale } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
</script>

{#if condition}
	<div transition:scale="{{duration: 500, delay: 500, opacity: 0.5, start: 0.5, easing: quintOut}}">
		scales in and out
	</div>
{/if}
```

--------------------------------

### Basic Usage Example of svelte.compile (JS)

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...5]compiler/[...1]compile/+page.md

This example demonstrates how to import the Svelte compiler module and call the `svelte.compile` function with source code and an options object to compile a Svelte component.

```js
const svelte = require('svelte/compiler');

const result = svelte.compile(source, {
  // options
});
```

--------------------------------

### Example of a Basic If Block

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...2]template-syntax/[...1]foundation/+page.md

Provides a practical example of using the {#if} block to conditionally render a paragraph based on the value of the answer variable.

```svelte
{#if answer === 42}\n\t<p>what was the question?</p>\n{/if}
```

--------------------------------

### Install Algolia Docsearch Dependencies (Bash)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...2]default-layout/[...4]search/+page.md

Installs the necessary npm packages for integrating Algolia Docsearch into your project, including the core libraries, React dependencies (required by Docsearch), and TypeScript types.

```bash
npm i @docsearch/css @docsearch/js @algolia/client-search react react-dom @types/react -D
```

--------------------------------

### Derived Store Usage (Single Store, Sync)

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...3]runtime/[...2]stores/+page.md

Example demonstrating a derived store that synchronously calculates a new value based on a single source store.

```js
import { derived } from 'svelte/store';

const doubled = derived(a, ($a) => $a * 2);
```

--------------------------------

### Derived Store Usage (Multiple Stores, Async)

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...3]runtime/[...2]stores/+page.md

Example demonstrating a derived store that asynchronously sets its value based on multiple source stores after a delay.

```js
import { derived } from 'svelte/store';

const delayed = derived([a, b], ([$a, $b], set) => {
  setTimeout(() => set($a + $b), 1000);
});
```

--------------------------------

### Importing Code File with Multiple Options

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...3]markdown/[...2]extensions/+page.md

This markdown syntax demonstrates importing an external file (`../foo.js`) and applying multiple code fence options, such as specifying the language (`js`), setting a title, enabling copying, and highlighting specific lines.

```md
@[code js|title=file.js|copy{2,4-5}](../foo.js)
```

--------------------------------

### Overriding Sidebar Resolvers in SvelteKit Endpoint (JS)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Illustrates how to customize the default resolvers (`resolveTitle`, `resolveCategory`, `resolveSlug`) when creating a sidebar request handler using `createSidebarRequestHandler` from `@svelteness/kit-docs/node`. Custom functions receive data about the file and can return a new value or use the `resolve` helper for the default.

```js
import { createSidebarRequestHandler } from '@svelteness/kit-docs/node';

export const GET = createSidebarRequestHandler({
  // `data` includes file paths, frontmatter, file content and more.
  // returning `null` or `undefined` will fallback to default resolver.
  // the `resolve` helper will return the default value.
  resolveTitle: (data) => ``,
  resolveCategory: (data) => ``,
  resolveSlug: ({ resolve }) => resolve(),
});
```

--------------------------------

### Derived Store Usage (Multiple Stores, Sync)

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...3]runtime/[...2]stores/+page.md

Example demonstrating a derived store that synchronously calculates a new value based on multiple source stores provided as an array.

```js
import { derived } from 'svelte/store';

const summed = derived([a, b], ([$a, $b]) => $a + $b);
```

--------------------------------

### Svelte In/Out Directive Example

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...2]template-syntax/[...2]element-directives/+page.md

Shows a simple example using both `in:` and `out:` directives on the same element. The element will use the `fly` transition when entering the DOM and the `fade` transition when leaving.

```svelte
{#if visible}
	<div in:fly out:fade>
		flies in, fades out
	</div>
{/if}
```

--------------------------------

### Derived Store Usage (Single Store, Async)

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...3]runtime/[...2]stores/+page.md

Example demonstrating a derived store that asynchronously sets its value after a delay, using the `set` function provided to the callback.

```js
import { derived } from 'svelte/store';

const delayed = derived(
  a,
  ($a, set) => {
    setTimeout(() => set($a), 1000);
  },
  'one moment...',
);
```

--------------------------------

### Importing Full Code File

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...3]markdown/[...2]extensions/+page.md

This markdown syntax demonstrates how to import the entire content of an external file (`../foo.js`) into a code block. The language is automatically inferred from the file extension.

```md
@[code](../foo.js)
```

--------------------------------

### Readable Store Usage (Updating Value Over Time)

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...3]runtime/[...2]stores/+page.md

Example demonstrating a readable store that updates its value periodically using an interval, and cleans up the interval when there are no subscribers.

```js
import { readable } from 'svelte/store';

const time = readable(null, (set) => {
  set(new Date());

  const interval = setInterval(() => {
    set(new Date());
  }, 1000);

  return () => clearInterval(interval);
});
```

--------------------------------

### Importing and Getting Svelte Store Value - JS

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...3]runtime/[...2]stores/+page.md

Demonstrates how to import the `get` function from 'svelte/store' and use it to retrieve the current value of a store. This method is suitable for occasional reads but involves internal subscription/unsubscription.

```js
import { get } from 'svelte/store';

const value = get(store);
```

--------------------------------

### Readable Store Signature

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...3]runtime/[...2]stores/+page.md

Function signature for creating a readable store with an optional initial value and a start function.

```js
store = readable(value?: any, start?: (set: (value: any) => void) => () => void)
```

--------------------------------

### Implementing Svelte flip Animation with Parameters

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...3]runtime/[...5]animate/+page.md

Provides a complete Svelte component example showcasing the usage of the `flip` animation function within an `#each` block. It demonstrates importing `flip` and an easing function, defining a list, and applying the `animate:flip` directive with specific `delay`, `duration`, and `easing` parameters to each element.

```svelte
<script>
	import { flip } from 'svelte/animate';
	import { quintOut } from 'svelte/easing';

	let list = [1, 2, 3];
</script>

{#each list as n (n)}
	<div animate:flip="{{delay: 250, duration: 250, easing: quintOut}}">
		{n}
	</div>
{/each}
```

--------------------------------

### Configuring Global Markdown Components in KitDocs

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...3]markdown/[...1]components/+page.md

Provides a JavaScript configuration example for the KitDocs plugin in `svelte.config.js`, demonstrating how to map global Svelte components to override default Markdown rules (like image, blockquote) or create custom containers.

```javascript
kitDocsPlugin({
  markdown: {
    components: [
      // Override inline rule.
      // `Image.svelte` must be a global component.
      { name: 'Image', type: 'inline', rule: 'image' },
      // Override block rule.
      // `Blockquote.svelte` must be a global component.
      { name: 'Blockquote', type: 'block', rule: 'blockquote' },
      // Create custom container.
      // `Button.svelte` must be a global component.
      { name: 'Button', type: 'custom', container: { marker: '!' } }
    ]
  }
});
```

--------------------------------

### Importing Partial Code File by Line Range

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...3]markdown/[...2]extensions/+page.md

This markdown syntax shows how to import only a specific range of lines (lines 1 through 10) from an external file (`../foo.js`) into a code block.

```md
@[code{1-10}](../foo.js)
```

--------------------------------

### Set Brand Colors (Svelte)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...2]default-layout/[...1]installation/+page.md

Defines CSS variables for the brand color in both light and dark modes within a Svelte style block, using RGB values.

```svelte
<style>
  :global(:root) {
    --kd-color-brand: 255 64 0;
  }

  :global(:root.dark) {
    --kd-color-brand: 255 83 26;
  }
</style>
```

--------------------------------

### Using Global Component in Markdown (Svelte)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/create-kit-docs/template-base/src/kit-docs/README.md

Demonstrates how to use a global Svelte component (`<Button>`) directly or via a Markdown container (`:::button`) within a Markdown file, including examples of passing props and dynamic slot content.

```svelte
<!-- Use the component as-is. -->
<Button />

<!-- Or, use a markdown container. -->
:::button propA="valueA"|propB=10
Default slot content here.
:::

<!-- You can pass in dynamic slot elements! -->
<!-- If you omit `tag`, it'll default to `<p>`. -->
:::button (tag=h1&slot=title)=Title
Default slot content here.
:::
```

--------------------------------

### Chaining Multiple Preprocessors Example - JavaScript

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...5]compiler/[...3]preprocess/+page.md

Demonstrates how to use an array of preprocessor objects with svelte.preprocess to apply multiple transformations sequentially. It highlights the order in which markup, script, and style functions are executed across the preprocessor chain.

```JavaScript
const svelte = require('svelte/compiler');

const { code } = await svelte.preprocess(
  source,
  [
    {
      markup: () => {
        console.log('this runs first');
      },
      script: () => {
        console.log('this runs third');
      },
      style: () => {
        console.log('this runs fifth');
      },
    },
    {
      markup: () => {
        console.log('this runs second');
      },
      script: () => {
        console.log('this runs fourth');
      },
      style: () => {
        console.log('this runs sixth');
      },
    },
  ],
  {
    filename: 'App.svelte',
  },
);
```

--------------------------------

### Derived Store Usage (Single Store, Async with Cleanup)

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...3]runtime/[...2]stores/+page.md

Example demonstrating a derived store that uses an interval to update its value asynchronously and returns a cleanup function to clear the interval when dependencies change or subscribers unsubscribe.

```js
import { derived } from 'svelte/store';

const tick = derived(
  frequency,
  ($frequency, set) => {
    const interval = setInterval(() => {
      set(Date.now());
    }, 1000 / $frequency);

    return () => {
      clearInterval(interval);
    };
  },
  'one moment...',
);
```

--------------------------------

### Defining Links in Markdown

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...3]markdown/[...2]extensions/+page.md

Demonstrates various link formats supported in Markdown, including internal paths, anchors, relative files, and external URLs. Links are automatically mapped to correct slugs.

```markdown

```

```text

```

```text

```

```text

```

--------------------------------

### Remove Fonts Directory (bash)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...2]default-layout/[...2]configuration/+page.md

Remove the default fonts folder if it was added during the initial installation process.

```bash
rm -rf src/fonts
```

--------------------------------

### Providing Multiple Code Block Options in JavaScript

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...3]markdown/[...2]extensions/+page.md

This snippet illustrates how to apply multiple options to a code block using the vertical bar `|` separator. Options include setting a title, enabling copying, and showing line numbers, combined with line highlighting.

```js
const foo = 1;

function bar() {
  // ...
}
```

--------------------------------

### Getting Sidebar Context (Svelte)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...2]default-layout/[...2]configuration/+page.md

Imports and uses the `getSidebarContext` function from `@svelteness/kit-docs` to retrieve various sidebar-related context values, such as links and active states. These values are provided as Svelte stores.

```svelte
<script>
  import { getSidebarContext } from '@svelteness/kit-docs';

  // All context values are stores (use `$` prefix).
  const {
    allLinks,
    activeLink,
    previousLink,
    nextLink,
    activeCategory,
  } = getSidebarContext();
</script>
```

--------------------------------

### Get Svelte Compiler Version (JavaScript)

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...5]compiler/[...4]version/+page.md

This snippet requires the Svelte compiler module and logs its version to the console. It's useful for verifying the installed Svelte compiler version within a project.

```js
const svelte = require('svelte/compiler');
console.log(`running svelte version ${svelte.VERSION}`);
```

--------------------------------

### Custom Style Preprocessor Example with Sass - JavaScript

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...5]compiler/[...3]preprocess/+page.md

Illustrates how to implement a 'style' preprocessor function to process CSS using a tool like node-sass. It shows how to access style content, attributes, and filename, and return the processed CSS code and a list of included dependencies.

```JavaScript
const svelte = require('svelte/compiler');
const sass = require('node-sass');
const { dirname } = require('path');

const { code, dependencies } = await svelte.preprocess(
  source,
  {
    style: async ({ content, attributes, filename }) => {
      // only process <style lang="sass">
      if (attributes.lang !== 'sass') return;

      const { css, stats } = await new Promise((resolve, reject) =>
        sass.render(
          {
            file: filename,
            data: content,
            includePaths: [dirname(filename)],
          },
          (err, result) => {
            if (err) reject(err);
            else resolve(result);
          },
        ),
      );

      return {
        code: css.toString(),
        dependencies: stats.includedFiles,
      };
    },
  },
  {
    filename: 'App.svelte',
  },
);
```

--------------------------------

### Using the Fly Transition in Svelte

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...3]runtime/[...4]transitions/+page.md

Illustrates applying the `fly` transition in Svelte. It imports `fly` and a custom easing function `quintOut`. The `transition:fly` directive is used with multiple parameters (`delay`, `duration`, `x`, `y`, `opacity`, `easing`) to control the animation's starting position, opacity, and timing.

```Svelte
<script>
	import { fly } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
</script>

{#if condition}
	<div transition:fly="{{delay: 250, duration: 300, x: 100, y: 500, opacity: 0.5, easing: quintOut}}">
		flies in and out
	</div>
{/if}
```

--------------------------------

### Importing Code File with Explicit Language

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...3]markdown/[...2]extensions/+page.md

This markdown syntax allows importing an external file (`../foo.js`) while explicitly specifying the code language (`js`), overriding the language inferred from the file extension.

```md
@[code js](../foo.js)
```

--------------------------------

### Custom Markup Preprocessor Example - JavaScript

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...5]compiler/[...3]preprocess/+page.md

Demonstrates how to create a custom 'markup' preprocessor function using 'magic-string' to modify the component's HTML content. It shows how to access the content and filename and return the transformed code along with a source map.

```JavaScript
const svelte = require('svelte/compiler');
const MagicString = require('magic-string');

const { code } = await svelte.preprocess(
  source,
  {
    markup: ({ content, filename }) => {
      const pos = content.indexOf('foo');
      if (pos < 0) {
        return { code: content };
      }
      const s = new MagicString(content, { filename });
      s.overwrite(pos, pos + 3, 'bar', { storeName: true });
      return {
        code: s.toString(),
        map: s.generateMap(),
      };
    },
  },
  {
    filename: 'App.svelte',
  },
);
```

--------------------------------

### FilterPattern Type Definition (TS)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart/+page.md

Provides the TypeScript type definition for `FilterPattern`, which specifies the valid types for the `include` and `exclude` options used in sidebar file filtering. It indicates that a pattern can be a string, a regular expression, an array of these, or null.

```ts
/**
 * A valid `picomatch` glob pattern, or array of patterns.
 */
export type FilterPattern = ReadonlyArray<string | RegExp> | string | RegExp | null;
```

--------------------------------

### Configuring Netlify Deployment (TOML)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...4]production/[...6]deploying/+page.md

Adds a netlify.toml file to the project root to configure Netlify build and deployment settings. It specifies the publish directory, the build command, and enables pretty URLs for HTML files.

```toml
[build]
  publish = "build/"
  command = "npm run build"

[build.processing.html]
  pretty_urls = true
```

--------------------------------

### Configuring SvelteKit Adapter (Diff)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...4]production/[...6]deploying/+page.md

Modifies the svelte.config.js file to switch from the default auto adapter to the static adapter. This change directs SvelteKit to build a static output suitable for static hosting.

```diff
- import adapter from '@sveltejs/adapter-auto';
+ import adapter from '@sveltejs/adapter-static';
```

--------------------------------

### Configuring Vercel Deployment (JSON)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...4]production/[...6]deploying/+page.md

Adds a vercel.json file to the project root to configure Vercel deployment settings. This specific configuration enables clean URLs for the deployed site.

```json
{
  "cleanUrls": true
}
```

--------------------------------

### Getting Svelte Store Value (Conceptual) - JS

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...3]runtime/[...2]stores/+page.md

A conceptual representation showing how the `get` function is used to retrieve the current value from a Svelte store and assign it to a variable.

```js
value: any = get(store);
```

--------------------------------

### Markdown Syntax for Configured Components

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...3]markdown/[...1]components/+page.md

Shows the Markdown syntax that corresponds to the global component configuration defined in `svelte.config.js`, demonstrating how standard Markdown syntax or custom markers trigger the configured Svelte components.

```markdown
![alt text](https://...)

> This is a blockquote.

!!!button
...
!!!
```

--------------------------------

### Creating Global Component File (Button.svelte)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/create-kit-docs/template-base/src/kit-docs/README.md

Shows the standard directory structure for placing a global Svelte component (`Button.svelte`) within the `src/kit-docs` directory, making it available for use in Markdown files.

```plaintext
src
└─ kit-docs
   ├─ Button.svelte <-
```

--------------------------------

### Configure Sidebar Links with Shorthand (Svelte)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...2]default-layout/[...2]configuration/+page.md

Use a simplified shorthand syntax to define sidebar links, automatically generating slugs based on a `baseUrl` and category/page names.

```svelte
<script>
  /** @type {import('@svelteness/kit-docs').SidebarConfig} */
  const sidebar = {
    baseUrl: '/docs',
    links: {
      'first-category': ['first-page', 'second-page'],
      'second-category': [],
      // ...
    }
  };
</script>
```

--------------------------------

### Import Algolia Component (JavaScript)

Source: https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/routes/docs/[...2]default-layout/[...4]search/+page.md

Imports the prebuilt `Algolia` Svelte component provided by `@svelteness/kit-docs` for easy integration of Algolia Docsearch.

```javascript
import { Algolia } from '@svelteness/kit-docs/client/algolia';
```

--------------------------------

### Using Svelte onMount Basic Callback

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...3]runtime/[...1]svelte/+page.md

This Svelte component snippet demonstrates the basic usage of the `onMount` lifecycle function. The provided callback function will execute once, immediately after the component is mounted to the DOM.

```svelte
<script>
	import { onMount } from 'svelte';

	onMount(() => {
		console.log('the component has mounted');
	});
</script>
```

--------------------------------

### Examples of Text Expressions

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...2]template-syntax/[...1]foundation/+page.md

Provides various examples of embedding JavaScript expressions in text, including simple variable interpolation, arithmetic operations, and a conditional ternary expression involving a regular expression literal (wrapped in parentheses).

```svelte
<h1>Hello {name}!</h1>\n<p>{a} + {b} = {a + b}.</p>\n\n<div>{(/^[A-Za-z ]+$/).test(value) ? x : y}</div>
```

--------------------------------

### Rendering a Svelte Component with Props and Context Server-Side in JavaScript

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...4]component-api/[...2]server/+page.md

Illustrates rendering a Svelte component server-side using the `.render()` method, passing both properties (`props`) and options, specifically demonstrating how to provide root-level context using the `context` option with a `Map`.

```js
const { head, html, css } = App.render(
  // props
  { answer: 42 },
  // options
  {
    context: new Map([['context-key', 'context-value']]),
  },
);
```

--------------------------------

### Using Svelte Components

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...2]template-syntax/[...1]foundation/+page.md

Shows how to import a Svelte component using a <script> block and then render it in the component's template using its tag name.

```svelte
<script>\n\timport Widget from './Widget.svelte';\n</script>\n\n<div>\n\t<Widget/>\n</div>
```

--------------------------------

### A11y: Use valid href attributes (a11y-invalid-attribute)

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...6]accessibility/[...1]warnings/+page.md

Enforce that attributes important for accessibility have a valid value. For example, `href` should not be empty, `'#'`, or `javascript:`.

```svelte
<!-- A11y: '' is not a valid href attribute -->
<a href=''>invalid</a>
```

--------------------------------

### Using Keys in {#each} for List Diffing (Svelte)

Source: https://github.com/svelteness/kit-docs/blob/main/demo/src/routes/docs/[...2]template-syntax/[...1]foundation/+page.md

Explains how to provide a unique key expression to the `{#each}` block to help Svelte efficiently update the list when data changes, demonstrating syntax with and without an index.

```svelte
{#each items as item (item.id)}
	<li>{item.name} x {item.qty}</li>
{/each}
```

```svelte
{#each items as item, i (item.id)}
	<li>{i + 1}: {item.name} x {item.qty}</li>
{/each}
```