├── .gitignore
├── .github
    ├── FUNDING.yml
    └── workflows
    │   ├── npm-publish.yml
    │   └── pages.yml
├── example
    ├── .npmrc
    ├── .gitignore
    ├── README.md
    ├── snippets
    │   └── external.ts
    ├── package.json
    ├── pages
    │   └── imported-slides.md
    ├── components
    │   └── Counter.vue
    └── slides.md
├── assets
    ├── screen.gif
    └── description.png
├── example.md
├── styles
    └── index.css
├── components
    ├── Flag.vue
    ├── Turtle.vue
    └── Rabbit.vue
├── global-bottom.vue
├── LICENSE
├── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: kaakaa
2 | 


--------------------------------------------------------------------------------
/example/.npmrc:
--------------------------------------------------------------------------------
1 | # for pnpm
2 | shamefully-hoist=true
3 | auto-install-peers=true
4 | 


--------------------------------------------------------------------------------
/assets/screen.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kaakaa/slidev-addon-rabbit/HEAD/assets/screen.gif


--------------------------------------------------------------------------------
/assets/description.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kaakaa/slidev-addon-rabbit/HEAD/assets/description.png


--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | *.local
5 | .vite-inspect
6 | .remote-assets
7 | components.d.ts
8 | 


--------------------------------------------------------------------------------
/example.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | css: unocss
 3 | ---
 4 | 
 5 | Top Page
 6 | 
 7 | ---
 8 | 
 9 | Second Page
10 | 
11 | ---
12 | 
13 | Third Page
14 | 
15 | ---
16 | layout: end
17 | ---
18 | 
19 | 


--------------------------------------------------------------------------------
/styles/index.css:
--------------------------------------------------------------------------------
 1 | .rabbit-container {
 2 |     position: absolute;
 3 |     top: 96%;
 4 |     z-index: 99;
 5 | }
 6 | 
 7 | .icon {
 8 |     width: 20px;
 9 |     height: 20px;
10 |     transform: scale(-1,1);
11 | }


--------------------------------------------------------------------------------
/components/Flag.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="rabbit-container" :style="{left: left + 'px'}">
 3 |     <emojione-monotone-flag-for-chequered-flag />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   props: {
10 |     left: Number,
11 |   },
12 | }
13 | </script>
14 | 


--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
 1 | # Welcome to [Slidev](https://github.com/slidevjs/slidev)!
 2 | 
 3 | To start the slide show:
 4 | 
 5 | - `npm install`
 6 | - `npm run dev`
 7 | - visit <http://localhost:3030>
 8 | 
 9 | Edit the [slides.md](./slides.md) to see the changes.
10 | 
11 | Learn more about Slidev at the [documentation](https://sli.dev/).
12 | 


--------------------------------------------------------------------------------
/example/snippets/external.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-console */
 2 | 
 3 | // #region snippet
 4 | // Inside ./snippets/external.ts
 5 | export function emptyArray<T>(length: number) {
 6 |   return Array.from<T>({ length })
 7 | }
 8 | // #endregion snippet
 9 | 
10 | export function sayHello() {
11 |   console.log('Hello from snippets/external.ts')
12 | }
13 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "slidev",
 3 |   "type": "module",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "build": "slidev build --base /slidev-addon-rabbit/",
 7 |     "dev": "slidev --open",
 8 |     "export": "slidev export"
 9 |   },
