Documentation
Documentation site layout template.
Layout Structure
┌─────────────────────────────────────────────────────┐
│ Header │
├──────────┬─────────────────────────┬───────────────┤
│ │ │ │
│ Sidebar │ Content │ TOC │
│ (nav) │ (MDX) │ (On This Page)│
│ │ │ │
│ 240px │ flex-1 │ 200px │
│ │ │ │
└──────────┴─────────────────────────┴───────────────┘
Key Features
Sidebar Navigation
- Grouped by category
- Expandable sections
- Active link highlighting
- Mobile drawer
Table of Contents
- Auto-generated from headings
- Scroll spy highlighting
- Hidden on mobile
MDX Content
- Custom components for code blocks
- Styled typography
- Responsive images
File Structure
content/
├── category-1/
│ ├── page-1.mdx
│ └── page-2.mdx
├── category-2/
│ ├── page-1.mdx
│ └── page-2.mdx
Best Practices
- Search - Add search for large docs
- Versioning - Support multiple versions
- Edit links - "Edit this page" to source
- Previous/Next - Navigate between pages
- Code copying - Copy button on code blocks