Overview
The qwik-docs.config.ts file is the central configuration file for your documentation site. It defines the site title, content collections, sidebar navigation, social links, and more.
Full Configuration Example
import { defineConfig, collection, withPrefix, merge } from '@qwik-docs/framework';
export default defineConfig({
// Site title shown in header
title: 'My Documentation',
// Optional logo
logo: {
src: '/logo.svg',
alt: 'My Project',
},
// Content collections
content: merge(
withPrefix('docs/guides', collection({ directory: 'content/guides' })),
withPrefix('docs/reference', collection({ directory: 'content/reference' })),
withPrefix('docs/api', collection({ directory: 'content/api' })),
),
// Social media links
social: [
{ icon: 'github', label: 'GitHub', href: 'https://github.com/example' },
{ icon: 'discord', label: 'Discord', href: 'https://discord.gg/example' },
{ icon: 'x.com', label: 'X', href: 'https://x.com/example' },
],
// Sidebar navigation
sidebar: [
{
label: 'Guides',
items: [
{ label: 'Getting Started', link: '/docs/guides/' },
{ label: 'Installation', link: '/docs/guides/install/' },
],
},
{
label: 'Reference',
autogenerate: { directory: 'docs/reference' },
},
],
// Edit link configuration
editLink: {
baseUrl: 'https://github.com/example/repo/edit/main/',
},
});
QwikDocsConfig Interface
interface QwikDocsConfig {
title: string;
content: CollectionDescriptor;
logo?: { src: string; alt?: string };
sidebar?: SidebarItem[];
social?: SocialLink[];
editLink?: { baseUrl: string };
locales?: Record<string, { label: string; lang: string }>;
defaultLocale?: string;
}
Content Collections
collection()
Creates a content collection from a directory:
collection({ directory: 'content/guides' })
withPrefix()
Adds a URL prefix to a collection:
withPrefix('docs/guides', collection({ directory: 'content/guides' }))
// content/guides/example.mdx → /docs/guides/example/
merge()
Combines multiple collections:
merge(
withPrefix('docs/guides', collection({ directory: 'content/guides' })),
withPrefix('docs/api', collection({ directory: 'content/api' })),
)
Sidebar Configuration
Manual Items
{ label: 'Page Title', link: '/docs/page/' }
Groups
{
label: 'Group Name',
items: [
{ label: 'Item 1', link: '/docs/item-1/' },
{ label: 'Item 2', link: '/docs/item-2/' },
],
}
Autogenerate
{
label: 'API Reference',
autogenerate: { directory: 'docs/api' },
}
Vite Plugin
The configuration is consumed by the Vite plugin:
// vite.config.ts
import { qwikDocs } from '@qwik-docs/framework';
export default defineConfig({
plugins: [
qwikCity(),
qwikVite(),
qwikDocs({ configPath: './qwik-docs.config.ts' }),
],
});
Virtual Modules
The plugin emits two virtual modules:
| Module | Contents |
|---|---|
virtual:qwik-docs/content | Content entry map with entries and slugs |
virtual:qwik-docs/config | Resolved site configuration |