docs: minor fixes (#1809)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

docs/builtin/cli.md

@@ -10,7 +10,7 @@ To use the CLI, you can either install `@slidev/cli` globally or install it loca
 Usually `npx slidev` is not supported because the package name is actually `@slidev/cli`.
 :::
 
-Options of the commands obey the following conventions:
+The CLI options of the commands obey the following conventions:
 
 - the value of the option can be passed after a space or a `=` character:
 
@@ -48,20 +48,20 @@ Options:
 
 ## `slidev build [entry]` {#build}
 
-Build a hostable SPA. See [Hosting](../guide/hosting) for more details.
+Build a hostable SPA. See <LinkInline link="guide/hosting" /> for more details.
 
 - `[entry]` (`string`, default: `slides.md`): path to the slides markdown file.
 
 Options:
 
 - `--out`, `-o` (`string`, default: `dist`): output directory
-- `--base` (`string`, default: `/`): base URL (see https://cli.vuejs.org/config/#publicpath)
+- `--base` (`string`, default: `/`): base URL (see https://vitejs.dev/config/shared-options.html#base)
 - `--download` (`boolean`, default: `false`): allow the download of the slides as a PDF inside the SPA
 - `--theme`, `-t` (`string`): override theme
 
 ## `slidev export [...entry]` {#export}
 
-Export slides to PDF (or other format). See [Exporting](../guide/exporting) for more details.
+Export slides to PDF (or other format). See <LinkInline link="guide/exporting" /> for more details.
 
 - `[entry]` (`string`, default: `slides.md`): path to the slides markdown entry.
 

docs/builtin/components.md

@@ -20,7 +20,7 @@ Or:
 <Arrow v-bind="{ x1:10, y1:10, x2:200, y2:200 }" />
 ```
 
-Parameters:
+Props:
 
 - `x1` (`string | number`, required): start point x position
 - `y1` (`string | number`, required): start point y position
@@ -38,7 +38,7 @@ An `Arrow` component that can be dragged.
 
 <LinkCard link="features/draggable#draggable-arrow" />
 
-Parameters not related to position are the same as [the `Arrow` component](#arrow).
+Props not related to position are the same as [the `Arrow` component](#arrow).
 
 ## `AutoFitText`
 
@@ -52,7 +52,7 @@ Box inside which the font size will automatically adapt to fit the content. Simi
 <AutoFitText :max="200" :min="100" modelValue="Some text"/>
 ```
 
-Parameters:
+Props:
 
 - `max` (`string | number`, default `100`): Maximum font size
 - `min` (`string | number`, default `30`): Minimum font size
@@ -115,7 +115,7 @@ Insert a link you can use to navigate to a given slide.
 <Link to="solutions" title="Go to solutions"/>
 ```
 
-Parameters:
+Props:
 
 - `to` (`string | number`): The path of the slide to navigate to (slides path starts from `1`)
 - `title` (`string`): The title to display
@@ -146,7 +146,7 @@ Render slots depend on whether the context matches (for example whether we are i
 
 Context type: `'main' | 'visible' | 'print' | 'slide' | 'overview' | 'presenter' | 'previewNext'`
 
-Parameters:
+Props:
 
 - `context` (`Context | Context[]`): a context or array of contexts you want to check for
   - `'main'`: Render in slides and presenter view (equivalent to ['slide', 'presenter']),
@@ -156,7 +156,6 @@ Parameters:
   - `'overview'`: Render in overview
   - `'presenter'`: Render in presenter view
   - `'previewNext'`: Render in presenter's next slide view
-  - `'previewPrevious'`: Render in presenter's previous slide view
 
 Slots:
 
@@ -212,7 +211,7 @@ Then you can use it with:
 <TitleRenderer no="42" />
 ```
 
-Parameters:
+Props:
 
 - `no` (`string | number`): The number of the slide to display the title from (slides starts from `1`)
 
@@ -236,7 +235,7 @@ Titles are displayed using the [`<Titles>` component](#titles)
 <Toc />
 ```
 
-Parameters:
+Props:
 
 - `columns` (`string | number`, default: `1`): The number of columns of the display
 - `listClass` (`string | string[]`, default: `''`): Classes to apply to the table of contents list
@@ -259,7 +258,7 @@ Apply scaling or transforming to elements.
 </Transform>
 ```
 
-Parameters:
+Props:
 
 - `scale` (`number | string`, default `1`): transform scale value
 - `origin` (`string`, default `'top left'`): transform origin value
@@ -274,7 +273,7 @@ Embed a tweet.
 <Tweet id="20" />
 ```
 
-Parameters:
+Props:
 
 - `id` (`number | string`, required): id of the tweet
 - `scale` (`number | string`, default `1`): transform scale value
@@ -319,7 +318,7 @@ Embed a video.
 
 Check [HTML video element's doc](https://developer.mozilla.org/docs/Web/HTML/Element/Video) to see what can be included in this component's slot.
 
-Parameters:
+Props:
 
 - `controls` (`boolean`, default: `false`): show the video controls
 - `autoplay` (`boolean | 'once'`, default: `false`):
@@ -351,7 +350,7 @@ Embed a YouTube video.
 <Youtube id="luoMHjh-XcQ" />
 ```
 
-Parameters:
+Props:
 
 - `id` (`string`, required): id of the YouTube video
 - `width` (`number`): width of the video

docs/custom/config-context-menu.md

@@ -24,7 +24,7 @@ export default defineContextMenuSetup((items) => {
     ...items.value,
     {
       small: false,
-      icon: Icon3DCursor, // Used as `title` if `small` is `true`
+      icon: Icon3DCursor, // if `small` is `true`, only the icon is shown
       label: 'Custom Menu Item', // or a Vue component
       action() {
         alert('Custom Menu Item Clicked!')

docs/custom/directory-structure.md

@@ -65,7 +65,7 @@ Styles will be processed by [UnoCSS](https://unocss.dev/) and [PostCSS](https://
 
 <!-- eslint-skip -->
 
-```less
+```css
 .slidev-layout {
   --uno: px-14 py-10 text-[1.1rem];
 

docs/guide/animations.md

@@ -6,16 +6,16 @@ outline: deep
 
 Animation is an essential part of slide presentations. Slidev provides a variety of ways to animate your slides, from the simple to the complex. This guide will show you how to use them effectively.
 
-## Click Animation
+## Click Animation {#click-animation}
 
 A "**click**" can be considered as the unit of animation steps in slides. A slide can have one or more clicks, and each click can trigger one or more animations - for example, revealing or hiding elements.
 
 > [!NOTE]
 > Since v0.48.0, we've rewritten the click animations system with much more consistent behaviors. It might change the behaviors of your existing slides in edge cases. While this page is showing the new click system, you can find more details about the refactor in [#1279](https://github.com/slidevjs/slidev/pull/1279).
 
-### `v-click`
+### `v-click` {#v-click}
 
-To apply "click animations" for elements, you can use the `v-click` directive or `<v-click>` components
+To apply show/hide "click animations" for elements, you can use the `<v-click>` component or the `v-click` directive.
 
 <!-- eslint-skip -->
 
@@ -29,9 +29,9 @@ To apply "click animations" for elements, you can use the `v-click` directive or
 <div v-click class="text-xl"> Hey! </div>
 ```
 
-### `v-after`
+### `v-after` {#v-after}
 
-`v-after` is only provided as a directive. It will turn the element visible when the previous `v-click` is triggered.
+`v-after` will turn the element visible when the previous `v-click` is triggered.
 
 ```md
 <div v-click> Hello </div>
@@ -40,7 +40,7 @@ To apply "click animations" for elements, you can use the `v-click` directive or
 
 When you press "next", both `Hello` and `World` will show up together.
 
-### Hide after clicking
+### Hide after clicking {#hide-after-clicking}
 
 Add a `.hide` modifier to `v-click` or `v-after` directives to make elements invisible after clicking, instead of showing up.
 
@@ -58,7 +58,7 @@ For the components, you can use the `hide` prop to achieve the same effect:
 <v-after hide> Also hidden after 2 clicks </v-after>
 ```
 
-### `v-clicks`
+### `v-clicks` {#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. It is especially useful when working with lists and tables.
 
@@ -101,13 +101,13 @@ Also, you can use the `every` prop to specify the number of items to show after
 </v-clicks>
 ```
 
-### Positioning
+### Positioning {#positioning}
 
 By default, the clicking animations are triggered one by one. You can customize the animation "position" of elements by using the `at` prop or the `v-click` directive with value.
 
 Like the CSS layout system, click-animated elements can be "relative" or "absolute":
 
-#### Relative Position
+#### Relative Position {#relative-position}
 
 This actual position of relative elements is calculated based on the previous relative elements:
 
@@ -150,9 +150,9 @@ Only string values starting with `'+'` or `'-'` like `'+1'` are treated as relat
 So don't forget the single quotes for the relative values.
 :::
 
-#### Absolute Position
+#### Absolute Position {#absolute-position}
 
-The given value is the exact click count to show the element:
+The given value is the exact click count to trigger this animation:
 
 ````md
 <div v-click="3"> visible after 3 clicks </div>
@@ -165,7 +165,7 @@ The given value is the exact click count to show the element:
 ```
 ````
 
-#### Mixed Case
+#### Mixed Case {#mixed-case}
 
 You can mix the absolute and relative positions:
 
@@ -217,7 +217,7 @@ You can also use `v-switch` to achieve the same effect:
 
 See [`VSwitch` Component](/builtin/components#vswitch) for more details.
 
-### Custom Total Clicks Count
+### Custom Total Clicks Count {#total}
 
 By default, Slidev automatically calculates how many clicks are required before going to the next slide. You can override this via the `clicks` frontmatter option:
 
@@ -228,15 +228,15 @@ clicks: 10
 ---
 ```
 
-### Element Transitions
+### Element Transitions {#element-transitions}
 
 When you apply the `v-click` directive to your elements, it will attach the class name `slidev-vclick-target` to it. When the elements are hidden, the class name `slidev-vclick-hidden` will also be attached. For example:
 
 ```html
 <div class="slidev-vclick-target slidev-vclick-hidden">Text</div>
 ```
 
-After a click, it will become
+After a click, it may become:
 
 ```html
 <div class="slidev-vclick-target">Text</div>
@@ -257,9 +257,7 @@ By default, a subtle opacity transition is applied to those classes:
 }
 ```
 
-You can override them to customize the transition effects in your custom stylesheets.
-
-For example, you can achieve the scaling up transitions by:
+You can override them to customize the transition effects in your custom stylesheets. For example, you can achieve the scaling up transitions by:
 
 ```css
 /* styles.css */
@@ -273,7 +271,7 @@ For example, you can achieve the scaling up transitions by:
 }
 ```
 
-To specify animations for only certain slides or layouts
+To specify animations for only certain slides or layouts:
 
 ```scss
 .slidev-page-7,
@@ -290,7 +288,7 @@ To specify animations for only certain slides or layouts
 
 Learn more about [customizing styles](/custom/directory-structure#style).
 
-## Motion
+## Motion {#motion}
 
 Slidev has [@vueuse/motion](https://motion.vueuse.org/) built-in. You can use the `v-motion` directive to any elements to apply motion to them. For example
 
@@ -309,11 +307,11 @@ The text `Slidev` will move from `-80px` to its original position when entering
 
 > Before v0.48.9, you need to add `preload: false` to the slide's frontmatter to enable motion.
 
-### Motion with Clicks
+### Motion with Clicks {#motion-with-clicks}
 
 > Available since v0.48.9
 
-You can also trigger the motion by clicks. For example
+You can also trigger the motion by clicks:
 
 ```html
 <div
@@ -352,17 +350,15 @@ The meanings of variants:
 The variants will be combined according to the priority defined above.
 
 ::: warning
-Due to a Vue internal [bug](https://github.com/vuejs/core/issues/10295), currently **only** `v-click` to the same element of `v-motion` can control the motion animation. As a workaround, you can use something like `v-if="3 < $clicks"` to achieve the same effect.
+Due to a Vue internal [bug](https://github.com/vuejs/core/issues/10295), currently **only** `v-click` applied to the same element as `v-motion` can control the motion animation. As a workaround, you can use something like `v-if="3 < $clicks"` to achieve the same effect.
 :::
 
 Learn mode: [Demo](https://sli.dev/demo/starter/10) | [@vueuse/motion](https://motion.vueuse.org/) | [v-motion](https://motion.vueuse.org/features/directive-usage) | [Presets](https://motion.vueuse.org/features/presets)
 
-## Slide Transitions
+## Slide Transitions {#slide-transitions}
 
 <div id="pages-transitions" />
 
-> Available since v0.39.0
-
 Slidev supports slide transitions out of the box. You can enable it by setting the `transition` frontmatter option:
 
 ```md
@@ -371,23 +367,21 @@ 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 transitions per slide.
+This will give you a nice sliding effects on slide switching. Setting it in the headmatter will apply this to all slides. You can also set different transitions per slide in frontmatters.
 
-### Builtin Transitions
+### Builtin Transitions {#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 backward)
 - `slide-right` - Slides to the right (slide to left when going backward)
 - `slide-up` - Slides to the top (slide to bottom when going backward)
 - `slide-down` - Slides to the bottom (slide to top when going backward)
-- `view-transition` - Slides with the view transitions API
-
-### View Transitions
+- `view-transition` - Via the view transitions API
 
-> Available since v0.43.0
+### View Transition API {#view-transitions}
 
-The **View Transitions API** provides a mechanism for easily creating animated transitions between different DOM states. Learn more about it in [View Transitions API - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API).
+The View Transitions API provides a mechanism for easily creating animated transitions between different DOM states. Learn more about it in [View Transitions API - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API).
 
 :::warning
 Experimental: This is not supported by all browsers. Check the [Browser compatibility table](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API#browser_compatibility) carefully before using this.
@@ -410,7 +404,7 @@ mdc: true
 # View Transition {.inline-block.view-transition-title}
 ```
 
-### Custom Transitions
+### Custom Transitions {#custom-transitions}
 
 Slidev's slide transitions are powered by [Vue Transition](https://vuejs.org/guide/built-ins/transition.html). You can provide your custom transitions by:
 
@@ -436,7 +430,7 @@ and then in your custom stylesheets:
 
 Learn more about how it works in [Vue Transition](https://vuejs.org/guide/built-ins/transition.html).
 
-### Forward & Backward Transitions
+### Forward & Backward Transitions {#forward-backward-transitions}
 
 You can specify different transitions for forward and backward navigation using `|` as a separator in the transition name:
 
@@ -448,7 +442,7 @@ 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
+### Advanced Usage {#advanced-usage}
 
 The `transition` field accepts an option that will passed to the [`<TransitionGroup>`](https://vuejs.org/api/built-in-components.html#transition) component. For example: