feat: allow custom edit link style

docs/config/theme-configs.md

@@ -188,6 +188,76 @@ export interface Footer {
 }
 ```
 
+## editLink
+
+- Type: `EditLink`
+
+Edit link configuration. You can then customize git repo link and display text.
+
+We have built-in recognition of common git services, you just need to configure the domain. If you're using a self-built service (like GitLab) you can specify or customize the link style.
+
+
+Available parameters:
+  - `:repo`: The `repo` you configured
+  - `:branch`: Ibid
+  - `:path`: `dir` + file path
+
+```ts
+export default {
+  themeConfig: {
+    editLink: {
+      style: ':repo/edit/:branch/:path',
+      domain: 'github.com',
+      repo: 'vuejs/vitepress',
+      branch: 'main',
+      dir: 'docs',
+      text: 'Edit this page on GitHub'
+    },
+  }
+}
+```
+
+```ts
+export interface EditLink {
+  /**
+   * Git service edit link style.
+   * 
+   * @default 'github'
+   */
+  style?: 'github' | 'gitlab' | 'bitbucket' | string
+  /** 
+   * Domain of the git service.
+   * 
+   * @example 'github.com' or 'https://github.com'
+   */
+  domain?: string
+  /**
+   * Repo of the site.
+   *
+   * @example 'vuejs/docs'
+   */
+  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
+  /**
+   * Custom text for edit link.
+   *
+   * @default 'Edit this page'
+   */
+  text?: string
+}
+```
+
 ## lastUpdatedText
 
 - Type: `string`

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

@@ -4,23 +4,39 @@ import { useData } from 'vitepress'
 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 {
+    style = '',
+    domain = 'github.com',
+    repo = '???',
+    branch = 'main',
+    dir = '',
+    text = 'Edit this page'
+  } = theme.value.editLink || {}
+  const { relativePath } = page.value
+  const base = /^https?:\/\//.test(domain) ? domain : `https://${domain}`
+  const path = dir ? `/${dir}/${relativePath}` : `/${relativePath}`
+
+  const linkStyle = {
+    github: ':repo/edit/:branch/:path',
+    gitlab: ':repo/-/edit/:branch/:path',
+    bitbucket:
+      ':repo/src/:branch/:path?mode=edit&spa=0&at=:branch&fileviewer=file-view-default'
+  }
 
-    const text = theme.value.editLink?.text ?? 'Edit this page'
+  function knownService(domain: string) {
+    if (/bitbucket\.org/.test(domain)) return 'bitbucket'
+    if (/gitlab\.com/.test(domain)) return 'gitlab'
+    if (/gitee\.com/.test(domain)) return 'github'
+    return 'github'
+  }
+
+  return computed(() => {
+    const url = `${base}/${style || linkStyle[knownService(domain)]}`
+      .replace(/:repo/g, repo)
+      .replace(/:branch/g, branch)
+      .replace(/:path/g, `${path}`)
+      .replace(/([^:])\/\//g, '$1/')
 
-    return {
-      url,
-      text
-    }
+    return { url, text }
   })
 }

types/default-theme.d.ts

@@ -119,6 +119,20 @@ export namespace DefaultTheme {
   // edit link -----------------------------------------------------------------
 
   export interface EditLink {
+    /**
+     * Git service edit link style.
+     *
+     * @default 'github'
+     */
+    style?: 'github' | 'gitlab' | 'bitbucket' | string
+
+    /**
+     * Domain of the git service.
+     *
+     * @example 'github.com' or 'https://github.com'
+     */
+    domain?: string
+
     /**
      * Repo of the site.
      *