chore: upgrade vitepress and apply translation helper

.gitignore

@@ -2,4 +2,5 @@ node_modules
 .DS_Store
 .pnpm-debug.log
 .vitepress/dist
+.vitepress/cache
 .idea

.vitepress/config.js

@@ -1,23 +1,13 @@
-import locales from "./locales"
+import { defineConfig } from 'vitepress'
+import { en, zh, ja, uk, pt } from "./locales"
 
-/**
- * @type {import('vitepress').UserConfig}
- */
-export default {
+export default defineConfig({
   srcDir: 'src',
-  locales: locales.vitepressConfig,
-
-
-  themeConfig: {
-    localeLinks: {
-      items: [
-        {text: 'English', link: '/'},
-        {text: '中文简体', link: '/zh/'},
-        {text: '日本語', link: '/ja/'},
-        {text: 'Українська', link: '/uk/'},
-        {text: 'Português', link: '/pt/'}
-      ]
-    },
-    locales: locales.themeConfig
+  locales: {
+    root: { label: 'English', lang: 'en-US', link: '/', ...en },
+    zh: { label: '中文简体',  lang: 'zh-CN', link: '/zh/', ...zh },
+    ja: { label: '日本語', lang: 'ja-JP', link: '/ja/', ...ja },
+    uk: { label: 'Українська', lang: 'uk', link: '/uk/', ...uk },
+    pt: { label: 'Português', lang: 'pt-BR', link: '/pt/', ...pt },
   }
-}
+})

.vitepress/locales/en.js

@@ -1,9 +1,7 @@
 export default {
-  vitepressConfig: {
-    title: 'Vue 3 Migration Guide',
-    description: 'Guide on migrating from Vue 2 to Vue 3',
-    lang: 'en-US'
-  },
+  title: 'Vue 3 Migration Guide',
+  description: 'Guide on migrating from Vue 2 to Vue 3',
+  lang: 'en-US',
   themeConfig: {
     nav: [
       { text: 'Vue 3 Docs', link: 'https://vuejs.org' },

.vitepress/locales/index.js

@@ -1,22 +1,5 @@
-import en from './en'
-import zh from './zh'
-import ja from './ja'
-import uk from './uk'
-import pt from './pt'
-
-export default {
-  vitepressConfig: {
-    '/': en.vitepressConfig,
-    '/zh/': zh.vitepressConfig,
-    '/ja/': ja.vitepressConfig,
-    '/uk/': uk.vitepressConfig,
-    '/pt/': pt.vitepressConfig,
-  },
-  themeConfig: {
-    '/': en.themeConfig,
-    '/zh/': zh.themeConfig,
-    '/ja/': ja.themeConfig,
-    '/uk/': uk.themeConfig,
-    '/pt/': pt.themeConfig,
-  }
-}
+export { default as en } from './en'
+export { default as zh } from './zh'
+export { default as ja } from './ja'
+export { default as uk } from './uk'
+export { default as pt } from './pt'

.vitepress/locales/ja.js

@@ -1,9 +1,7 @@
 export default {
-  vitepressConfig: {
-    title: 'Vue 3 移行ガイド',
-    description: 'Vue 2 から Vue 3 への移行に関するガイド',
-    lang: 'ja-JP',
-  },
+  title: 'Vue 3 移行ガイド',
+  description: 'Vue 2 から Vue 3 への移行に関するガイド',
+  lang: 'ja-JP',
   themeConfig: {
     docFooter: {
       prev: '前のページ',

.vitepress/locales/pt.js

@@ -1,9 +1,7 @@
 export default {
-  vitepressConfig: {
-    title: 'Guia de Migração da Vue 3',
-    description: 'Guia sobre a migração da Vue 2 à Vue 3',
-    lang: 'pt-PT'
-  },
+  title: 'Guia de Migração da Vue 3',
+  description: 'Guia sobre a migração da Vue 2 à Vue 3',
+  lang: 'pt-PT',
   themeConfig: {
     nav: [
       { text: 'Documentação da Vue 3', link: 'https://pt.vuejs.org' },

.vitepress/locales/uk.js

@@ -1,9 +1,7 @@
 export default {
-  vitepressConfig: {
-    title: 'Міграція з Vue 3',
-    description: 'Гід з міграції з Vue 2 на Vue 3',
-    lang: 'ua-UK'
-  },
+  title: 'Міграція з Vue 3',
+  description: 'Гід з міграції з Vue 2 на Vue 3',
+  lang: 'ua-UK',
   themeConfig: {
     docFooter: {
       prev: 'Попередня сторінка',

.vitepress/locales/zh.js

@@ -1,10 +1,8 @@
 
 export default {
-  vitepressConfig: {
-    title: 'Vue 3 迁移指南',
-    description: '从 Vue 2 迁移到 Vue 3 的指南',
-    lang: 'zh-CN',
-  },
+  title: 'Vue 3 迁移指南',
+  description: '从 Vue 2 迁移到 Vue 3 的指南',
+  lang: 'zh-CN',
   themeConfig: {
     docFooter: {
       prev: '上一页',

.vitepress/theme/index.js

@@ -1,8 +1,20 @@
+import { h } from 'vue'
 import Theme from 'vitepress/theme'
+import TranslationStatus from 'vitepress-translation-helper/ui/TranslationStatus.vue'
 import MigrationBadges from './MigrationBadges.vue'
+import status from '../translation-status.json'
+
+const i18nLabels = {
+  zh: '该翻译已同步到了 ${date} 的版本，其对应的 commit hash 是 <code>${hash}</code>。',
+}
 
 export default {
   ...Theme,
+  Layout() {
+    return h(Theme.Layout, null, {
+      'doc-before': () => h(TranslationStatus, { status, i18nLabels }),
+    })
+  },
   enhanceApp({ app }) {
     app.component('MigrationBadges', MigrationBadges)
   }

.vitepress/translation-status.json

@@ -0,0 +1,18 @@
+{
+  "zh": {
+    "hash": "96242eb",
+    "date": "2023-03-14"
+  },
+  "ja": {
+    "hash": "d283ef0",
+    "date": "2023-04-18"
+  },
+  "pt": {
+    "hash": "e0f492e",
+    "date": "2023-10-25"
+  },
+  "uk": {
+    "hash": "794629c",
+    "date": "2023-05-01"
+  }
+}

README.md

@@ -3,3 +3,24 @@
 This is split from the legacy v3 documentation into a standalone repo.
 
 Deployed at [v3-migration.vuejs.org](https://v3-migration.vuejs.org)
+
+## Translation guide
+
+All the documentation files can be found in `src`. It contains the English markdown files while translation(s) are stored in their corresponding `<lang>` sub-folder(s):
+
+- [`zh`](https://github.com/vuejs/v3-migration-guide/tree/main/packages/docs/zh): Chinese translation.
+- [`ja`](https://github.com/vuejs/v3-migration-guide/tree/main/packages/docs/ja): Japanese translation.
+- [`pt`](https://github.com/vuejs/v3-migration-guide/tree/main/packages/docs/pt): Portuguese translation.
+- [`uk`](https://github.com/vuejs/v3-migration-guide/tree/main/packages/docs/uk): Ukrainian translation.
+
+Besides that, the `.vitepress` sub-folder contains the config and theme, including the i18n information.
+
+- `pnpm dev`: Start the docs dev server.
+- `pnpm build`: Build the docs.
+- `pnpm serve`: Serve the built docs.
+
+To add or maintain the translations, we follow the [Vue Ecosystem Translation Guidelines](https://github.com/vuejs-translations/guidelines/blob/main/README_ECOSYSTEM.md).
+
+- `pnpm translation:status [<lang>]`: Show the translation status for your language. If you don't specify a language, it will show the status for all languages.
+- `pnpm translation:compare <lang>`: Compare the docs with the latest checkpoint for your language.
+- `pnpm translation:update <lang> [<commit>]`: Update the checkpoint for your language. The checkpoint will be set by the latest commit hash. However, you can also specify a commit hash manually.

package.json

@@ -6,13 +6,17 @@
   "scripts": {
     "dev": "vitepress",
     "build": "vitepress build",
-    "serve": "vitepress serve"
+    "serve": "vitepress serve",
+    "translation:compare": "v-translation compare --path={src/index.md,src/migration-build.md,src/recommendations.md,src/new,src/breaking-changes}",
+    "translation:update": "v-translation update",
+    "translation:status": "v-translation status"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "vitepress": "^1.0.0-alpha.8"
+    "vitepress": "^1.0.0",
+    "vitepress-translation-helper": "^0.2.1"
   },
   "pnpm": {
     "peerDependencyRules": {