Lesson

The [!lesson] component renders a curriculum page. It auto-discovers sibling Markdown files in the folder where the component is used and displays them as ordered steps. User progress (which steps have been checked off) is persisted in the browser via localStorage.

See the sample lesson for a live example.

Usage

Place [!lesson] in the index file of a folder. Every other .md file in that folder becomes a step.

---
title: Learn Neko
---

[!lesson
  title="Learn Neko"
  description="Hands-on track from your first build to publishing."
  badge="Neko Apprentice"
  prerequisites=".NET 10 SDK | Markdown comfort | A terminal"
  up-next-title="Components Reference"
  up-next-summary="Once you finish the track, browse the components."
  up-next-link="/components/components"
]

Step files

Each sibling Markdown file (apart from the index itself) becomes a step. Set the following frontmatter on each step:

---
title: Install Neko
order: 1
kind: Reading      # Reading | Interactive | Project | Video
duration: 5 min
---

Steps are sorted by order, then by title.

Step navigation

Every step page automatically gets a Go back / Next step navigation block at the bottom, linking to its previous and next siblings in the same order shown in the curriculum on the index page. Nothing to configure — Neko detects the parent [!lesson] and wires the links up at build time.

Attributes

Progress

Each lesson is identified by its file path. Progress is stored under the key neko-lesson:<path> in localStorage. The Continue button jumps to the first unfinished step; Start over clears the progress entry.