@slidev/cli 52.11.4 → 52.12.0

package/skills/slidev/references/core-animations.md

@@ -0,0 +1,196 @@
+---
+name: animations
+description: Click animations, motion effects, and slide transitions
+---
+
+# Animations
+
+Click animations, motion effects, and slide transitions.
+
+## Click Animations
+
+### v-click Directive
+
+```md
+<div v-click>Appears on click</div>
+<div v-click>Appears on next click</div>
+```
+
+### v-clicks Component
+
+Animate list items:
+
+```md
+<v-clicks>
+
+- Item 1
+- Item 2
+- Item 3
+
+</v-clicks>
+```
+
+With depth for nested lists:
+
+```md
+<v-clicks depth="2">
+
+- Parent 1
+  - Child 1
+  - Child 2
+- Parent 2
+
+</v-clicks>
+```
+
+### Click Positioning
+
+Relative positioning:
+```md
+<div v-click>1st (default)</div>
+<div v-click="+1">2nd</div>
+<div v-click="-1">Same as previous</div>
+```
+
+Absolute positioning:
+```md
+<div v-click="3">Appears on click 3</div>
+<div v-click="[2,5]">Visible clicks 2-5</div>
+```
+
+### v-after
+
+Show with previous element:
+
+```md
+<div v-click>Main element</div>
+<div v-after>Appears with main element</div>
+```
+
+### v-switch
+
+Conditional rendering by click:
+
+```md
+<v-switch>
+  <template #1>First state</template>
+  <template #2>Second state</template>
+  <template #3>Third state</template>
+</v-switch>
+```
+
+## Custom Click Count
+
+```md
+---
+clicks: 10
+---
+```
+
+Or starting from specific count:
+
+```md
+---
+clicksStart: 5
+---
+```
+
+## Motion Animations
+
+Using @vueuse/motion:
+
+```md
+<div
+  v-motion
+  :initial="{ x: -100, opacity: 0 }"
+  :enter="{ x: 0, opacity: 1 }"
+>
+  Animated content
+</div>
+```
+
+Click-based motion:
+
+```md
+<div
+  v-motion
+  :initial="{ scale: 1 }"
+  :click-1="{ scale: 1.5 }"
+  :click-2="{ scale: 1 }"
+>
+  Scales on clicks
+</div>
+```
+
+## Slide Transitions
+
+In headmatter (all slides):
+
+```md
+---
+transition: slide-left
+---
+```
+
+Per-slide:
+
+```md
+---
+transition: fade
+---
+```
+
+### Built-in Transitions
+
+- `fade` / `fade-out`
+- `slide-left` / `slide-right`
+- `slide-up` / `slide-down`
+- `view-transition` (View Transitions API)
+
+### Directional Transitions
+
+Different transitions for forward/backward:
+
+```md
+---
+transition: slide-left | slide-right
+---
+```
+
+### Custom Transitions
+
+Define CSS classes:
+
+```css
+.my-transition-enter-active,
+.my-transition-leave-active {
+  transition: all 0.5s ease;
+}
+.my-transition-enter-from,
+.my-transition-leave-to {
+  opacity: 0;
+  transform: translateX(100px);
+}
+```
+
+Use: `transition: my-transition`
+
+## CSS Classes
+
+Animation targets get these classes:
+- `.slidev-vclick-target` - Animated element
+- `.slidev-vclick-hidden` - Hidden state
+- `.slidev-vclick-current` - Current click target
+- `.slidev-vclick-prior` - Previously shown
+
+## Default Animation CSS
+
+```css
+.slidev-vclick-target {
+  transition: opacity 100ms ease;
+}
+.slidev-vclick-hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+```

package/skills/slidev/references/core-cli.md

