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' })),
)

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:

ModuleContents
virtual:qwik-docs/contentContent entry map with entries and slugs
virtual:qwik-docs/configResolved site configuration