Skip to content

Commit a11f7be

Browse files
antfuantfu
committed
feat: update
1 parent 2ee11ec commit a11f7be

13 files changed

Lines changed: 121 additions & 31 deletions

File tree

‎demo/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"private": true,
33
"scripts": {
4-
"dev": "nodemon -w '../packages/slidev/dist/*.js' --exec 'slidev --open=false'",
5-
"starter": "nodemon -w '../packages/slidev/dist/*.js' --exec 'slidev starter.md --open=false'",
4+
"dev": "nodemon -w '../packages/slidev/dist/*.js' --exec 'slidev --open=false --log=info'",
5+
"starter": "nodemon -w '../packages/slidev/dist/*.js' --exec 'slidev starter.md --open=false --log=info'",
66
"build": "slidev build",
77
"export": "slidev export"
88
},

‎docs/.vitepress/theme/components/HomeHero.vue‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@
22
<header v-if="showHero" class="home-hero">
33
<p align="center">
44
<a href="https://github.com/slidevjs/slidev">
5-
<img src="/logo-title.png" alt="Slidev" height="300">
5+
<img src="/logo-title.png" alt="Slidev" height="300" />
66
</a>
7-
<br>
7+
<br />
88
</p>
99
<div class="description !-mt-4">
10-
Presentation <b>Sli</b>des for <b>Dev</b>elopers
10+
Presentation
11+
<b>Sli</b>des for
12+
<b>Dev</b>elopers
1113
</div>
1214

1315
<NavLink
@@ -21,6 +23,15 @@
2123
:item="{ link: data.altActionLink, text: data.altActionText }"
2224
class="action alt mx-2 rounded-tr-2xl rounded-tl-3xl rounded-br-4xl rounded-bl-4xl"
2325
/>
26+
27+
<div class="mt-5 flex">
28+
<div class="mx-auto">
29+
<p>or try it now</p>
30+
<div class="language-bash mt-2">
31+
<pre><code><span class="opacity-50">$ </span><span class="token function">npm init</span> <span class="token text-[#408c9e] font-500">slidev</span></code></pre>
32+
</div>
33+
</div>
34+
</div>
2435
</header>
2536
</template>
2637

‎docs/guide/animations.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
## Click Animations
44

5+
### `v-click`
6+
57
To apply "click animations" for elements, you can use the `v-click` directive or `<v-click>` components
68

79
```md
@@ -21,3 +23,31 @@ Hey!
2123

2224
</div>
2325
```
26+
27+
### `v-after`
28+
29+
The usage of `v-after` is similar to `v-click` but it will turn the element visible right after the previous `v-click` gets triggered
30+
31+
```md
32+
<div v-click>Hello</div>
33+
<div v-after>World</div>
34+
```
35+
36+
When you click the "next" button, both `Hello` and `World` will show up together.
37+
38+
### `v-clicks`
39+
40+
`v-clicks` is only provided as a component. It's a shorthand to apply the `v-click` directive to all its child elements. This is useful when working with lists.
41+
42+
```md
43+
<v-clicks>
44+
45+
- Item 1
46+
- Item 2
47+
- Item 3
48+
- Item 4
49+
50+
</v-clicks>
51+
```
52+
53+
An item will become visible accordingly whenever you click "next".

‎docs/guide/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## Overview
44

5-
Slidev <sup>(slide + dev, `/slʌɪdɪv/`)</sup> is a web-based slides maker and presenter. It's designed for developers to focus on writing content in Markdown while having the power of HTML and Vue components to deliver the pixel-perfect layout designs and embedded interactive demos in your presentations.
5+
Slidev <sup>(slide + dev, `/slʌɪdɪv/`)</sup> is a web-based slides maker and presenter. It's designed for developers to focus on writing content in Markdown while having the power of HTML and Vue components to deliver pixel-perfect layout and designs, with embedded interactive demos in your presentations.
66

77
It uses a feature-rich markdown file to generate beautiful slides with an instant reloading experience. Along with many built-in integrations like live coding, PDF exporting, presentation recording, and so on. Since it's powered by the web, you can actually do anything on that - the possibility is unlimited.
88

‎docs/guide/syntax.md‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
# Markdown Syntax
22

3-
## Basic
4-
53
Slides can be written within **a single markdown file** (by default `./slides.md`).
64

