Advanced Features
In this lesson we show all available features and how to combine them.
Dark Mode Support
All components automatically support dark mode. Users can switch between light and dark mode via the icon in the navigation.
Colors are defined via CSS variables. You can find them in packages/styles/src/tokens.css.
Responsive Design
The entire layout is developed mobile-first:
Mobile (< 768px)
- Hamburger menu for navigation
- Stacked layouts
- Touch-optimized buttons
- Adjustable font size
Tablet (768px - 1024px)
- Optional sidebar display
- 2-column grids
- More space for content
Desktop (> 1024px)
- Full sidebar visible
- 3-column layouts possible
- Keyboard navigation
- Hover effects
Nested Components
Components can be nested arbitrarily:
Difficulty Levels for Exercises
Easy Exercise
Goal: Create a simple callout component.
Add the following code to an MDX file:
<Callout type="success">
My first callout!
</Callout>Medium Exercise
Goal: Combine tabs with code examples.
Create tabs that show the same code in different programming languages:
- JavaScript
- TypeScript
- Python
Use the Tabs and TabPanel components.
Hard Exercise
Goal: Create a complete course.
- Create a new course definition in
content/courses/ - Add at least 3 lessons
- Use all component types:
- Callouts (all 4 types)
- Tabs with code examples
- Quiz with 5+ questions
- Exercises in all difficulty levels
- Hints for tips
- Test the progress tracking
Cloud Sync Feature
Learning progress can be synchronized across different devices. Click the cloud icon in the navigation to open the sync dialog.
How it works:
- Export your progress as a code
- Import the code on another device
- Your progress is restored
Full-Text Search
The integrated search is based on Pagefind and indexes all content automatically:
- Searches documentation and courses
- Finds headings, text, and code
- Keyboard shortcut:
Ctrl/Cmd + K - Works completely client-side
Accessibility
All components are accessible:
| Feature | Support |
|---|---|
| Keyboard Navigation | Full |
| Screen Reader | ARIA labels |
| Focus Management | Visible focus rings |
| Contrast | WCAG AA compliant |
| Reduced Motion | prefers-reduced-motion |
Final Quiz
Test: Advanced Features
1. How are colors defined in dark mode?
2. Which search technology is used?
3. What difficulty levels are available for exercises?
4. How is progress saved?
5. Can components be nested?
Summary
You’ve now learned all the advanced features:
- Dark mode and theming
- Responsive design for all devices
- Nested components
- Different difficulty levels
- Cloud sync for progress
- Full-text search with Pagefind
- Accessibility
You’re now ready to create your own professional courses and documentation!
Further resources:
- Check out the component source code
- Read the Astro documentation
- Experiment with your own content