Extending theme to group langauges

docs/.vuepress/config.js

@@ -7,6 +7,7 @@ module.exports = {
         },
         '/ng/': {
             lang: 'ng',
+            group: '🇳🇦 Namibia',
             title: 'Exonumia',
             description: 'Ke yona landing page for native African language speaker looking to learn about Bitcoin.'
         }
@@ -20,7 +21,7 @@ module.exports = {
         locales: {
             '/': {
                 selectText: '🇬🇧 Languages',
-                label: '🇬🇧 English',
+                label: 'English',
                 ariaLabel: 'Languages',
                 editLinkText: 'Improve Content',
                 nav: [
@@ -55,7 +56,7 @@ module.exports = {
             },
             '/ng/': {
                 selectText: '🇳🇦 Languages',
-                label: '🇳🇦 Oshiwambo',
+                label: 'Oshiwambo',
                 ariaLabel: 'Languages',
                 editLinks: true,
                 editLinkText: "Improve Translation!",

docs/.vuepress/theme/components/NavLinks.vue

@@ -0,0 +1,177 @@
+<template>
+  <nav
+    v-if="userLinks.length || repoLink"
+    class="nav-links"
+  >
+    <!-- user links -->
+    <div
+      v-for="item in userLinks"
+      :key="item.link"
+      class="nav-item"
+    >
+      <DropdownLink
+        v-if="item.type === 'links'"
+        :item="item"
+      />
+      <NavLink
+        v-else
+        :item="item"
+      />
+    </div>
+
+    <!-- repo link -->
+    <a
+      v-if="repoLink"
+      :href="repoLink"
+      class="repo-link"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {{ repoLabel }}
+      <OutboundLink />
+    </a>
+  </nav>
+</template>
+
+<script>
+import DropdownLink from '@parent-theme/components/DropdownLink.vue'
+import { resolveNavLinkItem } from '@parent-theme/util'
+import NavLink from '@parent-theme/components/NavLink.vue'
+
+export default {
+  name: 'NavLinks',
+
+  components: {
+    NavLink,
+    DropdownLink
+  },
+
+  computed: {
+    userNav () {
+      return this.$themeLocaleConfig.nav || this.$site.themeConfig.nav || []
+    },
+
+    nav () {
+      const { locales } = this.$site
+      if (locales && Object.keys(locales).length > 1) {
+        const currentLink = this.$page.path
+        const routes = this.$router.options.routes
+        const themeLocales = this.$site.themeConfig.locales || {}
+
+        const langauges = Object.keys(locales).map(path => {
+            const locale = locales[path]
+            const text = themeLocales[path] && themeLocales[path].label || locale.lang
+            let link
+            // Stay on the current page
+            if (locale.lang === this.$lang) {
+              link = currentLink
+            } else {
+              // Try to stay on the same page
+              link = currentLink.replace(this.$localeConfig.path, path)
+              // fallback to homepage
+              if (!routes.some(route => route.path === link)) {
+                link = path
+              }
+            }
+            const group = locale.group
+
+            return { text, link, group }
+          })
+        let groupedLangauges = {}
+        let ungroupedLangauges = []
+
+        langauges.forEach(langauge => {
+          if (langauge.group) {            
+            if (groupedLangauges[langauge.group] == null) {
+              groupedLangauges[langauge.group] = {
+                text: langauge.group,
+                items: []
+              }
+            }
+            groupedLangauges[langauge.group].items.push(langauge)
+          } else {
+            ungroupedLangauges.push(langauge)
+          }
+        })
+
+        const languageDropdown = {
+          text: this.$themeLocaleConfig.selectText || 'Languages',
+          ariaLabel: this.$themeLocaleConfig.ariaLabel || 'Select language',
+          items: Object.values(groupedLangauges).concat(ungroupedLangauges)
+        }
+        return [...this.userNav, languageDropdown]
+      }
+      return this.userNav
+    },
+
+    userLinks () {
+      return (this.nav || []).map(link => {
+        return Object.assign(resolveNavLinkItem(link), {
+          items: (link.items || []).map(resolveNavLinkItem)
+        })
+      })
+    },
+
+    repoLink () {
+      const { repo } = this.$site.themeConfig
+      if (repo) {
+        return /^https?:/.test(repo)
+          ? repo
+          : `https://github.com/${repo}`
+      }
+      return null
+    },
+
+    repoLabel () {
+      if (!this.repoLink) return
+      if (this.$site.themeConfig.repoLabel) {
+        return this.$site.themeConfig.repoLabel
+      }
+
+      const repoHost = this.repoLink.match(/^https?:\/\/[^/]+/)[0]
+      const platforms = ['GitHub', 'GitLab', 'Bitbucket']
+      for (let i = 0; i < platforms.length; i++) {
+        const platform = platforms[i]
+        if (new RegExp(platform, 'i').test(repoHost)) {
+          return platform
+        }
+      }
+
+      return 'Source'
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.nav-links
+  display inline-block
+  a
+    line-height 1.4rem
+    color inherit
+    &:hover, &.router-link-active
+      color $accentColor
+  .nav-item
+    position relative
+    display inline-block
+    margin-left 1.5rem
+    line-height 2rem
+    &:first-child
+      margin-left 0
+  .repo-link
+    margin-left 1.5rem
+
+@media (max-width: $MQMobile)
+  .nav-links
+    .nav-item, .repo-link
+      margin-left 0
+
+@media (min-width: $MQMobile)
+  .nav-links a
+    &:hover, &.router-link-active
+      color $textColor
+  .nav-item > a:not(.external)
+    &:hover, &.router-link-active
+      margin-bottom -2px
+      border-bottom 2px solid lighten($accentColor, 8%)
+</style>

docs/.vuepress/theme/index.js

@@ -0,0 +1,6 @@
+const path = require('path')
+
+// Theme API.
+module.exports = {
+  extend: '@vuepress/theme-default'
+}

docs/.vuepress/theme/noopModule.js

@@ -0,0 +1 @@
+export default {}