@slidev/cli 52.11.4 → 52.12.0

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

@@ -0,0 +1,195 @@
+---
+name: frontmatter
+description: Configuration options for individual slides
+---
+
+# Per-Slide Frontmatter
+
+Configuration options for individual slides.
+
+## Layout
+
+```yaml
+---
+layout: center
+---
+```
+
+Available layouts: `default`, `cover`, `center`, `two-cols`, `two-cols-header`, `image`, `image-left`, `image-right`, `iframe`, `iframe-left`, `iframe-right`, `quote`, `section`, `statement`, `fact`, `full`, `intro`, `end`, `none`
+
+## Background
+
+```yaml
+---
+background: /image.jpg
+backgroundSize: cover
+class: text-white
+---
+```
+
+## Click Count
+
+```yaml
+---
+clicks: 5                   # Total clicks for this slide
+clicksStart: 0              # Starting click number
+---
+```
+
+## Transitions
+
+```yaml
+---
+transition: fade            # Slide transition
+---
+```
+
+Or different for forward/backward:
+
+```yaml
+---
+transition: slide-left | slide-right
+---
+```
+
+## Zoom
+
+```yaml
+---
+zoom: 0.8                   # Scale content (0.8 = 80%)
+---
+```
+
+## Hide Slide
+
+```yaml
+---
+disabled: true              # Hide this slide
+# or
+hide: true
+---
+```
+
+## Table of Contents
+
+```yaml
+---
+hideInToc: true             # Hide from Toc component
+level: 2                    # Override heading level
+title: Custom Title         # Override slide title
+---
+```
+
+## Import External File
+
+```yaml
+---
+src: ./slides/intro.md      # Import markdown file
+---
+```
+
+With specific slides:
+
+```yaml
+---
+src: ./other.md#2,5-7       # Import slides 2, 5, 6, 7
+---
+```
+
+## Route Alias
+
+```yaml
+---
+routeAlias: intro           # URL: /intro instead of /1
+---
+```
+
+## Preload
+
+```yaml
+---
+preload: false              # Don't mount until entering
+---
+```
+
+## Draggable Positions
+
+```yaml
+---
+dragPos:
+  logo: 100,50,200,100,0    # Left,Top,Width,Height,Rotate
+  arrow: 300,200,50,50,45
+---
+```
+
+## Image Layouts
+
+```yaml
+---
+layout: image-left
+image: /photo.jpg
+backgroundSize: contain
+class: my-custom-class
+---
+```
+
+## Iframe Layouts
+
+```yaml
+---
+layout: iframe
+url: https://example.com
+---
+```
+
+## Two Columns
+
+```yaml
+---
+layout: two-cols
+---
+
+# Left Side
+
+Content
+
+::right::
+
+# Right Side
+
+Content
+```
+
+## Two Columns with Header
+
+```yaml
+---
+layout: two-cols-header
+---
+
+# Header
+
+::left::
+
+Left content
+
+::right::
+
+Right content
+```
+
+## Full Example
+
+```yaml
+---
+layout: center
+background: /bg.jpg
+class: text-white text-center
+transition: fade
+clicks: 3
+zoom: 0.9
+hideInToc: false
+---
+
+# Slide Content
+```

package/skills/slidev/references/core-global-context.md

