feat: add built-in components doc and add buil-in menu (#116)

Author: tonai

.vitepress/config.js

@@ -182,6 +182,17 @@ const Customizations = [
   }
 ]
 
+const BuiltIn = [
+  {
+    text: 'Components',
+    link: '/builtin/components',
+  },
+  {
+    text: 'Layouts',
+    link: '/builtin/layouts',
+  },
+]
+
 const Resources = [
   {
     text: 'Showcases',
@@ -216,16 +227,7 @@ const slidebars = [
   },
   {
     text: 'Built-in',
-    children: [
-      {
-        text: 'Components',
-        link: '/builtin/components',
-      },
-      {
-        text: 'Layouts',
-        link: '/builtin/layouts',
-      },
-    ],
+    children: BuiltIn,
   },
 ]
 
@@ -282,6 +284,10 @@ module.exports = {
         text: 'Customize',
         items: Customizations,
       },
+      {
+        text: 'Built-in',
+        items: BuiltIn,
+      },
       {
         text: 'Resources',
         items: Resources,

builtin/components.md

@@ -2,37 +2,90 @@
 
 ## Built-in Components
 
-> The documentations of this section is still working in progress. Before that, you can take a look at the [source code](https://github.com/slidevjs/slidev/blob/main/packages/client/builtin) directly.
+### `Arrow`
 
-### `Toc`
+Draw an arrow.
 
-Insert a Table Of Content.
+#### Usage
 
-If you want a slide to not appear in the `<Toc>` component, you can use in the front matter block of the slide:
-```yml
----
-hideInToc: true
----
-```
+~~~md
+<Arrow x1="10" y1="20" x2="100" y2="200" />
+~~~
 
-Titles are displayed using the [`<Titles>` component](#titles)
+Or:
+
+~~~md
+<Arrow v-bind="{ x1:10, y1:10, x2:200, y2:200 }" />
+~~~
+
+Parameters:
+
+* `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 x position
+* `width` (`string | number`, default: `2`): line width
+* `color` (`string`, default: `'currentColor'`): line color
+
+### `AutoFitText`
+
+> Experimental
+
+Box inside which the font size will automatically adapt to fit the content. Similar to PowerPoint or Keynote TextBox.
 
 #### Usage
 
 ~~~md
-<Toc />
+<AutoFitText :max="200" :min="100" modelValue="Some text"/>
 ~~~
 
 Parameters:
 
-* `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
+* `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`
 
@@ -50,6 +103,42 @@ Parameters:
 * `to` (`string | number`): The path of the slide to navigate to (slides starts from `1`)
 * `title` (`string`): The title to display
 
+### `RenderWhen`
+
+Render slot only when the context match (for example when we are in presenter view).
+
+#### Usage
+
+~~~md
+<RenderWhen context="presenter">This will only be rendered in presenter view.</RenderWhen>
+~~~
+
+Context type: `'main' | 'slide' | 'overview' | 'presenter' | 'previewNext'`
+
+Parameters:
+
+* `context` (`Context | Context[]`): context or array of contexts you want the slot to be rendered
+
+### `SlideCurrentNo`
+
+Current slide number.
+
+#### Usage
+
+~~~md
+<SlideCurrentNo />
+~~~
+
+### `SlidesTotal`
+
+Total number of slides.
+
+#### Usage
+
+~~~md
+<SlidesTotal />
+~~~
+
 ### `Titles`
 
 Insert the main title from a slide parsed as HTML.
@@ -80,48 +169,87 @@ Parameters:
 
 * `no` (`string | number`): The number of the slide to display the title from (slides starts from `1`)
 
-### `LightOrDark`
+### `Toc`
 
-Use it to display one thing or another depending on the active light or dark theme.
+Insert a Table Of Content.
+
+If you want a slide to not appear in the `<Toc>` component, you can use in the front matter block of the slide:
+```yml
+---
+hideInToc: true
+---
+```
+
+Titles are displayed using the [`<Titles>` component](#titles)
 
 #### 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>
+<Toc />
 ~~~
 
-Provided props on `LightOrDark` component will be available using scoped slot props:
+Parameters:
+
+* `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
-<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>
+<Transform :scale="0.5">
+  <YourElements />
+</Transform>
 ~~~
 
-You can provide markdown in the slots, but you will need to surround the content with blank lines:
+Parameters:
+
+* `scale` (`number | string`, default `1`): transform scale value
+* `origin` (`string`, default `'top left'`): transform origin value
+
+### `Tweet`
+
+Embed a tweet.
+
+#### Usage
+
 ~~~md
-<LightOrDark>
-  <template #dark>
-  
-![dark](/dark.png)
+<Tweet id="20" />
+~~~
 
-  </template>
-  <template #light>
-  
-![light](/light.png)
+Parameters:
 
-  </template>
-</LightOrDark>
+* `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)
+
+### `VAfter`, `VClick` and `VClicks`
+
+See https://sli.dev/guide/animations.html
+### `Youtube`
+
+Embed a youtube video.
+
+#### Usage
+
+~~~md
+<Youtube id="luoMHjh-XcQ" />
 ~~~
 
+Parameters:
+
+* `id` (`string`, required): id of the youtube video
+* `width` (`number`): width of the video
+* `height` (`number`): height of the video
 
 ## Custom Components