ConnectOnionConnectOnion
Back to Home

Website Maintenance Guide

Learn how to add new features, pages, and content to the documentation website.

Three-Step Process

  1. 1
    Create Tutorial - Write markdown in /tutorials/
  2. 2
    Create Page - Add component in /app/
  3. 3
    Update Navigation - Add to sidebar and search

Step 1: Create Tutorial Content

Start by writing your documentation as a markdown file:

Terminal
$touch docs-site/public/tutorials/your-feature.md

Markdown Structure

# Feature Title

## Overview
What the feature does and why it's useful.

## Basic Usage
```python
agent = Agent("assistant")
result = agent.input("Hello!")
```

## Advanced Usage
Complex examples and edge cases.

## API Reference
Detailed technical documentation.

Step 2: Create Page Component

Create a Next.js page for your feature:

Terminal
$mkdir -p docs-site/app/your-feature
$touch docs-site/app/your-feature/page.tsx

Page Template

import { ArrowLeft } from 'lucide-react'
import Link from 'next/link'

export default function YourFeaturePage() {
  return (
    <div className="max-w-4xl mx-auto px-4 py-8">
      <Link href="/" className="inline-flex items-center mb-8">
        <ArrowLeft className="mr-2 h-4 w-4" />
        Back to Home
      </Link>
      
      <h1 className="text-4xl font-bold mb-8">
        Your Feature
      </h1>
      
      {/* Your content */}
    </div>
  )
}

Step 3: Update Navigation

Add to Sidebar

Edit DocsSidebar.tsx:

const navigation = [
  {
    title: 'Your Section',
    items: [
      { 
        title: 'Your Feature', 
        href: '/your-feature',
        icon: YourIcon,
        keywords: ['keyword1', 'keyword2']
      }
    ]
  }
]

Update Search Mapping

Edit markdownLoader.ts:

const MARKDOWN_TO_PAGE_MAP = {
  'your-feature.md': { 
    href: '/your-feature',
    section: 'Your Section',
    title: 'Your Feature' 
  }
}

Testing Your Changes

Terminal
$cd docs-site
$npm run dev

Test Checklist

  • ✓ Search finds your content
  • ✓ Sidebar link works
  • ✓ Page displays correctly
  • ✓ Mobile responsive
  • ✓ Build succeeds

Directory Structure

docs-site/
├── app/                    # Next.js pages
│   └── your-feature/      
│       └── page.tsx
├── components/            # Reusable components
│   └── DocsSidebar.tsx   
├── public/
│   └── tutorials/        # Markdown docs
│       └── your-feature.md
└── utils/
    └── markdownLoader.ts # Search index

Final Checklist