@@ -0,0 +1,155 @@
+---
+name: global-context
+description: Access navigation, slide info, and configuration programmatically
+---
+
+# Global Context & API
+
+Access navigation, slide info, and configuration programmatically.
+
+## Template Variables
+
+Available in slides and components:
+
+```md
+Page {{ $page }} of {{ $nav.total }}
+Title: {{ $slidev.configs.title }}
+```
+
+### $nav
+
+Navigation state and controls:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `$nav.currentPage` | number | Current page (1-indexed) |
+| `$nav.currentLayout` | string | Current layout name |
+| `$nav.total` | number | Total slides |
+| `$nav.isPresenter` | boolean | In presenter mode |
+| `$nav.next()` | function | Next click/slide |
+| `$nav.prev()` | function | Previous click/slide |
+| `$nav.nextSlide()` | function | Next slide |
+| `$nav.prevSlide()` | function | Previous slide |
+| `$nav.go(n)` | function | Go to slide n |
+
+### $slidev
+
+Global context:
+
+| Property | Description |
+|----------|-------------|
+| `$slidev.configs` | Project config (title, etc.) |
+| `$slidev.themeConfigs` | Theme config |
+
+### $frontmatter
+
+Current slide frontmatter:
+
+```md
+Layout: {{ $frontmatter.layout }}
+```
+
+### $clicks
+
+Current click count on slide.
+
+### $page
+
+Current page number (1-indexed).
+
+### $renderContext
+
+Current render context:
+- `'slide'` - Normal slide view
+- `'overview'` - Overview mode
+- `'presenter'` - Presenter mode
+- `'previewNext'` - Next slide preview
+
+## Composables
+
+Import from `@slidev/client`:
+
+```ts
+import {
+  useNav,
+  useDarkMode,
+  useIsSlideActive,
+  useSlideContext,
+  onSlideEnter,
+  onSlideLeave,
+} from '@slidev/client'
+```
+
+### useNav
+
+```ts
+const nav = useNav()
+nav.next()
+nav.go(5)
+console.log(nav.currentPage)
+```
+
+### useDarkMode
+
+```ts
+const { isDark, toggle } = useDarkMode()
+```
+
+### useIsSlideActive
+
+```ts
+const isActive = useIsSlideActive()
+// Returns ref<boolean>
+```
+
+### useSlideContext
+
+```ts
+const { $page, $clicks, $frontmatter } = useSlideContext()
+```
+
+## Lifecycle Hooks
+
+```ts
+import { onSlideEnter, onSlideLeave } from '@slidev/client'
+
+onSlideEnter(() => {
+  // Slide became active
+  startAnimation()
+})
+
+onSlideLeave(() => {
+  // Slide became inactive
+  cleanup()
+})
+```
+
+**Important:** Don't use `onMounted`/`onUnmounted` in slides - component instance persists. Use `onSlideEnter`/`onSlideLeave` instead.
+
+## Conditional Rendering Examples
+
+```html
+<!-- Show only in presenter mode -->
+<div v-if="$nav.isPresenter">
+  Presenter notes
+</div>
+
+<!-- Hide on cover slide -->
+<footer v-if="$nav.currentLayout !== 'cover'">
+  Page {{ $nav.currentPage }}
+</footer>
+
+<!-- Different content by context -->
+<template v-if="$renderContext === 'slide'">
+  Normal view
+</template>
+<template v-else-if="$renderContext === 'presenter'">
+  Presenter view
+</template>
+```
+
+## Type Imports
+
+```ts
+import type { TocItem } from '@slidev/types'
+```

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

@@ -0,0 +1,188 @@
+---
+name: headmatter
+description: Deck-wide configuration options in the first frontmatter block
+---
+
+# Headmatter Configuration
+
+Deck-wide configuration options in the first frontmatter block.
+
+## Theme & Appearance
+
+```yaml
+---
+theme: default              # Theme package or path
+colorSchema: auto           # 'auto' | 'light' | 'dark'
+favicon: /favicon.ico       # Favicon URL
+aspectRatio: 16/9           # Slide aspect ratio
+canvasWidth: 980            # Canvas width in px
+---
+```
+
+## Fonts
+
+```yaml
+---
+fonts:
+  sans: Roboto
+  serif: Roboto Slab
+  mono: Fira Code
+  provider: google          # 'google' | 'none'
+---
+```
+
+## Code & Highlighting
+
+```yaml
+---
+highlighter: shiki          # Code highlighter
+lineNumbers: false          # Show line numbers
+monaco: true                # Enable Monaco editor ('true' | 'dev' | 'build')
+twoslash: true              # Enable TwoSlash
+monacoTypesSource: local    # 'local' | 'cdn' | 'none'
+---
+```
+
+## Features
+
+```yaml
+---
+drawings:
+  enabled: true             # Enable drawing mode
+  persist: false            # Save drawings
+  presenterOnly: false      # Only presenter can draw
+  syncAll: true             # Sync across instances
+record: dev                 # Enable recording
+selectable: true            # Text selection
+contextMenu: true           # Right-click menu
+wakeLock: true              # Prevent screen sleep
+---
+```
+
+## Export & Build
+
+```yaml
+---
+download: false             # PDF download button
+exportFilename: slides      # Export filename
+export:
+  format: pdf
+  timeout: 30000
+  withClicks: false
+  withToc: false
+---
+```
+
+## Info & SEO
+
+```yaml
+---
+title: My Presentation
+titleTemplate: '%s - Slidev'
+author: Your Name
+keywords: slidev, presentation
+info: |
+  ## About
+  Presentation description
+---
+```
+
+## SEO Meta Tags
+
+```yaml
+---
+seoMeta:
+  ogTitle: Presentation Title
+  ogDescription: Description
+  ogImage: https://example.com/og.png
+  ogUrl: https://example.com
+  twitterCard: summary_large_image
+  twitterTitle: Title
+  twitterDescription: Description
+  twitterImage: https://example.com/twitter.png
+---
+```
+
+## Addons & Themes
+
+```yaml
+---
+theme: seriph
+addons:
+  - excalidraw
+  - '@slidev/plugin-notes'
+---
+```
+
+## Theme Configuration
+
+```yaml
+---
+themeConfig:
+  primary: '#5d8392'
+  # Theme-specific options
+---
+```
+
+## Defaults
+
+Set default frontmatter for all slides:
+
+```yaml
+---
+defaults:
+  layout: default
+  transition: fade
+---
+```
+
+## HTML Attributes
+
+```yaml
+---
+htmlAttrs:
+  dir: ltr
+  lang: en
+---
+```
+
+## Presenter & Browser
+
+```yaml
+---
+presenter: true             # 'true' | 'dev' | 'build'
+browserExporter: dev        # 'true' | 'dev' | 'build'
+routerMode: history         # 'history' | 'hash'
+---
+```
+
+## Remote Assets
+
+```yaml
+---
+remoteAssets: false         # Download remote assets locally
+plantUmlServer: https://www.plantuml.com/plantuml
+---
+```
+
+## Full Template
+
+```yaml
+---
+theme: default
+title: Presentation Title
+author: Your Name
+highlighter: shiki
+lineNumbers: true
+transition: slide-left
+aspectRatio: 16/9
+canvasWidth: 980
+fonts:
+  sans: Roboto
+  mono: Fira Code
+drawings:
+  enabled: true
+  persist: true
+download: true
+---
+```

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

