docs: improve the guide section (#5)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

docs/guide/animations.md

@@ -17,7 +17,7 @@ Hello World
 </v-click>
 
 <!-- Directive usage: this will be invisible until you press "next" the second time -->
-<div v-click class="p-2 text-xl">
+<div v-click class="text-xl p-2">
 
 Hey!
 
@@ -26,7 +26,7 @@ Hey!
 
 ### `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
+The usage of `v-after` is similar to `v-click` but it will turn the element visible when the previous `v-click` is triggered.
 
 ```md
 <div v-click>Hello</div>
@@ -37,7 +37,7 @@ 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.
+`v-clicks` is only provided as a component. It's a shorthand to apply the `v-click` directive to all its child elements. It is especially useful when working with lists.
 
 ```md
 <v-clicks>
@@ -50,11 +50,11 @@ When you click the "next" button, both `Hello` and `World` will show up together
 </v-clicks>
 ```
 
-An item will become visible accordingly whenever you click "next".
+An item will become visible each time you click "next".
 
 ### Custom Clicks Count
 
-By default, Slidev can smartly count how many steps are needed before going next slide. And you can override it by passing the `clicks` frontmatter option:
+By default, Slidev counts how many steps are needed before going to the next slide. You can override this setting by passing the `clicks` frontmatter option:
 
 ```yaml
 ---
@@ -68,14 +68,13 @@ clicks: 10
 Passing the click index to your directives, you can customize the order of the revealing
 
 ```md
-<!-- "1" goes first -->
 <div v-click>1</div>
 <div v-click>2</div>
 <div v-click>3</div>
 ```
 
 ```md
-<!-- "3" goes first, then "2" -->
+<!-- the order is reversed -->
 <div v-click="3">1</div>
 <div v-click="2">2</div>
 <div v-click="1">3</div>
@@ -94,4 +93,4 @@ clicks: 3
 
 ## Transitions
 
-The built-in support for slides and elements transitions is NOT provided in the current version. We are have planned to add it in the next major version. Before that, you can still use your custom styles and libraries to do that.
+The built-in support for slides and elements transitions 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.

docs/guide/editors.md

@@ -7,15 +7,20 @@ If you want some high-level management to your slides, we have provided the foll
 ## VS Code
 
 <p align="center">
-<a href="https://github.com/slidevjs/slidev" target="_blank">
-<img src="https://github.com/slidevjs/slidev/blob/main/assets/logo-for-vscode.png?raw=true" alt="Slidev" width="300"/>
-</a>
-<br>
-<a href="https://marketplace.visualstudio.com/items?itemName=antfu.slidev" target="__blank"><img src="https://img.shields.io/visual-studio-marketplace/v/antfu.slidev.svg?color=4EC5D4&amp;label=VS%20Code%20Marketplace&logo=visual-studio-code" alt="Visual Studio Marketplace Version" /></a>&nbsp;
-<a href="https://marketplace.visualstudio.com/items?itemName=antfu.slidev" target="__blank"><img src="https://img.shields.io/visual-studio-marketplace/d/antfu.slidev.svg?color=2B90B6" alt="Visual Studio Marketplace Downloads" /></a>
+    <a href="https://github.com/slidevjs/slidev" target="_blank">
+        <img src="https://github.com/slidevjs/slidev/blob/main/assets/logo-for-vscode.png?raw=true" alt="Slidev" width="300"/>
+    </a>
+    <br>
+    <a href="https://marketplace.visualstudio.com/items?itemName=antfu.slidev" target="__blank">
+        <img src="https://img.shields.io/visual-studio-marketplace/v/antfu.slidev.svg?color=4EC5D4&amp;label=VS%20Code%20Marketplace&logo=visual-studio-code" alt="Visual Studio Marketplace Version" />
+    </a>
+    &nbsp;
+    <a href="https://marketplace.visualstudio.com/items?itemName=antfu.slidev" target="__blank">
+        <img src="https://img.shields.io/visual-studio-marketplace/d/antfu.slidev.svg?color=2B90B6" alt="Visual Studio Marketplace Downloads" />
+    </a>
 </p>
 
-The VS Code extension provides the features to help you better organize your slides and have a quick overview of them.
+The VS Code extension provides some features to help you better organize your slides and have a quick overview of them.
 
 ### Features
 

docs/guide/exporting.md

@@ -1,36 +1,41 @@
 # Exporting
 
-> Exporting is relying on [Playwright](https://playwright.dev) to do the rendering, you will need to install [`playwright-chromium`](https://playwright.dev/docs/installation#download-single-browser-binary) for using this feature.
-> If you are doing exporting in a CI environment, [this guide](https://playwright.dev/docs/ci) could also be helpful.
+> Exporting relies on [Playwright](https://playwright.dev) to do the rendering. You will therefore need to install [`playwright-chromium`](https://playwright.dev/docs/installation#download-single-browser-binary) to use this feature.
+> If you are doing exporting in a CI environment, [the playwright CI guide](https://playwright.dev/docs/ci) can be helpful.
 
 ## PDF
 
-Exporting your slides into PDF by the following command
+Install `playwright-chromium`
 
 ```bash
 $ npm i -D playwright-chromium
+```
+
+Now export your slides to PDF using the following command
+
+```bash
 $ slidev export
 ```
 
 After a few seconds, your slides will be ready at `./slides-exports.pdf`.
 
 ## PNGs
 
-Passing the `--format png` option, it will export PNG images for each slide.
+When passing in the `--format png` option, Slidev will export PNG images for each slide instead of a PDF.
 
 ```bash
 $ slidev export --format png
 ```
 
 ## Single-Page Application (SPA)
 
-You can build the slides into a self hostable SPA by:
+You can also build the slides into a self-hostable SPA:
 
 ```bash
 $ slidev build
 ```
 
-The dist will be available under `dist/` and then you can host them on [GitHub Pages](https://pages.github.com/), [Netlify](https://netlify.app/), [Vercel](https://vercel.com/), or whatever you want. And share your slides with the world with a single link.
+The generated application will be available under `dist/` and then you can host it on [GitHub Pages](https://pages.github.com/), [Netlify](https://netlify.app/), [Vercel](https://vercel.com/), or whatever you want. Now you can share your slides with the rest of the world with a single link.
 
 ### Provide Downloadable PDF
 
@@ -42,9 +47,9 @@ download: true
 ---
 ```
 
-It will generate a pdf file along with the build. And a download button will appear in the SPA.
+Now, Slidev will generate a pdf file along with the build and a download button will appear in the SPA.
 
-You can also provide a custom url to the PDF. And if so the rendering process will be skipped.
+You can also provide a custom url to the PDF. In that case, the rendering process will be skipped.
 
 ```md
 ---

docs/guide/index.md

@@ -2,13 +2,13 @@
 
 ## 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 pixel-perfect layout and designs, with 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 also having the power of HTML and Vue components to deliver pixel-perfect layouts 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.
+It uses a feature-rich markdown file to generate beautiful slides with an instant reloading experience, along with many built-in integrations such as live coding, PDF exporting, presentation recording, and so on. Since it's powered by the web, you can do anything with Slidev - the possibilities are endless.
 
 You can learn more about the rationale behind the project in the [Why Slidev](/guide/why) section.
 
-### Tech Stacks
+### Tech Stack
 
 Slidev is made possible by combining these tools and technologies.
 
@@ -33,7 +33,7 @@ With Yarn:
 $ yarn create slidev
 ```
 
-Follow the prompts and start making your slides now! To get more details of the markdown syntax, [read more here](/guide/syntax).
+Follow the prompts and start making your slides now! For more details about the markdown syntax, read through the [syntax guide](/guide/syntax).
 
 ### Command Line Interface
 
@@ -49,7 +49,7 @@ In a project where Slidev is installed, you can use the `slidev` binary in your
 }
 ```
 
-Or you can use it with [`npx`](https://www.npmjs.com/package/npx)
+Otherwise, you can use it with [`npx`](https://www.npmjs.com/package/npx)
 
 ```bash
 $ npx slidev
