feat: allow custom edit links (#698)

close #694
close #697

Co-authored-by: Kia Ishii <kia.king.08@gmail.com>

docs/.vitepress/config.ts

@@ -16,8 +16,7 @@ export default defineConfig({
     },
 
     editLink: {
-      repo: 'vuejs/vitepress',
-      dir: 'docs',
+      pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
       text: 'Edit this page on GitHub'
     },
 

docs/config/theme-configs.md

@@ -188,6 +188,30 @@ export interface Footer {
 }
 ```
 
+## editLink
+
+- Type: `EditLink`
+
+Edit Link lets you display a link to edit the page on Git management services such as GitHub, or GitLab. See [Theme: Edit Link](../guide/theme-edit-link) for more details.
+
+```js
+export default {
+  themeConfig: {
+    editLink: {
+      pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
+      text: 'Edit this page on GitHub'
+    }
+  }
+}
+```
+
+```ts
+export interface EditLink {
+  pattern: string
+  text?: string
+}
+```
+
 ## lastUpdatedText
 
 - Type: `string`

docs/guide/theme-edit-link.md

@@ -1,3 +1,28 @@
 # Edit Link
 
-Documentation coming soon...
+Edit Link lets you display a link to edit the page on Git management services such as GitHub, or GitLab. To enable it, add `themeConfig.editLink` options to your config.
+
+```js
+export default {
+  themeConfig: {
+    editLink: {
+      pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path'
+    }
+  }
+}
+```
+
+The `pattern` option defines the URL structure for the link, and `:path` is going to be replaced with the page path.
+
+By default, this will add the link text "Edit this page" at the bottom of the doc page. You may customize this text by defining the `text` option.
+
+```js
+export default {
+  themeConfig: {
+    editLink: {
+      pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
+      text: 'Edit this page on GitHub'
+    }
+  }
+}
+```

src/client/theme-default/composables/edit-link.ts

@@ -5,22 +5,10 @@ export function useEditLink() {
   const { theme, page } = useData()
 
   return computed(() => {
-    const url = [
-      'https://github.com',
-      theme.value.editLink?.repo || '???',
-      'edit',
-      theme.value.editLink?.branch || 'main',
-      theme.value.editLink?.dir || null,
-      page.value.relativePath
-    ]
-      .filter((v) => v)
-      .join('/')
+    const { text = 'Edit this page', pattern } = theme.value.editLink || {}
+    const { relativePath } = page.value
+    const url = pattern.replace(/:path/g, relativePath)
 
-    const text = theme.value.editLink?.text ?? 'Edit this page'
-
-    return {
-      url,
-      text
-    }
+    return { url, text }
   })
 }

types/default-theme.d.ts

@@ -127,25 +127,11 @@ export namespace DefaultTheme {
 
   export interface EditLink {
     /**
-     * Repo of the site.
+     * Pattern for edit link.
      *
-     * @example 'vuejs/docs'
+     * @example 'https://github.com/vuejs/vitepress/edit/main/docs/:path'
      */
-    repo: string
-
-    /**
-     * Branch of the repo.
-     *
-     * @default 'main'
-     */
-    branch?: string
-
-    /**
-     * If your docs are not at the root of the repo.
-     *
-     * @example 'docs'
-     */
-    dir?: string
+    pattern: string
 
     /**
      * Custom text for edit link.