feat: update

Author: antfu

.vitepress/theme/components/HomeHero.vue

@@ -2,12 +2,14 @@
   <header v-if="showHero" class="home-hero">
     <p align="center">
       <a href="https://github.com/slidevjs/slidev">
-        <img src="/logo-title.png" alt="Slidev" height="300">
+        <img src="/logo-title.png" alt="Slidev" height="300" />
       </a>
-      <br>
+      <br />
     </p>
     <div class="description !-mt-4">
-      Presentation <b>Sli</b>des for <b>Dev</b>elopers
+      Presentation
+      <b>Sli</b>des for
+      <b>Dev</b>elopers
     </div>
 
     <NavLink
@@ -21,6 +23,15 @@
       :item="{ link: data.altActionLink, text: data.altActionText }"
       class="action alt mx-2 rounded-tr-2xl rounded-tl-3xl rounded-br-4xl rounded-bl-4xl"
     />
+
+    <div class="mt-5 flex">
+      <div class="mx-auto">
+        <p>or try it now</p>
+        <div class="language-bash mt-2">
+          <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>
+        </div>
+      </div>
+    </div>
   </header>
 </template>
 

guide/animations.md

@@ -2,6 +2,8 @@
 
 ## Click Animations
 
+### `v-click`
+
 To apply "click animations" for elements, you can use the `v-click` directive or `<v-click>` components
 
 ```md
@@ -21,3 +23,31 @@ Hey!
 
 </div>
 ```
+
+### `v-after`
+
+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
+
+```md
+<div v-click>Hello</div>
+<div v-after>World</div>
+```
+
+When you click the "next" button, both `Hello` and `World` will show up together.
+
+### `v-clicks`
+
+`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.
+
+```md
+<v-clicks>
+
+- Item 1
+- Item 2
+- Item 3
+- Item 4
+
+</v-clicks>
+```
+
+An item will become visible accordingly whenever you click "next".

guide/index.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-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.
+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.
 
 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.
 

guide/syntax.md

@@ -1,7 +1,5 @@
 # Markdown Syntax
 
-## Basic
-
 Slides can be written within **a single markdown file** (by default `./slides.md`). 
 
 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
 <div>
 ~~~
 
-### Front Matter & Layouts
+## Front Matter & Layouts
 
 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:
 
@@ -64,7 +62,7 @@ This is a default page without any additional metadata.
 
 Refer to [supported frontmatter fields](/guide/frontmatter-fields) for more details.
 
-### Code Snippet
+## Code Snippet
 
 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.
 
@@ -82,7 +80,7 @@ console.log('HelloWorld')
 `​``
 ~~~
 
-### Notes
+## Notes
 
 You can take notes for each slide. They will show up on [Presenter Mode](/guide/presenter-mode) for you to reference in presentations.
 
@@ -112,7 +110,7 @@ This is another note
 -->
 ~~~
 
-### Configurations
+## Configurations
 
 All the configurations needed can also be defined in the Markdown file. For example:
 

guide/why.md

@@ -6,7 +6,7 @@ There are a lot of feature-rich, general-purpose, WYSIWYG slides makers like [Mi
 
 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.
 
-While Slidev will never tend to replace those slides apps and being beginner-friendly, here is a few notions and highlights of Slidev: 
+While Slidev will never tend to replace those slides apps and being beginner-friendly, here is a few notions and highlights of Slidev:
 
 ## Slidev
 
@@ -36,8 +36,16 @@ Learn more about the [recording here](/guide/recording).
 
 ### Portable
 
-Export your slides into PDF, PNGs, or even a hostable Single-page Application (SPA) with a single command, and share them anywhere.
+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).
 
 ### Hackable
 
 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!
+
+### Give it a Try
+
+Give it a play more than a thousand words. You are just one command a way:
+
+```bash
+npm init slidev
+```

index.md

@@ -10,4 +10,8 @@ altActionLink: /guide/why
 footer: MIT Licensed | Copyright © 2021-PRESENT Anthony Fu
 ---
 
+or directly try it yourself:
 
+```bash
+npm init slidev
+```