@@ -0,0 +1,140 @@
+---
+name: cli
+description: Slidev command-line interface reference
+---
+
+# CLI Commands
+
+Slidev command-line interface reference.
+
+## Dev Server
+
+```bash
+slidev [entry]
+slidev slides.md
+```
+
+Options:
+| Option | Default | Description |
+|--------|---------|-------------|
+| `--port` | 3030 | Server port |
+| `--open` | false | Open browser |
+| `--remote [password]` | - | Enable remote access |
+| `--bind` | 0.0.0.0 | Bind address |
+| `--base` | / | Base URL path |
+| `--log` | warn | Log level |
+| `--force` | false | Force optimizer re-bundle |
+| `--theme` | - | Override theme |
+
+Examples:
+```bash
+slidev --port 8080 --open
+slidev --remote mypassword
+slidev --base /talks/my-talk/
+```
+
+## Build
+
+```bash
+slidev build [entry]
+```
+
+Options:
+| Option | Default | Description |
+|--------|---------|-------------|
+| `--out` | dist | Output directory |
+| `--base` | / | Base URL for deployment |
+| `--download` | false | Include PDF download |
+| `--theme` | - | Override theme |
+| `--without-notes` | false | Exclude presenter notes |
+
+Examples:
+```bash
+slidev build --base /my-repo/
+slidev build --download --out public
+slidev build slides1.md slides2.md  # Multiple builds
+```
+
+## Export
+
+```bash
+slidev export [entry]
+```
+
+Options:
+| Option | Default | Description |
+|--------|---------|-------------|
+| `--output` | - | Output filename |
+| `--format` | pdf | pdf / png / pptx / md |
+| `--timeout` | 30000 | Timeout per slide (ms) |
+| `--range` | - | Slide range (e.g., 1,4-7) |
+| `--dark` | false | Export dark mode |
+| `--with-clicks` | false | Include click steps |
+| `--with-toc` | false | PDF table of contents |
+| `--wait` | 0 | Wait ms before export |
+| `--wait-until` | networkidle | Wait condition |
+| `--omit-background` | false | Transparent background |
+| `--executable-path` | - | Browser path |
+
+Examples:
+```bash
+slidev export
+slidev export --format pptx
+slidev export --format png --range 1-5
+slidev export --with-clicks --dark
+slidev export --timeout 60000 --wait 2000
+```
+
+## Format
+
+```bash
+slidev format [entry]
+```
+
+Formats the slides markdown file.
+
+## Theme Eject
+
+```bash
+slidev theme eject [entry]
+```
+
+Options:
+| Option | Default | Description |
+|--------|---------|-------------|
+| `--dir` | theme | Output directory |
+| `--theme` | - | Theme to eject |
+
+Extracts theme to local directory for customization.
+
+## npm Script Usage
+
+In package.json:
+```json
+{
+  "scripts": {
+    "dev": "slidev",
+    "build": "slidev build",
+    "export": "slidev export"
+  }
+}
+```
+
+With arguments (note `--`):
+```bash
+npm run dev -- --port 8080 --open
+npm run export -- --format pptx
+```
+
+## Boolean Options
+
+```bash
+slidev --open           # Same as --open true
+slidev --no-open        # Same as --open false
+```
+
+## Install CLI Globally
+
+```bash
+npm i -g @slidev/cli
+```

package/skills/slidev/references/core-components.md

@@ -0,0 +1,197 @@
+---
+name: components
+description: Ready-to-use components in Slidev
+---
+
+# Built-in Components
+
+Ready-to-use components in Slidev.
+
+## Navigation
+
+### Link
+
+Navigate to slide:
+```md
+<Link to="5">Go to slide 5</Link>
+<Link to="intro">Go to intro</Link>  <!-- with routeAlias -->
+```
+
+### SlideCurrentNo / SlidesTotal
+
+```md
+Slide <SlideCurrentNo /> of <SlidesTotal />
+```
+
+### Toc (Table of Contents)
+
+```md
+<Toc />
+<Toc maxDepth="2" />
+<Toc columns="2" />
+```
+
+Props:
+- `columns` - Number of columns
+- `maxDepth` / `minDepth` - Heading depth filter
+- `mode` - 'all' | 'onlyCurrentTree' | 'onlySiblings'
+
+### TitleRenderer
+
+Render slide title:
+```md
+<TitleRenderer no="3" />
+```
+
+## Animations
+
+### VClick / VClicks
+
+```md
+<VClick>Shows on click</VClick>
+
+<VClicks>
+
+- Item 1
+- Item 2
+
+</VClicks>
+```
+
+### VAfter
+
+```md
+<VClick>First</VClick>
+<VAfter>Shows with first</VAfter>
+```
+
+### VSwitch
+
+```md
+<VSwitch>
+  <template #1>State 1</template>
+  <template #2>State 2</template>
+</VSwitch>
+```
+
+## Drawing
+
+### Arrow
+
+```md
+<Arrow x1="10" y1="10" x2="100" y2="100" />
+<Arrow x1="10" y1="10" x2="100" y2="100" two-way />
+```
+
+Props: `x1`, `y1`, `x2`, `y2`, `width`, `color`, `two-way`
+
+### VDragArrow
+
+Draggable arrow:
+```md
+<VDragArrow />
+```
+
+## Layout
+
+### Transform
+
+Scale elements:
+```md
+<Transform :scale="0.5">
+  <LargeContent />
+</Transform>
+```
+
+Props: `scale`, `origin`
+
+### AutoFitText
+
+Auto-sizing text:
+```md
+<AutoFitText :max="200" :min="50" modelValue="Hello" />
+```
+
+## Media
+
+### SlidevVideo
+
+```md
+<SlidevVideo v-click autoplay controls>
+  <source src="/video.mp4" type="video/mp4" />
+</SlidevVideo>
+```
+
+Props: `controls`, `autoplay`, `autoreset`, `poster`, `timestamp`
+
+### Youtube
+
+```md
+<Youtube id="dQw4w9WgXcQ" />
+<Youtube id="dQw4w9WgXcQ" width="600" height="400" />
+```
+
+### Tweet
+
+```md
+<Tweet id="1423789844234231808" />
+<Tweet id="1423789844234231808" :scale="0.8" />
+```
+
+## Conditional
+
+### LightOrDark
+
+```md
+<LightOrDark>
+  <template #dark>Dark mode content</template>
+  <template #light>Light mode content</template>
+</LightOrDark>
+```
+
+### RenderWhen
+
+```md
+<RenderWhen context="presenter">
+  Only in presenter mode
+</RenderWhen>
+```
+
+Context values:
+- `main` - Main presentation view
+- `visible` - Visible slides
+- `print` - Print/export mode
+- `slide` - Normal slide view
+- `overview` - Overview mode
+- `presenter` - Presenter mode
+- `previewNext` - Next slide preview
+
+## Branding
+
+### PoweredBySlidev
+
+```md
+<PoweredBySlidev />
+```
+
+## Draggable
+
+### VDrag
+
+```md
+<VDrag pos="myElement">
+  Draggable content
+</VDrag>
+```
+
+See [draggable](draggable.md) for details.
+
+## Component Auto-Import
+
+Components from these sources are auto-imported:
+1. Built-in components
+2. Theme components
+3. Addon components
+4. `./components/` directory
+
+No import statements needed.