10 |   "dependencies": {
11 |     "@slidev/theme-seriph": "latest",
12 |     "slidev-addon-rabbit": "file:..",
13 |     "vue": "^3.4.38"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/example/pages/imported-slides.md:
--------------------------------------------------------------------------------
 1 | # Imported Slides
 2 | 
 3 | You can split your slides.md into multiple files and organize them as you want using the `src` attribute.
 4 | 
 5 | #### `slides.md`
 6 | 
 7 | ```markdown
 8 | # Page 1
 9 | 
10 | Page 2 from main entry.
11 | 
12 | ---
13 | 
14 | ## src: ./subpage.md
15 | ```
16 | 
17 | <br>
18 | 
19 | #### `subpage.md`
20 | 
21 | ```markdown
22 | # Page 2
23 | 
24 | Page 2 from another file.
25 | ```
26 | 
27 | [Learn more](https://sli.dev/guide/syntax.html#importing-slides)
28 | 


--------------------------------------------------------------------------------
/global-bottom.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- when exporting, this footer isn't exported -->
 3 |   <footer
 4 |     v-if="$route.query.print !== null && $route.query.time"
 5 |     class="rablte-container"
 6 |   >
 7 |     <Flag :left="goalPosition"/>
 8 |     <Rabbit :current="$slidev.nav.currentPage"/>
 9 |     <Turtle :current="$slidev.nav.currentPage"/>
10 |   </footer>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   data() {
16 |     const canvasWidth = this.$slidev.configs.canvasWidth;
17 |     return {
18 |       goalPosition: canvasWidth-20, // 20 is margin-right
19 |     }
20 |   },
21 | };
22 | </script>
23 | 


--------------------------------------------------------------------------------
/example/components/Counter.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | 
 4 | const props = defineProps({
 5 |   count: {
 6 |     default: 0,
 7 |   },
 8 | })
 9 | 
10 | const counter = ref(props.count)
11 | </script>
12 | 
13 | <template>
14 |   <div flex="~" w="min" border="~ main rounded-md">
15 |     <button
16 |       border="r main"
17 |       p="2"
18 |       font="mono"
19 |       outline="!none"
20 |       hover:bg="gray-400 opacity-20"
21 |       @click="counter -= 1"
22 |     >
23 |       -
24 |     </button>
25 |     <span m="auto" p="2">{{ counter }}</span>
26 |     <button
27 |       border="l main"
28 |       p="2"
29 |       font="mono"
30 |       outline="!none"
31 |       hover:bg="gray-400 opacity-20"
32 |       @click="counter += 1"
33 |     >
34 |       +
35 |     </button>
36 |   </div>
37 | </template>
38 | 


--------------------------------------------------------------------------------
/.github/workflows/npm-publish.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
 2 | # For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
 3 | 
 4 | name: Publich package to npmjs
 5 | 
 6 | on:
 7 |   release:
 8 |     types: [created]
 9 | 
10 | jobs:
11 |   publish-npm:
12 |     runs-on: ubuntu-latest
13 |     permissions:
14 |       contents: read
15 |       id-token: write
16 |     steps:
17 |       - uses: actions/checkout@v4
18 |       - uses: actions/setup-node@v4
19 |         with:
20 |           node-version: '18.x'
21 |           registry-url: https://registry.npmjs.org/
22 |       - run: npm install -g npm
23 |       - run: npm ci
24 |       - run: npm publish --provenance --access public
25 |         env:
26 |           NODE_AUTH_TOKEN: ${{secrets.npm_token}}
27 | 


--------------------------------------------------------------------------------
/.github/workflows/pages.yml:
--------------------------------------------------------------------------------
 1 | name: Deploy example page
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 | 
 8 | jobs:
 9 |   deploy:
10 |     permissions:
11 |       contents: read
12 |       pages: write
13 |       id-token: write
14 |     runs-on: ubuntu-latest
15 |     steps:
16 |       - uses: actions/checkout@v4
17 |       - uses: actions/setup-node@v4
18 |         with:
19 |           node-version: '18.x'
20 |       - name: Configure GitHub Pages
21 |         uses: actions/configure-pages@v5
22 |       - name: Build example page
23 |         run: |
24 |           npm install
25 |           npm run build --workspace=example
26 |       - name: Upload artifact
27 |         uses: actions/upload-pages-artifact@v3
28 |         with:
29 |           path: "example/dist"
30 |       - name: Deploy to GitHub Pages
31 |         id: deployment
32 |         uses: actions/deploy-pages@v4
33 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Yusuke Nemoto
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "slidev-addon-rabbit",
 3 |   "version": "0.4.0",
 4 |   "description": "Slidev addon for presentation time management inspired Rabbit",
 5 |   "engines": {
 6 |     "node": ">=18.0.0",
 7 |     "npm": ">=9.5.0"
 8 |   },
 9 |   "workspaces": [
10 |     "example"
11 |   ],
12 |   "scripts": {
13 |     "dev": "slidev example.md --remote 0.0.0.0",
14 |     "build": "slidev build example.md",
15 |     "export": "slidev export example.md",
16 |     "screenshot": "slidev export example.md --format png",
17 |     "test": "echo there is no test."
18 |   },
19 |   "repository": {
20 |     "type": "git",
21 |     "url": "git+https://github.com/kaakaa/slidev-addon-rabbit.git"
22 |   },
23 |   "keywords": [
24 |     "slidev-addon",
25 |     "slidev"
26 |   ],
27 |   "author": "kaakaa",
28 |   "license": "MIT",
29 |   "devDependencies": {
30 |     "@slidev/cli": "^0.49.29",
31 |     "@slidev/theme-default": "latest"
32 |   },
33 |   "dependencies": {
34 |     "@iconify-json/emojione-monotone": "^1.1.4"
35 |   },
36 |   "bugs": {
37 |     "url": "https://github.com/kaakaa/slidev-addon-rabbit/issues"
38 |   },
39 |   "homepage": "https://github.com/kaakaa/slidev-addon-rabbit#readme"
40 | }
41 | 


