docs(en): merging all conflicts

.npmrc

@@ -1 +1,2 @@
 shamefully-hoist=true
+strict-peer-dependencies=false

.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',
+>>>>>>> 2b46447648e5687da75c541148acdffeeb2de2c6
     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',
+>>>>>>> 2b46447648e5687da75c541148acdffeeb2de2c6
     children: Customizations,
   },
   {
@@ -267,7 +294,15 @@ module.exports = {
         items: Theme,
       },
       {
+<<<<<<< HEAD
         text: 'Tùy chỉnh',
+=======
+        text: 'Addon',
+        items: Addon,
+      },
+      {
+        text: 'Customize',
+>>>>>>> 2b46447648e5687da75c541148acdffeeb2de2c6
         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/Layout.vue

@@ -50,19 +50,17 @@
 
   <!-- <Debug /> -->
 
-  <ClientOnly>
+  <!-- <ClientOnly>
     <WorkingInProgress />
-  </ClientOnly>
+  </ClientOnly> -->
 </template>
 
 <script setup lang="ts">
 import { ref, computed, watch, defineAsyncComponent } from 'vue'
 import {
   useRoute,
-  useSiteData,
-  useSiteDataByRoute,
+  useData,
 } from 'vitepress'
-import type { DefaultTheme } from './config'
 
 // components
 import NavBar from './components/NavBar.vue'
@@ -72,8 +70,7 @@ const Home = defineAsyncComponent(() => import('./components/Home.vue'))
 
 // generic state
 const route = useRoute()
-const siteData = useSiteData<DefaultTheme.Config>()
-const siteRouteData = useSiteDataByRoute()
+const {site: siteData} = useData()
 const theme = computed(() => siteData.value.themeConfig)
 
 const AlgoliaSearchBox = defineAsyncComponent(
@@ -87,7 +84,7 @@ const enableHome = computed(() => !!route.data.frontmatter.home)
 
 // navbar
 const showNavbar = computed(() => {
-  const { themeConfig } = siteRouteData.value
+  const { themeConfig } = siteData.value
   const { frontmatter } = route.data
   if (frontmatter.navbar === false || themeConfig.navbar === false)
     return false
@@ -107,7 +104,7 @@ const openSideBar = ref(false)
 
 const showSidebar = computed(() => {
   const { frontmatter } = route.data
-  const { themeConfig } = siteRouteData.value
+  const { themeConfig } = siteData.value
   return (
     !frontmatter.home
     && frontmatter.sidebar !== false

.vitepress/theme/NotFound.vue

@@ -2,11 +2,14 @@
   <div class="theme">
     <h1>404</h1>
     <blockquote>{{ getMsg() }}</blockquote>
-    <a :href="$site.base" aria-label="go to home">Take me home.</a>
+    <a :href="site.base" aria-label="go to home">Take me home.</a>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useData } from 'vitepress';
+
+const {site} = useData()
 const msgs = [
   'There\'s nothing here.',
   'How did we get here?',

.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/DarkModeSwitch.vue

@@ -1,5 +1,5 @@
 <template>
-  <button aria-label="Toggle Theme" class="nav-btn" @click="toggle">
+  <button aria-label="Toggle Theme" class="nav-btn" @click="toggle()">
     <ri-moon-fill v-show="isDark" />
     <ri-sun-fill v-show="!isDark" />
   </button>

.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/HomeFeatures.vue

@@ -19,16 +19,16 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useFrontmatter } from 'vitepress'
+import { useData } from 'vitepress'
 
-const data = useFrontmatter()
+const {frontmatter} = useData()
 
 const hasFeatures = computed(() => {
-  return data.value.features && data.value.features.length > 0
+  return frontmatter.value.features && frontmatter.value.features.length > 0
 })
 
 const features = computed(() => {
-  return data.value.features ? data.value.features : []
+  return frontmatter.value.features ? frontmatter.value.features : []
 })
 </script>
 

.vitepress/theme/components/HomeHero.vue

@@ -16,14 +16,14 @@
 
         <NavLink
           v-if="hasAction"
-          :item="{ link: data.actionLink, text: data.actionText }"
+          :item="{ link: frontmatter.actionLink, text: frontmatter.actionText }"
           class="action mx-2"
           rounded="tr-4xl tl-2xl br-2xl bl-3xl"
         />
 
         <NavLink
           v-if="hasAltAction"
-          :item="{ link: data.altActionLink, text: data.altActionText }"
+          :item="{ link: frontmatter.altActionLink, text: frontmatter.altActionText }"
           class="action alt mx-2"
           rounded="tr-2xl tl-3xl br-4xl bl-4xl"
         />
@@ -50,19 +50,19 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useFrontmatter } from 'vitepress'
+import { useData } from 'vitepress'
 import NavLink from './NavLink.vue'
 
-const data = useFrontmatter()
+const {frontmatter} = useData()
 
-const hasHeroText = computed(() => data.value.heroText !== null)
-const hasTagline = computed(() => data.value.tagline !== null)
+const hasHeroText = computed(() => frontmatter.value.heroText !== null)
+const hasTagline = computed(() => frontmatter.value.tagline !== null)
 
-const hasAction = computed(() => data.value.actionLink && data.value.actionText)
-const hasAltAction = computed(() => data.value.altActionLink && data.value.altActionText)
+const hasAction = computed(() => frontmatter.value.actionLink && frontmatter.value.actionText)
+const hasAltAction = computed(() => frontmatter.value.altActionLink && frontmatter.value.altActionText)
 
 const showHero = computed(() => {
-  return data.value.heroImage
+  return frontmatter.value.heroImage
     || hasHeroText.value
     || hasTagline.value
     || hasAction.value

.vitepress/theme/components/LastUpdated.vue

@@ -7,12 +7,11 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, onMounted } from 'vue'
-import { useSiteDataByRoute, usePageData } from 'vitepress'
+import { useData } from 'vitepress'
 
 export default defineComponent({
   setup() {
-    const site = useSiteDataByRoute()
-    const page = usePageData()
+    const { site, page } = useData()
 
     const datetime = ref('')
 
@@ -29,7 +28,7 @@ export default defineComponent({
     })
 
     onMounted(() => {
-      datetime.value = new Date(page.value.lastUpdated).toLocaleString('en-US')
+      datetime.value = new Date(page.value.lastUpdated || 0).toLocaleString('en-US')
     })
 
     return {

.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/NavBarTitle.vue

@@ -1,13 +1,21 @@
+<script setup lang="ts">
+import { computed } from '@vue/reactivity';
+import { useData ,withBase} from 'vitepress';
+
+const {site} = useData()
+const themeConfig = computed(()=>site.value.themeConfig)
+</script>
+
 <template>
   <a
     class="nav-bar-title"
-    :href="$site.base"
-    :aria-label="`${$site.title}, back to home`"
+    :href="site.base"
+    :aria-label="`${site.title}, back to home`"
   >
     <img
-      v-if="$themeConfig.logo"
+      v-if="themeConfig.logo"
       class="logo"
-      :src="$withBase($themeConfig.logo)"
+      :src="withBase(themeConfig.logo)"
       alt="Logo"
     >
     <span class="title text-primary-deep">

.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/NavLinks.vue

@@ -15,12 +15,12 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useSiteDataByRoute } from 'vitepress'
+import { useData } from 'vitepress'
 import { useLocaleLinks } from '../composables/nav'
 import NavLink from './NavLink.vue'
 import NavDropdownLink from './NavDropdownLink.vue'
 
-const site = useSiteDataByRoute()
+const {site} = useData()
 const localeLinks = useLocaleLinks()
 
 const links = computed(() => site.value.themeConfig.nav)

.vitepress/theme/components/ShowCaseInfo.vue

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