Slidev Starter Template — Miragon Branding

A reusable Slidev presentation template with Miragon branding, custom Vue components, and addon support for BPMN and Excalidraw.

Quick Start

npm install
npm run dev

Your presentation opens at http://localhost:3030

Available Components

Component	Description	Example
IconCard	Card with large emoji icon	<IconCard icon="🚀" title="Title" description="Text" color="blue"></IconCard>
FeatureBox	Colored left-border highlight box	<FeatureBox color="green" title="Title">Content</FeatureBox>
AlertBox	Tip/info callout box	<AlertBox label="Tip">Content</AlertBox>
StepCard	Numbered step card	<StepCard number="1" title="Step" color="blue">Description</StepCard>
StatusBadge	Status indicator with emoji	<StatusBadge emoji="✅" text="Done" status="recommended"></StatusBadge>
LogoChip	Technology logo chip (Iconify)	<LogoChip label="logos:java"></LogoChip>
SectionBadge	Chapter/section label	<SectionBadge text="Chapter" number="1"></SectionBadge>

Project Structure

├── slides.md              # Entry point — frontmatter + src imports only
├── pages/                 # One file per chapter
│   └── chapter-1-example.md
├── components/            # Reusable Vue components
├── styles/theme.css       # Miragon color system
├── global-top.vue         # Logo header overlay
├── public/images/         # Brand logos (komet.svg, logo.svg)
├── package.json
└── CLAUDE.md              # AI coding rules

How to Customize

1. Edit slides.md — Update the title, subtitle, and frontmatter
2. Create chapter pages — Add new .md files in pages/ named chapter-<n>-<topic>.md
3. Register pages — Add src: ./pages/<name>.md entries in slides.md
4. Use layouts — Set layout: two-cols, section, intro, image-right, etc. in frontmatter
5. Add images — Place files in public/images/ and reference as /images/filename.png
6. BPMN/Excalidraw — Place files in public/bpmn/ or public/excalidraw/ and use the addon components

Theme Colors

Edit styles/theme.css to customize:

:root {
  --miragon-blue: #335DE4;
  --miragon-green: #00E676;
}

Scripts

npm run dev          # Start dev server
npm run build        # Build for production
npm run export       # Export to PDF
npm run export-notes # Export speaker notes

Resources

• Slidev Docs
• Penguin Theme
• Iconify Logos