Add translation status on page top

[Jinjiang]

As a trial of a better translation & reading experience, in Vue Router docs as a sample, I added a label on the top of each page in a separated translation to show the hash and date of the checkpoint, which helps the readers know the translation status better.

@posva @NataliaTepluhina looks good?

[netlify]

✅ Deploy Preview for vue-router ready!

Name	Link
🔨 Latest commit	6487bb2
🔍 Latest deploy log	https://app.netlify.com/sites/vue-router/deploys/646af91f4f70fb0008065fb5
😎 Deploy Preview	https://deploy-preview-1824--vue-router.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[codecov-commenter]

Codecov Report

Merging #1824 (6487bb2) into main (0940797) will not change coverage.
The diff coverage is n/a.

❗ Your organization is not using the GitHub App Integration. As a result you may experience degraded service beginning May 15th. Please install the Github App Integration for your organization. Read more.

@@           Coverage Diff           @@
##             main    #1824   +/-   ##
=======================================
  Coverage   90.77%   90.77%           
=======================================
  Files          24       24           
  Lines        1117     1117           
  Branches      348      348           
=======================================
  Hits         1014     1014           
  Misses         63       63           
  Partials       40       40           

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[wxsms]

Great idea. But will it lead to misunderstand in some case?

For example, some people raise a PR to update only one page. Since this badge looks like the same for all pages, will it still keep out of date before we make a valid sync?

[posva]

Thanks a lot! I refactored a few things. Do you think you include the usage of the script in the contributing docs?

[Jinjiang]

Great idea. But will it lead to misunderstand in some case?

For example, some people raise a PR to update only one page. Since this badge looks like the same for all pages, will it still keep out of date before we make a valid sync?

I think in this case the checkpoint still makes sense because we still need a comprehensive sync from there. For misunderstanding, we can change the diction a little. WDYT?

[Jinjiang]

Thanks a lot! I refactored a few things. Do you think you include the usage of the script in the contributing docs?

I haven't since I thought it was better to discuss it with you first. I'm struggling with the workflow since it requires a maintainer to manually update the translation status after step 5 (updating the checkpoint branch).

So this made me come up with this translation workflow demo. With the new workflow, no checkpoint branches or manual update step is required anymore.

If you feel the workflow in the demo is better, I can update this PR accordingly. 🙏

[Jinjiang]

@posva I resolved the git conflict here and at the same time created another PR #1855 to practice this new workflow as an alternative. I think we can decide to pick one of them to proceed. Feel free to take a further look. 🙏

[Jinjiang]

I closed this PR and combined this into #1855. Let's continue the discussion there if you don't mind. 🙏