Real-World Documentation Examples

Here are three realistic documentation setups using different CelestialDocs strategies.

Example 1: Simple Library Documentation

Project: A JavaScript library with modest documentation

File Structure:
content/my-lib/
├── introduction.md
├── installation.md
├── getting-started/
│   ├── first-steps.md
│   ├── configuration.md
│   └── examples.md
├── api/
│   ├── overview.md
│   ├── core-functions.md
│   ├── utilities.md
│   └── types.md
└── troubleshooting.md

Navigation (Single Group, Auto-Generated):
[📖 Learn]
├── 📖 API
│   ├── Overview
│   ├── Core Functions
│   ├── Utilities
│   └── Types
├── 🚀 Getting Started
│   ├── Configuration
│   ├── Examples
│   └── First Steps
└── 🆘 Help
    └── Troubleshooting

Configuration:

export const SIDEBAR_NAVIGATION = {
    "my-lib": {
        defaultTab: { label: "Docs", icon: "📖" },
        groups: [
            { id: "api", label: "API", autoGenerated: true },
            { id: "getting-started", label: "Getting Started", autoGenerated: true },
            { id: "help", label: "Help", autoGenerated: true },
        ],
    },
};

Why this works:

• ✅ Simple structure matches project complexity
• ✅ Auto-generation requires zero maintenance
• ✅ Alphabetical ordering is intuitive for API docs
• ✅ Easy to add new pages

Example 2: Complex Product Documentation (Multi-Tab)

Project: A SaaS platform with user docs and API reference

Navigation Structure:
[Getting Started] [User Guide] [API Reference] [Help]
        ↓
When "User Guide" tab active:
├── 📱 Basics
│   ├── Dashboard Overview
│   ├── Profile Setup
│   └── Account Settings
├── 🎯 Features
│   ├── Projects & Teams
│   ├── Collaboration
│   ├── Automations
│   └── Integrations
└── ⚙️ Advanced
    ├── Advanced Search
    ├── Custom Workflows
    └── API Integration

When "API Reference" tab active:
├── 🔐 Authentication
│   ├── API Keys
│   ├── OAuth 2.0
│   └── JWT Tokens
├── 📡 REST API
│   ├── Users
│   ├── Projects
│   ├── Tasks
│   └── Comments
└── 🔗 Webhooks
    ├── Event Types
    └── Payload Reference

Configuration:

export const SIDEBAR_NAVIGATION = {
    platform: {
        defaultTab: { label: "Getting Started", icon: "🚀" },
        groups: [
            // Default tab items
            {
                id: "getting-started-overview",
                label: "Overview",
                entries: [{ slug: "getting-started" }, { slug: "quick-tour" }],
            },
            // User Guide Tab
            {
                id: "user-guide",
                label: "User Guide",
                tab: true,
                groups: [
                    {
                        id: "basics",
                        label: "Basics",
                        autoGenerated: true,
                    },
                    {
                        id: "features",
                        label: "Features",
                        autoGenerated: true,
                    },
                    {
                        id: "advanced",
                        label: "Advanced",
                        autoGenerated: true,
                    },
                ],
            },
            // API Reference Tab
            {
                id: "api",
                label: "API Reference",
                tab: true,
                groups: [
                    {
                        id: "authentication",
                        label: "Authentication",
                        autoGenerated: true,
                    },
                    {
                        id: "rest-api",
                        label: "REST API",
                        groups: [
                            { id: "users", label: "Users", autoGenerated: true },
                            { id: "projects", label: "Projects", autoGenerated: true },
                            { id: "tasks", label: "Tasks", autoGenerated: true },
                            { id: "comments", label: "Comments", autoGenerated: true },
                        ],
                    },
                    {
                        id: "webhooks",
                        label: "Webhooks",
                        autoGenerated: true,
                    },
                ],
            },
            // Help Tab
            {
                id: "help",
                label: "Help",
                tab: true,
                groups: [
                    {
                        id: "faq",
                        label: "FAQ",
                        entries: [{ slug: "help/faq" }],
                    },
                    {
                        id: "troubleshooting",
                        label: "Troubleshooting",
                        autoGenerated: true,
                    },
                ],
            },
        ],
    },
};

Why this works:

• ✅ Tabs separate user guide from API docs
• ✅ Nested groups for API resources
• ✅ Hybrid approach: manual structure + auto-generation
• ✅ Each section can grow independently

Example 3: Enterprise Framework (Deep Nesting + Multiple Collections)

Project: Multi-product documentation ecosystem

Collection 1: "docs" (General Documentation)
[Learn] [Patterns] [Help]
    ↓
