@slidev/docs 51.6.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020-PRESENT Anthony Fu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,39 @@
+# [sli.dev](https://sli.dev)
+
+Documentation for [Slidev](https://github.com/slidevjs/slidev)
+
+## Translations
+
+> [!WARNING]
+>
+> Translations with strikethroughs are no longer maintained. The content is outdated and not encouraged to refer.
+
+|                           | Repo                                           |                             Site | Maintainers                                                           |
+| ------------------------- | ---------------------------------------------- | -------------------------------: | --------------------------------------------------------------------- |
+| English                   | [docs](https://github.com/slidevjs/docs)       |       [sli.dev](https://sli.dev) | [@antfu](https://github.com/antfu)                                    |
+| 简体中文                  | [docs-cn](https://github.com/slidevjs/docs-cn) | [cn.sli.dev](https://cn.sli.dev) | [@QC-L](https://github.com/QC-L) [@Ivocin](https://github.com/Ivocin) |
+| <del>Français</del>       | [docs-fr](https://github.com/slidevjs/docs-fr) | [fr.sli.dev](https://fr.sli.dev) | [@ArthurDanjou](https://github.com/ArthurDanjou)                      |
+| <del>Español</del>        | [docs-es](https://github.com/slidevjs/docs-es) | [es.sli.dev](https://es.sli.dev) | [@owlnai](https://github.com/owlnai)                                  |
+| <del>Русский</del>        | [docs-ru](https://github.com/slidevjs/docs-ru) | [ru.sli.dev](https://ru.sli.dev) | [@xesjkeee](https://github.com/xesjkeee)                              |
+| <del>Việt Nam</del>       | [docs-vn](https://github.com/slidevjs/docs-vn) | [vn.sli.dev](https://vn.sli.dev) | [@bongudth](https://github.com/bongudth)                              |
+| <del>Deutsch</del>        | [docs-de](https://github.com/slidevjs/docs-de) | [de.sli.dev](https://de.sli.dev) | [@fabiankachlock](https://github.com/fabiankachlock)                  |
+| <del>Português (BR)</del> | [docs-br](https://github.com/slidevjs/docs-br) | [br.sli.dev](https://br.sli.dev) | [@luisfelipesdn12](https://github.com/luisfelipesdn12)                |
+| <del>Ελληνικά</del>       | [docs-el](https://github.com/slidevjs/docs-el) | [el.sli.dev](https://el.sli.dev) | [@GeopJr](https://github.com/GeopJr)                                  |
+| <del>日本語</del>         | [docs-ja](https://github.com/slidevjs/docs-el) | [ja.sli.dev](https://ja.sli.dev) | [@IkumaTadokoro](https://github.com/IkumaTadokoro)                    |
+
+## Start Server Locally
+
+```
+npm i -g pnpm
+
+pnpm i
+pnpm run dev
+```
+
+And then visit `http://localhost:3000`
+
+Or install the [Vite extension for VS Code](https://marketplace.visualstudio.com/items?itemName=antfu.vite) to edit side-by-side.
+
+## Help on Translating
+
+Please join our [Discord Server](https://chat.sli.dev) and contact the maintainers.

package/builtin/cli.md

@@ -0,0 +1,96 @@
+# Slidev CLI
+
+`@slidev/cli` exposes a binary called `slidev` that you can use to develop, build, and export your slides.
+
+## Prerequisites
+
+To use the CLI, you can either install `@slidev/cli` globally or install it locally in your Node.js project. If you created your project with `npm init slidev`, the CLI is already installed locally.
+
+::: warning
+Usually `npx slidev` is not supported because the package name is actually `@slidev/cli`.
+:::
+
+The CLI options of the commands obey the following conventions:
+
+- the value of the option can be passed after a space or a `=` character:
+
+  Example: `slidev --port 8080` is equivalent to `slidev --port=8080`
+
+- `true` can be omitted for boolean options:
+
+  Example: `slidev --open` is equivalent to `slidev --open true`
+
+::: info
+
+If you use npm, please don't forget to add `--` before the options to pass them to Slidev:
+
+```bash
+npm run slidev -- --remote --port 8080 --open
+```
+
+:::
+
+## `slidev [entry]` {#dev}
+
+Start a local server for Slidev.
+
+- `[entry]` (`string`, default: `slides.md`): path to the markdown file containing your slides.
+
+Options:
+
+- `--port`, `-p` (`number`, default: `3030`): port number.
+- `--base` (`string`, default: `/`): base URL (see https://vitejs.dev/config/shared-options.html#base).
+- `--open`, `-o` (`boolean`, default: `false`): open in the browser.
+- `--remote [password]` (`string`): listen to the public host and enable remote control, if a value is passed then the presenter mode is private and only accessible by passing the given password in the URL query `password` parameter.
+- `--bind` (`string`, default: `0.0.0.0`): specify which IP addresses the server should listen on in the remote mode.
+- `--log` (`'error', 'warn', 'info', 'silent'`, default: `'warn'`): Log level.
+- `--force`, `-f` (`boolean`, default: `false`): force the optimizer to ignore the cache and re-bundle.
+- `--theme`, `-t` (`string`): override theme.
+
+## `slidev build [entry]` {#build}
+
+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://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 <LinkInline link="guide/exporting" /> for more details.
+
+- `[entry]` (`string`, default: `slides.md`): path to the slides markdown entry.
+
+Options:
+
+- `--output` (`string`, default: use `exportFilename` (see https://sli.dev/custom/#frontmatter-configures) or use `[entry]-export`): path to the output.
+- `--format` (`'pdf', 'png', 'pptx', 'md'`, default: `'pdf'`): output format.
+- `--timeout` (`number`, default: `30000`): timeout for rendering the print page (see https://playwright.dev/docs/api/class-page#page-goto).
+- `--range` (`string`): page ranges to export (example: `'1,4-5,6'`).
+- `--dark` (`boolean`, default: `false`): export as dark theme.
+- `--with-clicks`, `-c` (`boolean`, default: `false`): export pages for every click animation (see https://sli.dev/guide/animations.html#click-animation).
+- `--theme`, `-t` (`string`): override theme.
+- `--omit-background` (`boolean`, default: `false`): remove the default browser background
+
+## `slidev format [entry]` {#format}
+
+Format the markdown file. Note that this won't format the content of the slides, only the organization of the markdown file.
+
+- `[entry]` (`string`, default: `slides.md`): path to the slides markdown entry.
+
+## `slidev theme [subcommand]` {#theme}
+
+Theme-related operations.
+
+Subcommands:
+
+- `eject [entry]`: Eject the current theme into the local file system. See <LinkInline link="features/eject-theme" />.
+  - `[entry]` (`string`, default: `slides.md`): path to the slides markdown entry.
+  - Options:
+    - `--dir` (`string`, default: `theme`): the output dir.
+    - `--theme`, `-t` (`string`): override theme.

package/builtin/components.md

@@ -0,0 +1,359 @@
+# Components
+
+This page lists all the built-in components provided by Slidev. These components can be **directly** used in your slides.
+
+Note that <LinkInline link="guide/theme-addon" /> can provide additional components. To add your own components, see <LinkInline link="guide/component#write" />.
+
+## `Arrow`
+
+Draw an arrow.
+
+### Usage
+
+```md
+<Arrow x1="10" y1="20" x2="100" y2="200" />
+```
+
+Or:
+
+```md
+<Arrow v-bind="{ x1:10, y1:10, x2:200, y2:200 }" />
+```
+
+Props:
+
+- `x1` (`string | number`, required): start point x position
+- `y1` (`string | number`, required): start point y position
+- `x2` (`string | number`, required): end point x position
+- `y2` (`string | number`, required): end point y position
+- `width` (`string | number`, default: `2`): line width
+- `color` (`string`, default: `'currentColor'`): line color
+- `two-way` (`boolean`, default: `false`): draw a two-way arrow
+
+## `VDragArrow`
+
+An `Arrow` component that can be dragged.
+
+### Usage
+
+<LinkCard link="features/draggable#draggable-arrow" />
+
+Props not related to position are the same as [the `Arrow` component](#arrow).
+
+## `AutoFitText`
+
+> Experimental
+
+Box inside which the font size will automatically adapt to fit the content. Similar to PowerPoint or Keynote TextBox.
+
+### Usage
+
+```md
+<AutoFitText :max="200" :min="100" modelValue="Some text"/>
+```
+
+Props:
+
+- `max` (`string | number`, default `100`): Maximum font size
+- `min` (`string | number`, default `30`): Minimum font size
+- `modelValue` (`string`, default `''`): text content
+
+## `LightOrDark`
+
+Use it to display one thing or another depending on the active light or dark theme.
+
+### Usage
+
+Use it with the two named Slots `#dark` and `#light`:
+
+```md
+<LightOrDark>
+  <template #dark>Dark mode is on</template>
+  <template #light>Light mode is on</template>
+</LightOrDark>
+```
+
+Provided props on `LightOrDark` component will be available using scoped slot props:
+
+```md
+<LightOrDark width="100" alt="some image">
+  <template #dark="props">
+    <img src="/dark.png" v-bind="props"/>
+  </template>
+  <template #light="props">
+    <img src="/light.png" v-bind="props"/>
+  </template>
+</LightOrDark>
+```
+
+You can provide markdown in the slots, but you will need to surround the content with blank lines:
+
+```md
+<LightOrDark>
+  <template #dark>
+
+![dark](/dark.png)
+
+  </template>
+  <template #light>
+
+![light](/light.png)
+
+  </template>
+</LightOrDark>
+```
+
+## `Link`
+
+Insert a link you can use to navigate to a given slide.
+
+### Usage
+
+```md
+<Link to="42">Go to slide 42</Link>
+<Link to="42" title="Go to slide 42"/>
+<Link to="solutions" title="Go to solutions"/>
+```
+
+Props:
+
+- `to` (`string | number`): The path of the slide to navigate to (slides path starts from `1`)
+- `title` (`string`): The title to display
+
+One can use a string as `to`, provided the corresponding route exists, e.g.
+
+```md
+---
+routeAlias: solutions
+---
+
+# Now some solutions!
+```
+
+## `PoweredBySlidev`
+
+Renders "Powered by Slidev" with a link to the Slidev website.
+
+## `RenderWhen`
+
+Render slots depend on whether the context matches (for example whether we are in presenter view).
+
+### Usage
+
+```md
+<RenderWhen context="presenter">This will only be rendered in presenter view.</RenderWhen>
+```
+
+Context type: `'main' | 'visible' | 'print' | 'slide' | 'overview' | 'presenter' | 'previewNext'`
+
+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']),
+  - `'visible'`: Render the content if it is visible
+  - `'print'`: Render in print mode
+  - `'slide'`: Render in slides
+  - `'overview'`: Render in overview
+  - `'presenter'`: Render in presenter view
+  - `'previewNext'`: Render in presenter's next slide view
+
+Slots:
+
+- `#default`: Rendered when the context matches
+- `#fallback`: Rendered when the context does not match
+
+## `SlideCurrentNo`
+
+Current slide number.
+
+### Usage
+
+```md
+<SlideCurrentNo />
+```
+
+## `SlidesTotal`
+
+Total number of slides.
+
+### Usage
+
+```md
+<SlidesTotal />
+```
+
+## `TitleRenderer`
+
+Insert the main title from a slide parsed as HTML.
+
+Titles and title levels get automatically retrieved from the first title element of each slide.
+
+You can override this automatic behavior for a slide by using the front matter syntax:
+
+```yml
+---
+title: Amazing slide title
+level: 2
+---
+```
+
+### Usage
+
+The `<TitleRenderer>` component is a virtual component you can import with:
+
+```js
+import TitleRenderer from '#slidev/title-renderer'
+```
+
+Then you can use it with:
+
+```md
+<TitleRenderer no="42" />
+```
+
+Props:
+
+- `no` (`string | number`): The number of the slide to display the title from (slides starts from `1`)
+
+## `Toc`
+
+Insert a Table Of Content.
+
+If you want a slide to not appear in the `<Toc>` component, you can use the `hideInToc` option in the frontmatter of the slide:
+
+```yml
+---
+hideInToc: true
+---
+```
+
+Titles are displayed using the [`<Titles>` component](#titles)
+
+### Usage
+
+```md
+<Toc />
+```
+
+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
+- `maxDepth` (`string | number`, default: `Infinity`): The maximum depth level of title to display
+- `minDepth` (`string | number`, default: `1`): The minimum depth level of title to display
+- `mode` (`'all' | 'onlyCurrentTree'| 'onlySiblings'`, default: `'all'`):
+  - `'all'`: Display all items
+  - `'onlyCurrentTree'`: Display only items that are in current tree (active item, parents and children of active item)
+  - `'onlySiblings'`: Display only items that are in current tree and their direct siblings
+
+## `Transform`
+
+Apply scaling or transforming to elements.
+
+### Usage
+
+```md
+<Transform :scale="0.5">
+  <YourElements />
+</Transform>
+```
+
+Props:
+
+- `scale` (`number | string`, default `1`): transform scale value
+- `origin` (`string`, default `'top left'`): transform origin value
+
+## `Tweet`
+
+Embed a tweet.
+
+### Usage
+
+```md
+<Tweet id="20" />
+```
+
+Props:
+
+- `id` (`number | string`, required): id of the tweet
+- `scale` (`number | string`, default `1`): transform scale value
+- `conversation` (`string`, default `'none'`): [tweet embed parameter](https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-parameter-reference)
+- `cards` (`'hidden' | 'visible'`, default `'visible'`): [tweet embed parameter](https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-parameter-reference)
+
+## `VAfter`, `VClick` and `VClicks`
+
+<LinkCard link="guide/animations#click-animation" />
+
+## `VSwitch`
+
+Switch between multiple slots based on clicks.
+
+<LinkCard link="guide/animations#enter-leave" />
+
+- If the `unmount` prop is set to `true`, the previous slot will be unmounted when switching to the next slot. Default is `false`.
+- Use the `tag` and `childTag` props to change the default tag of the component and its children. Default is `div`.
+- Use the `transition` prop to change the transition effect. Default is `false` (disabled).
+
+## `VDrag`
+
+<LinkCard link="features/draggable" />
+
+## `SlidevVideo`
+
+Embed a video.
+
+### Usage
+
+```md
+<SlidevVideo v-click autoplay controls>
+  <!-- Anything that can go in an HTML video element. -->
+  <source src="/myMovie.mp4" type="video/mp4" />
+  <source src="/myMovie.webm" type="video/webm" />
+  <p>
+    Your browser does not support videos. You may download it
+    <a href="/myMovie.mp4">here</a>.
+  </p>
+</SlidevVideo>
+```
+
+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.
+
+Props:
+
+- `controls` (`boolean`, default: `false`): show the video controls
+- `autoplay` (`boolean | 'once'`, default: `false`):
+  - `true` or `'once'`: start the video only once and does not restart it once ended or paused
+  - `false`: never automatically start the video (rely on `controls` instead)
+- `autoreset` (`'slide' | 'click'`, default: `undefined`):
+  - `'slide'`: go back to the start of the video when going back to the slide
+  - `'click'`: go back to the start of the video when going back to the component's click turn
+- `poster` (`string | undefined`, default: `undefined`):
+  - The source of the image to print when the video is not playing.
+- `printPoster` (`string | undefined`, default: `undefined`):
+  - The override for `poster` when printing.
+- `timestamp` (`string | number`, default: `0`):
+  - The starting time of the video in seconds.
+- `printTimestamp` (`string | number | 'last' | undefined`, default: `undefined`):
+  - The override for `timestamp` when printing.
+
+::: warning
+When exporting, the video may fail to load because Chromium does not support some video formats. In this case, you can specify the executable path of the browser. See [Chromium executable path](/guide/exporting.html#executable-path) for more information.
+:::
+
+## `Youtube`
+
+Embed a YouTube video.
+
+### Usage
+
+```md
+<Youtube id="luoMHjh-XcQ" />
+```
+
+Props:
+
+- `id` (`string`, required): id of the YouTube video
+- `width` (`number`): width of the video
+- `height` (`number`): height of the video
+
+You can also make the video start at a specific time if you add `?start=1234` to the id value (where `1234` is seconds),