refactor: replace translation scripts and ui with vitepress-translati…

…on-helper (#2109)

* refactor: replace translation scripts and ui with vitepress-translation-helper

* chore: remove old translation scripts

* chore: bump vitepress-translation-helper

* chore: bump vitepress-translation-helper

* Update index.ts

---------

Co-authored-by: Eduardo San Martin Morote <[email protected]>

.github/contributing.md

@@ -126,7 +126,7 @@ If you want to start translating the docs in a _new_ language:
 1. Create the corresponding `<lang>` sub-folder for your translation.
 2. Modify the i18n configuration in the `.vitepress` sub-folder.
 3. Translate the docs and run the doc site to self-test locally.
-4. Create a checkpoint for your language by running `pnpm run docs:translation-status <lang> [<commit>]`. A checkpoint is the hash and date of the latest commit when you do the translation. The checkpoint information is stored in the status file `packages/docs/.vitepress/translation-status.json`. _It's crucial for long-term maintenance since all the further translation sync-ups are based on their previous checkpoints._ Usually, you can skip the commit argument because the default value is `main`.
+4. Create a checkpoint for your language by running `pnpm run docs:translation:update <lang> [<commit>]`. A checkpoint is the hash and date of the latest commit when you do the translation. The checkpoint information is stored in the status file `packages/docs/.vitepress/translation-status.json`. _It's crucial for long-term maintenance since all the further translation sync-ups are based on their previous checkpoints._ Usually, you can skip the commit argument because the default value is `main`.
 5. Commit all the changes and create a pull request to our GitHub repo.
 
 We will have a paragraph at the top of each translation page that shows the translation status. That way, users can quickly determine if the translation is up-to-date or lags behind the English version.
@@ -135,9 +135,9 @@ Speaking of the up-to-date translation, we also need good long-term maintenance
 
 1. See what translation you need to sync up with the original docs. There are two popular ways:
    1. Via the [GitHub Compare](https://github.com/vuejs/router/compare/) page, only see the changes in `packages/docs/*` from the checkpoint hash to `main` branch. You can find the checkpoint hash for your language via the translation status file `packages/docs/.vitepress/translation-status.json`. The compare page can be directly opened with the hash as part of the URL, e.g. https://github.com/vuejs/router/compare/e008551...main
-   2. Via a local command: `pnpm run docs:compare-to-translate <lang> [<commit>]`.
+   2. Via a local command: `pnpm run docs:translation:compare <lang> [<commit>]`.
 2. Create your own branch and start the translation update, following the previous comparison.
-3. Create a checkpoint for your language by running `pnpm run docs:translation-status <lang> [<commit>]`.
+3. Create a checkpoint for your language by running `pnpm run docs:translation:update <lang> [<commit>]`.
 4. Commit all the changes and create a pull request to our GitHub repo.
 
 <!-- TODO: add an example once we have got one -->
@@ -149,18 +149,18 @@ You can also host the translation on your own. To create one, fork our GitHub re
 - Ensure you maintain the _checkpoint_ properly. Also, ensure the _translation status_ is well-displayed on the top of each translation page.
 - Utilize the diff result between the latest official repository and your own checkpoint to guide your translation.
 
-Tip: you can add the official repo as a remote to your forked repo. This way, you can still run `pnpm run docs:translation-status <lang> [<commit>]` and `npm run docs:compare-to-translate <lang> [<commit>]` to get the checkpoint and diff result:
+Tip: you can add the official repo as a remote to your forked repo. This way, you can still run `pnpm run docs:translation:update <lang> [<commit>]` and `npm run docs:translation:compare <lang> [<commit>]` to get the checkpoint and diff result:
 
 ```bash
 # prepare the upstream remote
 git remote add upstream [email protected]:vuejs/router.git
 git fetch upstream main
 
 # set the checkpoint
-pnpm run docs:translation-status <lang> upstream/main
+pnpm run docs:translation:update <lang> upstream/main
 
 # get the diff result
-pnpm run docs:compare-to-translate <lang> upstream/main
+pnpm run docs:translation:compare <lang> upstream/main
 ```
 
 <!-- TODO: add an example once we have got one -->

package.json

@@ -15,8 +15,9 @@
     "build:dts": "pnpm run -r build:dts",
     "docs": "pnpm run --filter ./packages/docs -r docs",
     "docs:api": "pnpm run --filter ./packages/docs -r docs:api",
-    "docs:compare-to-translate": "pnpm run --filter ./packages/docs -r docs:compare-to-translate",
-    "docs:translation-status": "pnpm run --filter ./packages/docs -r docs:translation-status",
+    "docs:translation:compare": "pnpm run --filter ./packages/docs -r docs:translation:compare",
+    "docs:translation:update": "pnpm run --filter ./packages/docs -r docs:translation:update",
+    "docs:translation:status": "pnpm run --filter ./packages/docs -r docs:translation:status",
     "docs:build": "pnpm run docs:api && pnpm run --filter ./packages/docs -r docs:build",
     "docs:preview": "pnpm run --filter ./packages/docs -r docs:preview",
     "play": "pnpm run -r play",

packages/docs/.vitepress/theme/index.ts

@@ -3,19 +3,24 @@ import { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import AsideSponsors from './components/AsideSponsors.vue'
 // import HomeSponsors from './components/HomeSponsors.vue'
-import TranslationStatus from './components/TranslationStatus.vue'
+import TranslationStatus from 'vitepress-translation-helper/ui/TranslationStatus.vue'
 import './styles/vars.css'
 import './styles/sponsors.css'
 import VueSchoolLink from './components/VueSchoolLink.vue'
 import VueMasteryLogoLink from './components/VueMasteryLogoLink.vue'
+import status from '../translation-status.json'
+
+const i18nLabels = {
+  zh: '该翻译已同步到了 ${date} 的版本，其对应的 commit hash 是 <code>${hash}</code>。',
+}
 
 const theme: Theme = {
   ...DefaultTheme,
   Layout() {
     return h(DefaultTheme.Layout, null, {
       // 'home-features-after': () => h(HomeSponsors),
       'aside-ads-before': () => h(AsideSponsors),
-      'doc-before': () => h(TranslationStatus),
+      'doc-before': () => h(TranslationStatus, { status, i18nLabels }),
     })
   },
 

packages/docs/package.json

@@ -6,14 +6,16 @@
   "scripts": {
     "docs": "vitepress dev .",
     "docs:api": "node run-typedoc.mjs",
-    "docs:compare-to-translate": "node compare-to-translate.mjs",
-    "docs:translation-status": "node generate-translation-status.mjs",
+    "docs:translation:compare": "v-translation compare",
+    "docs:translation:update": "v-translation update",
+    "docs:translation:status": "v-translation status",
     "docs:build": "vitepress build .",
     "docs:preview": "vitepress preview ."
   },
   "dependencies": {
     "simple-git": "^3.18.0",
     "vitepress": "1.0.0-rc.35",
+    "vitepress-translation-helper": "^0.1.3",
     "vue-router": "workspace:*"
   }
 }