docs(en): merge docs/main into docs-vn/main @ c8121c16

.vitepress/config.js

@@ -46,10 +46,14 @@ const Guide = [
     link: '/guide/presenter-mode',
   },
   {
+<<<<<<< HEAD
 <<<<<<< HEAD
     text: 'Tích hợp trình soạn thảo',
 =======
     text: 'Drawing & Annonations',
+=======
+    text: 'Drawing & Annotations',
+>>>>>>> c8121c161efd5a726d336648d2b101540c346dd2
     link: '/guide/drawing',
   },
   {
@@ -78,6 +82,17 @@ const Theme = [
   },
 ]
 
+const Addon = [
+  {
+    text: 'Use Addon',
+    link: '/addons/use',
+  },
+  {
+    text: 'Write an Addon',
+    link: '/addons/write-an-addon',
+  },
+]
+
 const Translations = [
   {
     text: 'Việt Nam'
@@ -118,6 +133,10 @@ const Translations = [
     text: 'Ελληνικά',
     link: 'https://el.sli.dev{{pathname}}',
   },
+  {
+    text: '日本語',
+    link: 'https://ja.sli.dev{{pathname}}',
+  },
 ]
 
 const Customizations = [
@@ -204,7 +223,15 @@ const slidebars = [
     children: Theme,
   },
   {
+<<<<<<< HEAD
     text: 'Các tùy chỉnh',
+=======
+    text: 'Addons',
+    children: Addon,
+  },
+  {
+    text: 'Customizations',
+>>>>>>> c8121c161efd5a726d336648d2b101540c346dd2
     children: Customizations,
   },
   {
@@ -267,7 +294,15 @@ module.exports = {
         items: Theme,
       },
       {
+<<<<<<< HEAD
         text: 'Tùy chỉnh',
+=======
+        text: 'Addon',
+        items: Addon,
+      },
+      {
+        text: 'Customize',
+>>>>>>> c8121c161efd5a726d336648d2b101540c346dd2
         items: Customizations,
       },
       {
@@ -283,6 +318,7 @@ module.exports = {
     sidebar: {
       '/guide/': slidebars,
       '/themes/': slidebars,
+      '/addons/': slidebars,
       '/custom/': slidebars,
       '/builtin/': slidebars,
       '/resources/': slidebars,

.vitepress/showcases.ts

@@ -108,6 +108,30 @@ export const showcases: ShowCaseInfo[] = [
     at: 'Thoughtworks Internal Lunch & Learn',
     datetime: '2021-11-12',
   },
+  {
+    title: 'Git\'s Most Wanted',
+    cover: 'https://cdn.jsdelivr.net/gh/alexanderdavide/git-most-wanted@assets/slides-export/01.png',
+    author: {
+      name: 'Alexander Eble',
+      link: 'https://github.com/alexanderdavide',
+    },
+    slidesLink: 'https://git-most-wanted.alex-eble.de',
+    sourceLink: 'https://github.com/alexanderdavide/git-most-wanted',
+    at: 'Internal Tech Talk',
+    datetime: '2022-03-11',
+  },
+  {
+    title: 'OpenFunction 202',
+    cover: 'https://s2.loli.net/2022/05/22/4zsCnkQRFoAU1E5.png',
+    author: {
+      name: 'Haili Zhang',
+      link: 'https://github.com/webup',
+    },
+    slidesLink: 'https://openfunction-talks.netlify.app/2022/202-node-async/',
+    sourceLink: 'https://github.com/webup/openfunction-talks/tree/main/202-node-async',
+    at: 'OpenFunction Tutorial Sharing',
+    datetime: '2022-05-08',
+  },
   // Add yours here!
   {
     title: 'Yours?',

.vitepress/theme/components/AlgoliaSearchBox.vue

@@ -5,7 +5,7 @@
 <script setup lang="ts">
 import '@docsearch/css'
 import { useRoute, useRouter } from 'vitepress'
-import { defineProps, getCurrentInstance, onMounted, watch } from 'vue'
+import { getCurrentInstance, onMounted, watch } from 'vue'
 import docsearch from '@docsearch/js'
 import type { DocSearchHit } from '@docsearch/react/dist/esm/types'
 import type { DefaultTheme } from '../config'

.vitepress/theme/components/BooleanDisplay.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, defineProps } from 'vue'
+import { ref } from 'vue'
 
 const props = defineProps({
   value: {

.vitepress/theme/components/Environment.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
-
 defineProps<{ type: 'node' | 'client' }>()
 </script>
 

.vitepress/theme/components/NavBar.vue

@@ -39,7 +39,6 @@
 </template>
 
 <script setup lang="ts">
-import { defineEmit, defineProps } from 'vue'
 import { useRepo } from '../composables/repo'
 import NavBarTitle from './NavBarTitle.vue'
 import NavLinks from './NavLinks.vue'
@@ -48,7 +47,7 @@ import DarkModeSwitch from './DarkModeSwitch.vue'
 
 const repo = useRepo()
 
-defineEmit(['toggle'])
+defineEmits(['toggle'])
 
 defineProps({
   showSidebar: { type: Boolean, required: true },

.vitepress/theme/components/NavDropdownLink.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { useRoute } from 'vitepress'
 import type { DefaultTheme } from '../config'
 import NavDropdownLinkItem from './NavDropdownLinkItem.vue'

.vitepress/theme/components/NavDropdownLinkItem.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, toRefs } from 'vue'
+import { toRefs } from 'vue'
 import type { DefaultTheme } from '../config'
 import { useNavLink } from '../composables/navLink'
 import OutboundLink from './icons/OutboundLink.vue'

.vitepress/theme/components/NavLink.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, toRefs } from 'vue'
+import { toRefs } from 'vue'
 import type { DefaultTheme } from '../config'
 import { useNavLink } from '../composables/navLink'
 import OutboundLink from './icons/OutboundLink.vue'

.vitepress/theme/components/ShowCaseInfo.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
 import type { ShowCaseInfo } from '../../showcases'
 
 defineProps<{

.vitepress/theme/components/SideBar.vue

@@ -11,7 +11,6 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue'
 import NavLinks from './NavLinks.vue'
 import SideBarLinks from './SideBarLinks.vue'
 

.vitepress/theme/components/ThemeGallery.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, computed } from 'vue'
+import { computed } from 'vue'
 import { official, community } from '../../themes'
 
 const props = defineProps({

.vitepress/theme/components/ThemeInfo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, ref } from 'vue'
+import { ref } from 'vue'
 import { isClient, useIntervalFn } from '@vueuse/core'
 import type { ThemeInfo } from '../../themes'
 

.vitepress/theme/components/Tweet.vue

@@ -8,7 +8,7 @@ Usage:
 
 <script setup lang="ts">
 import { useScriptTag, isClient } from '@vueuse/core'
-import { defineProps, getCurrentInstance, onMounted, ref } from 'vue'
+import { getCurrentInstance, onMounted, ref } from 'vue'
 import { isDark } from '../composables/dark'
 
 const props = defineProps<{

.vitepress/themes.ts

@@ -315,6 +315,29 @@ export const community: ThemeInfo[] = [
       'light',
     ],
   },
+  {
+    id: 'slidev-theme-academic',
+    name: 'Academic',
+    description: 'Academic presentations with Slidev made simple',
+    author: {
+      name: 'Alexander Eble',
+      link: 'https://github.com/alexanderdavide',
+    },
+    repo: 'https://github.com/alexanderdavide/slidev-theme-academic',
+    previews: [
+      'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/01.png',
+      'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/02.png',
+      'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/08.png',
+      'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/04.png',
+      'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/05.png',
+      'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/06.png',
+      'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/07.png',
+    ],
+    tags: [
+      'dark',
+      'light',
+    ],
+  },
   // Add yours here!
   {
     id: '',

README.md

@@ -15,6 +15,7 @@ Tài liệu cho [Slidev](https://github.com/slidevjs/slidev)
 | Deutsch | [docs-de](https://github.com/slidevjs/docs-de) | [de.sli.dev](https://de.sli.dev) | [@fabiankachlock](https://github.com/fabiankachlock) |
 | Português (BR) | [docs-br](https://github.com/slidevjs/docs-br) | [br.sli.dev](https://br.sli.dev) | [@luisfelipesdn12](https://github.com/luisfelipesdn12) |
 | Ελληνικά | [docs-el](https://github.com/slidevjs/docs-el) | [el.sli.dev](https://el.sli.dev) | [@GeopJr](https://github.com/GeopJr) |
+| 日本語 | [docs-ja](https://github.com/slidevjs/docs-el) | [ja.sli.dev](https://ja.sli.dev) | [@IkumaTadokoro](https://github.com/IkumaTadokoro) |
 
 ## Start Server Locally
 

TRANSLATIONS.md

@@ -77,6 +77,11 @@ In case it's already been translated but you're wondering how to maintain it, sk
 - [ ] `use.md` - How to use Slidev themes
 - [ ] `write-a-theme.md` - Write your own theme
 
+### addons/
+
+- [ ] `use.md` - How to use Slidev addons
+- [ ] `write-an-addon.md` - Write your own addon
+
 ## Publishing your translations
 
 - [ ] When you finish the translation (at least 90%), `@antfu` in the Discord and we will invite you to the org and make the translation official.

addons/use.md

@@ -0,0 +1,38 @@
+# Use Addon
+
+Addons are sets of additional components, layouts, styles, configuration...etc. that you can use in your presentation.
+
+They are quite similar to [themes](/themes/use), but in general:
+
+* they don't affect the global styles of your slides
+* you can use multiple addons in one presentation
+
+To use addons, you have to install them manually via:
+
+```bash
+$ npm install [slidev-addon-package1] [slidev-addon-package2]
+```
+
+And then declare the addons either in your frontmatter:
+
+```yaml
+---
+addons:
+  - slidev-addon-package1
+  - slidev-addon-package2
+---
+```
+
+Or in your `package.json` file:
+
+```json
+// package.json
+{
+  "slidev": {
+    "addons": [
+      "slidev-addon-package1",
+      "slidev-addon-package2",
+    ]
+  }
+}
+```

addons/write-an-addon.md

@@ -0,0 +1,71 @@
+# Write an Addon
+
+> Available since v0.32.1
+
+## Capability
+
+An addon can contribute to the following points:
+
+- Global styles (use with caution has it is more the role of [themes](/themes/use))
+- Provide custom layouts or override the existing one
+- Provide custom components or override the existing one
+- Extend Windi CSS configurations
+- Configure tools like Monaco and Prism
+
+## Conventions
+
+Addons are published to npm registry, and they should follow the conventions below:
+
+- Package name should start with `slidev-addon-`, for example: `slidev-addon-awesome`
+- Add `slidev-addon` and `slidev` in the `keywords` field of your `package.json`
+
+## Setup
+
+### Initialization
+
+To create your addon, start by creating a directory with create a `package.json` file (you can use `npm init`).
+
+Then, install slidev dependencies:
+
+```bash
+$ npm install -D @slidev/cli
+```
+
+### Testing
+
+To set up the testing playground for your addon, you can create an `example.md` file with some content.
+
+And optionally, you can also add some scripts to your `packages.json`
+
+```json
+// package.json
+{
+  "scripts": {
+    "dev": "slidev example.md",
+    "build": "slidev build example.md",
+    "export": "slidev export example.md",
+    "screenshot": "slidev export example.md --format png"
+  }
+}
+```
+
+To publish your addon, simply run `npm publish` and you are good to go. There is no build process required (which means you can directly publish `.vue` and `.ts` files, Slidev is smart enough to understand them).
+
+Addon contribution points follow the same conventions as local customization, please refer to [the docs for the naming conventions](/custom/). 
+
+## Addon metadata
+
+### Slidev Version
+
+If the addon is relying on a specific feature of Slidev that are newly introduced, you can set the minimal Slidev version required to have your addon working properly:
+
+```json
+// package.json
+{
+  "engines": {
+    "slidev": ">=0.32.1"
+  }
+}
+```
+
+If users are using older versions of Slidev, an error will be thrown.