diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index f3581977..d3b840d7 100644 --- a/docs/.vitepress/config.ts +++ b/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' }, diff --git a/docs/config/theme-configs.md b/docs/config/theme-configs.md index 7755d5ee..7f532b19 100644 --- a/docs/config/theme-configs.md +++ b/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 * diff --git a/src/client/theme-default/composables/edit-link.ts b/src/client/theme-default/composables/edit-link.ts index 44dd5713..90ef5baf 100644 --- a/src/client/theme-default/composables/edit-link.ts +++ b/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 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 } }) } diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts index 6ed2a004..e282d4c2 100644 --- a/types/default-theme.d.ts +++ b/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' */