Slide Viewer
The Slide Viewer is an Astro component that automatically converts your page content into an interactive slide presentation system. It provides a rich set of features for navigation, customization, and content interaction through a modular architecture.
Simply add the component to any MDX page:
import SlideViewer from '../../../components/slides/SlideViewer.astro';
<SlideViewer triggerText="Open Slides" title = "Content Slides"/>
Structure your MDX content using horizontal rules (---
) to create explicit slide boundaries:
---title: My Presentation---
# Introduction SlideThis is the first slide content.
---
# Second SlideThis is the second slide content.
---
# Third SlideThis is the third slide content.
Key Guidelines:
- Use
---
separators to create explicit slide breaks - One main concept per slide keep content focused and concise
- Start with a clear heading on each slide for better navigation
- Include visual elements like code blocks, images, and lists
- Write presentation-friendly content avoid overly long paragraphs
- Verify keyboard navigation works smoothly across all features
- Check theme compatibility with your site design
- Optimize content length for slide format presentation
- Use bookmarks to mark important slides for quick reference
The component intelligently parses your page content and creates slides based on:
- Heading-based divisions Each major heading starts a new slide
- Content sections Logical content breaks are preserved
- Code blocks and lists Special formatting is maintained
- Image and media support Visual content is properly displayed
- Content filtering Automatically excludes scripts, styles, and metadata
Navigate through your presentation using multiple methods:
- Keyboard shortcuts: Arrow keys, Page Up/Down, Home/End
- Navigation buttons: Previous/Next slide controls
- Direct slide access: Click slide counter or press
G
orCtrl+G
for go-to modal - Touch gestures: Mobile-friendly navigation
- Progress tracking: Visual progress bar shows completion
The component offers three distinct viewing experiences:
- Slide Mode: Traditional presentation view with one slide at a time
- Reading Mode: Continuous document view with original content structure
- Overview Mode: Thumbnail grid showing all slides at once
- Instant search across all slide content with debounced input
- Highlighted matches with search term emphasis
- Filtered results showing only relevant slides
- Search persistence across different viewing modes
Advanced search interface with enhanced features:
- Modal interface opened with
/
orF
keys - Keyboard navigation through search results with arrow keys
- Content snippets showing search context
- Reading mode support with section-aware search
- Smart TOC generation based on slide headings or content structure
- Slide previews with hover effects showing content summary
- Reading time estimates calculated at 200 words per minute
- Bookmark indicators showing saved slides with star icons
- Collapsible sidebar with toggle and click-to-expand
Sophisticated annotation tool with multiple drawing modes:
Drawing Modes:
- Freehand drawing : Natural sketching with smooth curves
- Circle tool : Perfect circles with drag-to-resize
- Rectangle tool : Rectangular shapes with drag-to-resize
- Line tool : Straight lines with precise endpoints
Settings:
- Color picker : Choose from any color
- Thickness control : Adjustable from 1-10 pixels
- Fade duration : Configurable from 0.5-5 seconds
- Reverse fade : Lines can undraw from end back to start
- Persistent storage : Settings saved to localStorage
Keep track of important slides:
- Quick bookmarking with
B
key or click bookmark button - Bookmark panel with
Shift+B
showing all saved slides - Slide previews with slide numbers and content excerpts
- Persistent storage : Bookmarks saved per page URL
- Visual indicators in thumbnails, TOC, and current slide
Accessibility-focused text scaling:
- Dynamic font adjustment with +/- buttons
- Range: 60% to 500% scaling with validation
- Double-click reset on decrease button
- Persistent preferences saved to localStorage
Choose from 6 carefully designed themes with light/dark variants:
- Default : Clean, minimal theme
- Dracula : Popular developer-friendly purple theme
- GitHub : Familiar GitHub-inspired design
- Discord : Gaming-community inspired dark theme
- One Dark : Atom editorâs beloved color scheme
- Ocean : Blue-toned theme with calming colors
Independent light/dark toggle system:
- Independent toggle : Works separately from Starlightâs theme
- Persistent preference : State saved to localStorage
- Visual feedback : Sun/moon icons indicate current state
- Theme compatibility : All themes have light/dark variants
- Automatic conflict resolution with Starlight themes
- Persistent theme selection across sessions
- Theme cycling with
T
keyboard shortcut - Dropdown selector with available themes
â
â
- Previous/Next slidePage Up
Page Down
- Previous/Next slideHome
- Go to first slideEnd
- Go to last slideG
orCtrl+G
- Open go-to slide modal
/
orF
- Open search modalâ
â
- Navigate search results (in modal)Enter
- Select search resultL
- Toggle laser pointerS
- Open laser pointer settingsT
- Cycle through themesB
- Bookmark current slideShift + B
- Toggle bookmarks panel
Esc
- Close slideshow/modal/panelShift + ?
- Show keyboard help modal
- ARIA live regions for screen reader announcements
- Keyboard focus management with proper tab order and focus trapping
- Screen reader optimized labels and descriptions
- High contrast support across all themes
- Semantic HTML structure for assistive technologies
- Lazy content loading for smooth performance
- Debounced search to prevent excessive operations
- Throttled scroll listeners for efficient updates
- Local storage caching for user preferences
- Efficient DOM manipulation with minimal reflows
- Modern ES6+ JavaScript with module support
- CSS Grid and Flexbox for responsive layouts
- Local Storage API for preference persistence
- Canvas API for laser pointer functionality
- Fullscreen API for immersive presentations