Kit Docs

Overview

KitDocs is a documentation integration package for SvelteKit, providing a VitePress alternative for Svelte. It offers several key features such as Markdown transformation to Svelte components, loaders and endpoint handlers for loading Markdown metadata, a pre-designed theme inspired by the Tailwind docs, accessible menus and popovers with keyboard support, and more. KitDocs also includes prebuilt Markdown components for steps, admonitions, tabbed links, responsive tables, and yes/no blocks. It offers Algolia search integration and has a clean default design. The package is MIT licensed.

Features

• Vite plugin for transforming Markdown files: Transforms Markdown files to Svelte components with hot module replacement (HMR) support.
• Loaders and endpoint handlers for loading Markdown metadata: Provides functionality to load Markdown metadata such as title, frontmatter, etc., and sidebar configurations.
• Beautiful pre-designed theme: A pre-designed theme inspired by the Tailwind docs, offering a visually appealing and user-friendly interface.
• Accessible menus and popovers with full keyboard support: Menu and popover components that are accessible and provide full keyboard support for enhanced usability.
• Global components folder: A global components folder that is imported into all Markdown files and mapped to custom containers for easy component usage.
• Markdown extensions for various features: Adds various Markdown extensions such as header anchors, file links, YAML frontmatter, emojis, custom containers, table of contents, code fences, and importing code snippets.
• Beautiful syntax highlighting with Shiki: Syntax highlighting for code blocks using the Shiki library, including support for titles, line highlighting, copy code button, and other useful features.
• Prebuilt Markdown components: Includes prebuilt components for steps, admonitions (callouts), tabbed links, responsive tables, and yes/no blocks for easy content creation.
• Algolia search integration: Integration with Algolia search for efficient and effective searching within the documentation.
• Documentation: KitDocs offers comprehensive documentation available at kitdocs.vercel.app.

Installation

To install KitDocs, follow these steps:

1. Install the package using npm:

npm install kitdocs

2. Import the necessary components and styles in your SvelteKit project:

import { Docs, DocsLayout, DocsLink } from 'kitdocs';
import 'kitdocs/dist/kitdocs.css';

3. Set up your Markdown files and customize the configuration as needed. See the KitDocs documentation for detailed instructions on configuration options and usage.

<!-- my-markdown-file.md -->

title: My Markdown File
sidebar: my-sidebar.md

# My Markdown Content

4. Build and run your SvelteKit project:

npm run build
npm run dev

Summary

KitDocs is a powerful documentation integration package for SvelteKit. It offers a range of features to streamline the creation and management of documentation, including Markdown transformation to Svelte components, pre-designed themes, accessible menus and popovers, Algolia search integration, and more. With KitDocs, developers can easily build and maintain comprehensive and user-friendly documentation for their Svelte projects.