docs: link directly to equivalent pages in translations (#1105)

Author: skirtles-code

src/.vuepress/config.js

@@ -423,23 +423,28 @@ module.exports = {
           // Translation maintainers: Please include the link below to the English documentation
           // {
           //   text: 'English',
-          //   link: 'https://v3.vuejs.org/'
+          //   link: 'https://v3.vuejs.org/',
+          //   isTranslation: true
           // },
           {
             text: '中文',
-            link: 'https://v3.cn.vuejs.org/'
+            link: 'https://v3.cn.vuejs.org/',
+            isTranslation: true
           },
           {
             text: '한국어',
-            link: 'https://v3.ko.vuejs.org/'
+            link: 'https://v3.ko.vuejs.org/',
+            isTranslation: true
           },
           {
             text: '日本語',
-            link: 'https://v3.ja.vuejs.org/'
+            link: 'https://v3.ja.vuejs.org/',
+            isTranslation: true
           },
           {
             text: 'Русский',
-            link: 'https://v3.ru.vuejs.org/'
+            link: 'https://v3.ru.vuejs.org/ru/',
+            isTranslation: true
           },
           {
             text: 'More Translations',

src/.vuepress/theme/components/NavLink.vue

@@ -22,8 +22,26 @@
 </template>
 
 <script>
+import Vue from 'vue'
 import { isExternal, isMailto, isTel, ensureExt } from '../util'
 
+const pageLocation = Vue.observable({ path: '/' })
+
+let initPath = () => {
+  initPath = () => {}
+
+  const updatePath = () => {
+    pageLocation.path = location.pathname
+  }
+
+  updatePath()
+
+  // There is no event for detecting navigation but these cover most cases
+  for (const event of ['focusin', 'scroll', 'mouseover', 'keydown']) {
+    window.addEventListener(event, updatePath)
+  }
+}
+
 export default {
   name: 'NavLink',
 
@@ -35,7 +53,13 @@ export default {
 
   computed: {
     link () {
-      return ensureExt(this.item.link)
+      let link = ensureExt(this.item.link)
+
+      if (this.item.isTranslation) {
+        link = link.replace(/\/$/, '') + pageLocation.path
+      }
+
+      return link
     },
 
     exact () {
@@ -68,7 +92,7 @@ export default {
     },
 
     rel () {
-      if (this.isNonHttpURI) {
+      if (this.isNonHttpURI || this.item.isTranslation) {
         return null
       }
       if (this.item.rel) {
@@ -82,6 +106,10 @@ export default {
     focusoutAction () {
       this.$emit('focusout')
     }
+  },
+
+  mounted () {
+    initPath()
   }
 }
 </script>

src/.vuepress/theme/layouts/404.vue

@@ -3,7 +3,13 @@
     <div class="theme-default-content">
       <h1>404</h1>
 
-      <blockquote>{{ getMsg() }}</blockquote>
+      <blockquote>
+        <p>Whoops! This page doesn't exist.</p>
+      </blockquote>
+
+      <p v-show="isTranslation">
+        New pages are added to the documentation all the time. This page might not be included in all of the translations yet.
+      </p>
 
       <RouterLink to="/">
         Take me home.
@@ -13,17 +19,22 @@
 </template>
 
 <script>
-const msgs = [
-  `There's nothing here.`,
-  `How did we get here?`,
-  `That's a Four-Oh-Four.`,
-  `Looks like we've got some broken links.`
-]
+import { repos } from '../../components/guide/contributing/translations-data.js'
 
 export default {
-  methods: {
-    getMsg () {
-      return msgs[Math.floor(Math.random() * msgs.length)]
+  data () {
+    return {
+      isTranslation: false
+    }
+  },
+
+  mounted () {
+    const toOrigin = url => (String(url).match(/https?:\/\/[^/]+/) || [])[0]
+    const referrer = toOrigin(document.referrer)
+
+    // Did we get here from a translation?
+    if (referrer && referrer !== location.origin && repos.some(({ url }) => toOrigin(url) === referrer)) {
+      this.isTranslation = true
     }
   }
 }