mosaicstack/stack
25
0
Fork 1
Code Issues 344 Pull Requests 13 Actions Packages Projects Releases 15 Wiki Activity

format: apply repo prettier (3.8.1) to the folded skills tree

Browse Source 
963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.
This commit is contained in:
fargo
2026-08-19 14:37:17 -05:00
parent d2eeb64433
commit 1a822493ba
962 changed files with 29594 additions and 27188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/mosaic/framework/skills/slidev/SKILL.md
+90 -90
View File
@@ -53,128 +53,128 @@ Presenter notes go here
## Core References
| Topic | Description | Reference |
|-------|-------------|-----------|
| Markdown Syntax | Slide separators, frontmatter, notes, code blocks | [core-syntax](references/core-syntax.md) |
| Animations | v-click, v-clicks, motion, transitions | [core-animations](references/core-animations.md) |
| Headmatter | Deck-wide configuration options | [core-headmatter](references/core-headmatter.md) |
| Frontmatter | Per-slide configuration options | [core-frontmatter](references/core-frontmatter.md) |
| CLI Commands | Dev, build, export, theme commands | [core-cli](references/core-cli.md) |
| Components | Built-in Vue components | [core-components](references/core-components.md) |
| Layouts | Built-in slide layouts | [core-layouts](references/core-layouts.md) |
| Exporting | PDF, PPTX, PNG export options | [core-exporting](references/core-exporting.md) |
| Hosting | Build and deploy to various platforms | [core-hosting](references/core-hosting.md) |
| Global Context | $nav, $slidev, composables API | [core-global-context](references/core-global-context.md) |
| Topic | Description | Reference |
| --------------- | ------------------------------------------------- | -------------------------------------------------------- |
| Markdown Syntax | Slide separators, frontmatter, notes, code blocks | [core-syntax](references/core-syntax.md) |
| Animations | v-click, v-clicks, motion, transitions | [core-animations](references/core-animations.md) |
| Headmatter | Deck-wide configuration options | [core-headmatter](references/core-headmatter.md) |
| Frontmatter | Per-slide configuration options | [core-frontmatter](references/core-frontmatter.md) |
| CLI Commands | Dev, build, export, theme commands | [core-cli](references/core-cli.md) |
| Components | Built-in Vue components | [core-components](references/core-components.md) |
| Layouts | Built-in slide layouts | [core-layouts](references/core-layouts.md) |
| Exporting | PDF, PPTX, PNG export options | [core-exporting](references/core-exporting.md) |
| Hosting | Build and deploy to various platforms | [core-hosting](references/core-hosting.md) |
| Global Context | $nav, $slidev, composables API | [core-global-context](references/core-global-context.md) |
## Feature Reference
### Code & Editor
| Feature | Usage | Reference |
|---------|-------|-----------|
| Line highlighting | `` ```ts {2,3} `` | [code-line-highlighting](references/code-line-highlighting.md) |
| Click-based highlighting | `` ```ts {1\|2-3\|all} `` | [code-line-highlighting](references/code-line-highlighting.md) |
| Line numbers | `lineNumbers: true` or `{lines:true}` | [code-line-numbers](references/code-line-numbers.md) |
| Scrollable code | `{maxHeight:'100px'}` | [code-max-height](references/code-max-height.md) |
| Code tabs | `::code-group` (requires `mdc: true`) | [code-groups](references/code-groups.md) |
| Monaco editor | `` ```ts {monaco} `` | [editor-monaco](references/editor-monaco.md) |
| Run code | `` ```ts {monaco-run} `` | [editor-monaco-run](references/editor-monaco-run.md) |
| Edit files | `<<< ./file.ts {monaco-write}` | [editor-monaco-write](references/editor-monaco-write.md) |
| Code animations | `` ````md magic-move `` | [code-magic-move](references/code-magic-move.md) |
| TypeScript types | `` ```ts twoslash `` | [code-twoslash](references/code-twoslash.md) |
| Import code | `<<< @/snippets/file.js` | [code-import-snippet](references/code-import-snippet.md) |
| Feature | Usage | Reference |
| ------------------------ | ------------------------------------- | -------------------------------------------------------------- |
| Line highlighting | ` ```ts {2,3} ` | [code-line-highlighting](references/code-line-highlighting.md) |
| Click-based highlighting | ` ```ts {1\|2-3\|all} ` | [code-line-highlighting](references/code-line-highlighting.md) |
| Line numbers | `lineNumbers: true` or `{lines:true}` | [code-line-numbers](references/code-line-numbers.md) |
| Scrollable code | `{maxHeight:'100px'}` | [code-max-height](references/code-max-height.md) |
| Code tabs | `::code-group` (requires `mdc: true`) | [code-groups](references/code-groups.md) |
| Monaco editor | ` ```ts {monaco} ` | [editor-monaco](references/editor-monaco.md) |
| Run code | ` ```ts {monaco-run} ` | [editor-monaco-run](references/editor-monaco-run.md) |
| Edit files | `<<< ./file.ts {monaco-write}` | [editor-monaco-write](references/editor-monaco-write.md) |
| Code animations | ` ````md magic-move ` | [code-magic-move](references/code-magic-move.md) |
| TypeScript types | ` ```ts twoslash ` | [code-twoslash](references/code-twoslash.md) |
| Import code | `<<< @/snippets/file.js` | [code-import-snippet](references/code-import-snippet.md) |
### Diagrams & Math
| Feature | Usage | Reference |
|---------|-------|-----------|
| Mermaid diagrams | `` ```mermaid `` | [diagram-mermaid](references/diagram-mermaid.md) |
| PlantUML diagrams | `` ```plantuml `` | [diagram-plantuml](references/diagram-plantuml.md) |
| LaTeX math | `$inline$` or `$$block$$` | [diagram-latex](references/diagram-latex.md) |
| Feature | Usage | Reference |
| ----------------- | ------------------------- | -------------------------------------------------- |
| Mermaid diagrams | ` ```mermaid ` | [diagram-mermaid](references/diagram-mermaid.md) |
| PlantUML diagrams | ` ```plantuml ` | [diagram-plantuml](references/diagram-plantuml.md) |
| LaTeX math | `$inline$` or `$$block$$` | [diagram-latex](references/diagram-latex.md) |
### Layout & Styling
| Feature | Usage | Reference |
|---------|-------|-----------|
| Canvas size | `canvasWidth`, `aspectRatio` | [layout-canvas-size](references/layout-canvas-size.md) |
| Zoom slide | `zoom: 0.8` | [layout-zoom](references/layout-zoom.md) |
| Scale elements | `<Transform :scale="0.5">` | [layout-transform](references/layout-transform.md) |
| Layout slots | `::right::`, `::default::` | [layout-slots](references/layout-slots.md) |
| Scoped CSS | `<style>` in slide | [style-scoped](references/style-scoped.md) |
| Global layers | `global-top.vue`, `global-bottom.vue` | [layout-global-layers](references/layout-global-layers.md) |
| Draggable elements | `v-drag`, `<v-drag>` | [layout-draggable](references/layout-draggable.md) |
| Icons | `<mdi-icon-name />` | [style-icons](references/style-icons.md) |
| Feature | Usage | Reference |
| ------------------ | ------------------------------------- | ---------------------------------------------------------- |
| Canvas size | `canvasWidth`, `aspectRatio` | [layout-canvas-size](references/layout-canvas-size.md) |
| Zoom slide | `zoom: 0.8` | [layout-zoom](references/layout-zoom.md) |
| Scale elements | `<Transform :scale="0.5">` | [layout-transform](references/layout-transform.md) |
| Layout slots | `::right::`, `::default::` | [layout-slots](references/layout-slots.md) |
| Scoped CSS | `<style>` in slide | [style-scoped](references/style-scoped.md) |
| Global layers | `global-top.vue`, `global-bottom.vue` | [layout-global-layers](references/layout-global-layers.md) |
| Draggable elements | `v-drag`, `<v-drag>` | [layout-draggable](references/layout-draggable.md) |
| Icons | `<mdi-icon-name />` | [style-icons](references/style-icons.md) |
### Animation & Interaction
| Feature | Usage | Reference |
|---------|-------|-----------|
| Click animations | `v-click`, `<v-clicks>` | [core-animations](references/core-animations.md) |
| Rough markers | `v-mark.underline`, `v-mark.circle` | [animation-rough-marker](references/animation-rough-marker.md) |
| Drawing mode | Press `C` or config `drawings:` | [animation-drawing](references/animation-drawing.md) |
| Direction styles | `forward:delay-300` | [style-direction](references/style-direction.md) |
| Note highlighting | `[click]` in notes | [animation-click-marker](references/animation-click-marker.md) |
| Feature | Usage | Reference |
| ----------------- | ----------------------------------- | -------------------------------------------------------------- |
| Click animations | `v-click`, `<v-clicks>` | [core-animations](references/core-animations.md) |
| Rough markers | `v-mark.underline`, `v-mark.circle` | [animation-rough-marker](references/animation-rough-marker.md) |
| Drawing mode | Press `C` or config `drawings:` | [animation-drawing](references/animation-drawing.md) |
| Direction styles | `forward:delay-300` | [style-direction](references/style-direction.md) |
| Note highlighting | `[click]` in notes | [animation-click-marker](references/animation-click-marker.md) |
### Syntax Extensions
| Feature | Usage | Reference |
|---------|-------|-----------|
| MDC syntax | `mdc: true` + `{style="color:red"}` | [syntax-mdc](references/syntax-mdc.md) |
| Block frontmatter | `` ```yaml `` instead of `---` | [syntax-block-frontmatter](references/syntax-block-frontmatter.md) |
| Import slides | `src: ./other.md` | [syntax-importing-slides](references/syntax-importing-slides.md) |
| Merge frontmatter | Main entry wins | [syntax-frontmatter-merging](references/syntax-frontmatter-merging.md) |
| Feature | Usage | Reference |
| ----------------- | ----------------------------------- | ---------------------------------------------------------------------- |
| MDC syntax | `mdc: true` + `{style="color:red"}` | [syntax-mdc](references/syntax-mdc.md) |
| Block frontmatter | ` ```yaml ` instead of `---` | [syntax-block-frontmatter](references/syntax-block-frontmatter.md) |
| Import slides | `src: ./other.md` | [syntax-importing-slides](references/syntax-importing-slides.md) |
| Merge frontmatter | Main entry wins | [syntax-frontmatter-merging](references/syntax-frontmatter-merging.md) |
### Presenter & Recording
| Feature | Usage | Reference |
|---------|-------|-----------|
| Recording | Press `G` for camera | [presenter-recording](references/presenter-recording.md) |
| Timer | `duration: 30min`, `timer: countdown` | [presenter-timer](references/presenter-timer.md) |
| Remote control | `slidev --remote` | [presenter-remote](references/presenter-remote.md) |
| Ruby text | `notesAutoRuby:` | [presenter-notes-ruby](references/presenter-notes-ruby.md) |
| Feature | Usage | Reference |
| -------------- | ------------------------------------- | ---------------------------------------------------------- |
| Recording | Press `G` for camera | [presenter-recording](references/presenter-recording.md) |
| Timer | `duration: 30min`, `timer: countdown` | [presenter-timer](references/presenter-timer.md) |
| Remote control | `slidev --remote` | [presenter-remote](references/presenter-remote.md) |
| Ruby text | `notesAutoRuby:` | [presenter-notes-ruby](references/presenter-notes-ruby.md) |
### Export & Build
| Feature | Usage | Reference |
|---------|-------|-----------|
| Export options | `slidev export` | [core-exporting](references/core-exporting.md) |
| Build & deploy | `slidev build` | [core-hosting](references/core-hosting.md) |
| Build with PDF | `download: true` | [build-pdf](references/build-pdf.md) |
| Cache images | Automatic for remote URLs | [build-remote-assets](references/build-remote-assets.md) |
| OG image | `seoMeta.ogImage` or `og-image.png` | [build-og-image](references/build-og-image.md) |
| SEO tags | `seoMeta:` | [build-seo-meta](references/build-seo-meta.md) |
| Feature | Usage | Reference |
| -------------- | ----------------------------------- | -------------------------------------------------------- |
| Export options | `slidev export` | [core-exporting](references/core-exporting.md) |
| Build & deploy | `slidev build` | [core-hosting](references/core-hosting.md) |
| Build with PDF | `download: true` | [build-pdf](references/build-pdf.md) |
| Cache images | Automatic for remote URLs | [build-remote-assets](references/build-remote-assets.md) |
| OG image | `seoMeta.ogImage` or `og-image.png` | [build-og-image](references/build-og-image.md) |
| SEO tags | `seoMeta:` | [build-seo-meta](references/build-seo-meta.md) |
### Editor & Tools
| Feature | Usage | Reference |
|---------|-------|-----------|
| Side editor | Click edit icon | [editor-side](references/editor-side.md) |
| VS Code extension | Install `antfu.slidev` | [editor-vscode](references/editor-vscode.md) |
| Prettier | `prettier-plugin-slidev` | [editor-prettier](references/editor-prettier.md) |
| Eject theme | `slidev theme eject` | [tool-eject-theme](references/tool-eject-theme.md) |
| Feature | Usage | Reference |
| ----------------- | ------------------------ | -------------------------------------------------- |
| Side editor | Click edit icon | [editor-side](references/editor-side.md) |
| VS Code extension | Install `antfu.slidev` | [editor-vscode](references/editor-vscode.md) |
| Prettier | `prettier-plugin-slidev` | [editor-prettier](references/editor-prettier.md) |
| Eject theme | `slidev theme eject` | [tool-eject-theme](references/tool-eject-theme.md) |
### Lifecycle & API
| Feature | Usage | Reference |
|---------|-------|-----------|
| Slide hooks | `onSlideEnter()`, `onSlideLeave()` | [api-slide-hooks](references/api-slide-hooks.md) |
| Navigation API | `$nav`, `useNav()` | [core-global-context](references/core-global-context.md) |
| Feature | Usage | Reference |
| -------------- | ---------------------------------- | -------------------------------------------------------- |
| Slide hooks | `onSlideEnter()`, `onSlideLeave()` | [api-slide-hooks](references/api-slide-hooks.md) |
| Navigation API | `$nav`, `useNav()` | [core-global-context](references/core-global-context.md) |
## Common Layouts
| Layout | Purpose |
|--------|---------|
| `cover` | Title/cover slide |
| `center` | Centered content |
| `default` | Standard slide |
| `two-cols` | Two columns (use `::right::`) |
| `two-cols-header` | Header + two columns |
| `image` / `image-left` / `image-right` | Image layouts |
| `iframe` / `iframe-left` / `iframe-right` | Embed URLs |
| `quote` | Quotation |
| `section` | Section divider |
| `fact` / `statement` | Data/statement display |
| `intro` / `end` | Intro/end slides |
| Layout | Purpose |
| ----------------------------------------- | ----------------------------- |
| `cover` | Title/cover slide |
| `center` | Centered content |
| `default` | Standard slide |
| `two-cols` | Two columns (use `::right::`) |
| `two-cols-header` | Header + two columns |
| `image` / `image-left` / `image-right` | Image layouts |
| `iframe` / `iframe-left` / `iframe-right` | Embed URLs |
| `quote` | Quotation |
| `section` | Section divider |
| `fact` / `statement` | Data/statement display |
| `intro` / `end` | Intro/end slides |
## Resources
packages/mosaic/framework/skills/slidev/references/animation-drawing.md
+3
View File
@@ -31,6 +31,7 @@ Drawings saved to `.slidev/drawings/`.
## Disable Drawing
Entirely:
```md
---
drawings:
@@ -39,6 +40,7 @@ drawings:
```
Only in development:
```md
---
drawings:
@@ -47,6 +49,7 @@ drawings:
```
Only in presenter mode:
```md
---
drawings:
packages/mosaic/framework/skills/slidev/references/animation-rough-marker.md
+4 -7
View File
@@ -26,11 +26,11 @@ Hand-drawn style highlighting using Rough Notation.
## Colors
```html
<span v-mark.red>Red marker</span>
<span v-mark.blue>Blue marker</span>
<span v-mark.red>Red marker</span> <span v-mark.blue>Blue marker</span>
```
Custom color:
```html
<span v-mark="{ color: '#234' }">Custom color</span>
```
@@ -40,14 +40,11 @@ Custom color:
Works like v-click:
```html
<span v-mark="5">Appears on click 5</span>
<span v-mark="'+1'">Next click</span>
<span v-mark="5">Appears on click 5</span> <span v-mark="'+1'">Next click</span>
```
## Full Options
```html
<span v-mark="{ at: 5, color: '#234', type: 'circle' }">
Custom marker
</span>
<span v-mark="{ at: 5, color: '#234', type: 'circle' }"> Custom marker </span>
```
packages/mosaic/framework/skills/slidev/references/api-slide-hooks.md
+4 -4
View File
@@ -10,17 +10,17 @@ Lifecycle hooks for slide components.
## Available Hooks
```ts
import { onSlideEnter, onSlideLeave, useIsSlideActive } from '@slidev/client'
import { onSlideEnter, onSlideLeave, useIsSlideActive } from '@slidev/client';
const isActive = useIsSlideActive()
const isActive = useIsSlideActive();
onSlideEnter(() => {
// Called when slide becomes active
})
});
onSlideLeave(() => {
// Called when slide becomes inactive
})
});
```
## Important
packages/mosaic/framework/skills/slidev/references/build-pdf.md
+1
View File
@@ -36,5 +36,6 @@ slidev build --download
## Export Options
Configure PDF export settings via:
- CLI: `slidev build --download --with-clicks --timeout 60000`
- Headmatter: Set `exportFilename`, `withClicks`, etc.
packages/mosaic/framework/skills/slidev/references/build-seo-meta.md
+2
View File
@@ -28,12 +28,14 @@ seoMeta:
## Available Options
**Open Graph (Facebook, LinkedIn):**
- `ogTitle` - Title
- `ogDescription` - Description
- `ogImage` - Preview image URL
- `ogUrl` - Canonical URL
**Twitter Card:**
- `twitterCard` - Card type (summary, summary_large_image)
- `twitterTitle` - Title
- `twitterDescription` - Description
packages/mosaic/framework/skills/slidev/references/code-groups.md
+4 -3
View File
@@ -49,16 +49,17 @@ Use `~icon~` syntax in title:
````md
```js [npm ~i-uil:github~]
console.log('Hello!')
console.log('Hello!');
```
````
Requires:
1. Install icon collection: `pnpm add @iconify-json/uil`
2. Add to safelist in `uno.config.ts`:
```ts
export default defineConfig({
safelist: ['i-uil:github']
})
safelist: ['i-uil:github'],
});
```
packages/mosaic/framework/skills/slidev/references/code-import-snippet.md
+1 -1
View File
@@ -43,7 +43,7 @@ Combine with line highlighting, Monaco editor:
Use `{*}` for line highlighting placeholder:
```md
<<< @/snippets/snippet.js {*}{lines:true}
<<< @/snippets/snippet.js {\*}{lines:true}
```
## Monaco Write
packages/mosaic/framework/skills/slidev/references/code-line-highlighting.md
+4 -10
View File
@@ -11,11 +11,8 @@ Highlight specific lines in code blocks.
````md
```ts {2,3}
function add(
a: Ref<number> | number,
b: Ref<number> | number
) {
return computed(() => unref(a) + unref(b))
function add(a: Ref<number> | number, b: Ref<number> | number) {
return computed(() => unref(a) + unref(b));
}
```
````
@@ -26,11 +23,8 @@ Use `|` to separate stages:
````md
```ts {2-3|5|all}
function add(
a: Ref<number> | number,
b: Ref<number> | number
) {
return computed(() => unref(a) + unref(b))
function add(a: Ref<number> | number, b: Ref<number> | number) {
return computed(() => unref(a) + unref(b));
}
```
````
packages/mosaic/framework/skills/slidev/references/code-line-numbers.md
+2 -5
View File
@@ -21,11 +21,8 @@ lineNumbers: true
````md
```ts {6,7}{lines:true,startLine:5}
function add(
a: Ref<number> | number,
b: Ref<number> | number
) {
return computed(() => unref(a) + unref(b))
function add(a: Ref<number> | number, b: Ref<number> | number) {
return computed(() => unref(a) + unref(b));
}
```
````
packages/mosaic/framework/skills/slidev/references/code-magic-move.md
+9 -7
View File
@@ -12,13 +12,15 @@ Animate code changes with smooth transitions (like Keynote's Magic Move).
`````md
````md magic-move
```js
console.log(`Step ${1}`)
console.log(`Step ${1}`);
```
```js
console.log(`Step ${1 + 1}`)
console.log(`Step ${1 + 1}`);
```
```ts
console.log(`Step ${3}` as string)
console.log(`Step ${3}` as string);
```
````
`````
@@ -30,17 +32,17 @@ Note: Use 4 backticks for the wrapper.
`````md
````md magic-move {at:4, lines: true}
```js {*|1|2-5}
let count = 1
let count = 1;
function add() {
count++
count++;
}
```
Non-code blocks in between are ignored.
```js {*}{lines: false}
let count = 1
const add = () => count += 1
let count = 1;
const add = () => (count += 1);
```
````
`````
packages/mosaic/framework/skills/slidev/references/code-max-height.md
+3 -6
View File
@@ -11,14 +11,11 @@ Set a fixed height for code blocks with scrolling.
````md
```ts {2|3|7|12}{maxHeight:'100px'}
function add(
a: Ref<number> | number,
b: Ref<number> | number
) {
return computed(() => unref(a) + unref(b))
function add(a: Ref<number> | number, b: Ref<number> | number) {
return computed(() => unref(a) + unref(b));
}
/// ...as many lines as you want
const c = add(1, 2)
const c = add(1, 2);
```
````
packages/mosaic/framework/skills/slidev/references/code-twoslash.md
+3 -3
View File
@@ -11,9 +11,9 @@ Show TypeScript type information inline or on hover.
````md
```ts twoslash
import { ref } from 'vue'
import { ref } from 'vue';
const count = ref(0)
const count = ref(0);
// ^?
```
````
@@ -28,7 +28,7 @@ const count = ref(0)
## Annotations
```ts twoslash
const count = ref(0)
const count = ref(0);
// ^?
// Shows: const count: Ref<number>
```
packages/mosaic/framework/skills/slidev/references/core-animations.md
+3
View File
@@ -46,6 +46,7 @@ With depth for nested lists:
### Click Positioning
Relative positioning:
```md
<div v-click>1st (default)</div>
<div v-click="+1">2nd</div>
@@ -53,6 +54,7 @@ Relative positioning:
```
Absolute positioning:
```md
<div v-click="3">Appears on click 3</div>
<div v-click="[2,5]">Visible clicks 2-5</div>
@@ -178,6 +180,7 @@ 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
packages/mosaic/framework/skills/slidev/references/core-cli.md
+5
View File
@@ -27,6 +27,7 @@ Options:
| `--theme` | - | Override theme |
Examples:
```bash
slidev --port 8080 --open
slidev --remote mypassword
@@ -49,6 +50,7 @@ Options:
| `--without-notes` | false | Exclude presenter notes |
Examples:
```bash
slidev build --base /my-repo/
slidev build --download --out public
@@ -77,6 +79,7 @@ Options:
| `--executable-path` | - | Browser path |
Examples:
```bash
slidev export
slidev export --format pptx
@@ -110,6 +113,7 @@ Extracts theme to local directory for customization.
## npm Script Usage
In package.json:
```json
{
"scripts": {
@@ -121,6 +125,7 @@ In package.json:
```
With arguments (note `--`):
```bash
npm run dev -- --port 8080 --open
npm run export -- --format pptx
packages/mosaic/framework/skills/slidev/references/core-components.md
+8
View File
@@ -12,6 +12,7 @@ Ready-to-use components in Slidev.
### Link
Navigate to slide:
```md
<Link to="5">Go to slide 5</Link>
<Link to="intro">Go to intro</Link> <!-- with routeAlias -->
@@ -32,6 +33,7 @@ Slide <SlideCurrentNo /> of <SlidesTotal />
```
Props:
- `columns` - Number of columns
- `maxDepth` / `minDepth` - Heading depth filter
- `mode` - 'all' | 'onlyCurrentTree' | 'onlySiblings'
@@ -39,6 +41,7 @@ Props:
### TitleRenderer
Render slide title:
```md
<TitleRenderer no="3" />
```
@@ -88,6 +91,7 @@ Props: `x1`, `y1`, `x2`, `y2`, `width`, `color`, `two-way`
### VDragArrow
Draggable arrow:
```md
<VDragArrow />
```
@@ -97,6 +101,7 @@ Draggable arrow:
### Transform
Scale elements:
```md
<Transform :scale="0.5">
<LargeContent />
@@ -108,6 +113,7 @@ Props: `scale`, `origin`
### AutoFitText
Auto-sizing text:
```md
<AutoFitText :max="200" :min="50" modelValue="Hello" />
```
@@ -158,6 +164,7 @@ Props: `controls`, `autoplay`, `autoreset`, `poster`, `timestamp`
```
Context values:
- `main` - Main presentation view
- `visible` - Visible slides
- `print` - Print/export mode
@@ -189,6 +196,7 @@ 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
packages/mosaic/framework/skills/slidev/references/core-exporting.md
+10 -1
View File
@@ -10,12 +10,14 @@ 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
```
@@ -51,6 +53,7 @@ slidev export --format md
### With Click Steps
Export each click as separate page:
```bash
slidev export --with-clicks
```
@@ -70,6 +73,7 @@ slidev export --range 1,4-7,10
### Table of Contents
PDF with clickable outline:
```bash
slidev export --with-toc
```
@@ -77,6 +81,7 @@ slidev export --with-toc
### Timeout
For slow-rendering slides:
```bash
slidev export --timeout 60000
```
@@ -84,6 +89,7 @@ slidev export --timeout 60000
### Wait
Wait before capture:
```bash
slidev export --wait 2000
```
@@ -91,6 +97,7 @@ slidev export --wait 2000
### Wait Until
Wait condition:
```bash
slidev export --wait-until networkidle # Default
slidev export --wait-until domcontentloaded
@@ -115,7 +122,7 @@ slidev export --executable-path /path/to/chrome
```yaml
---
exportFilename: my-presentation
download: true # Add download button in build
download: true # Add download button in build
export:
format: pdf
timeout: 30000
@@ -128,6 +135,7 @@ export:
### Missing Content
Increase wait time:
```bash
slidev export --wait 3000 --timeout 60000
```
@@ -143,6 +151,7 @@ Use system fonts or install emoji font on server.
### CI/CD Export
Install playwright browsers:
```bash
npx playwright install chromium
```
packages/mosaic/framework/skills/slidev/references/core-frontmatter.md
+13 -14
View File
@@ -31,8 +31,8 @@ class: text-white
```yaml
---
clicks: 5 # Total clicks for this slide
clicksStart: 0 # Starting click number
clicks: 5 # Total clicks for this slide
clicksStart: 0 # Starting click number
---
```
@@ -40,7 +40,7 @@ clicksStart: 0 # Starting click number
```yaml
---
transition: fade # Slide transition
transition: fade # Slide transition
---
```
@@ -56,7 +56,7 @@ transition: slide-left | slide-right
```yaml
---
zoom: 0.8 # Scale content (0.8 = 80%)
zoom: 0.8 # Scale content (0.8 = 80%)
---
```
@@ -64,7 +64,7 @@ zoom: 0.8 # Scale content (0.8 = 80%)
```yaml
---
disabled: true # Hide this slide
disabled: true # Hide this slide
# or
hide: true
---
@@ -74,9 +74,9 @@ hide: true
```yaml
---
hideInToc: true # Hide from Toc component
level: 2 # Override heading level
title: Custom Title # Override slide title
hideInToc: true # Hide from Toc component
level: 2 # Override heading level
title: Custom Title # Override slide title
---
```
@@ -84,7 +84,7 @@ title: Custom Title # Override slide title
```yaml
---
src: ./slides/intro.md # Import markdown file
src: ./slides/intro.md # Import markdown file
---
```
@@ -92,7 +92,7 @@ With specific slides:
```yaml
---
src: ./other.md#2,5-7 # Import slides 2, 5, 6, 7
src: ./other.md#2,5-7 # Import slides 2, 5, 6, 7
---
```
@@ -100,7 +100,7 @@ src: ./other.md#2,5-7 # Import slides 2, 5, 6, 7
```yaml
---
routeAlias: intro # URL: /intro instead of /1
routeAlias: intro # URL: /intro instead of /1
---
```
@@ -108,7 +108,7 @@ routeAlias: intro # URL: /intro instead of /1
```yaml
---
preload: false # Don't mount until entering
preload: false # Don't mount until entering
---
```
@@ -117,7 +117,7 @@ preload: false # Don't mount until entering
```yaml
---
dragPos:
logo: 100,50,200,100,0 # Left,Top,Width,Height,Rotate
logo: 100,50,200,100,0 # Left,Top,Width,Height,Rotate
arrow: 300,200,50,50,45
---
```
@@ -190,6 +190,5 @@ clicks: 3
zoom: 0.9
hideInToc: false
---
# Slide Content
```
packages/mosaic/framework/skills/slidev/references/core-global-context.md
+34 -41
View File
@@ -20,26 +20,26 @@ Title: {{ $slidev.configs.title }}
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 |
| 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 |
| Property | Description |
| ---------------------- | ---------------------------- |
| `$slidev.configs` | Project config (title, etc.) |
| `$slidev.themeConfigs` | Theme config |
### $frontmatter
@@ -60,6 +60,7 @@ Current page number (1-indexed).
### $renderContext
Current render context:
- `'slide'` - Normal slide view
- `'overview'` - Overview mode
- `'presenter'` - Presenter mode
@@ -77,51 +78,51 @@ import {
useSlideContext,
onSlideEnter,
onSlideLeave,
} from '@slidev/client'
} from '@slidev/client';
```
### useNav
```ts
const nav = useNav()
nav.next()
nav.go(5)
console.log(nav.currentPage)
const nav = useNav();
nav.next();
nav.go(5);
console.log(nav.currentPage);
```
### useDarkMode
```ts
const { isDark, toggle } = useDarkMode()
const { isDark, toggle } = useDarkMode();
```
### useIsSlideActive
```ts
const isActive = useIsSlideActive()
const isActive = useIsSlideActive();
// Returns ref<boolean>
```
### useSlideContext
```ts
const { $page, $clicks, $frontmatter } = useSlideContext()
const { $page, $clicks, $frontmatter } = useSlideContext();
```
## Lifecycle Hooks
```ts
import { onSlideEnter, onSlideLeave } from '@slidev/client'
import { onSlideEnter, onSlideLeave } from '@slidev/client';
onSlideEnter(() => {
// Slide became active
startAnimation()
})
startAnimation();
});
onSlideLeave(() => {
// Slide became inactive
cleanup()
})
cleanup();
});
```
**Important:** Don't use `onMounted`/`onUnmounted` in slides - component instance persists. Use `onSlideEnter`/`onSlideLeave` instead.
@@ -130,26 +131,18 @@ onSlideLeave(() => {
```html
<!-- Show only in presenter mode -->
<div v-if="$nav.isPresenter">
Presenter notes
</div>
<div v-if="$nav.isPresenter">Presenter notes</div>
<!-- Hide on cover slide -->
<footer v-if="$nav.currentLayout !== 'cover'">
Page {{ $nav.currentPage }}
</footer>
<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>
<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'
import type { TocItem } from '@slidev/types';
```
packages/mosaic/framework/skills/slidev/references/core-headmatter.md
+25 -25
View File
@@ -11,11 +11,11 @@ Deck-wide configuration options in the first frontmatter block.
```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
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
---
```
@@ -27,7 +27,7 @@ fonts:
sans: Roboto
serif: Roboto Slab
mono: Fira Code
provider: google # 'google' | 'none'
provider: google # 'google' | 'none'
---
```
@@ -35,11 +35,11 @@ fonts:
```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'
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'
---
```
@@ -48,14 +48,14 @@ monacoTypesSource: local # 'local' | 'cdn' | 'none'
```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
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
---
```
@@ -63,8 +63,8 @@ wakeLock: true # Prevent screen sleep
```yaml
---
download: false # PDF download button
exportFilename: slides # Export filename
download: false # PDF download button
exportFilename: slides # Export filename
export:
format: pdf
timeout: 30000
@@ -150,9 +150,9 @@ htmlAttrs:
```yaml
---
presenter: true # 'true' | 'dev' | 'build'
browserExporter: dev # 'true' | 'dev' | 'build'
routerMode: history # 'history' | 'hash'
presenter: true # 'true' | 'dev' | 'build'
browserExporter: dev # 'true' | 'dev' | 'build'
routerMode: history # 'history' | 'hash'
---
```
@@ -160,7 +160,7 @@ routerMode: history # 'history' | 'hash'
```yaml
---
remoteAssets: false # Download remote assets locally
remoteAssets: false # Download remote assets locally
plantUmlServer: https://www.plantuml.com/plantuml
---
```
packages/mosaic/framework/skills/slidev/references/core-hosting.md
+1 -3
View File
@@ -94,9 +94,7 @@ Create `vercel.json`:
```json
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}
```
packages/mosaic/framework/skills/slidev/references/core-layouts.md
+20 -4
View File
@@ -12,6 +12,7 @@ Available layouts for slides.
### default
Standard slide layout.
```yaml
---
layout: default
@@ -21,6 +22,7 @@ layout: default
### center
Content centered horizontally and vertically.
```yaml
---
layout: center
@@ -30,6 +32,7 @@ layout: center
### cover
Title/cover slide with centered content.
```yaml
---
layout: cover
@@ -39,6 +42,7 @@ layout: cover
### end
End slide.
```yaml
---
layout: end
@@ -48,6 +52,7 @@ layout: end
### full
Full-screen content, no padding.
```yaml
---
layout: full
@@ -57,6 +62,7 @@ layout: full
### none
No layout styling.
```yaml
---
layout: none
@@ -68,6 +74,7 @@ layout: none
### intro
Introduction slide.
```yaml
---
layout: intro
@@ -77,6 +84,7 @@ layout: intro
### quote
Large quotation display.
```yaml
---
layout: quote
@@ -86,6 +94,7 @@ layout: quote
### section
Section divider.
```yaml
---
layout: section
@@ -95,6 +104,7 @@ layout: section
### statement
Statement/affirmation display.
```yaml
---
layout: statement
@@ -104,6 +114,7 @@ layout: statement
### fact
Fact/data display.
```yaml
---
layout: fact
@@ -115,6 +126,7 @@ layout: fact
### two-cols
Two columns side by side:
```md
---
layout: two-cols
@@ -134,6 +146,7 @@ Right content
### two-cols-header
Header with two columns below:
```md
---
layout: two-cols-header
@@ -155,6 +168,7 @@ Right content
### image
Full-screen image:
```yaml
---
layout: image
@@ -166,25 +180,25 @@ backgroundSize: cover
### image-left
Image on left, content on right:
```yaml
---
layout: image-left
image: /photo.jpg
class: my-class
---
# Content on Right
```
### image-right
Image on right, content on left:
```yaml
---
layout: image-right
image: /photo.jpg
---
# Content on Left
```
@@ -195,6 +209,7 @@ Props: `image`, `class`, `backgroundSize`
### iframe
Full-screen iframe:
```yaml
---
layout: iframe
@@ -205,24 +220,24 @@ url: https://example.com
### iframe-left
Iframe on left, content on right:
```yaml
---
layout: iframe-left
url: https://example.com
---
# Content
```
### iframe-right
Iframe on right, content on left:
```yaml
---
layout: iframe-right
url: https://example.com
---
# Content
```
@@ -271,6 +286,7 @@ With named slots:
```
Usage:
```md
---
layout: two-areas
packages/mosaic/framework/skills/slidev/references/core-syntax.md
+12 -5
View File
@@ -73,25 +73,29 @@ Standard Markdown with Shiki highlighting:
````md
```ts
const hello = 'world'
const hello = 'world';
```
````
With features:
````md
```ts {2,3} // Line highlighting
`````md
````ts {2,3} // Line highlighting
```ts {1|2-3|all} // Click-based highlighting
```ts {monaco} // Monaco editor
```ts {monaco-run} // Runnable code
```ts twoslash // TypeScript types
```
````
`````
`````
## LaTeX Math
Inline: `$E = mc^2$`
Block:
```md
$$
\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
@@ -101,14 +105,16 @@ $$
## Diagrams
Mermaid:
````md
```mermaid
graph LR
A --> B --> C
```
````
`````
PlantUML:
````md
```plantuml
@startuml
@@ -148,6 +154,7 @@ src: ./pages/intro.md
```
Import specific slides:
```md
---
src: ./other.md#2,5-7
packages/mosaic/framework/skills/slidev/references/diagram-latex.md
+4 -3
View File
@@ -27,7 +27,8 @@ $$
## Line Highlighting
```md
$$ {1|3|all}
$$
{1|3|all}
\begin{aligned}
\nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\
\nabla \cdot \vec{B} &= 0 \\
@@ -41,9 +42,9 @@ $$
Enable mhchem extension in `vite.config.ts`:
```ts
import 'katex/contrib/mhchem'
import 'katex/contrib/mhchem';
export default {}
export default {};
```
Then use:
packages/mosaic/framework/skills/slidev/references/editor-monaco-run.md
+4 -4
View File
@@ -12,9 +12,9 @@ Run code directly in the editor and see results.
````md
```ts {monaco-run}
function distance(x: number, y: number) {
return Math.sqrt(x ** 2 + y ** 2)
return Math.sqrt(x ** 2 + y ** 2);
}
console.log(distance(3, 4))
console.log(distance(3, 4));
```
````
@@ -24,7 +24,7 @@ Shows a "Run" button and displays output below the code.
````md
```ts {monaco-run} {autorun:false}
console.log('Click the play button to run me')
console.log('Click the play button to run me');
```
````
@@ -32,7 +32,7 @@ console.log('Click the play button to run me')
````md
```ts {monaco-run} {showOutputAt:'+1'}
console.log('Shown after 1 click')
console.log('Shown after 1 click');
```
````
packages/mosaic/framework/skills/slidev/references/editor-monaco.md
+4 -5
View File
@@ -11,7 +11,7 @@ Turn code blocks into fully-featured editors.
````md
```ts {monaco}
console.log('HelloWorld')
console.log('HelloWorld');
```
````
@@ -21,9 +21,8 @@ Compare two code versions:
````md
```ts {monaco-diff}
console.log('Original text')
~~~
console.log('Modified text')
console.log('Original text');
~~~console.log('Modified text');
```
````
@@ -33,7 +32,7 @@ Auto-grow as you type:
````md
```ts {monaco} {height:'auto'}
console.log('Hello, World!')
console.log('Hello, World!');
```
````
packages/mosaic/framework/skills/slidev/references/layout-global-layers.md
+1
View File
@@ -10,6 +10,7 @@ Create components that persist across slides.
## Layer Files
Create in project root:
- `global-top.vue` - Above all slides (single instance)
- `global-bottom.vue` - Below all slides (single instance)
- `slide-top.vue` - Above each slide (per-slide instance)
packages/mosaic/framework/skills/slidev/references/presenter-notes-ruby.md
+1
View File
@@ -20,6 +20,7 @@ notesAutoRuby:
## Example
Notes:
```md
<!--
私は日本語を勉強しています。
packages/mosaic/framework/skills/slidev/references/presenter-recording.md
+1
View File
@@ -20,6 +20,7 @@ Click the camera icon in navigation bar to show camera overlay.
Click the video icon in navigation bar.
Options:
- Camera embedded in slides
- Separate video files for camera and slides
packages/mosaic/framework/skills/slidev/references/syntax-frontmatter-merging.md
+3 -1
View File
@@ -10,6 +10,7 @@ When importing slides, frontmatter from main entry takes priority.
## Example
Main file (`slides.md`):
```md
---
src: ./cover.md
@@ -19,6 +20,7 @@ class: text-center
```
Imported file (`cover.md`):
```md
---
layout: cover
@@ -35,7 +37,7 @@ Cover Page
```md
---
layout: cover
background: https://sli.dev/bar.png # main entry wins
background: https://sli.dev/bar.png # main entry wins
class: text-center
---
packages/mosaic/framework/skills/slidev/references/syntax-importing-slides.md
+4 -4
View File
@@ -15,8 +15,8 @@ Split presentations into multiple files for reusability.
This is a normal page
---
src: ./pages/toc.md
---
## src: ./pages/toc.md
<!-- Content here is ignored -->
@@ -51,8 +51,8 @@ src: ./pages/toc.md
<!-- later... -->
---
src: ./pages/toc.md
---
## src: ./pages/toc.md
```
## Frontmatter Priority