@@ -73,12 +73,12 @@ Hello World
 Directly use code blocks for highlighting
 
 //```ts
-console.log('Helle World')
+console.log('Hello, World!')
 //```
 
 ---
 
 # Page 3
 ~~~
 
-Read more about [the Markdown syntax](/guide/syntax).
+Read more about the Slidev Markdown syntax in the [syntax guide](/guide/syntax).

docs/guide/install.md

@@ -2,7 +2,7 @@
 
 ## Starter Template
 
-The best way to get started is to use our official stater template.
+The best way to get started is using our official stater template.
 
 With NPM:
 
@@ -16,20 +16,24 @@ With Yarn:
 $ yarn create slidev
 ```
 
-It contains the setup and a short demo with instructions on how to use it. Definitely give it a try.
+It contains the setup and a short demo with instructions on how to use it. You should definitely give it a try.
 
 ## Install Manually
 
-If you still prefer to install it manually or want to integrate it into your existing projects, you can do:
+If you still prefer to install Slidev manually or would like to integrate it into your existing projects, you can do:
 
 ```bash
 $ npm install @slidev/cli @slidev/theme-default
-
+```
+```bash
 $ touch slides.md
-
+```
+```bash
 $ npx slidev
 ```
 
-> Please note if you are using [pnpm](https://pnpm.io), you will need to enable [shamefully-hoist](https://pnpm.io/npmrc#shamefully-hoist) option to make it work properly
+> Please note if you are using [pnpm](https://pnpm.io), you will need to enable [shamefully-hoist](https://pnpm.io/npmrc#shamefully-hoist) option for Slidev to work properly:
 >
-> `echo 'shamefully-flatten=true' >> .npmrc`
+> ```bash
+> echo 'shamefully-flatten=true' >> .npmrc
+> ```

docs/guide/presenter-mode.md

@@ -1,6 +1,6 @@
 # Presenter Mode
 
-Click the <carbon-user-speaker class="inline-icon-btn"/> button in the navigation panel, or visit http://localhost:3030/presenter manually. Whenever you enter the presenter mode, other page instances will be in sync with the presenter automatically.
+Click the <carbon-user-speaker class="inline-icon-btn"/> button in the navigation panel, or visit http://localhost:3030/presenter manually. Whenever you enter the presenter mode, other page instances will automatically stay in sync with the presenter.
 
 ![](/screenshots/cover.png)
 

docs/guide/recording.md

@@ -1,13 +1,13 @@
 # Recording
 
-Slidev has recording and camera view built-in. You can use them to record your presentation easily within one place.
+Slidev has a built-in recording and camera view. You can use them to record your presentation easily in one place.
 
 ## Camera View
 
-Click the <carbon-user-avatar class="inline-icon-btn"/> button in the navigation panel to show your camera view in the presentation. You can drag to move it, and use the handler on the right bottom corner to resize it. The size and position will be persisted in the `localStorage` and it will be consistent across multiple refreshes, so no worries on that.
+Click the <carbon-user-avatar class="inline-icon-btn"/> button in the navigation panel to show your camera view in the presentation. You can drag to move it, and use the handler on the right bottom corner to resize it. The size and position will persist in `localStorage` and will therefore be consistent across multiple refreshes, so no need to worry about that.
 
 ## Recording
 
-Click the <carbon-video class="inline-icon-btn"/> button in the navigation panel will bring up a dialog for you. Where you can choose to record your camera embedded in your slides or separated them into two video files.
+Clicking the <carbon-video class="inline-icon-btn"/> button in the navigation panel will bring up a dialog for you. Here you can choose to either record your camera embedded in your slides or to separate them into two video files.
 
-This feature is powered [RecordRTC](https://github.com/muaz-khan/RecordRTC) using the [WebRTC API](https://webrtc.org/).
+This feature is powered by [RecordRTC](https://github.com/muaz-khan/RecordRTC) and uses the [WebRTC API](https://webrtc.org/).

docs/guide/syntax.md

@@ -2,12 +2,12 @@
 
 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 `---` with a new line after to separate your slides. 
+You can use [the Markdown features](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) as you normally would, with the additional support of inlined HTML and Vue Components. Styling using [Windi CSS](https://windicss.org) is also supported. Use `---` padded with a new line to separate your slides. 
 
 ~~~md
 # Slidev
 
-Hello World
+Hello, World!
 
 ---
 
@@ -16,7 +16,7 @@ Hello World
 Directly use code blocks for highlighting
 
 //```ts
