---
title: "Configuration Basics Overview"
description: "Get started configuring your documentation structure in data/config.ts"
---

![Configuration Overview](../../assets/configuration-overview.jpg)

All PID^TOO|| configuration lives in one place: `data/config.ts`. This file is your command center for everything.

## The Configuration File Structure

```typescript
// 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:

```typescript
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:

```typescript
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:

```typescript
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:

```typescript
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:hello@example.com", 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 footers 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:

```typescript
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:

```typescript
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:

```typescript
{
    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:

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

### Step 3: Configure Navigation

In `SIDEBAR_NAVIGATION`, add navigation for this collection:

```typescript
"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

PID^TOO|| provides TypeScript types for full IDE autocomplete:

```typescript
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

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

### Multiple Collections

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

### With Tabs

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

### With Nested Groups

```typescript
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](/docs/configuration/basics/content-systems)
- [Sidebar Structure](/docs/configuration/basics/sidebar-structure)
- [Nested Groups Setup](/docs/configuration/advanced/nested-setup/single-level)