Playground
Playground is a place to explore and test the components available on the course site. These pages aren’t course material — they exist to show how each component works and how they combine with each other.
Available components
Section titled “Available components”| Component | Description |
|---|---|
:::note / :::tip / :::caution / :::danger |
Starlight’s built-in asides — no import needed |
<Tabs> / <TabItem> |
Starlight’s built-in tab component with keyboard navigation |
<Youtube> |
Embedded YouTube video with a responsive 16:9 layout |
<Exercise> |
Single exercise link with a difficulty badge |
<ExerciseList> |
List of exercises, each with a difficulty badge and link |
<ReadingList> |
Color-coded chips for reading-priority annotations |
<AiBlock> |
Shows a good and a bad way to prompt an AI assistant |
<Solution> |
Hides a solution behind a blurred, click-to-reveal panel |
<Deadline> / <DeadlineList> |
Date-driven deadlines with automatic bold/strikethrough styling |
```mermaid |
Diagrams rendered from Mermaid syntax |
- Asides and tabs —
:::directives and<Tabs>combined in a guide scenario - Exercises and media —
<Exercise>,<ExerciseList>,<Youtube>, and Mermaid diagrams - Reading and challenges —
<ReadingList>,<AiBlock>, and<Solution> - Deadlines —
<Deadline>and<DeadlineList>with date-driven styling
Not demonstrated here
Section titled “Not demonstrated here”<ImportMd> and <EntryContent> aren’t demonstrated on these pages — both render content that has to exist for real (a live external Markdown file for <ImportMd>, a real collection entry for <EntryContent>), which doesn’t fit a self-contained playground page. See them in use instead:
<ImportMd>fetches Markdown from a GitLab raw URL at build time — see Getting started<EntryContent>renders another collection entry inline via Astro’s content pipeline — see Course week 2 overview