package/skills/slidev/references/core-exporting.md

@@ -0,0 +1,148 @@
+---
+name: exporting
+description: Export presentations to PDF, PPTX, PNG, or Markdown
+---
+
+# Exporting Slides
+
+Export presentations to PDF, PPTX, PNG, or Markdown.
+
+## Browser Exporter
+
+Access at `http://localhost:3030/export`:
+- Select format and options
+- Preview and download
+
+## CLI Export
+
+Requires playwright:
+```bash
+pnpm add -D playwright-chromium
+```
+
+### PDF Export
+
+```bash
+slidev export
+slidev export --output my-slides.pdf
+```
+
+### PowerPoint Export
+
+```bash
+slidev export --format pptx
+```
+
+### PNG Export
+
+```bash
+slidev export --format png
+slidev export --format png --range 1-5
+```
+
+### Markdown Export
+
+```bash
+slidev export --format md
+```
+
+## Export Options
+
+### With Click Steps
+
+Export each click as separate page:
+```bash
+slidev export --with-clicks
+```
+
+### Dark Mode
+
+```bash
+slidev export --dark
+```
+
+### Slide Range
+
+```bash
+slidev export --range 1,4-7,10
+```
+
+### Table of Contents
+
+PDF with clickable outline:
+```bash
+slidev export --with-toc
+```
+
+### Timeout
+
+For slow-rendering slides:
+```bash
+slidev export --timeout 60000
+```
+
+### Wait
+
+Wait before capture:
+```bash
+slidev export --wait 2000
+```
+
+### Wait Until
+
+Wait condition:
+```bash
+slidev export --wait-until networkidle   # Default
+slidev export --wait-until domcontentloaded
+slidev export --wait-until load
+slidev export --wait-until none
+```
+
+### Transparent Background
+
+```bash
+slidev export --omit-background
+```
+
+### Custom Browser
+
+```bash
+slidev export --executable-path /path/to/chrome
+```
+
+## Headmatter Options
+
+```yaml
+---
+exportFilename: my-presentation
+download: true              # Add download button in build
+export:
+  format: pdf
+  timeout: 30000
+  withClicks: false
+---
+```
+
+## Troubleshooting
+
+### Missing Content
+
+Increase wait time:
+```bash
+slidev export --wait 3000 --timeout 60000
+```
+
+### Wrong Global Layer State
+
+Use `--per-slide` or use `slide-top.vue` instead of `global-top.vue`.
+
+### Broken Emojis
+
+Use system fonts or install emoji font on server.
+
+### CI/CD Export
+
+Install playwright browsers:
+```bash
+npx playwright install chromium
+```