-console.log('Helle World')
+console.log('Hello, World!')
 //```
 
 ---
@@ -64,15 +64,15 @@ Refer to [customization](/custom/) for more details.
 
 ## 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.
+A big reason I am building Slidev is needing to make my code look just right in the slides. So just as you expected, you can use Markdown flavored code block to highlight your code.
 
 ~~~ts
 //```ts
-console.log('HelloWorld')
+console.log('Hello, World!')
 //```
 ~~~
 
-To highlight specific lines, simply add line numbers within bracket `{}`. Line numbers start count from 1.
+To highlight specific lines, simply add line numbers within bracket `{}`. Line numbers start counting from 1.
 
 ~~~ts
 //```ts {2,3}
@@ -98,9 +98,9 @@ function add(
 //```
 ~~~
 
-This will highlight on `a` and `b` first, then goes to the `computed` line after one click, and then, the whole block. Learn more about the [clicks animations here](/guide/animations).
+This will first highlight `a: Ref<number> | number` and `b: Ref<number> | number`, and then `return computed(() => unref(a) + unref(b))` after one click, and lastly, the whole block. Learn more in the [clicks animations guide](/guide/animations).
 
-Whenever you want to do some modification in the presentation, simply add `{monaco}` after the language id, it turns the block into a full-featured Monaco editor!
+Whenever you want to do some modification in the presentation, simply add `{monaco}` after the language id — it turns the block into a fully-featured Monaco editor!
 
 ~~~ts
 //```ts {monaco}
@@ -110,16 +110,16 @@ console.log('HelloWorld')
 
 ## Notes
 
-You can take notes for each slide. They will show up on [Presenter Mode](/guide/presenter-mode) for you to reference in presentations.
+You can also take notes for each slide. They will show up in [Presenter Mode](/guide/presenter-mode) for you to reference during presentations.
 
-In Markdown, the last comment block in each slide will be treated as notes.
+In Markdown, the last comment block in each slide will be treated as a note.
 
 ~~~md
 ---
 layout: cover
 ---
 
-# Slidev
+# Page 1
 
 This is the cover page.
 
@@ -129,7 +129,7 @@ This is the cover page.
 
 # Page 2
 
-<!-- This is NOT a note -->
+<!-- This is NOT a note because it precedes the content of the slide -->
 
 The second page
 
@@ -140,7 +140,7 @@ This is another note
 
 ## Configurations
 
-All the configurations needed can also be defined in the Markdown file. For example:
+All configurations needed can be defined in the Markdown file. For example:
 
 ```md
 ---
@@ -154,4 +154,4 @@ background: 'https://source.unsplash.com/1600x900/?nature,water'
 This is the cover page.
 ```
 
-For more details about using a theme, refer to [this section](/themes/use).
+For more details about using a theme, refer to the [themes usage section](/themes/use).