--------------------------------------------------------------------------------
/components/Turtle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="rabbit-container" :style="{left: left + 'px'}">
 3 |     <emojione-monotone-turtle class="icon" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   props: {
10 |     current: Number
11 |   },
12 |   data() {
13 |     const maxWidth = this.$slidev.configs.canvasWidth - 20; // 20 is margin-right
14 |     const time = this.$route?.query?.time || 10;
15 |     return {
16 |       left: 0,
17 |       intervalId: null,
18 |       maxWidth: maxWidth,
19 |       speed: maxWidth / (time * 60 * 10) // 100ms毎の変化量
20 |     }
21 |   },
22 |   beforeUpdate() {
23 |     // Reset when opening the first page
24 |     if (this.current == 1) {
25 |       this.left = 0;
26 |       if (this.intervalId) {
27 |         clearInterval(this.intervalId);
28 |         this.intervalId = null;
29 |       }
30 |     }
31 |     // do nothing if the turtle already starts
32 |     if (this.intervalId) {
33 |       return;
34 |     }
35 |     // let the turtle run
36 |     this.intervalId = setInterval(() => {
37 |       if (this.left < this.maxWidth) {
38 |         this.left += this.speed;
39 |       }
40 |     }, 100); // update per 100ms
41 |   }
42 | };
43 | </script>
44 | 


--------------------------------------------------------------------------------
/components/Rabbit.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="rabbit-container" :style="{left: pos + 'px'}">
 3 |     <emojione-monotone-rabbit class="icon" />
 4 |     <div
 5 |       class="py-1 px-1 text-xs bg-white bg-opacity-20 rounded-md text-center"
 6 |       :class="[isLatter ? 'float-left' : 'float-right']"
 7 |       :style="{
 8 |         width: tooltipWidth + 'px',
 9 |         display: showSlideNum ? 'block' : 'none'
