add translation status on page top

packages/docs/.vitepress/theme/components/TranslationStatus.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <div v-if="label" class="translation_status">
+      {{ label }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import status from '../../translation-status.json'
+
+const i18nLabels: {
+  [lang: string]: string
+} = {
+  // An example of the English label:
+  // 'root': 'The translation is synced to the docs on ${date} of which the commit hash is ${hash}.',
+  'zh': '该翻译已同步到了 ${date} 的版本，其对应的 commit hash 是 ${hash}。',
+}
+
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+const { site } = useData()
+const label = computed(() => {
+  const localeIndex = site.value.localeIndex
+  const { date, hash } = status[localeIndex] || { date: '', hash: '' }
+  return (i18nLabels[localeIndex] || '')
+    .replace('${date}', date)
+    .replace('${hash}', hash)
+  }
+)
+</script>
+
+<style scoped>
+.translation_status {
+  padding: 1em 1.25em;
+  font-size: small;
+  text-align: right;
+  color: var(--vp-c-text-2);
+}
+</style>

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

@@ -1,20 +1,23 @@
+import { h } from 'vue'
 import { Theme, useData } 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 './styles/vars.css'
 import './styles/sponsors.css'
 import VueSchoolLink from './components/VueSchoolLink.vue'
 import VueMasteryLogoLink from './components/VueMasteryLogoLink.vue'
 
 const theme: Theme = {
   ...DefaultTheme,
-  // Layout() {
-  //   return h(DefaultTheme.Layout, null, {
-  //     'home-features-after': () => h(HomeSponsors),
-  //     'aside-ads-before': () => h(AsideSponsors),
-  //   })
-  // },
+  Layout() {
+    return h(DefaultTheme.Layout, null, {
+      // 'home-features-after': () => h(HomeSponsors),
+      // 'aside-ads-before': () => h(AsideSponsors),
+      'doc-before': () => h(TranslationStatus),
+    })
+  },
 
   enhanceApp({ app }) {
     app.component('VueSchoolLink', VueSchoolLink)

packages/docs/.vitepress/translation-status.json

@@ -0,0 +1,6 @@
+{
+  "zh": {
+    "hash": "1a3a28f",
+    "date": "2023-04-03"
+  }
+}

packages/docs/generate-translation-status.js

@@ -0,0 +1,35 @@
+const fs = require('fs')
+const simpleGit = require('simple-git')
+
+// Customize the checkpoint for your translation
+const locales = {
+  zh: 'docs-sync-zh'
+}
+
+const getInfo = async (checkpoint) => {
+  return new Promise((resolve, reject) => {
+    const git = simpleGit()
+    git.log(['-n', '1', '--pretty=format:"%H %cd"', '--date=short',  'origin/' + checkpoint || 'main'], (err, log) => {
+      if (err) {
+        reject(err)
+        return
+      }
+      const [hash, date] = log.latest.hash.replace(/"/g, '').split(' ')
+      resolve({
+        hash: hash.slice(0, 7),
+        date
+      })
+    })
+  })
+}
+
+const main = async () => {
+  const result = {}
+  for (const lang in locales) {
+    const checkpoint = locales[lang]
+    result[lang] = await getInfo(checkpoint)
+  }
+  fs.writeFileSync('./.vitepress/translation-status.json', JSON.stringify(result, null, 2))
+}
+
+main()

packages/docs/package.json

@@ -5,9 +5,12 @@
   "scripts": {
     "docs": "vitepress dev .",
     "docs:api": "node run-typedoc.js",
-    "docs:build": "vitepress build ."
+    "docs:translation-status": "node generate-translation-status.js",
+    "docs:build": "vitepress build .",
+    "docs:preview": "vitepress preview ."
   },
   "dependencies": {
+    "simple-git": "^3.18.0",
     "vitepress": "1.0.0-alpha.48",
     "vue-router": "workspace:*"
   }