Configuration Basics Overview

All CelestialDocs configuration lives in one place: data/config.ts. This file is your command center for everything.

The Configuration File Structure

// data/config.ts

// 1. Locale settings
export const LOCALE: LocaleConfig = { ... };

// 2. Content systems (collections)
export const CONTENT: ContentConfig = { ... };

// 3. Site metadata
export const SITE: SiteConfig = { ... };

// 4. Header features
export const HEADER_FEATURES: HeaderFeatures = { ... };

// 5. Header navigation
export const HEADER_NAV_ITEMS: NavItem[] = [ ... ];

// 6. Social links (header)
export const HEADER_SOCIAL_LINKS: SocialObjects[] = [ ... ];

// 7. Social links (footer)
export const FOOTER_SOCIAL_LINKS: SocialObjects[] = [ ... ];

// 8. Sidebar navigation (most important for docs structure)
export const SIDEBAR_NAVIGATION: SidebarNavigation = { ... };

// 9. Table of contents
export const TABLE_OF_CONTENTS: TableOfContentsConfig = { ... };

Six Essential Sections for Docs

For basic documentation setup, focus on these core sections:

1. Content Systems

Defines your collections:

export const CONTENT: ContentConfig = {
    systems: [
        {
            id: "docs", // Unique ID
            dir: "content/docs", // Folder location
            defaultDocRedirect: "/docs/getting-started", // Landing page
            route: "/docs", // URL prefix
        },
        {
            id: "api",
            dir: "content/api",
            defaultDocRedirect: "/api/overview",
            route: "/api",
        },
    ],
};

Each system = independent documentation site

2. Site Metadata

Basic site information:

export const SITE: SiteConfig = {
    website: "https://mydocs.com",
    author: "Your Name",
    authorUrl: "https://example.com", // optional; controls footer author link
    repo: "https://github.com/user/repo",
    title: "My Documentation",
    description: "Documentation for my project",
    // ... other optional fields
};

3. Header Navigation

Top navigation items:

export const HEADER_NAV_ITEMS: NavItem[] = [
    { href: "/docs", label: "Docs" },
    { href: "/api", label: "API" },
    { href: "/blog", label: "Blog" },
];

4. Social Links (Header & Footer)

Header and footer have independent social link arrays:

export const HEADER_SOCIAL_LINKS: SocialObjects[] = [
    { name: "github", href: "https://github.com/user", linkTitle: "GitHub", active: true },
];

export const FOOTER_SOCIAL_LINKS: SocialObjects[] = [
    { name: "github", href: "https://github.com/user", active: true },
    { name: "linkedin", href: "https://linkedin.com/in/you", active: true },
    { name: "youtube", href: "https://youtube.com/@you", active: false },
    { name: "mail", href: "mailto:[email protected]", active: true },
];

• name must match an icon filename in src/assets/icons (e.g., github, linkedin, youtube, mail). Add a new SVG there first if you introduce a new network.
• Only links with active: true render.
• The footer’s “Built with ♥ by …” line shows only when SITE.authorUrl is set; omit it to hide the line.

5. Sidebar Navigation (Most Important!)

Navigation structure for each collection:

export const SIDEBAR_NAVIGATION: SidebarNavigation = {
    // Each collection gets its own navigation config
    docs: {
        defaultTab: { label: "Learn", icon: "📖" },
        groups: [
            // Your groups, tabs, and structure here
        ],
    },
    api: {
        defaultTab: { label: "Reference", icon: "📡" },
        groups: [
            // API documentation structure
        ],
    },
};

This is where all navigation hierarchy is defined.

6. Table of Contents

Configuration for the right-side page outline:

export const TABLE_OF_CONTENTS: TableOfContentsConfig = {
    enableExtra: false, // Include H4 headings in TOC?
};

Configuration Workflow

Step 1: Register Collection

In CONTENT.systems, add your collection folder:

{
    id: "my-docs",
    dir: "content/my-docs",
    route: "/my-docs",
    defaultDocRedirect: "/my-docs/introduction",
}

Step 2: Create Folder

Create the folder and add markdown files:

mkdir -p content/my-docs
echo "# Hello" > content/my-docs/introduction.md

Step 3: Configure Navigation

In SIDEBAR_NAVIGATION, add navigation for this collection:

"my-docs": {
    defaultTab: { label: "Guide", icon: "📖" },
    groups: [
        {
            id: "guides",
            label: "Guides",
            autoGenerated: true,
        },
    ],
}

Step 4: Visit Your Site

Navigate to http://localhost:4321/my-docs and see your documentation!

Type Safety

CelestialDocs provides TypeScript types for full IDE autocomplete:

import type { SidebarNavigation } from "@/lib/docs/types";

export const SIDEBAR_NAVIGATION: SidebarNavigation = {
    // TypeScript knows what properties are available
    // IDE provides autocomplete suggestions
    // Errors caught at development time
};

Common Configuration Patterns

Single Collection, Auto-Generated

export const SIDEBAR_NAVIGATION = {
    docs: {
        defaultTab: { label: "Docs" },
        groups: [{ id: "guides", label: "Guides", autoGenerated: true }],
    },
};

Multiple Collections

export const SIDEBAR_NAVIGATION = {
    docs: {
        /* docs navigation */
    },
    api: {
        /* api navigation */
    },
    guides: {
        /* guides navigation */
    },
};

With Tabs

groups: [
    { id: "getting-started", label: "Getting Started", tab: true },
    { id: "api", label: "API Reference", tab: true },
];

With Nested Groups

groups: [
    {
        id: "advanced",
        label: "Advanced",
        groups: [
            { id: "patterns", label: "Patterns", autoGenerated: true },
            { id: "performance", label: "Performance", autoGenerated: true },
        ],
    },
];

Next Steps

Learn to configure specific structures:

• Content Systems
• Sidebar Structure
• Nested Groups Setup