Adding Documentation

Complete guide to adding documentation to your portfolio website with detailed examples.

Understanding Documentation Structure

Documentation uses a hierarchical structure:

• Sections (top level) - Created from folder names
• Subsections (second level) - Created from nested folders
• Documents (individual pages) - MDX files

Step 1: Create the Folder Structure

Simple Section (Section → Documents)

Structure:

Result in Sidebar:

• 📁 My Section (collapsible)
  • 📄 Overview
  • 📄 Getting Started
  • 📄 Advanced

Section with Subsections

Structure:

Result in Sidebar:

• 📁 My Section (collapsible)
  • 📄 Overview
  • 📁 Basics (collapsible)
    • 📄 Introduction
    • 📄 Quick Start
  • 📁 Advanced (collapsible)
    • 📄 Configuration
    • 📄 Optimization

Step 2: Create Documents with Frontmatter

Every documentation file needs frontmatter:

Required Fields

• title: Document title (appears in sidebar and page header)
• description: Brief description (appears in listings and meta tags)
• publishedAt: Publication date (YYYY-MM-DD format)

Optional Fields

• updatedAt: Last update date (YYYY-MM-DD format)
• order: Display order number (lower numbers appear first, defaults to alphabetical)
• state: published or draft. Drafts can be committed, but they are omitted from production pages, search, and the sitemap. If state is missing, the document is published. Setting state: draft on a section or subsection overview.mdx also hides every nested document and folder under that overview in production.

Step 3: Write Your Content

Write content using Markdown or MDX:

Step 2: Install Dependencies

Step 3: Start Development Server

Verification

To verify the installation worked:

1. Open your browser
2. Navigate to http://localhost:3000
3. You should see the homepage

Next Steps

• Read the Configuration Guide
• Check out Features

Ordering Rules:

• Lower numbers appear first (1, 2, 3...)
• Documents without order are sorted alphabetically at the end
• Use order: 1 for overview pages
• Leave gaps (10, 20, 30...) if you might add documents in between

Example:

For complete ordering setup (sections, subsections, and documents), see Documentation Ordering System.

Step 5: Overview Pages

Create overview pages for major sections to make section titles clickable:

File location: content/docs/api/overview.mdx

Result: Section title "API" becomes clickable in sidebar

Complete Example

Here's a complete example of a documentation section:

File Structure

overview.mdx

prerequisites.mdx

Linux

Windows

Download the installer from nodejs.org.

Installing Yarn

Verifying Installation

Next Steps

Once you have the prerequisites installed, proceed to Setup.