feat: allow custom edit link style

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>

docs/.vitepress/config.ts

@@ -16,8 +16,9 @@ export default defineConfig({
     },
 
     editLink: {
+      domain: 'gitlab.com',
       repo: 'vuejs/vitepress',
-      branch: 'next',
+      branch: 'main',
       dir: 'docs',
       text: 'Edit this page on GitHub'
     },

docs/config/theme-configs.md

@@ -194,13 +194,22 @@ export interface Footer {
 
 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: {
-      domain: 'github.com'
+      style: ':repo/edit/:branch/:path',
+      domain: 'github.com',
       repo: 'vuejs/vitepress',
-      branch: 'next',
+      branch: 'main',
       dir: 'docs',
       text: 'Edit this page on GitHub'
     },
@@ -210,6 +219,12 @@ export default {
 
 ```ts
 export interface EditLink {
+  /**
+   * Git service edit link style.
+   * 
+   * @default 'github'
+   */
+  style?: 'github' | 'gitlab' | 'bitbucket' | string
   /** 
    * Domain of git repo
    * 

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://${theme.value.editLink?.domain || '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 text = theme.value.editLink?.text ?? 'Edit this page'
+  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'
+  }
 
-    return {
-      url,
-      text
+  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 }
   })
 }

types/default-theme.d.ts

@@ -120,7 +120,14 @@ export namespace DefaultTheme {
 
   export interface EditLink {
     /**
-     * Domain of git repo
+     * Git service edit link style.
+     *
+     * @default 'github'
+     */
+    style?: 'github' | 'gitlab' | 'bitbucket' | string
+
+    /**
+     * Domain of the git service.
      *
      * @example 'github.com' or 'https://github.com'
      */