From 535e176b9a230f692f58a79813a12d2ffbe90be3 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Mon, 6 Jun 2022 13:11:49 +0530
Subject: [PATCH] feat: allow custom edit links (#698)

close #694
close #697

Co-authored-by: Kia Ishii <kia.king.08@gmail.com>
---
 docs/.vitepress/config.ts                     |  3 +--
 docs/config/theme-configs.md                  | 24 +++++++++++++++++
 docs/guide/theme-edit-link.md                 | 27 ++++++++++++++++++-
 .../theme-default/composables/edit-link.ts    | 20 +++-----------
 types/default-theme.d.ts                      | 20 +++-----------
 5 files changed, 58 insertions(+), 36 deletions(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 3cf6255e7851..23eeac47de98 100644
--- 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
index 17c24708849c..37564b783a7b 100644
--- 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
index 39eba21428fb..64e74b316965 100644
--- 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
index 32bf66c20cff..e8a6a156e252 100644
--- 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
index f1b002b8c794..aec914be7fb2 100644
--- 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.