Docs Kickstarter

Tutorial Layout

The Tutorial Layout is designed for step-by-step guides and interactive learning experiences. It provides a clear progression path and helps users track their progress through the tutorial.

Features

  • Progress tracking
  • Step navigation
  • Code playgrounds
  • Interactive examples
  • Checkpoints
  • Previous/Next navigation
  • Estimated completion time

Usage

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

---
layout: TutorialLayout
title: Build Your First App
description: Learn how to create your first application
slug: "tutorial"
progress: 25 # Progress percentage
steps:
  - Setup
  - Configuration
  - Development
  - Deployment
currentStep: 1
---

Layout Structure

The Tutorial Layout provides a focused learning environment:

┌──────────────────────┬──────────────────┐
│                      │                  │
│       Content        │    Progress      │
│                      │                  │
│                      │    ○ Step 1      │
│                      │    ● Step 2      │
│                      │    ○ Step 3      │
│                      │    ○ Step 4      │
│                      │                  │
└──────────────────────┴──────────────────┘

Main Content Area

  • Clear step instructions
  • Code examples
  • Interactive elements
  • Checkpoints
  • Success criteria

Progress Sidebar

  • Step overview
  • Progress indicator
  • Current position
  • Estimated time
  • Completion status

Configuration

Frontmatter Options

---
layout: TutorialLayout
title: Tutorial Title
description: Tutorial description
slug: "tutorial"
progress: 50
steps:
  - title: Getting Started
    complete: true
  - title: Basic Setup
    complete: true
  - title: Configuration
    current: true
  - title: Final Steps
    complete: false
estimatedTime: 30 # minutes
---

Interactive Elements

interactive:
  - type: codePlayground
    language: javascript
    initial: |
      function hello() {
        console.log("Hello World");
      }
  - type: quiz
    questions:
      - text: What is the output?
        options:
          - Hello World
          - undefined
          - null
        answer: 0

Examples

Basic Tutorial Step

---
layout: TutorialLayout
title: Step 1 - Setup
progress: 25
currentStep: 1
---


Let's start by creating a new project.

## 1. Create a Directory

```bash
mkdir my-project
cd my-project

2. Initialize the Project

npm init -y

✅ Checkpoint: You should now have a package.json file.


## Best Practices

1. **Clear Instructions**
   - Step-by-step guidance
   - Visual aids
   - Code examples
   - Success criteria

2. **Progress Tracking**
   - Clear indicators
   - Checkpoint validation
   - Save progress
   - Resume capability

3. **Interactive Elements**
   - Code playgrounds
   - Quizzes
   - Challenges
   - Validation

4. **Content Structure**
   - Logical progression
   - Bite-sized steps
   - Clear objectives
   - Review sections

## Customization

### Custom Components

Add tutorial-specific components:

```astro
// src/components/Checkpoint.astro
---
const { title, complete } = Astro.props;
---

<div class={`checkpoint ${complete ? 'complete' : ''}`}>
  <h3>{title}</h3>
  <slot />
</div>

Progress Tracking

Implement progress tracking:

// src/components/ProgressTracker.astro
---
const { steps, currentStep } = Astro.props;
---

<div class="progress-tracker">
  {steps.map((step, index) => (
    <div class={`step ${index === currentStep ? 'current' : ''}`}>
      {step.title}
    </div>
  ))}
</div>

Mobile Responsiveness

The Tutorial Layout adapts for different screens:

  • Desktop: Two-column layout
  • Tablet: Collapsible progress panel
  • Mobile: Single column with progress bar