feat: allow custom edit links (#698)

close #694 close #697 Co-authored-by: Kia Ishii <[email protected]>
vuejs · Jun 6, 2022 · 535e176 · 535e176
1 parent cf99dcc
commit 535e176
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 36 deletions.
diff --git a/docs/.vitepress/config.ts b/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'
     },
 

diff --git a/docs/config/theme-configs.md b/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`

diff --git a/docs/guide/theme-edit-link.md b/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'
+    }
+  }
+}
+```
diff --git a/src/client/theme-default/composables/edit-link.ts b/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 }
   })
 }
diff --git a/types/default-theme.d.ts b/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.