feat: add edit links

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

@@ -2,6 +2,7 @@
   <div class="content">
     <Content />
     <NextAndPrevLinks />
+    <PageEdit />
   </div>
 </template>
 
@@ -35,3 +36,9 @@ export default {
   margin-top: 0;
 } */
 </style>
+<script>
+  import PageEdit from './PageEdit.vue'
+  export default {
+    components: { PageEdit }
+  }
+</script>

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

@@ -0,0 +1,81 @@
+import { defineComponent, computed } from 'vue'
+import OutboundLink from './icons/OutboundLink.vue'
+import { endingSlashRE, isExternal } from '/@theme/utils'
+import { usePageData, useSiteData, useSiteDataByRoute } from 'vitepress'
+
+function createEditLink(
+  repo: string,
+  docsRepo: string,
+  docsDir: string,
+  docsBranch: string,
+  path: string
+) {
+  const bitbucket = /bitbucket.org/
+  if (bitbucket.test(repo)) {
+    const base = isExternal(docsRepo) ? docsRepo : repo
+    return (
+      base.replace(endingSlashRE, '') +
+      `/src` +
+      `/${docsBranch}/` +
+      (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '') +
+      path +
+      `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`
+    )
+  }
+
+  const base = isExternal(docsRepo)
+    ? docsRepo
+    : `https://github.com/${docsRepo}`
+  return (
+    base.replace(endingSlashRE, '') +
+    `/edit` +
+    `/${docsBranch}/` +
+    (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '') +
+    path
+  )
+}
+
+export default defineComponent({
+  components: {
+    OutboundLink
+  },
+
+  setup() {
+    const pageData = usePageData()
+    const siteData = useSiteData()
+    const siteDataByRoute = useSiteDataByRoute()
+
+    const {
+      repo,
+      text,
+      dir = '',
+      branch = 'master',
+      docsRepo = repo
+    } = siteData.value.themeConfig.editLink
+    const { relativePath } = pageData.value
+
+    const editLink = computed(() => {
+      const showEditLink =
+        pageData.value.frontmatter.editLink == null
+          ? siteData.value.themeConfig.editLink
+          : pageData.value.frontmatter.editLink
+
+      if (showEditLink && relativePath) {
+        return createEditLink(repo, docsRepo, dir, branch, relativePath)
+      }
+      return null
+    })
+    const editLinkText = computed(() => {
+      return (
+        siteDataByRoute.value.themeConfig.editLink.text ||
+        text ||
+        `Edit this page`
+      )
+    })
+
+    return {
+      editLink,
+      editLinkText
+    }
+  }
+})

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

@@ -0,0 +1,32 @@
+<template>
+  <footer class="page-edit">
+    <div
+      v-if="editLink"
+      class="edit-link"
+    >
+      <a
+        :href="editLink"
+        target="_blank"
+        rel="noopener noreferrer"
+      >{{ editLinkText }}</a>
+      <OutboundLink />
+    </div>
+  </footer>
+</template>
+
+<script src="./PageEdit"></script>
+
+<style>
+.page-edit {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  overflow: auto;
+}
+.page-edit .edit-link {
+  display: inline-block;
+}
+.page-edit .edit-link a {
+  color: #4e6e8e;
+  margin-right: 0.25rem
+}
+</style>

src/client/theme-default/config.ts

@@ -75,6 +75,7 @@ export namespace DefaultTheme {
 
   export interface EditLinkConfig {
     repo: string
+    docsRepo?: string
     dir?: string
     branch?: string
     text?: string

src/client/theme-default/utils.ts

@@ -2,6 +2,7 @@ import { useSiteData, Route } from 'vitepress'
 
 export const hashRE = /#.*$/
 export const extRE = /\.(md|html)$/
+export const endingSlashRE = /\/$/
 export const outboundRE = /^[a-z]+:/i
 
 export function withBase(path: string) {

src/node/markdownToVue.ts

@@ -43,6 +43,7 @@ export function createMarkdownToVueRenderFn(
       title: inferTitle(frontmatter, content),
       frontmatter,
       headers: data.headers,
+      relativePath: file.replace(/\\/g, '/'),
       lastUpdated
     }
 

types/shared.d.ts

@@ -25,6 +25,7 @@ export interface PageData {
   title: string
   frontmatter: Record<string, any>
   headers: Header[]
+  relativePath: string
   lastUpdated: number
   next?: { text: string; link: string }
   prev?: { text: string; link: string }