├── 🚀 Getting Started
│   ├── Installation
│   ├── Configuration
│   └── First Application
├── 📚 Core Concepts
│   ├── Architecture Overview
│   ├── Components
│   │   ├── View Layer
│   │   ├── State Management
│   │   └── Routing
│   ├── Services
│   │   ├── HTTP Client
│   │   ├── Authentication
│   │   └── Data Services
│   └── Advanced
│       ├── Performance Optimization
│       ├── Testing
│       └── Deployment

Collection 2: "api" (API Reference)
[v1 Legacy] [v2 Current] [v3 Beta]
    ↓ (when v2 selected)
├── 🔐 Authentication
├── 📡 Resources
│   ├── Users
│   ├── Organizations
│   └── Data Models
└── 🔧 Advanced
    ├── Rate Limiting
    ├── Error Handling
    └── Webhooks

Configuration:

// Two separate collections
export const CONTENT: ContentConfig = {
    systems: [
        {
            id: "docs",
            dir: "content/docs",
            route: "/docs",
            defaultDocRedirect: "/docs/getting-started",
        },
        {
            id: "api",
            dir: "content/api",
            route: "/api",
            defaultDocRedirect: "/api/v2/overview",
        },
    ],
};

export const SIDEBAR_NAVIGATION = {
    docs: {
        defaultTab: { label: "Learn", icon: "📖" },
        groups: [
            {
                id: "getting-started",
                label: "Getting Started",
                tab: true,
                entries: [
                    { slug: "getting-started/installation" },
                    { slug: "getting-started/configuration" },
                    { slug: "getting-started/first-app" },
                ],
            },
            {
                id: "concepts",
                label: "Core Concepts",
                tab: true,
                groups: [
                    {
                        id: "architecture",
                        label: "Architecture Overview",
                        entries: [{ slug: "concepts/architecture" }],
                    },
                    {
                        id: "components",
                        label: "Components",
                        groups: [
                            { id: "view-layer", label: "View Layer", autoGenerated: true },
                            { id: "state-mgmt", label: "State Management", autoGenerated: true },
                            { id: "routing", label: "Routing", autoGenerated: true },
                        ],
                    },
                    {
                        id: "services",
                        label: "Services",
                        groups: [
                            { id: "http", label: "HTTP Client", autoGenerated: true },
                            { id: "auth", label: "Authentication", autoGenerated: true },
                            { id: "data", label: "Data Services", autoGenerated: true },
                        ],
                    },
                    {
                        id: "advanced",
                        label: "Advanced",
                        autoGenerated: true,
                    },
                ],
            },
        ],
    },
    api: {
        defaultTab: { label: "v2 Current", icon: "📡" },
        groups: [
            {
                id: "v1",
                label: "v1 Legacy",
                tab: true,
                groups: [{ id: "resources", label: "Resources", autoGenerated: true }],
            },
            {
                id: "v2",
                label: "v2 Current",
                tab: true,
                groups: [
                    { id: "auth", label: "Authentication", autoGenerated: true },
                    {
                        id: "resources",
                        label: "Resources",
                        groups: [
                            { id: "users", label: "Users", autoGenerated: true },
                            { id: "orgs", label: "Organizations", autoGenerated: true },
                        ],
                    },
                    {
                        id: "advanced",
                        label: "Advanced",
                        autoGenerated: true,
                    },
                ],
            },
            {
                id: "v3",
                label: "v3 Beta",
                tab: true,
                groups: [{ id: "beta-features", label: "Beta Features", autoGenerated: true }],
            },
        ],
    },
};

Why this works:

• ✅ Multiple collections for different products
• ✅ Deep nesting for complex concepts
• ✅ Tabs for version management
• ✅ Hybrid approach scales to 1000+ pages
• ✅ Each section independent but same codebase

Choosing Your Structure

Use Simple (Example 1) when:

• Documentation is small (< 50 pages)
• Content doesn’t have major sections
• Auto-generation ordering works

Use Multi-Tab (Example 2) when:

• Multiple audiences (users vs. developers)
• Separate concerns (guides vs. API)
• Medium documentation (100-500 pages)

Use Enterprise (Example 3) when:

• Multiple products or versions
• Deep hierarchies needed
• Large documentation (500+ pages)
• Complex organization

This Site as Example

This documentation site demonstrates all concepts through its own structure:

[Overview] [Getting Started] [Navigation System] [Configuration]
           [Generation Strategies] [Content] [Advanced Topics]

Each tab contains:
- Nested groups (Core Concepts > Entries, Groups, Nested Groups)
- Auto-generated sections (patterns, help)
- Hybrid approach (pinned important pages)
- Multiple pages demonstrating the feature

This is a working example of everything you’ve learned!