feat: add git repo link

src/client/theme-default/components/NavBar.ts

@@ -1,13 +1,15 @@
 import { computed } from 'vue'
 import { withBase } from '../utils'
-import { useSiteDataByRoute } from 'vitepress'
+import { useSiteData, useSiteDataByRoute } from 'vitepress'
 import NavBarLink from './NavBarLink.vue'
 import NavDropdownLink from './NavDropdownLink.vue'
+import NavRepoLink from './NavRepoLink.vue'
 
 export default {
   components: {
     NavBarLink,
-    NavDropdownLink
+    NavDropdownLink,
+    NavRepoLink
   },
 
   setup() {
@@ -18,7 +20,8 @@ export default {
           ? // navbar items do not change in production
             useSiteDataByRoute().value.themeConfig.nav
           : // use computed in dev for hot reload
-            computed(() => useSiteDataByRoute().value.themeConfig.nav)
+            computed(() => useSiteDataByRoute().value.themeConfig.nav),
+      editLinkConfig: computed(() => useSiteData().value.themeConfig.editLink)
     }
   }
 }

src/client/theme-default/components/NavBar.vue

@@ -12,10 +12,11 @@
     />
     <span>{{ $site.title }}</span>
   </a>
-  <nav class="nav-links" v-if="navData">
+  <nav class="nav-links" v-if="navData || editLinkConfig">
     <template v-for="item of navData">
       <NavDropdownLink v-if='item.items' :item="item"/>
       <NavBarLink v-else :item="item"/>
+      <NavRepoLink :edit-link-config="editLinkConfig" />
     </template>
   </nav>
 </template>

src/client/theme-default/components/NavRepoLink.ts

@@ -0,0 +1,47 @@
+import { computed, defineComponent, PropType } from 'vue'
+import OutboundLink from './icons/OutboundLink.vue'
+import { DefaultTheme } from '/@theme/config'
+
+export default defineComponent({
+  components: {
+    OutboundLink
+  },
+
+  props: {
+    editLinkConfig: {
+      type: Object as PropType<DefaultTheme.EditLinkConfig>,
+      required: true
+    }
+  },
+
+  setup(props) {
+    const editLinkConfig = props.editLinkConfig
+    const repoLink = computed(() => {
+      if (editLinkConfig && editLinkConfig.repo) {
+        return /^https?:/.test(editLinkConfig.repo)
+          ? editLinkConfig.repo
+          : `https://github.com/${editLinkConfig.repo}`
+      }
+      return null
+    })
+    const repoLabel = computed(() => {
+      if (!repoLink.value) return
+      const repoHosts = repoLink.value.match(/^https?:\/\/[^/]+/)
+      if (!repoHosts) return
+      const repoHost = repoHosts[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'
+    })
+    return {
+      repoLink,
+      repoLabel
+    }
+  }
+})

src/client/theme-default/components/NavRepoLink.vue

@@ -0,0 +1,22 @@
+<template>
+  <a
+    v-if="repoLink"
+    :href="repoLink"
+    class="repo-link"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    {{ repoLabel }}
+    <OutboundLink />
+  </a>
+</template>
+
+<script src="./NavRepoLink"></script>
+
+<style>
+.repo-link {
+  margin-left: 1.5rem;
+  color: var(--text-color);
+  font-weight: 600;
+}
+</style>