Docs Kickstarter

Documentation Layout

The Documentation Layout is the default layout used for most documentation pages. It provides a clean, organized structure that makes it easy for users to navigate and read your documentation.

Features

  • Left sidebar navigation
  • Right-side table of contents
  • Responsive design
  • Dark mode support
  • Breadcrumb navigation
  • Previous/Next page navigation

Usage

To use the Documentation Layout, specify it in your page’s frontmatter:

---
layout: DocsLayout
title: My Documentation Page
description: A detailed guide about...
slug: "documentation"
---

Layout Structure

The Documentation Layout consists of several key components:

┌──────────────┬──────────────┬──────────────┐
│              │              │              │
│    Sidebar   │   Content    │     ToC      │
│              │              │              │
│              │              │              │
│              │              │              │
│              │              │              │
└──────────────┴──────────────┴──────────────┘

The sidebar provides:

  • Section grouping
  • Active page highlighting
  • Collapsible sections
  • Search integration

Content Area

The main content area features:

  • Clean typography
  • Code syntax highlighting
  • Image optimization
  • Responsive tables
  • Interactive components

Table of Contents

The table of contents offers:

  • Auto-generated from headings
  • Smooth scroll behavior
  • Active section highlighting
  • Sticky positioning

Configuration

Frontmatter Options

---
layout: DocsLayout
title: Page Title
description: Page description
slug: "documentation"
sidebar: true # Show/hide sidebar
toc: true # Show/hide table of contents
pagination: true # Show/hide prev/next navigation
---

Custom Styling

You can customize the layout appearance using Tailwind CSS classes:

---
layout: DocsLayout
---

<div class="custom-content prose dark:prose-invert">
  <!-- Your content here -->
</div>

Examples

Basic Documentation Page

---
layout: DocsLayout
title: Getting Started
description: Learn how to get started with our product
slug: "documentation"
---


Welcome to our documentation! This guide will help you...

API Documentation

---
layout: DocsLayout
title: API Reference
description: Complete API documentation
slug: "documentation"
toc: true
---

# API Reference

## Endpoints

### GET /api/users

Retrieve a list of users...

Tutorial Page

---
layout: DocsLayout
title: Build Your First App
description: Step-by-step guide to building an app
slug: "documentation"
pagination: true
---

# Build Your First App

Follow these steps to create your first application...

Best Practices

  1. Consistent Structure

    • Use clear headings
    • Keep sections focused
    • Include examples

  2. Navigation

    • Logical page ordering
    • Clear section titles
    • Descriptive links

  3. Content

    • Concise writing
    • Relevant examples
    • Updated information

  4. Accessibility

    • Proper heading hierarchy
    • Alt text for images
    • Keyboard navigation

Customization

Custom Components

You can add custom components to the layout:

// src/components/CustomAlert.astro
---
const { type = 'info' } = Astro.props;
---

<div class={`alert alert-${type}`}>
  <slot />
</div>

Layout Modifications

To modify the layout structure:

  1. Create a new layout file
  2. Extend the base layout
  3. Add your customizations
// src/layouts/CustomDocsLayout.astro
---
import DocsLayout from './DocsLayout.astro';
---

<DocsLayout {...Astro.props}>
  <div class="custom-wrapper">
    <slot />
  </div>
</DocsLayout>

Mobile Responsiveness

The Documentation Layout is fully responsive:

  • Desktop: Full three-column layout
  • Tablet: Collapsible sidebar, inline ToC
  • Mobile: Single column, drawer navigation