feat: support i18n

src/client/app/data.ts

@@ -5,9 +5,9 @@ import {
   PageData,
   SiteData,
   resolveSiteDataByRoute,
-  createTitle
+  createTitle,
+  DefaultTheme
 } from '../shared.js'
-import { withBase } from './utils.js'
 
 export const dataSymbol: InjectionKey<VitePressData> = Symbol()
 
@@ -19,7 +19,8 @@ export interface VitePressData<T = any> {
   title: Ref<string>
   description: Ref<string>
   lang: Ref<string>
-  localePath: Ref<string>
+  dir: Ref<string>
+  localeIndex: Ref<string>
 }
 
 // site data is a singleton
@@ -39,7 +40,7 @@ if (import.meta.hot) {
 // per-app data
 export function initData(route: Route): VitePressData {
   const site = computed(() =>
-    resolveSiteDataByRoute(siteDataRef.value, route.path)
+    resolveSiteDataByRoute(siteDataRef.value, route.data.relativePath)
   )
 
   return {
@@ -48,13 +49,8 @@ export function initData(route: Route): VitePressData {
     page: computed(() => route.data),
     frontmatter: computed(() => route.data.frontmatter),
     lang: computed(() => site.value.lang),
-    localePath: computed(() => {
-      const { langs, lang } = site.value
-      const path = Object.keys(langs).find(
-        (langPath) => langs[langPath].lang === lang
-      )
-      return withBase(path || '/')
-    }),
+    dir: computed(() => site.value.dir),
+    localeIndex: computed(() => site.value.localeIndex || 'root'),
     title: computed(() => {
       return createTitle(site.value, route.data)
     }),
@@ -64,7 +60,7 @@ export function initData(route: Route): VitePressData {
   }
 }
 
-export function useData<T = any>(): VitePressData<T> {
+export function useData<T = DefaultTheme.Config>(): VitePressData<T> {
   const data = inject(dataSymbol)
   if (!data) {
     throw new Error('vitepress data not properly injected in app')

src/client/app/index.ts

@@ -5,7 +5,7 @@ import {
   defineComponent,
   h,
   onMounted,
-  watch
+  watchEffect
 } from 'vue'
 import Theme from '@theme/index'
 import { inBrowser, pathToFile } from './utils.js'
@@ -27,13 +27,10 @@ const VitePressApp = defineComponent({
 
     // change the language on the HTML element based on the current lang
     onMounted(() => {
-      watch(
-        () => site.value.lang,
-        (lang: string) => {
-          document.documentElement.lang = lang
-        },
-        { immediate: true }
-      )
+      watchEffect(() => {
+        document.documentElement.lang = site.value.lang
+        document.documentElement.dir = site.value.dir
+      })
     })
 
     if (import.meta.env.PROD) {

src/client/app/utils.ts

@@ -1,7 +1,7 @@
 import { siteDataRef } from './data.js'
 import { inBrowser, EXTERNAL_URL_RE } from '../shared.js'
 
-export { inBrowser }
+export { inBrowser } from '../shared.js'
 
 /**
  * Join two paths by resolving the slash collision.
@@ -11,7 +11,7 @@ export function joinPath(base: string, path: string): string {
 }
 
 export function withBase(path: string) {
-  return EXTERNAL_URL_RE.test(path)
+  return EXTERNAL_URL_RE.test(path) || path.startsWith('.')
     ? path
     : joinPath(siteDataRef.value.base, path)
 }

src/client/index.ts

@@ -11,8 +11,7 @@ export type {
   PageData,
   SiteData,
   HeadConfig,
-  Header,
-  LocaleConfig
+  Header
 } from '../../types/shared.js'
 
 // composables

src/client/theme-default/components/VPAlgoliaSearchBox.vue

@@ -4,12 +4,16 @@ import { default as docsearch } from '@docsearch/js'
 import { onMounted } from 'vue'
 import { useRouter, useRoute, useData } from 'vitepress'
 
+const props = defineProps<{
+  algolia: DefaultTheme.AlgoliaSearchOptions
+}>()
+
 const router = useRouter()
 const route = useRoute()
-const { theme, site } = useData()
+const { site } = useData()
 
 onMounted(() => {
-  initialize(theme.value.algolia)
+  initialize(props.algolia)
   setTimeout(poll, 16)
 })
 

src/client/theme-default/components/VPCarbonAds.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
 import { ref, watch, onMounted } from 'vue'
-import { useData } from 'vitepress'
 import { useAside } from '../composables/aside.js'
 
-const { theme } = useData()
-const carbonOptions = theme.value.carbonAds
+const props = defineProps<{
+  carbonAds: DefaultTheme.CarbonAdsOptions
+}>()
+
+const carbonOptions = props.carbonAds
 const { isAsideEnabled } = useAside()
 const container = ref()
 

src/client/theme-default/components/VPDocAside.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
+import { defineAsyncComponent } from 'vue'
 import { useData } from 'vitepress'
 import VPDocAsideOutline from './VPDocAsideOutline.vue'
-import VPDocAsideCarbonAds from './VPDocAsideCarbonAds.vue'
 
 const { theme } = useData()
+
+const VPCarbonAds = __CARBON__
+  ? defineAsyncComponent(() => import('./VPCarbonAds.vue'))
+  : () => null
 </script>
 
 <template>
@@ -17,7 +21,7 @@ const { theme } = useData()
     <div class="spacer" />
 
     <slot name="aside-ads-before" />
-    <VPDocAsideCarbonAds v-if="theme.carbonAds" />
+    <VPCarbonAds v-if="theme.carbonAds" :carbonAds="theme.carbonAds" />
     <slot name="aside-ads-after" />
 
     <slot name="aside-bottom" />

src/client/theme-default/components/VPDocAsideOutline.vue

@@ -43,7 +43,7 @@ function handleClick({ target: el }: Event) {
       <div class="outline-marker" ref="marker" />
 
       <div class="outline-title">
-        {{ theme.outlineTitle || 'On this page' }}
+        {{ theme.translations?.outlineTitle || 'On this page' }}
       </div>
 
       <nav aria-labelledby="doc-outline-aria-label">

src/client/theme-default/components/VPDocFooter.vue

@@ -42,13 +42,13 @@ const showFooter = computed(() => {
     <div v-if="control.prev || control.next" class="prev-next">
       <div class="pager">
         <a v-if="control.prev" class="pager-link prev" :href="normalizeLink(control.prev.link)">
-          <span class="desc">{{ theme.docFooter?.prev ?? 'Previous page' }}</span>
+          <span class="desc">{{ theme.translations?.docFooter?.prev || 'Previous page' }}</span>
           <span class="title">{{ control.prev.text }} </span>
         </a>
       </div>
       <div class="pager" :class="{ 'has-prev': control.prev }">
         <a v-if="control.next" class="pager-link next" :href="normalizeLink(control.next.link)">
-          <span class="desc">{{ theme.docFooter?.next ?? 'Next page' }}</span>
+          <span class="desc">{{ theme.translations?.docFooter?.next || 'Next page' }}</span>
           <span class="title">{{ control.next.text }}</span>
         </a>
       </div>

src/client/theme-default/components/VPDocFooterLastUpdated.vue

@@ -20,7 +20,7 @@ onMounted(() => {
 
 <template>
   <p class="VPLastUpdated">
-    {{ theme.lastUpdatedText ?? 'Last updated' }}:
+    {{ theme.translations?.lastUpdatedText || 'Last updated' }}:
     <time :datatime="isoDatetime">{{ datetime }}</time>
   </p>
 </template>

src/client/theme-default/components/VPLocalNav.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useData } from 'vitepress'
 import { useSidebar } from '../composables/sidebar.js'
 import VPIconAlignLeft from './icons/VPIconAlignLeft.vue'
 
@@ -10,6 +11,7 @@ defineEmits<{
   (e: 'open-menu'): void
 }>()
 
+const { theme } = useData()
 const { hasSidebar } = useSidebar()
 
 function scrollToTop() {
@@ -26,11 +28,13 @@ function scrollToTop() {
       @click="$emit('open-menu')"
     >
       <VPIconAlignLeft class="menu-icon" />
-      <span class="menu-text">Menu</span>
+      <span class="menu-text">
+        {{ theme.translations?.sidebarMenuLabel || 'Menu' }}
+      </span>
     </button>
 
     <a class="top-link" href="#" @click="scrollToTop">
-      Return to top
+      {{ theme.translations?.returnToTopLabel || 'Return to top' }}
     </a>
   </div>
 </template>

src/client/theme-default/components/VPNavBarExtra.vue

@@ -1,29 +1,38 @@
 <script lang="ts" setup>
 import { useData } from 'vitepress'
+import { computed } from 'vue'
 import VPFlyout from './VPFlyout.vue'
 import VPMenuLink from './VPMenuLink.vue'
 import VPSwitchAppearance from './VPSwitchAppearance.vue'
 import VPSocialLinks from './VPSocialLinks.vue'
-import { computed } from 'vue'
+import { useLangs } from '../composables/langs.js'
 
 const { site, theme } = useData()
+const { localeLinks, currentLang } = useLangs()
 
-const hasExtraContent = computed(() => theme.value.localeLinks || site.value.appearance || theme.value.socialLinks)
+const hasExtraContent = computed(
+  () =>
+    (localeLinks.value.length && currentLang.value.label) ||
+    site.value.appearance ||
+    theme.value.socialLinks
+)
 </script>
 
 <template>
   <VPFlyout v-if="hasExtraContent" class="VPNavBarExtra" label="extra navigation">
-    <div v-if="theme.localeLinks" class="group">
-      <p class="trans-title">{{ theme.localeLinks.text }}</p>
+    <div v-if="localeLinks.length && currentLang.label" class="group">
+      <p class="trans-title">{{ currentLang.label }}</p>
 
-      <template v-for="locale in theme.localeLinks.items" :key="locale.link">
+      <template v-for="locale in localeLinks" :key="locale.link">
         <VPMenuLink :item="locale" />
       </template>
     </div>
 
     <div v-if="site.appearance" class="group">
       <div class="item appearance">
-        <p class="label">Appearance</p>
+        <p class="label">
+          {{ theme.translations?.darkModeSwitchLabel || 'Appearance' }}
+        </p>
         <div class="appearance-action">
           <VPSwitchAppearance />
         </div>

src/client/theme-default/components/VPNavBarSearch.vue

@@ -52,7 +52,7 @@ function load() {
 
 <template>
   <div v-if="theme.algolia" class="VPNavBarSearch">
-    <VPAlgoliaSearchBox v-if="loaded" />
+    <VPAlgoliaSearchBox v-if="loaded" :algolia="theme.algolia" />
 
     <div v-else id="docsearch" @click="load">
       <button

src/client/theme-default/components/VPNavBarTitle.vue

@@ -1,17 +1,20 @@
 <script setup lang="ts">
 import { useData } from 'vitepress'
 import { useSidebar } from '../composables/sidebar.js'
+import { useLangs } from '../composables/langs.js'
+import { normalizeLink } from '../support/utils.js'
 import VPImage from './VPImage.vue'
 
 const { site, theme } = useData()
 const { hasSidebar } = useSidebar()
+const { currentLang } = useLangs()
 </script>
 
 <template>
   <div class="VPNavBarTitle" :class="{ 'has-sidebar': hasSidebar }">
-    <a class="title" :href="site.base">
+    <a class="title" :href="normalizeLink(currentLang.link)">
       <slot name="nav-bar-title-before" />
-      <VPImage class="logo" :image="theme.logo" />
+      <VPImage v-if="theme.logo" class="logo" :image="theme.logo" />
       <template v-if="theme.siteTitle">{{ theme.siteTitle }}</template>
       <template v-else-if="theme.siteTitle === undefined">{{ site.title }}</template>
       <slot name="nav-bar-title-after" />

src/client/theme-default/components/VPNavBarTranslations.vue

@@ -1,22 +1,22 @@
 <script lang="ts" setup>
-import { useData } from 'vitepress'
 import VPIconLanguages from './icons/VPIconLanguages.vue'
 import VPFlyout from './VPFlyout.vue'
 import VPMenuLink from './VPMenuLink.vue'
+import { useLangs } from '../composables/langs.js'
 
-const { theme } = useData()
+const { localeLinks, currentLang } = useLangs()
 </script>
 
 <template>
   <VPFlyout
-    v-if="theme.localeLinks"
+    v-if="localeLinks.length && currentLang.label"
     class="VPNavBarTranslations"
     :icon="VPIconLanguages"
   >
     <div class="items">
-      <p class="title">{{ theme.localeLinks.text }}</p>
+      <p class="title">{{ currentLang.label }}</p>
 
-      <template v-for="locale in theme.localeLinks.items" :key="locale.link">
+      <template v-for="locale in localeLinks" :key="locale.link">
         <VPMenuLink :item="locale" />
       </template>
     </div>

src/client/theme-default/components/VPNavScreenAppearance.vue

@@ -2,12 +2,14 @@
 import { useData } from 'vitepress'
 import VPSwitchAppearance from './VPSwitchAppearance.vue'
 
-const { site } = useData()
+const { site, theme } = useData()
 </script>
 
 <template>
   <div v-if="site.appearance" class="VPNavScreenAppearance">
-    <p class="text">Appearance</p>
+    <p class="text">
+      {{ theme.translations?.darkModeSwitchLabel || 'Appearance' }}
+    </p>
     <VPSwitchAppearance />
   </div>
 </template>