@@ -0,0 +1,152 @@
+---
+name: hosting
+description: Build and deploy Slidev presentations
+---
+
+# Hosting & Deployment
+
+Build and deploy Slidev presentations.
+
+## Build for Production
+
+```bash
+slidev build
+```
+
+Output: `dist/` folder (static SPA)
+
+### Options
+
+```bash
+slidev build --base /talks/my-talk/    # Custom base path
+slidev build --out public              # Custom output dir
+slidev build --download                # Include PDF
+slidev build --without-notes           # Exclude notes
+```
+
+### Multiple Presentations
+
+```bash
+slidev build slides1.md slides2.md
+```
+
+## GitHub Pages
+
+### GitHub Actions
+
+Create `.github/workflows/deploy.yml`:
+
+```yaml
+name: Deploy
+
+on:
+  push:
+    branches: [main]
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+
+      - name: Install
+        run: npm install
+
+      - name: Build
+        run: npm run build -- --base /${{ github.event.repository.name }}/
+
+      - uses: actions/configure-pages@v4
+
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist
+
+      - uses: actions/deploy-pages@v4
+```
+
+## Netlify
+
+Create `netlify.toml`:
+
+```toml
+[build]
+  publish = 'dist'
+  command = 'npm run build'
+
+[[redirects]]
+  from = '/*'
+  to = '/index.html'
+  status = 200
+```
+
+## Vercel
+
+Create `vercel.json`:
+
+```json
+{
+  "rewrites": [
+    { "source": "/(.*)", "destination": "/index.html" }
+  ]
+}
+```
+
+## Docker
+
+### Using Official Image
+
+```bash
+docker run --name slidev --rm -it \
+  -v ${PWD}:/slidev \
+  -p 3030:3030 \
+  tangramor/slidev:latest
+```
+
+### Custom Dockerfile
+
+```dockerfile
+FROM tangramor/slidev:latest
+
+COPY slides.md .
+COPY public ./public
+
+RUN npm run build
+
+EXPOSE 80
+CMD ["npx", "serve", "dist"]
+```
+
+## Base Path
+
+For subdirectory deployment:
+
+```bash
+# Build
+slidev build --base /my-slides/
+
+# Or in headmatter
+---
+base: /my-slides/
+---
+```
+
+## Router Mode
+
+For servers without rewrite support:
+
+```yaml
+---
+routerMode: hash
+---
+```
+
+URLs become: `/#/1`, `/#/2`, etc.