From 2e53e8c41664c5aa920ca84e738e95c8a05fb349 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sun, 29 Jan 2023 03:55:13 +0100 Subject: [PATCH 01/55] feat: page transition --- guide/animations.md | 72 ++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 71 insertions(+), 1 deletion(-) diff --git a/guide/animations.md b/guide/animations.md index 875123f..d394dfe 100644 --- a/guide/animations.md +++ b/guide/animations.md @@ -200,4 +200,74 @@ Learn mode: [Demo](https://sli.dev/demo/starter/7) | [@vueuse/motion](https://mo ## Pages Transitions -> Built-in support for slides is NOT YET provided in the current version. We are planning to add support for them in the next major version. Before that, you can still use your custom styles and libraries to do that. +> Available since v0.39.0 + +Slidev supports page transitions out of the box. You can enable it by setting the `transition` frontmatter option: + +```md +--- +transition: slide-left +--- +``` + +This will give you a nice sliding effects on slide switching. Setting it in the frontmatter will apply to all slides. You can also set different transition per slide. + +### Builtin Transitions + +- `fade` - Crossfade in/out +- `fade-out` - Fade out and then fade in +- `slide-left` - Slides to the left, slide to right when going back +- `slide-right` - Slides to the right, slide to left when going back +- `slide-top` - Slides to the top, slide to bottom when going back +- `slide-bottom` - Slides to the bottom, slide to top when going back + +### Custom Transitions + +Slidev's page transitions are powered by [Vue Transition](https://vuejs.org/guide/built-ins/transition.html). You can provide your custom transitions by: + +```md +--- +transition: my-transition +--- +``` + +and then in your custom stylesheets: + +```css +.my-transition-enter-active, +.my-transition-leave-active { + transition: opacity 0.5s ease; +} + +.my-transition-enter-from, +.my-transition-leave-to { + opacity: 0; +} +``` + +Learn more how it works in [Vue Transition](https://vuejs.org/guide/built-ins/transition.html). + +### Forward & Backward Transitions + +You can specify different transitions for forward and backward navigation using `|` as a separator in the transition name: + +```md +--- +transition: go-forward | go-backward +--- +``` + +With this, when you go from slide 1 to slide 2, the `go-forward` transition will be applied. When you go from slide 2 to slide 1, the `go-backward` transition will be applied. + +### Advanced Usage + +The `transition` field accepts an option that will passed to the [``](https://vuejs.org/api/built-in-components.html#transition) component. For example: + +```md +--- +transition: + name: my-transition + enterFromClass: custom-enter-from + enterActiveClass: custom-enter-active +--- +``` From fcb11d11a499480757c50cb793ef4eab97f3bebe Mon Sep 17 00:00:00 2001 From: TheJChaps Date: Fri, 3 Feb 2023 03:34:27 -0500 Subject: [PATCH 02/55] docs: fix broken link in faq (#111) --- guide/faq.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guide/faq.md b/guide/faq.md index 6a1beb2..1918a3c 100644 --- a/guide/faq.md +++ b/guide/faq.md @@ -43,7 +43,7 @@ The third column (10% width to parent container) ``` -Learn more about [Windi CSS Grids](https://windicss.org/utilities/grid.html). +Learn more about [Windi CSS Grids](https://windicss.org/utilities/layout/grid.html). ## Positioning From e1c823dc686884305284e986b4ad90d8ddf17cb8 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Fri, 3 Feb 2023 09:51:25 +0100 Subject: [PATCH 03/55] docs: added an example of creating custom Mermaid styles (#110) --- custom/config-mermaid.md | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/custom/config-mermaid.md b/custom/config-mermaid.md index 4469d12..f2a6f8a 100644 --- a/custom/config-mermaid.md +++ b/custom/config-mermaid.md @@ -15,3 +15,33 @@ export default defineMermaidSetup(() => { ``` With the setup, you can provide a custom default setting for [Mermaid](https://mermaid-js.github.io/). Refer to the type definitions and its documentation for more details. + +## Custom theme/styles + +In case you want to create your custom Mermaid themes or styles, you can do this by defining `themeVariables` like in the following example: + +```ts +import { defineMermaidSetup } from '@slidev/types' + +export default defineMermaidSetup(() => { + return { + theme: 'base', + themeVariables: { + // General theme variables + noteBkgColor: "#181d29", + noteTextColor: "#F3EFF5cc", + noteBorderColor: "#404551", + + // Sequence diagram variables + actorBkg: "#0E131F", + actorBorder: "#44FFD2", + actorTextColor: "#F3EFF5", + actorLineColor: "#F3EFF5", + signalColor: "#F3EFF5", + signalTextColor: "#F3EFF5", + } + } +}) +``` + +You can find all theme variables on the [Mermaid Theme Configuration](https://mermaid.js.org/config/theming.html) page. From d6bb78bee02ae26b2b28a0fbb1a84020007ef547 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Fri, 3 Feb 2023 09:52:02 +0100 Subject: [PATCH 04/55] docs: Added the unnamed theme (#109) --- .vitepress/themes.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/.vitepress/themes.ts b/.vitepress/themes.ts index 8d98809..4821888 100644 --- a/.vitepress/themes.ts +++ b/.vitepress/themes.ts @@ -386,6 +386,25 @@ export const community: ThemeInfo[] = [ 'light', ], }, + { + id: 'slidev-theme-the-unnamed', + name: 'The unnamed', + description: 'A theme based on The unnamed VS Code theme', + author: { + name: 'Elio Struyf', + link: 'https://elio.dev', + }, + repo: 'https://github.com/estruyf/slidev-theme-the-unnamed', + previews: [ + 'https://cdn.jsdelivr.net/gh/estruyf/slidev-theme-the-unnamed@main/assets/cover.png', + 'https://cdn.jsdelivr.net/gh/estruyf/slidev-theme-the-unnamed@main/assets/about-me.png', + 'https://cdn.jsdelivr.net/gh/estruyf/slidev-theme-the-unnamed@main/assets/default.png', + 'https://cdn.jsdelivr.net/gh/estruyf/slidev-theme-the-unnamed@main/assets/section.png', + ], + tags: [ + 'dark' + ], + }, // Add yours here! { id: '', From 4e268b66b3d9c80085bd3b005dd2736a4b187b98 Mon Sep 17 00:00:00 2001 From: Neil Mispelaar Date: Fri, 3 Feb 2023 03:53:21 -0500 Subject: [PATCH 05/55] docs: add documentation for export range feature Fix #821 (#104) --- guide/exporting.md | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/guide/exporting.md b/guide/exporting.md index 334be75..450d762 100644 --- a/guide/exporting.md +++ b/guide/exporting.md @@ -45,9 +45,17 @@ When passing in the `--format png` option, Slidev will export PNG images for eac $ slidev export --format png ``` -### Single-Page Application (SPA) +### Export a range of slides -See [Static Hosting](/guide/hosting). +By default, all slides in the presentation are exported. If you want to export a specific slide or a range of slides you can set the `--range` option and specify which slides you would like to export. + +```bash +$ slidev export --range 1,6-8,10 +``` + +This option accepts both specific slide numbers and ranges. + +The example above would export slides 1,6,7,8, and 10. ## Presenter notes @@ -58,3 +66,7 @@ Export only the presenter notes (the last comment block for each slide) into a t ```bash $ slidev export-notes ``` + +## Single-Page Application (SPA) + +See [Static Hosting](/guide/hosting). From 38e076f9a7c55cbd4d7b58579eecb54e77e9723a Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Fri, 3 Feb 2023 09:55:44 +0100 Subject: [PATCH 06/55] docs: improve slide transition explanation --- guide/animations.md | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/guide/animations.md b/guide/animations.md index d394dfe..badc4b1 100644 --- a/guide/animations.md +++ b/guide/animations.md @@ -198,11 +198,13 @@ The text `Slidev` will move from `-80px` to its original position on initializat Learn mode: [Demo](https://sli.dev/demo/starter/7) | [@vueuse/motion](https://motion.vueuse.org/) | [v-motion](https://motion.vueuse.org/directive-usage.html) | [Presets](https://motion.vueuse.org/presets.html) -## Pages Transitions +## Slide Transitions + +
> Available since v0.39.0 -Slidev supports page transitions out of the box. You can enable it by setting the `transition` frontmatter option: +Slidev supports slide transitions out of the box. You can enable it by setting the `transition` frontmatter option: ```md --- @@ -216,14 +218,14 @@ This will give you a nice sliding effects on slide switching. Setting it in the - `fade` - Crossfade in/out - `fade-out` - Fade out and then fade in -- `slide-left` - Slides to the left, slide to right when going back -- `slide-right` - Slides to the right, slide to left when going back -- `slide-top` - Slides to the top, slide to bottom when going back -- `slide-bottom` - Slides to the bottom, slide to top when going back +- `slide-left` - Slides to the left (slide to right when going backward) +- `slide-right` - Slides to the right (slide to left when going backward) +- `slide-top` - Slides to the top (slide to bottom when going backward) +- `slide-bottom` - Slides to the bottom (slide to top when going backward) ### Custom Transitions -Slidev's page transitions are powered by [Vue Transition](https://vuejs.org/guide/built-ins/transition.html). You can provide your custom transitions by: +Slidev's slide transitions are powered by [Vue Transition](https://vuejs.org/guide/built-ins/transition.html). You can provide your custom transitions by: ```md --- From 8ffa1fd2a7c795eb019785595170c2cc8d47c39b Mon Sep 17 00:00:00 2001 From: yheuhtozr <84892012+yheuhtozr@users.noreply.github.com> Date: Sun, 5 Feb 2023 19:23:34 +0900 Subject: [PATCH 07/55] Update syntax.md: Embedded Styles (#113) --- guide/syntax.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guide/syntax.md b/guide/syntax.md index 1586585..b5a832d 100644 --- a/guide/syntax.md +++ b/guide/syntax.md @@ -163,7 +163,7 @@ h1 { # Next slide is not affected ``` -`