slidev-addon-agent 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +54 -0
- package/agent/constants.ts +119 -0
- package/agent/deck-context.ts +67 -0
- package/agent/index.ts +201 -0
- package/agent/middleware.ts +163 -0
- package/agent/skills/slidev/README.md +61 -0
- package/agent/skills/slidev/SKILL.md +189 -0
- package/agent/skills/slidev/references/animation-click-marker.md +37 -0
- package/agent/skills/slidev/references/animation-drawing.md +68 -0
- package/agent/skills/slidev/references/animation-rough-marker.md +53 -0
- package/agent/skills/slidev/references/api-slide-hooks.md +37 -0
- package/agent/skills/slidev/references/build-og-image.md +36 -0
- package/agent/skills/slidev/references/build-pdf.md +40 -0
- package/agent/skills/slidev/references/build-remote-assets.md +34 -0
- package/agent/skills/slidev/references/build-seo-meta.md +43 -0
- package/agent/skills/slidev/references/code-groups.md +64 -0
- package/agent/skills/slidev/references/code-import-snippet.md +55 -0
- package/agent/skills/slidev/references/code-line-highlighting.md +50 -0
- package/agent/skills/slidev/references/code-line-numbers.md +46 -0
- package/agent/skills/slidev/references/code-magic-move.md +57 -0
- package/agent/skills/slidev/references/code-max-height.md +37 -0
- package/agent/skills/slidev/references/code-twoslash.md +42 -0
- package/agent/skills/slidev/references/core-animations.md +196 -0
- package/agent/skills/slidev/references/core-cli.md +140 -0
- package/agent/skills/slidev/references/core-components.md +197 -0
- package/agent/skills/slidev/references/core-exporting.md +148 -0
- package/agent/skills/slidev/references/core-frontmatter.md +195 -0
- package/agent/skills/slidev/references/core-global-context.md +155 -0
- package/agent/skills/slidev/references/core-headmatter.md +188 -0
- package/agent/skills/slidev/references/core-hosting.md +152 -0
- package/agent/skills/slidev/references/core-layouts.md +286 -0
- package/agent/skills/slidev/references/core-syntax.md +155 -0
- package/agent/skills/slidev/references/diagram-latex.md +55 -0
- package/agent/skills/slidev/references/diagram-mermaid.md +44 -0
- package/agent/skills/slidev/references/diagram-plantuml.md +45 -0
- package/agent/skills/slidev/references/editor-monaco-run.md +44 -0
- package/agent/skills/slidev/references/editor-monaco-write.md +24 -0
- package/agent/skills/slidev/references/editor-monaco.md +50 -0
- package/agent/skills/slidev/references/editor-prettier.md +40 -0
- package/agent/skills/slidev/references/editor-side.md +23 -0
- package/agent/skills/slidev/references/editor-vscode.md +55 -0
- package/agent/skills/slidev/references/layout-canvas-size.md +25 -0
- package/agent/skills/slidev/references/layout-draggable.md +57 -0
- package/agent/skills/slidev/references/layout-global-layers.md +50 -0
- package/agent/skills/slidev/references/layout-slots.md +75 -0
- package/agent/skills/slidev/references/layout-transform.md +33 -0
- package/agent/skills/slidev/references/layout-zoom.md +39 -0
- package/agent/skills/slidev/references/presenter-notes-ruby.md +35 -0
- package/agent/skills/slidev/references/presenter-recording.md +30 -0
- package/agent/skills/slidev/references/presenter-remote.md +40 -0
- package/agent/skills/slidev/references/presenter-timer.md +34 -0
- package/agent/skills/slidev/references/style-direction.md +34 -0
- package/agent/skills/slidev/references/style-icons.md +46 -0
- package/agent/skills/slidev/references/style-scoped.md +50 -0
- package/agent/skills/slidev/references/syntax-block-frontmatter.md +39 -0
- package/agent/skills/slidev/references/syntax-frontmatter-merging.md +49 -0
- package/agent/skills/slidev/references/syntax-importing-slides.md +60 -0
- package/agent/skills/slidev/references/syntax-mdc.md +51 -0
- package/agent/skills/slidev/references/tool-eject-theme.md +27 -0
- package/agent/tools/export-tool.ts +216 -0
- package/agent/tools/review-tool.ts +136 -0
- package/app/index.ts +124 -0
- package/components/MessageItem.vue +231 -0
- package/components/SlidevAgentNavButton.vue +48 -0
- package/components/SlidevAgentSidebar.vue +766 -0
- package/components/SubagentCard.vue +184 -0
- package/components/TypingDots.vue +62 -0
- package/dist/agent/constants.js +117 -0
- package/dist/agent/deck-context.js +47 -0
- package/dist/agent/index.js +167 -0
- package/dist/agent/middleware.js +134 -0
- package/dist/agent/slide-preview-tool.js +257 -0
- package/dist/agent/tools/export-tool.js +167 -0
- package/dist/agent/tools/review-tool.js +111 -0
- package/dist/app/index.js +101 -0
- package/dist/bin/slidev-agent.js +155 -0
- package/dist/lib/bridge.js +151 -0
- package/dist/lib/env.js +17 -0
- package/dist/lib/headless-tools.js +10 -0
- package/dist/lib/langgraph-init.js +59 -0
- package/dist/lib/review-tool.js +98 -0
- package/lib/bridge.ts +212 -0
- package/lib/config.ts +79 -0
- package/lib/env.ts +38 -0
- package/lib/headless-tool-impl.ts +26 -0
- package/lib/headless-tools.ts +11 -0
- package/lib/langgraph-init.ts +79 -0
- package/lib/messages.ts +169 -0
- package/lib/render-chat-markdown.ts +19 -0
- package/lib/sidebar.ts +573 -0
- package/lib/state.ts +44 -0
- package/package.json +65 -0
- package/public/deepagents.svg +12 -0
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: headmatter
|
|
3
|
+
description: Deck-wide configuration options in the first frontmatter block
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Headmatter Configuration
|
|
7
|
+
|
|
8
|
+
Deck-wide configuration options in the first frontmatter block.
|
|
9
|
+
|
|
10
|
+
## Theme & Appearance
|
|
11
|
+
|
|
12
|
+
```yaml
|
|
13
|
+
---
|
|
14
|
+
theme: default # Theme package or path
|
|
15
|
+
colorSchema: auto # 'auto' | 'light' | 'dark'
|
|
16
|
+
favicon: /favicon.ico # Favicon URL
|
|
17
|
+
aspectRatio: 16/9 # Slide aspect ratio
|
|
18
|
+
canvasWidth: 980 # Canvas width in px
|
|
19
|
+
---
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Fonts
|
|
23
|
+
|
|
24
|
+
```yaml
|
|
25
|
+
---
|
|
26
|
+
fonts:
|
|
27
|
+
sans: Roboto
|
|
28
|
+
serif: Roboto Slab
|
|
29
|
+
mono: Fira Code
|
|
30
|
+
provider: google # 'google' | 'none'
|
|
31
|
+
---
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Code & Highlighting
|
|
35
|
+
|
|
36
|
+
```yaml
|
|
37
|
+
---
|
|
38
|
+
highlighter: shiki # Code highlighter
|
|
39
|
+
lineNumbers: false # Show line numbers
|
|
40
|
+
monaco: true # Enable Monaco editor ('true' | 'dev' | 'build')
|
|
41
|
+
twoslash: true # Enable TwoSlash
|
|
42
|
+
monacoTypesSource: local # 'local' | 'cdn' | 'none'
|
|
43
|
+
---
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Features
|
|
47
|
+
|
|
48
|
+
```yaml
|
|
49
|
+
---
|
|
50
|
+
drawings:
|
|
51
|
+
enabled: true # Enable drawing mode
|
|
52
|
+
persist: false # Save drawings
|
|
53
|
+
presenterOnly: false # Only presenter can draw
|
|
54
|
+
syncAll: true # Sync across instances
|
|
55
|
+
record: dev # Enable recording
|
|
56
|
+
selectable: true # Text selection
|
|
57
|
+
contextMenu: true # Right-click menu
|
|
58
|
+
wakeLock: true # Prevent screen sleep
|
|
59
|
+
---
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## Export & Build
|
|
63
|
+
|
|
64
|
+
```yaml
|
|
65
|
+
---
|
|
66
|
+
download: false # PDF download button
|
|
67
|
+
exportFilename: slides # Export filename
|
|
68
|
+
export:
|
|
69
|
+
format: pdf
|
|
70
|
+
timeout: 30000
|
|
71
|
+
withClicks: false
|
|
72
|
+
withToc: false
|
|
73
|
+
---
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Info & SEO
|
|
77
|
+
|
|
78
|
+
```yaml
|
|
79
|
+
---
|
|
80
|
+
title: My Presentation
|
|
81
|
+
titleTemplate: '%s - Slidev'
|
|
82
|
+
author: Your Name
|
|
83
|
+
keywords: slidev, presentation
|
|
84
|
+
info: |
|
|
85
|
+
## About
|
|
86
|
+
Presentation description
|
|
87
|
+
---
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## SEO Meta Tags
|
|
91
|
+
|
|
92
|
+
```yaml
|
|
93
|
+
---
|
|
94
|
+
seoMeta:
|
|
95
|
+
ogTitle: Presentation Title
|
|
96
|
+
ogDescription: Description
|
|
97
|
+
ogImage: https://example.com/og.png
|
|
98
|
+
ogUrl: https://example.com
|
|
99
|
+
twitterCard: summary_large_image
|
|
100
|
+
twitterTitle: Title
|
|
101
|
+
twitterDescription: Description
|
|
102
|
+
twitterImage: https://example.com/twitter.png
|
|
103
|
+
---
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
## Addons & Themes
|
|
107
|
+
|
|
108
|
+
```yaml
|
|
109
|
+
---
|
|
110
|
+
theme: seriph
|
|
111
|
+
addons:
|
|
112
|
+
- excalidraw
|
|
113
|
+
- '@slidev/plugin-notes'
|
|
114
|
+
---
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
## Theme Configuration
|
|
118
|
+
|
|
119
|
+
```yaml
|
|
120
|
+
---
|
|
121
|
+
themeConfig:
|
|
122
|
+
primary: '#5d8392'
|
|
123
|
+
# Theme-specific options
|
|
124
|
+
---
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
## Defaults
|
|
128
|
+
|
|
129
|
+
Set default frontmatter for all slides:
|
|
130
|
+
|
|
131
|
+
```yaml
|
|
132
|
+
---
|
|
133
|
+
defaults:
|
|
134
|
+
layout: default
|
|
135
|
+
transition: fade
|
|
136
|
+
---
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
## HTML Attributes
|
|
140
|
+
|
|
141
|
+
```yaml
|
|
142
|
+
---
|
|
143
|
+
htmlAttrs:
|
|
144
|
+
dir: ltr
|
|
145
|
+
lang: en
|
|
146
|
+
---
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
## Presenter & Browser
|
|
150
|
+
|
|
151
|
+
```yaml
|
|
152
|
+
---
|
|
153
|
+
presenter: true # 'true' | 'dev' | 'build'
|
|
154
|
+
browserExporter: dev # 'true' | 'dev' | 'build'
|
|
155
|
+
routerMode: history # 'history' | 'hash'
|
|
156
|
+
---
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
## Remote Assets
|
|
160
|
+
|
|
161
|
+
```yaml
|
|
162
|
+
---
|
|
163
|
+
remoteAssets: false # Download remote assets locally
|
|
164
|
+
plantUmlServer: https://www.plantuml.com/plantuml
|
|
165
|
+
---
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
## Full Template
|
|
169
|
+
|
|
170
|
+
```yaml
|
|
171
|
+
---
|
|
172
|
+
theme: default
|
|
173
|
+
title: Presentation Title
|
|
174
|
+
author: Your Name
|
|
175
|
+
highlighter: shiki
|
|
176
|
+
lineNumbers: true
|
|
177
|
+
transition: slide-left
|
|
178
|
+
aspectRatio: 16/9
|
|
179
|
+
canvasWidth: 980
|
|
180
|
+
fonts:
|
|
181
|
+
sans: Roboto
|
|
182
|
+
mono: Fira Code
|
|
183
|
+
drawings:
|
|
184
|
+
enabled: true
|
|
185
|
+
persist: true
|
|
186
|
+
download: true
|
|
187
|
+
---
|
|
188
|
+
```
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: hosting
|
|
3
|
+
description: Build and deploy Slidev presentations
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Hosting & Deployment
|
|
7
|
+
|
|
8
|
+
Build and deploy Slidev presentations.
|
|
9
|
+
|
|
10
|
+
## Build for Production
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
slidev build
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
Output: `dist/` folder (static SPA)
|
|
17
|
+
|
|
18
|
+
### Options
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
slidev build --base /talks/my-talk/ # Custom base path
|
|
22
|
+
slidev build --out public # Custom output dir
|
|
23
|
+
slidev build --download # Include PDF
|
|
24
|
+
slidev build --without-notes # Exclude notes
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Multiple Presentations
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
slidev build slides1.md slides2.md
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## GitHub Pages
|
|
34
|
+
|
|
35
|
+
### GitHub Actions
|
|
36
|
+
|
|
37
|
+
Create `.github/workflows/deploy.yml`:
|
|
38
|
+
|
|
39
|
+
```yaml
|
|
40
|
+
name: Deploy
|
|
41
|
+
|
|
42
|
+
on:
|
|
43
|
+
push:
|
|
44
|
+
branches: [main]
|
|
45
|
+
|
|
46
|
+
permissions:
|
|
47
|
+
contents: read
|
|
48
|
+
pages: write
|
|
49
|
+
id-token: write
|
|
50
|
+
|
|
51
|
+
jobs:
|
|
52
|
+
deploy:
|
|
53
|
+
runs-on: ubuntu-latest
|
|
54
|
+
steps:
|
|
55
|
+
- uses: actions/checkout@v4
|
|
56
|
+
|
|
57
|
+
- uses: actions/setup-node@v4
|
|
58
|
+
with:
|
|
59
|
+
node-version: 'lts/*'
|
|
60
|
+
|
|
61
|
+
- name: Install
|
|
62
|
+
run: npm install
|
|
63
|
+
|
|
64
|
+
- name: Build
|
|
65
|
+
run: npm run build -- --base /${{ github.event.repository.name }}/
|
|
66
|
+
|
|
67
|
+
- uses: actions/configure-pages@v4
|
|
68
|
+
|
|
69
|
+
- uses: actions/upload-pages-artifact@v3
|
|
70
|
+
with:
|
|
71
|
+
path: dist
|
|
72
|
+
|
|
73
|
+
- uses: actions/deploy-pages@v4
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Netlify
|
|
77
|
+
|
|
78
|
+
Create `netlify.toml`:
|
|
79
|
+
|
|
80
|
+
```toml
|
|
81
|
+
[build]
|
|
82
|
+
publish = 'dist'
|
|
83
|
+
command = 'npm run build'
|
|
84
|
+
|
|
85
|
+
[[redirects]]
|
|
86
|
+
from = '/*'
|
|
87
|
+
to = '/index.html'
|
|
88
|
+
status = 200
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## Vercel
|
|
92
|
+
|
|
93
|
+
Create `vercel.json`:
|
|
94
|
+
|
|
95
|
+
```json
|
|
96
|
+
{
|
|
97
|
+
"rewrites": [
|
|
98
|
+
{ "source": "/(.*)", "destination": "/index.html" }
|
|
99
|
+
]
|
|
100
|
+
}
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## Docker
|
|
104
|
+
|
|
105
|
+
### Using Official Image
|
|
106
|
+
|
|
107
|
+
```bash
|
|
108
|
+
docker run --name slidev --rm -it \
|
|
109
|
+
-v ${PWD}:/slidev \
|
|
110
|
+
-p 3030:3030 \
|
|
111
|
+
tangramor/slidev:latest
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### Custom Dockerfile
|
|
115
|
+
|
|
116
|
+
```dockerfile
|
|
117
|
+
FROM tangramor/slidev:latest
|
|
118
|
+
|
|
119
|
+
COPY slides.md .
|
|
120
|
+
COPY public ./public
|
|
121
|
+
|
|
122
|
+
RUN npm run build
|
|
123
|
+
|
|
124
|
+
EXPOSE 80
|
|
125
|
+
CMD ["npx", "serve", "dist"]
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
## Base Path
|
|
129
|
+
|
|
130
|
+
For subdirectory deployment:
|
|
131
|
+
|
|
132
|
+
```bash
|
|
133
|
+
# Build
|
|
134
|
+
slidev build --base /my-slides/
|
|
135
|
+
|
|
136
|
+
# Or in headmatter
|
|
137
|
+
---
|
|
138
|
+
base: /my-slides/
|
|
139
|
+
---
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
## Router Mode
|
|
143
|
+
|
|
144
|
+
For servers without rewrite support:
|
|
145
|
+
|
|
146
|
+
```yaml
|
|
147
|
+
---
|
|
148
|
+
routerMode: hash
|
|
149
|
+
---
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
URLs become: `/#/1`, `/#/2`, etc.
|
|
@@ -0,0 +1,286 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: layouts
|
|
3
|
+
description: Available layouts for slides
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Built-in Layouts
|
|
7
|
+
|
|
8
|
+
Available layouts for slides.
|
|
9
|
+
|
|
10
|
+
## Basic Layouts
|
|
11
|
+
|
|
12
|
+
### default
|
|
13
|
+
|
|
14
|
+
Standard slide layout.
|
|
15
|
+
```yaml
|
|
16
|
+
---
|
|
17
|
+
layout: default
|
|
18
|
+
---
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### center
|
|
22
|
+
|
|
23
|
+
Content centered horizontally and vertically.
|
|
24
|
+
```yaml
|
|
25
|
+
---
|
|
26
|
+
layout: center
|
|
27
|
+
---
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### cover
|
|
31
|
+
|
|
32
|
+
Title/cover slide with centered content.
|
|
33
|
+
```yaml
|
|
34
|
+
---
|
|
35
|
+
layout: cover
|
|
36
|
+
---
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### end
|
|
40
|
+
|
|
41
|
+
End slide.
|
|
42
|
+
```yaml
|
|
43
|
+
---
|
|
44
|
+
layout: end
|
|
45
|
+
---
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### full
|
|
49
|
+
|
|
50
|
+
Full-screen content, no padding.
|
|
51
|
+
```yaml
|
|
52
|
+
---
|
|
53
|
+
layout: full
|
|
54
|
+
---
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### none
|
|
58
|
+
|
|
59
|
+
No layout styling.
|
|
60
|
+
```yaml
|
|
61
|
+
---
|
|
62
|
+
layout: none
|
|
63
|
+
---
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Text Layouts
|
|
67
|
+
|
|
68
|
+
### intro
|
|
69
|
+
|
|
70
|
+
Introduction slide.
|
|
71
|
+
```yaml
|
|
72
|
+
---
|
|
73
|
+
layout: intro
|
|
74
|
+
---
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### quote
|
|
78
|
+
|
|
79
|
+
Large quotation display.
|
|
80
|
+
```yaml
|
|
81
|
+
---
|
|
82
|
+
layout: quote
|
|
83
|
+
---
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### section
|
|
87
|
+
|
|
88
|
+
Section divider.
|
|
89
|
+
```yaml
|
|
90
|
+
---
|
|
91
|
+
layout: section
|
|
92
|
+
---
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
### statement
|
|
96
|
+
|
|
97
|
+
Statement/affirmation display.
|
|
98
|
+
```yaml
|
|
99
|
+
---
|
|
100
|
+
layout: statement
|
|
101
|
+
---
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### fact
|
|
105
|
+
|
|
106
|
+
Fact/data display.
|
|
107
|
+
```yaml
|
|
108
|
+
---
|
|
109
|
+
layout: fact
|
|
110
|
+
---
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
## Multi-Column Layouts
|
|
114
|
+
|
|
115
|
+
### two-cols
|
|
116
|
+
|
|
117
|
+
Two columns side by side:
|
|
118
|
+
```md
|
|
119
|
+
---
|
|
120
|
+
layout: two-cols
|
|
121
|
+
---
|
|
122
|
+
|
|
123
|
+
# Left Column
|
|
124
|
+
|
|
125
|
+
Left content
|
|
126
|
+
|
|
127
|
+
::right::
|
|
128
|
+
|
|
129
|
+
# Right Column
|
|
130
|
+
|
|
131
|
+
Right content
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
### two-cols-header
|
|
135
|
+
|
|
136
|
+
Header with two columns below:
|
|
137
|
+
```md
|
|
138
|
+
---
|
|
139
|
+
layout: two-cols-header
|
|
140
|
+
---
|
|
141
|
+
|
|
142
|
+
# Header
|
|
143
|
+
|
|
144
|
+
::left::
|
|
145
|
+
|
|
146
|
+
Left content
|
|
147
|
+
|
|
148
|
+
::right::
|
|
149
|
+
|
|
150
|
+
Right content
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
## Image Layouts
|
|
154
|
+
|
|
155
|
+
### image
|
|
156
|
+
|
|
157
|
+
Full-screen image:
|
|
158
|
+
```yaml
|
|
159
|
+
---
|
|
160
|
+
layout: image
|
|
161
|
+
image: /photo.jpg
|
|
162
|
+
backgroundSize: cover
|
|
163
|
+
---
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
### image-left
|
|
167
|
+
|
|
168
|
+
Image on left, content on right:
|
|
169
|
+
```yaml
|
|
170
|
+
---
|
|
171
|
+
layout: image-left
|
|
172
|
+
image: /photo.jpg
|
|
173
|
+
class: my-class
|
|
174
|
+
---
|
|
175
|
+
|
|
176
|
+
# Content on Right
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
### image-right
|
|
180
|
+
|
|
181
|
+
Image on right, content on left:
|
|
182
|
+
```yaml
|
|
183
|
+
---
|
|
184
|
+
layout: image-right
|
|
185
|
+
image: /photo.jpg
|
|
186
|
+
---
|
|
187
|
+
|
|
188
|
+
# Content on Left
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
Props: `image`, `class`, `backgroundSize`
|
|
192
|
+
|
|
193
|
+
## Iframe Layouts
|
|
194
|
+
|
|
195
|
+
### iframe
|
|
196
|
+
|
|
197
|
+
Full-screen iframe:
|
|
198
|
+
```yaml
|
|
199
|
+
---
|
|
200
|
+
layout: iframe
|
|
201
|
+
url: https://example.com
|
|
202
|
+
---
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
### iframe-left
|
|
206
|
+
|
|
207
|
+
Iframe on left, content on right:
|
|
208
|
+
```yaml
|
|
209
|
+
---
|
|
210
|
+
layout: iframe-left
|
|
211
|
+
url: https://example.com
|
|
212
|
+
---
|
|
213
|
+
|
|
214
|
+
# Content
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
### iframe-right
|
|
218
|
+
|
|
219
|
+
Iframe on right, content on left:
|
|
220
|
+
```yaml
|
|
221
|
+
---
|
|
222
|
+
layout: iframe-right
|
|
223
|
+
url: https://example.com
|
|
224
|
+
---
|
|
225
|
+
|
|
226
|
+
# Content
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
## Layout Loading Order
|
|
230
|
+
|
|
231
|
+
1. Slidev default layouts
|
|
232
|
+
2. Theme layouts
|
|
233
|
+
3. Addon layouts
|
|
234
|
+
4. Custom layouts (`./layouts/`)
|
|
235
|
+
|
|
236
|
+
Later sources override earlier ones.
|
|
237
|
+
|
|
238
|
+
## Custom Layouts
|
|
239
|
+
|
|
240
|
+
Create `layouts/my-layout.vue`:
|
|
241
|
+
|
|
242
|
+
```vue
|
|
243
|
+
<template>
|
|
244
|
+
<div class="slidev-layout my-layout">
|
|
245
|
+
<slot />
|
|
246
|
+
</div>
|
|
247
|
+
</template>
|
|
248
|
+
|
|
249
|
+
<style scoped>
|
|
250
|
+
.my-layout {
|
|
251
|
+
display: flex;
|
|
252
|
+
align-items: center;
|
|
253
|
+
justify-content: center;
|
|
254
|
+
}
|
|
255
|
+
</style>
|
|
256
|
+
```
|
|
257
|
+
|
|
258
|
+
With named slots:
|
|
259
|
+
|
|
260
|
+
```vue
|
|
261
|
+
<template>
|
|
262
|
+
<div class="slidev-layout two-areas">
|
|
263
|
+
<div class="top">
|
|
264
|
+
<slot name="top" />
|
|
265
|
+
</div>
|
|
266
|
+
<div class="bottom">
|
|
267
|
+
<slot />
|
|
268
|
+
</div>
|
|
269
|
+
</div>
|
|
270
|
+
</template>
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
Usage:
|
|
274
|
+
```md
|
|
275
|
+
---
|
|
276
|
+
layout: two-areas
|
|
277
|
+
---
|
|
278
|
+
|
|
279
|
+
::top::
|
|
280
|
+
|
|
281
|
+
Top content
|
|
282
|
+
|
|
283
|
+
::default::
|
|
284
|
+
|
|
285
|
+
Bottom content
|
|
286
|
+
```
|