Quick Start

Setup

1. 1

   Clone Repository

git clone https://github.com/BranDenn/SvelDocs

.bash

2. 2

   Install Packages

bunnpmpnpm

bun install

.bash

3. 3

   Start Dev Server

bunnpmpnpm

bun run dev

.bash

4. 4

   Edit Site Settings / Config

Navigate to the src/lib/configuration/site.config.ts file to edit general site settings. These settings apply to the various parts of the site (not just docs) including SEO, llms.txt, sitemap.xml, and robots.txt. Feel free to add your own settings.

const siteConfig = {
	name: 'SvelDocs',
	origin: 'https://brandenn.github.io/SvelDocs',
	description:
		'SvelDocs is a template that helps you build elegant, searchable documentation sites with SvelteKit. It is open source and fully customizable, with built-in support for both server side rendering and static sites.'
} as const;
 
export default siteConfig;

.ts

5. 5

   Edit Doc Settings / Config

Navigate to the src/lib/configuration/docs.config.ts file to edit general settings specific to docs. Feel free to add your own settings.

const docsConfig = {
	github: 'https://github.com/BranDenn/SvelDocs'
} as const;
 
export default docsConfig;

.ts

6. 6

   Edit Document Navigation Settings / Config

Navigate to the src/lib/docs/server/navigation/doc-navigation.config.ts file to edit the document navigation settings. Refer to the Doc Navigation for more detail.

Caution

The navigation config should always be under a server folder to prevent exposure of potential private documents.

const docNavigationConfig = defineDocNavigation({
	tabNextPrev: true,
	tabs: [
		{
			title: 'Documentation',
			combineHref: false,
			icon: 'flag',
			groups: [
				{
					title: 'Getting Started',
					icon: 'goal',
					showTitle: false,
					combineHref: false,
					pages: [
						{ title: 'Introduction', icon: 'book-open-check', href: '/docs' },
						{ title: 'Quick Start', icon: 'rocket' }
					]
				},
				{
					title: 'Configuration',
					icon: 'cog',
					pages: 'auto'
				},
				{
					title: 'Components',
					icon: 'blocks',
					pages: 'auto'
				},
				{
					title: 'Miscellaneous',
					icon: 'dices',
					pages: 'auto'
				}
			]
		},
		{
			title: 'Guides',
			combineHref: true,
			icon: 'book',
			pages: 'auto'
		}
	]
});

.ts

7. 7

   Add Your Own Markdown

Navigate to the content folder to add your own markdown files. Ideally, the folder structure should correspond to your navigation structure.

Navigation ConfigFolder Structure

const docNavigationConfig = defineDocNavigation({
	tabs: [
		{
			title: 'Documentation',
			groups: [
				{
					title: 'Getting Started',
					pages: 'auto'
				},
				{
					title: 'Components',
					pages: 'auto'
				}
			]
		},
		{
			title: 'Guides',
			combineHref: true,
			icon: 'book',
			pages: 'auto'
		}
	]
});

.ts