# Technical Details

---

## Architecture Overview

```mermaid
flowchart TB
    subgraph Frontend
        A[PresentationToggle] --> B[PresentationMode]
        B --> C[PresentationSlide]
        B --> D[PresentationControls]
        B --> E[PresentationProgress]
    end

    subgraph Layouts
        C --> F[SlideLayoutDefault]
        C --> G[SlideLayoutCover]
        C --> H[SlideLayoutTwoCols]
        C --> I[... more layouts]
    end

    subgraph Content
        J[Blog Post] --> K[Compiled HTML]
        K --> L[Parse slide comments]
        L --> M[SlideData Array]
    end

    M --> C
```

---

## Tips for Great Slides

<Aside type="tip" title="Best Practices">

1. **Keep slides focused** - One idea per slide
2. **Use headings** - They become slide titles
3. **Leverage layouts** - Pick the right layout for content
4. **Use v-clicks** - Reveal complex info step-by-step
5. **Test navigation** - Make sure flow makes sense

</Aside>

### Content Length

<VClicks>

- Short slides work best
- If content overflows, it scrolls within the slide
- But try to keep each slide digestible
- Use v-clicks to break up longer content

</VClicks>

---

## Accessibility Features

<VClicks>

- **Focus trap** - Tab stays within the modal
- **ARIA live region** - Announces "Slide X of Y, Step N of M"
- **Escape to exit** - Standard modal behavior
- **Keyboard navigation** - No mouse required
- **Theme aware** - Respects light/dark mode
- **Reduced motion** - V-click respects `prefers-reduced-motion`

</VClicks>

---

## What's NOT Included (Yet)

Future enhancements could include:

<VClicks>

- Presenter notes (separate view)
- Export to PDF
- Speaker timer
- Touch/swipe gestures
- Dual-screen presenter view
- Laser pointer mode
- Drawing export to PNG/SVG

</VClicks>

Want these features? Open an issue!

---