75
You can use [the Markdown features](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) as you normally would, with the additional inlined HTML and Vue Components support. Use `----` (four dashes or more) to separate your slides.
@@ -32,7 +30,7 @@ You can directly use Windi CSS and Vue components to style and enrich your slide
3230
<div>
3331
~~~
3432
35-
### Front Matter & Layouts
33+
## Front Matter & Layouts
3634
3735
You can specify layouts and other metadata for each slide by converting the separators into [front matter blocks](https://jekyllrb.com/docs/front-matter/). Each front matter starts with a triple-dash and ends with another. Texts between them are data objects in [YAML](https://www.cloudbees.com/blog/yaml-tutorial-everything-you-need-get-started/) format. For example:
3836
@@ -64,7 +62,7 @@ This is a default page without any additional metadata.
6462
6563
Refer to [supported frontmatter fields](/guide/frontmatter-fields) for more details.
6664
67-
### Code Snippet
65+
## Code Snippet
6866
6967
A big reason I am making this is that I need to make my code looks just right in the slides. So just as you expected, you can use Markdown favored code block to highlight your code.
7068
@@ -82,7 +80,7 @@ console.log('HelloWorld')
8280
`​``
8381
~~~
8482
85-
### Notes
83+
## Notes
8684
8785
You can take notes for each slide. They will show up on [Presenter Mode](/guide/presenter-mode) for you to reference in presentations.
8886
@@ -112,7 +110,7 @@ This is another note
112110
-->
113111
~~~
114112
115-
### Configurations
113+
## Configurations
116114
117115
All the configurations needed can also be defined in the Markdown file. For example:
118116

‎docs/guide/why.md‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ There are a lot of feature-rich, general-purpose, WYSIWYG slides makers like [Mi
66

77
Slidev is trying to provide the flexibility and interactivity for developers to make their presentation even more interesting, expressive, and attractive by using the tools and technologies they are already familiar with. Slidev separates the content and visuals. This allows you to focus on one thing at a time, while being able to reuse the themes from the community.
88

9-
While Slidev will never tend to replace those slides apps and being beginner-friendly, here is a few notions and highlights of Slidev:
9+
While Slidev will never tend to replace those slides apps and being beginner-friendly, here is a few notions and highlights of Slidev:
1010

1111
## Slidev
1212

@@ -36,8 +36,16 @@ Learn more about the [recording here](/guide/recording).
3636

3737
### Portable
3838

39-
Export your slides into PDF, PNGs, or even a hostable Single-page Application (SPA) with a single command, and share them anywhere.
39+
Export your slides into PDF, PNGs, or even a hostable Single-page Application (SPA) with a single command, and share them anywhere. Learn more about [exporting](/guide/exporting).
4040

4141
### Hackable
4242

4343
Since Slidev is powered by web technologies, anything that can be done with web apps are also possible with Slidev. For example, WebGL, API requesting, iframes, or even live sharing, it's up to your imaginations!
44+
45+
### Give it a Try
46+
47+
Give it a play more than a thousand words. You are just one command a way:
48+
49+
```bash
50+
npm init slidev
51+
```

‎docs/index.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,8 @@ altActionLink: /guide/why
1010
footer: MIT Licensed | Copyright © 2021-PRESENT Anthony Fu
1111
---
1212

13+
or directly try it yourself:
1314

15+
```bash
16+
npm init slidev
17+
```

‎packages/client/builtin/VAfter.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { toArray } from '@antfu/utils'
2+
import { defineComponent, Directive, h, resolveDirective, VNode, withDirectives } from 'vue'
3+
4+
export default defineComponent({
5+
render() {
6+
const after = resolveDirective('after')!
7+
8+
function applyDirective(node: VNode, directive: Directive) {
9+
return withDirectives(node, [[directive]])
10+
}
11+
12+
let defaults = this.$slots.default?.()
13+
14+
if (!defaults)
15+
return
16+
17+
defaults = toArray(defaults)
18+
19+
return defaults.map(i => applyDirective(h(i), after))
20+
},
21+
})

‎packages/client/builtin/VClicks.ts‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { defineComponent, Directive, h, resolveDirective, VNode, withDirectives } from 'vue'
1+
import { toArray } from '@antfu/utils'
2+
import { defineComponent, Directive, h, isVNode, resolveDirective, VNode, withDirectives } from 'vue'
23

34
export default defineComponent({
45
props: {
@@ -14,14 +15,19 @@ export default defineComponent({
1415
return withDirectives(node, [[directive]])
1516
}
1617

17-
const defaults = this.$slots.default?.()
18+
let defaults = this.$slots.default?.()
1819

1920
if (!defaults)
2021
return
2122

22-
if (Array.isArray(defaults))
23-
return defaults.map((i, idx) => applyDirective(h(i), idx % this.every === 0 ? click : after))
23+
defaults = toArray(defaults)
2424

25-
return applyDirective(h(defaults), click)
25+
// handle ul list
26+
if (defaults.length === 1 && defaults[0].type === 'ul' && Array.isArray(defaults[0].children)) {
27+
defaults[0].children = defaults[0].children.map((i, idx) => isVNode(i) ? applyDirective(h(i), idx % this.every === 0 ? click : after) : i)
28+
return defaults
29+
}
30+
31+
return defaults.map((i, idx) => applyDirective(h(i), idx % this.every === 0 ? click : after))
2632
},
2733
})

‎packages/create-app/template/slides.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,16 @@ Presentation slides for developers
2222
<carbon-logo-github />
2323
</a>
2424

25+
<!--
26+
The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://slidev.antfu.me/guide/syntax.html#notes)
27+
-->
28+
2529
---
2630

2731
# What is Slidev?
2832

2933
Slidev is a slides maker and presenter designed for developers, consist of the following features
30-
34+
3135
- 📝 **Text-based** - focus on the content with Markdown, and then style them later
3236
- 🎨 **Themable** - theme can be shared and used with npm packages
3337
- 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
@@ -41,6 +45,7 @@ Slidev is a slides maker and presenter designed for developers, consist of the f
4145

4246
Read more about [Why Slidev?](https://slidev.antfu.me/guide/why)
4347

48+
4449
---
4550

4651
# Navigation

0 commit comments

Comments
 (0)