docs: setup the translation helper (#2373)

README.md

@@ -24,3 +24,20 @@ See the [docs](https://test-utils.vuejs.org/).
 ## Development
 
 Get started by running `pnpm install`. You can run the tests with `pnpm test`. That's it!
+
+## Contributing Docs
+
+All the documentation files can be found in `packages/docs`. It contains the English markdown files while translation(s) are stored in their corresponding `<lang>` sub-folder(s):
+
+- [`fr`](https://github.com/vuejs/test-utils/tree/main/packages/docs/fr): French translation.
+
+Besides that, the `.vitepress` sub-folder contains the config and theme, including the i18n information.
+
+- `pnpm docs:dev`: Start the docs dev server.
+- `pnpm docs:build`: Build the 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 docs: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 docs:translation:compare <lang>`: Compare the docs with the latest checkpoint for your language.
+- `pnpm docs: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.

docs/.vitepress/theme/index.mts

@@ -0,0 +1,19 @@
+import { h } from 'vue'
+import Theme from 'vitepress/theme'
+import TranslationStatus from 'vitepress-translation-helper/ui/TranslationStatus.vue'
+import status from '../translation-status.json'
+
+const i18nLabels = {
+  // TODO: to be translated
+  fr: 'The translation is synced to the docs on ${date} of which the commit hash is <code>${hash}</code>.',
+}
+
+
+export default {
+  ...Theme,
+  Layout() {
+    return h(Theme.Layout, null, {
+      'doc-before': () => h(TranslationStatus, { status, i18nLabels }),
+    })
+  },
+}

docs/.vitepress/translation-status.json

@@ -0,0 +1,6 @@
+{
+  "fr": {
+    "hash": "1d8e1ee",
+    "date": "2024-02-14"
+  }
+}

package.json

@@ -58,6 +58,7 @@
     "unplugin-vue-components": "0.26.0",
     "vite": "5.2.0",
     "vitepress": "1.0.0-rc.45",
+    "vitepress-translation-helper": "^0.1.3",
     "vitest": "1.4.0",
     "vue": "3.4.21",
     "vue-class-component": "8.0.0-rc.1",
@@ -81,6 +82,9 @@
     "lint:fix": "pnpm run lint --fix",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
+    "docs:translation:compare": "v-translation compare --status-file=docs/.vitepress/translation-status.json",
+    "docs:translation:update": "v-translation update --status-file=docs/.vitepress/translation-status.json",
+    "docs:translation:status": "v-translation status --status-file=docs/.vitepress/translation-status.json",
     "vue-tsc": "vue-tsc --noEmit -p tsconfig.volar.json",
     "prepublishOnly": "pnpm run build"
   },