refactor(editLinks): match structure with vuepress

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

@@ -2,24 +2,59 @@ import { computed } from 'vue'
 import { useSiteData, useSiteDataByRoute } from 'vitepress'
 import NavBarLink from './NavBarLink.vue'
 import NavDropdownLink from './NavDropdownLink.vue'
-import NavRepoLink from './NavRepoLink.vue'
+import { DefaultTheme } from '../config'
+
+const platforms = ['GitHub', 'GitLab', 'Bitbucket'].map(
+  (platform) => [platform, new RegExp(platform, 'i')] as const
+)
 
 export default {
   components: {
     NavBarLink,
-    NavDropdownLink,
+    NavDropdownLink
-    NavRepoLink
   },
 
   setup() {
+    const siteDataByRoute = useSiteDataByRoute()
+    const siteData = useSiteData()
+    const repoInfo = computed(() => {
+      const theme = siteData.value.themeConfig as DefaultTheme.Config
+      // return theme.editLinks
+      //   ? {
+      //       repo: theme.docsRepo || theme.repo,
+      //       label: theme.repoLabel
+      //     }
+      //   : null
+
+      const repo = theme.docsRepo || theme.repo
+      let text: string | undefined = theme.repoLabel
+
+      if (repo) {
+        const link = /^https?:/.test(repo) ? repo : `https://github.com/${repo}`
+        if (!text) {
+          // if no label is provided, deduce it from the repo url
+          const repoHosts = link.match(/^https?:\/\/[^/]+/)
+          if (repoHosts) {
+            const repoHost = repoHosts[0]
+            const foundPlatform = platforms.find(([_platform, re]) =>
+              re.test(repoHost)
+            )
+            text = foundPlatform && foundPlatform[0]
+          }
+        }
+
+        return { link, text: text || 'Source' }
+      }
+      return null
+    })
     return {
       navData:
         process.env.NODE_ENV === 'production'
           ? // navbar items do not change in production
-            useSiteDataByRoute().value.themeConfig.nav
+            siteDataByRoute.value.themeConfig.nav
           : // use computed in dev for hot reload
-            computed(() => useSiteDataByRoute().value.themeConfig.nav),
+            computed(() => siteDataByRoute.value.themeConfig.nav),
-      editLinkConfig: computed(() => useSiteData().value.themeConfig.editLink)
+      repoInfo
     }
   }
 }

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

@@ -5,7 +5,7 @@
         <NavDropdownLink v-if="item.items" :item="item" />
         <NavBarLink v-else :item="item" />
       </template>
-      <NavRepoLink v-if="editLinkConfig" :edit-link-config="editLinkConfig" />
+      <NavBarLink v-if="repoInfo" :item="repoInfo" />
     </template>
   </nav>
 </template>

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

@@ -1,47 +0,0 @@
-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

@@ -1,22 +0,0 @@
-<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>

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

@@ -1,7 +1,8 @@
-import { defineComponent, computed } from 'vue'
+import { computed } from 'vue'
 import OutboundLink from './icons/OutboundLink.vue'
 import { endingSlashRE, isExternal } from '/@theme/utils'
-import { usePageData, useSiteData, useSiteDataByRoute } from 'vitepress'
+import { usePageData, useSiteData } from 'vitepress'
+import { DefaultTheme } from '../config'
 
 function createEditLink(
   repo: string,
@@ -35,47 +36,46 @@ function createEditLink(
   )
 }
 
-export default defineComponent({
+export default {
   components: {
     OutboundLink
   },
 
   setup() {
     const pageData = usePageData()
-    const siteData = useSiteData()
+    const siteData = useSiteData<DefaultTheme.Config>()
-    const siteDataByRoute = useSiteDataByRoute()
-
-    const {
-      repo,
-      text,
-      dir = '',
-      branch = 'master',
-      docsRepo = repo
-    } = siteData.value.themeConfig.editLink
-    const { relativePath } = pageData.value
 
     const editLink = computed(() => {
-      const showEditLink =
+      const showEditLink: boolean | undefined =
         pageData.value.frontmatter.editLink == null
-          ? siteData.value.themeConfig.editLink
+          ? siteData.value.themeConfig.editLinks
           : pageData.value.frontmatter.editLink
+      const {
+        repo,
+        docsDir = '',
+        docsBranch = 'master',
+        docsRepo = repo
+      } = siteData.value.themeConfig
 
-      if (showEditLink && relativePath) {
+      const { relativePath } = pageData.value
-        return createEditLink(repo, docsRepo, dir, branch, relativePath)
+      if (showEditLink && relativePath && repo) {
+        return createEditLink(
+          repo,
+          docsRepo || repo,
+          docsDir,
+          docsBranch,
+          relativePath
+        )
       }
       return null
     })
-    const editLinkText = computed(() => {
+    const editLinkText = computed(
-      return (
+      () => siteData.value.themeConfig.editLinkText || 'Edit this page'
-        siteDataByRoute.value.themeConfig.editLink.text ||
+    )
-        text ||
-        `Edit this page`
-      )
-    })
 
     return {
       editLink,
       editLinkText
     }
   }
-})
+}

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

@@ -1,15 +1,10 @@
 <template>
   <footer class="page-edit">
-    <div
+    <div v-if="editLink" class="edit-link">
-      v-if="editLink"
+      <a :href="editLink" target="_blank" rel="noopener noreferrer">
-      class="edit-link"
+        {{ editLinkText }}
-    >
+        <OutboundLink />
-      <a
+      </a>
-        :href="editLink"
-        target="_blank"
-        rel="noopener noreferrer"
-      >{{ editLinkText }}</a>
-      <OutboundLink />
     </div>
   </footer>
 </template>
@@ -27,6 +22,6 @@
 }
 .page-edit .edit-link a {
   color: #4e6e8e;
-  margin-right: 0.25rem
+  margin-right: 0.25rem;
 }
 </style>

src/client/theme-default/config.ts

@@ -4,7 +4,48 @@ export namespace DefaultTheme {
     nav?: NavItem[] | false
     sidebar?: SideBarConfig | MultiSideBarConfig
     search?: SearchConfig | false
-    editLink?: EditLinkConfig | false
+
+    /**
+     * GitHub repository following the format <user>/<project>.
+     *
+     * @example vuejs/vue-next
+     */
+    repo?: string
+    /**
+     * Customize the header label. Defaults to GitHub/Gitlab/Bitbucket depending
+     * on the provided repo
+     *
+     * @exampe `"Contribute!"`
+     */
+    repoLabel?: string
+
+    /**
+     * If your docs are in a different repository from your main project
+     *
+     * @example `"vuejs/docs-next"`
+     */
+    docsRepo?: string
+    /**
+     * If your docs are not at the root of the repo.
+     *
+     * @example `"docs"`
+     */
+    docsDir?: string
+    /**
+     * If your docs are in a different branch. Defaults to `master`
+     * @example `"next"`
+     */
+    docsBranch?: string
+
+    /**
+     * Enable links to edit pages at the bottom of the page
+     */
+    editLinks?: boolean
+    /**
+     * Custom text for edit link. Defaults to "Edit this page"
+     */
+    editLinkText?: string
+
     lastUpdated?: string | boolean
     prevLink?: boolean
     nextLink?: boolean
@@ -70,14 +111,4 @@ export namespace DefaultTheme {
       indexName: string
     }
   }
-
-  // edit link -----------------------------------------------------------------
-
-  export interface EditLinkConfig {
-    repo: string
-    docsRepo?: string
-    dir?: string
-    branch?: string
-    text?: string
-  }
 }