10 |       }"
11 |     >
12 |       {{props.current}} / {{total}}
13 |     </div>
14 |   </div>
15 | </template>
16 | 
17 | <script setup>
18 | import { computed } from 'vue';
19 | 
20 | const showSlideNum = $slidev.configs?.rabbit?.slideNum ?? false;
21 | 
22 | const total = $slidev.nav.total;
23 | const canvasWidth = $slidev.configs.canvasWidth;
24 | const tooltipWidth = showSlideNum ? 60 : 0;
25 | const marginRight = 20; // To display rabbit icon on last page
26 | 
27 | const props = defineProps({
28 |   current: Number,
29 | });
30 | 
31 | const isLatter = computed(() => props.current > (total / 2));
32 | 
33 | const pos = computed(() => {
34 |   if (props.current === 1 || total === 1) {
35 |     return 0;
36 |   }
37 |   // Calculate the width of slide
38 |   const width = canvasWidth - marginRight - (isLatter.value ? tooltipWidth : 0);
39 |   return (props.current - 1 ) * (width / (total - 1));
40 | });
41 | 
42 | </script>
43 | 
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![NPM](https://img.shields.io/npm/v/slidev-addon-rabbit)](https://www.npmjs.com/package/slidev-addon-rabbit)
 2 | # slidev-addon-rabbit
 3 | 
 4 | Presentation time management for slidev inspired by [rabbit\-shocker/rabbit](https://github.com/rabbit-shocker/rabbit/) | [Rabbit \- はじめに](https://rabbit-shocker.org/ja/)
 5 | 
 6 | # Demo
 7 | 
 8 | https://kaakaa.github.io/slidev-addon-rabbit/1?time=1
 9 | 
10 | ![](./assets/screen.gif)
11 | 
12 | ## Description
13 | 
14 | As the presentation begins, the rabbit and the turtle aim for the goal. **The rabbit** represents **the current page**, and **the turtle** represents **the elapsed time** since the start. Let's guide the rabbit to the goal before the turtle arrives, ensuring everyone has enough leisure time.
15 | 
16 | ![](./assets/description.png)
17 | 
18 | ## Usage
19 | 
20 | 1. Apply `slidev-addon-rabbit` to your slidev project
21 |    - See [Use Addon \| Slidev](https://sli.dev/addons/use.html)
22 | 2. Run slidev (e.g.: `npm run dev`)
23 | 3. Attach url query `?time=10` to presentation url, and access it
24 |    - e.g.: `http://localhost:3030/?time=10`
25 | 
26 | ## Configs
27 | 
28 | 
29 | ```yaml
30 | ---
31 | ...
32 | addons:
33 |   - slidev-addon-rabbit
34 | rabbit:
35 |   slideNum: true   # Show current/total slide numbers next to a rabbit icon
36 | ...
37 | ---
38 | ```
39 | 
40 | # License
41 | 
42 | This repository distributes under [MIT License](./LICENSE)
43 | 
44 | Icons used in this slide are distributed from [Emoji One \(Monotone\)](https://icon-sets.iconify.design/emojione-monotone/) under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/deed.ja).
45 | 
46 | 


--------------------------------------------------------------------------------
/example/slides.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | # You can also start simply with 'default'
  3 | theme: seriph
  4 | # random image from a curated Unsplash collection by Anthony
  5 | # like them? see https://unsplash.com/collections/94734566/slidev
  6 | background: https://cover.sli.dev
  7 | # some information about your slides (markdown enabled)
  8 | title: Welcome to Slidev
  9 | info: |
 10 |   ## Slidev Starter Template
 11 |   Presentation slides for developers.
 12 | 
 13 |   Learn more at [Sli.dev](https://sli.dev)
 14 | # apply unocss classes to the current slide
 15 | class: text-center
 16 | # https://sli.dev/features/drawing
 17 | drawings:
 18 |   persist: false
 19 | # slide transition: https://sli.dev/guide/animations.html#slide-transitions
 20 | transition: slide-left
 21 | # enable MDC Syntax: https://sli.dev/features/mdc
 22 | mdc: true
 23 | addons:
 24 |   - slidev-addon-rabbit
 25 | rabbit:
 26 |   slideNum: true
 27 | ---
 28 | 
 29 | # Welcome to Slidev
 30 | 
 31 | Presentation slides for developers
 32 | 
 33 | <div class="pt-12">
 34 |   <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" hover="bg-white bg-opacity-10">
 35 |     Press Space for next page <carbon:arrow-right class="inline"/>
 36 |   </span>
 37 | </div>
 38 | 
 39 | <div class="abs-br m-6 flex gap-2">
 40 |   <button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white">
 41 |     <carbon:edit />
 42 |   </button>
 43 |   <a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub" title="Open in GitHub"
 44 |     class="text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white">
 45 |     <carbon-logo-github />
 46 |   </a>
 47 | </div>
 48 | 
 49 | <!--
 50 | The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes)
 51 | -->
 52 | 
 53 | ---
 54 | transition: fade-out
 55 | ---
 56 | 
 57 | # What is Slidev?
 58 | 
 59 | Slidev is a slides maker and presenter designed for developers, consist of the following features
 60 | 
 61 | - 📝 **Text-based** - focus on the content with Markdown, and then style them later
 62 | - 🎨 **Themable** - themes can be shared and re-used as npm packages
 63 | - 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
 64 | - 🤹 **Interactive** - embed Vue components to enhance your expressions
 65 | - 🎥 **Recording** - built-in recording and camera view
 66 | - 📤 **Portable** - export to PDF, PPTX, PNGs, or even a hostable SPA
 67 | - 🛠 **Hackable** - virtually anything that's possible on a webpage is possible in Slidev
 68 | <br>
 69 | <br>
 70 | 
 71 | Read more about [Why Slidev?](https://sli.dev/guide/why)
 72 | 
 73 | <!--
 74 | You can have `style` tag in markdown to override the style for the current page.
 75 | Learn more: https://sli.dev/features/slide-scope-style
 76 | -->
 77 | 
 78 | <style>
 79 | h1 {
 80 |   background-color: #2B90B6;
 81 |   background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%);
 82 |   background-size: 100%;
 83 |   -webkit-background-clip: text;
 84 |   -moz-background-clip: text;
 85 |   -webkit-text-fill-color: transparent;
 86 |   -moz-text-fill-color: transparent;
 87 | }
 88 | </style>
 89 | 
 90 | <!--
 91 | Here is another comment.
 92 | -->
 93 | 
 94 | ---
 95 | transition: slide-up
 96 | level: 2
 97 | ---
 98 | 
 99 | # Navigation
100 | 
101 | Hover on the bottom-left corner to see the navigation's controls panel, [learn more](https://sli.dev/guide/ui#navigation-bar)
102 | 
103 | ## Keyboard Shortcuts
104 | 
105 | |     |     |
106 | | --- | --- |
107 | | <kbd>right</kbd> / <kbd>space</kbd>| next animation or slide |
108 | | <kbd>left</kbd>  / <kbd>shift</kbd><kbd>space</kbd> | previous animation or slide |
109 | | <kbd>up</kbd> | previous slide |
110 | | <kbd>down</kbd> | next slide |
111 | 
112 | <!-- https://sli.dev/guide/animations.html#click-animation -->
113 | <img
114 |   v-click
115 |   class="absolute -bottom-9 -left-7 w-80 opacity-50"
116 |   src="https://sli.dev/assets/arrow-bottom-left.svg"
117 |   alt=""
118 | />
119 | <p v-after class="absolute bottom-23 left-45 opacity-30 transform -rotate-10">Here!</p>
120 | 
121 | ---
122 | layout: two-cols
123 | layoutClass: gap-16
124 | ---
125 | 
126 | # Table of contents
127 | 
128 | You can use the `Toc` component to generate a table of contents for your slides:
129 | 
130 | ```html
131 | <Toc minDepth="1" maxDepth="1"></Toc>
132 | ```
133 | 
134 | The title will be inferred from your slide content, or you can override it with `title` and `level` in your frontmatter.
135 | 
136 | ::right::
137 | 
138 | <Toc v-click minDepth="1" maxDepth="2"></Toc>
139 | 
140 | ---
141 | layout: image-right
142 | image: https://cover.sli.dev
143 | ---
144 | 
145 | # Code
146 | 
147 | Use code snippets and get the highlighting directly, and even types hover!
148 | 
149 | ```ts {all|5|7|7-8|10|all} twoslash
150 | // TwoSlash enables TypeScript hover information
151 | // and errors in markdown code blocks
152 | // More at https://shiki.style/packages/twoslash
153 | 
154 | import { computed, ref } from 'vue'
155 | 
156 | const count = ref(0)
157 | const doubled = computed(() => count.value * 2)
158 | 
159 | doubled.value = 2
160 | ```
161 | 
162 | <arrow v-click="[4, 5]" x1="350" y1="310" x2="195" y2="334" color="#953" width="2" arrowSize="1" />
163 | 
164 | <!-- This allow you to embed external code blocks -->
165 | <<< @/snippets/external.ts#snippet
166 | 
167 | <!-- Footer -->
168 | 
169 | [Learn more](https://sli.dev/features/line-highlighting)
170 | 
171 | <!-- Inline style -->
172 | <style>
173 | .footnotes-sep {
174 |   @apply mt-5 opacity-10;
175 | }
176 | .footnotes {
177 |   @apply text-sm opacity-75;
178 | }
179 | .footnote-backref {
180 |   display: none;
181 | }
182 | </style>
183 | 
184 | <!--
185 | Notes can also sync with clicks
186 | 
187 | [click] This will be highlighted after the first click
188 | 
189 | [click] Highlighted with `count = ref(0)`
190 | 
191 | [click:3] Last click (skip two clicks)
192 | -->
193 | 
194 | ---
195 | level: 2
196 | ---
197 | 
198 | # Shiki Magic Move
199 | 
200 | Powered by [shiki-magic-move](https://shiki-magic-move.netlify.app/), Slidev supports animations across multiple code snippets.
201 | 
202 | Add multiple code blocks and wrap them with <code>````md magic-move</code> (four backticks) to enable the magic move. For example:
203 | 
204 | ````md magic-move {lines: true}
205 | ```ts {*|2|*}
206 | // step 1
207 | const author = reactive({
208 |   name: 'John Doe',
209 |   books: [
210 |     'Vue 2 - Advanced Guide',
211 |     'Vue 3 - Basic Guide',
212 |     'Vue 4 - The Mystery'
213 |   ]
214 | })
215 | ```
216 | 
217 | ```ts {*|1-2|3-4|3-4,8}
218 | // step 2
219 | export default {
220 |   data() {
221 |     return {
222 |       author: {
223 |         name: 'John Doe',
224 |         books: [
225 |           'Vue 2 - Advanced Guide',
226 |           'Vue 3 - Basic Guide',
227 |           'Vue 4 - The Mystery'
228 |         ]
229 |       }
230 |     }
231 |   }
232 | }
233 | ```
234 | 
235 | ```ts
236 | // step 3
237 | export default {
238 |   data: () => ({
239 |     author: {
240 |       name: 'John Doe',
241 |       books: [
242 |         'Vue 2 - Advanced Guide',
243 |         'Vue 3 - Basic Guide',
244 |         'Vue 4 - The Mystery'
245 |       ]
246 |     }
247 |   })
248 | }
249 | ```
250 | 
251 | Non-code blocks are ignored.
252 | 
253 | ```vue
254 | <!-- step 4 -->
255 | <script setup>
256 | const author = {
257 |   name: 'John Doe',
258 |   books: [
259 |     'Vue 2 - Advanced Guide',
260 |     'Vue 3 - Basic Guide',
261 |     'Vue 4 - The Mystery'
262 |   ]
263 | }
264 | </script>
265 | ```
266 | ````
267 | 
268 | ---
269 | 
270 | # Components
271 | 
272 | <div grid="~ cols-2 gap-4">
273 | <div>
274 | 
275 | You can use Vue components directly inside your slides.
276 | 
277 | We have provided a few built-in components like `<Tweet/>` and `<Youtube/>` that you can use directly. And adding your custom components is also super easy.
278 | 
279 | ```html
280 | <Counter :count="10" />
281 | ```
282 | 
283 | <!-- ./components/Counter.vue -->
284 | <Counter :count="10" m="t-4" />
285 | 
286 | Check out [the guides](https://sli.dev/builtin/components.html) for more.
287 | 
288 | </div>
289 | <div>
290 | 
291 | ```html
292 | <Tweet id="1390115482657726468" />
293 | ```
294 | 
295 | <Tweet id="1390115482657726468" scale="0.65" />
296 | 
297 | </div>
298 | </div>
299 | 
300 | <!--
301 | Presenter note with **bold**, *italic*, and ~~striked~~ text.
302 | 
303 | Also, HTML elements are valid:
304 | <div class="flex w-full">
305 |   <span style="flex-grow: 1;">Left content</span>
306 |   <span>Right content</span>
307 | </div>
308 | -->
309 | 
310 | ---
311 | class: px-20
312 | ---
313 | 
314 | # Themes
315 | 
316 | Slidev comes with powerful theming support. Themes can provide styles, layouts, components, or even configurations for tools. Switching between themes by just **one edit** in your frontmatter:
317 | 
318 | <div grid="~ cols-2 gap-2" m="t-2">
319 | 
320 | ```yaml
321 | ---
322 | theme: default
323 | ---
324 | ```
325 | 
326 | ```yaml
327 | ---
328 | theme: seriph
329 | ---
330 | ```
331 | 
332 | <img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true" alt="">
333 | 
334 | <img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true" alt="">
335 | 
336 | </div>
337 | 
338 | Read more about [How to use a theme](https://sli.dev/guide/theme-addon#use-theme) and
339 | check out the [Awesome Themes Gallery](https://sli.dev/resources/theme-gallery).
340 | 
341 | ---
342 | 
343 | # Clicks Animations
344 | 
345 | You can add `v-click` to elements to add a click animation.
346 | 
347 | <div v-click>
348 | 
349 | This shows up when you click the slide:
350 | 
351 | ```html
352 | <div v-click>This shows up when you click the slide.</div>
353 | ```
354 | 
355 | </div>
356 | 
357 | <br>
358 | 
359 | <v-click>
360 | 
361 | The <span v-mark.red="3"><code>v-mark</code> directive</span>
362 | also allows you to add
363 | <span v-mark.circle.orange="4">inline marks</span>
364 | , powered by [Rough Notation](https://roughnotation.com/):
365 | 
366 | ```html
367 | <span v-mark.underline.orange>inline markers</span>
368 | ```
369 | 
370 | </v-click>
371 | 
372 | <div mt-20 v-click>
373 | 
374 | [Learn more](https://sli.dev/guide/animations#click-animation)
375 | 
376 | </div>
377 | 
378 | ---
379 | 
380 | # Motions
381 | 
382 | Motion animations are powered by [@vueuse/motion](https://motion.vueuse.org/), triggered by `v-motion` directive.
383 | 
384 | ```html
385 | <div
386 |   v-motion
387 |   :initial="{ x: -80 }"
388 |   :enter="{ x: 0 }"
389 |   :click-3="{ x: 80 }"
390 |   :leave="{ x: 1000 }"
391 | >
392 |   Slidev
393 | </div>
394 | ```
395 | 
396 | <div class="w-60 relative">
397 |   <div class="relative w-40 h-40">
398 |     <img
399 |       v-motion
400 |       :initial="{ x: 800, y: -100, scale: 1.5, rotate: -50 }"
401 |       :enter="final"
402 |       class="absolute inset-0"
403 |       src="https://sli.dev/logo-square.png"
404 |       alt=""
405 |     />
406 |     <img
407 |       v-motion
408 |       :initial="{ y: 500, x: -100, scale: 2 }"
409 |       :enter="final"
410 |       class="absolute inset-0"
411 |       src="https://sli.dev/logo-circle.png"
412 |       alt=""
413 |     />
414 |     <img
415 |       v-motion
416 |       :initial="{ x: 600, y: 400, scale: 2, rotate: 100 }"
417 |       :enter="final"
418 |       class="absolute inset-0"
419 |       src="https://sli.dev/logo-triangle.png"
420 |       alt=""
421 |     />
422 |   </div>
423 | 
424 |   <div
425 |     class="text-5xl absolute top-14 left-40 text-[#2B90B6] -z-1"
426 |     v-motion
427 |     :initial="{ x: -80, opacity: 0}"
428 |     :enter="{ x: 0, opacity: 1, transition: { delay: 2000, duration: 1000 } }">
429 |     Slidev
430 |   </div>
431 | </div>
432 | 
433 | <!-- vue script setup scripts can be directly used in markdown, and will only affects current page -->
434 | <script setup lang="ts">
435 | const final = {
436 |   x: 0,
437 |   y: 0,
438 |   rotate: 0,
439 |   scale: 1,
440 |   transition: {
441 |     type: 'spring',
442 |     damping: 10,
443 |     stiffness: 20,
444 |     mass: 2
445 |   }
446 | }
447 | </script>
448 | 
449 | <div
450 |   v-motion
451 |   :initial="{ x:35, y: 30, opacity: 0}"
452 |   :enter="{ y: 0, opacity: 1, transition: { delay: 3500 } }">
453 | 
454 | [Learn more](https://sli.dev/guide/animations.html#motion)
455 | 
456 | </div>
457 | 
458 | ---
459 | 
460 | # LaTeX
461 | 
462 | LaTeX is supported out-of-box. Powered by [KaTeX](https://katex.org/).
463 | 
464 | <div h-3 />
465 | 
466 | Inline $\sqrt{3x-1}+(1+x)^2$
467 | 
468 | Block
469 | $$ {1|3|all}
470 | \begin{aligned}
471 | \nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\
472 | \nabla \cdot \vec{B} &= 0 \\
473 | \nabla \times \vec{E} &= -\frac{\partial\vec{B}}{\partial t} \\
474 | \nabla \times \vec{B} &= \mu_0\vec{J} + \mu_0\varepsilon_0\frac{\partial\vec{E}}{\partial t}
475 | \end{aligned}
476 | $$
477 | 
478 | [Learn more](https://sli.dev/features/latex)
479 | 
480 | ---
481 | 
482 | # Diagrams
483 | 
484 | You can create diagrams / graphs from textual descriptions, directly in your Markdown.
485 | 
486 | <div class="grid grid-cols-4 gap-5 pt-4 -mb-6">
487 | 
488 | ```mermaid {scale: 0.5, alt: 'A simple sequence diagram'}
489 | sequenceDiagram
490 |     Alice->John: Hello John, how are you?
491 |     Note over Alice,John: A typical interaction
492 | ```
493 | 
494 | ```mermaid {theme: 'neutral', scale: 0.8}
495 | graph TD
496 | B[Text] --> C{Decision}
497 | C -->|One| D[Result 1]
498 | C -->|Two| E[Result 2]
499 | ```
500 | 
501 | ```mermaid
502 | mindmap
503 |   root((mindmap))
504 |     Origins
505 |       Long history
506 |       ::icon(fa fa-book)
507 |       Popularisation
508 |         British popular psychology author Tony Buzan
509 |     Research
510 |       On effectiveness<br/>and features
511 |       On Automatic creation
512 |         Uses
513 |             Creative techniques
514 |             Strategic planning
515 |             Argument mapping
516 |     Tools
517 |       Pen and paper
518 |       Mermaid
519 | ```
520 | 
521 | ```plantuml {scale: 0.7}
522 | @startuml
523 | 
524 | package "Some Group" {
525 |   HTTP - [First Component]
526 |   [Another Component]
527 | }
528 | 
529 | node "Other Groups" {
530 |   FTP - [Second Component]
531 |   [First Component] --> FTP
532 | }
533 | 
534 | cloud {
535 |   [Example 1]
536 | }
537 | 
538 | database "MySql" {
539 |   folder "This is my folder" {
540 |     [Folder 3]
541 |   }
542 |   frame "Foo" {
543 |     [Frame 4]
544 |   }
545 | }
546 | 
547 | [Another Component] --> [Example 1]
548 | [Example 1] --> [Folder 3]
549 | [Folder 3] --> [Frame 4]
550 | 
551 | @enduml
552 | ```
553 | 
554 | </div>
555 | 
556 | Learn more: [Mermaid Diagrams](https://sli.dev/features/mermaid) and [PlantUML Diagrams](https://sli.dev/features/plantuml)
557 | 
558 | ---
559 | foo: bar
560 | dragPos:
561 |   square: 691,32,167,_,-16
562 | ---
563 | 
564 | # Draggable Elements
565 | 
566 | Double-click on the draggable elements to edit their positions.
567 | 
568 | <br>
569 | 
570 | ###### Directive Usage
571 | 
572 | ```md
573 | <img v-drag="'square'" src="https://sli.dev/logo.png">
574 | ```
575 | 
576 | <br>
577 | 
578 | ###### Component Usage
579 | 
580 | ```md
581 | <v-drag text-3xl>
582 |   <carbon:arrow-up />
583 |   Use the `v-drag` component to have a draggable container!
584 | </v-drag>
585 | ```
586 | 
587 | <v-drag pos="663,206,261,_,-15">
588 |   <div text-center text-3xl border border-main rounded>
589 |     Double-click me!
590 |   </div>
591 | </v-drag>
592 | 
593 | <img v-drag="'square'" src="https://sli.dev/logo.png">
594 | 
595 | ###### Draggable Arrow
596 | 
597 | ```md
598 | <v-drag-arrow two-way />
599 | ```
600 | 
601 | <v-drag-arrow pos="67,452,253,46" two-way op70 />
602 | 
603 | ---
604 | src: ./pages/imported-slides.md
605 | hide: false
606 | ---
607 | 
608 | ---
609 | 
610 | # Monaco Editor
611 | 
612 | Slidev provides built-in Monaco Editor support.
613 | 
614 | Add `{monaco}` to the code block to turn it into an editor:
615 | 
616 | ```ts {monaco}
617 | import { ref } from 'vue'
618 | import { emptyArray } from './external'
619 | 
620 | const arr = ref(emptyArray(10))
621 | ```
622 | 
623 | Use `{monaco-run}` to create an editor that can execute the code directly in the slide:
624 | 
625 | ```ts {monaco-run}
626 | import { version } from 'vue'
627 | import { emptyArray, sayHello } from './external'
628 | 
629 | sayHello()
630 | console.log(`vue ${version}`)
631 | console.log(emptyArray<number>(10).reduce(fib => [...fib, fib.at(-1)! + fib.at(-2)!], [1, 1]))
632 | ```
633 | 
634 | ---
635 | layout: center
636 | class: text-center
637 | ---
638 | 
639 | # Learn More
640 | 
641 | [Documentation](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev) · [Showcases](https://sli.dev/resources/showcases)
642 | 
643 | <PoweredBySlidev mt-10 />
644 | 


--------------------------------------------------------------------------------