refactor(docs): upgrade vitepress (#17444)

* docs: upgrade vitepress

* revert original copy button

---------

Co-authored-by: 云游君 <me@yunyoujun.cn>

.gitignore

@@ -19,3 +19,4 @@ packages/element-plus/version.ts
 cypress/screenshots/*
 cypress/videos/*
 tmp
+docs/.vitepress/cache

docs/.vitepress/config/index.mts

@@ -1,8 +1,13 @@
 import consola from 'consola'
 import { REPO_BRANCH, REPO_PATH } from '@element-plus/build-constants'
 import { docsDirName } from '@element-plus/build-utils'
-import { languages } from './utils/lang'
-import { features, head, mdPlugin, nav, sidebars } from './config'
+import { languages } from '../utils/lang'
+import { features } from './features'
+import { head } from './head'
+import { nav } from './nav'
+import { mdPlugin } from './plugins'
+import { sidebars } from './sidebars'
+
 import type { UserConfig } from 'vitepress'
 
 const buildTransformers = () => {
@@ -41,7 +46,7 @@ languages.forEach((lang) => {
   }
 })
 
-export const config: UserConfig = {
+const config: UserConfig = {
   title: 'Element Plus',
   description: 'A Vue 3 based component library for designers and developers',
   lastUpdated: true,
@@ -53,7 +58,6 @@ export const config: UserConfig = {
 
     editLinks: true,
     editLinkText: 'Edit this page on GitHub',
-    lastUpdated: 'Last Updated',
 
     logo: '/images/element-plus-logo.svg',
     logoSmall: '/images/element-plus-logo-small.svg',
@@ -75,12 +79,10 @@ export const config: UserConfig = {
 
   vue: {
     template: {
-      ssr: true,
       compilerOptions: {
         directiveTransforms: buildTransformers(),
       },
     },
   },
 }
-
 export default config

docs/.vitepress/config/index.ts

@@ -1,7 +0,0 @@
-export * from './analytics'
-export * from './features'
-export * from './head'
-export * from './nav'
-export * from './plugins'
-export * from './sidebars'
-export * from './sponsors'

docs/.vitepress/config/plugins.ts

@@ -1,18 +1,16 @@
 import path from 'path'
 import fs from 'fs'
-import MarkdownIt from 'markdown-it'
 import mdContainer from 'markdown-it-container'
 import { docRoot } from '@element-plus/build-utils'
 import externalLinkIcon from '../plugins/external-link-icon'
 import tableWrapper from '../plugins/table-wrapper'
 import tooltip from '../plugins/tooltip'
 import tag from '../plugins/tag'
+import headers from '../plugins/headers'
 import { ApiTableContainer } from '../plugins/api-table'
-import { highlight } from '../utils/highlight'
 import type Token from 'markdown-it/lib/token'
 import type Renderer from 'markdown-it/lib/renderer'
-
-const localMd = MarkdownIt().use(tag)
+import type MarkdownIt from 'markdown-it'
 
 interface ContainerOpts {
   marker?: string | undefined
@@ -27,6 +25,7 @@ interface ContainerOpts {
 }
 
 export const mdPlugin = (md: MarkdownIt) => {
+  md.use(headers)
   md.use(externalLinkIcon)
   md.use(tableWrapper)
   md.use(tooltip)
@@ -53,10 +52,10 @@ export const mdPlugin = (md: MarkdownIt) => {
         if (!source) throw new Error(`Incorrect source file: ${sourceFile}`)
 
         return `<Demo :demos="demos" source="${encodeURIComponent(
-          highlight(source, 'vue')
+          md.render(`\`\`\` vue\n${source}\`\`\``)
         )}" path="${sourceFile}" raw-source="${encodeURIComponent(
           source
-        )}" description="${encodeURIComponent(localMd.render(description))}">`
+        )}" description="${encodeURIComponent(md.render(description))}">`
       } else {
         return '</Demo>'
       }

docs/.vitepress/plugins/api-table.ts

@@ -1,13 +1,8 @@
-import markdown from 'markdown-it'
-
 import type MarkdownIt from 'markdown-it'
 
-const ApiMd = new markdown()
-
 export const ApiTableContainer = (md: MarkdownIt) => {
   const fence = md.renderer.rules.fence!
 
-  ApiMd.renderer.rules = md.renderer.rules
   md.renderer.rules.fence = (...args) => {
     const [tokens, idx, ...rest] = args
     const [options, env] = rest

docs/.vitepress/plugins/headers.ts

@@ -0,0 +1,24 @@
+import { resolveHeadersFromTokens, slugify } from '@mdit-vue/shared'
+import type MarkdownIt from 'markdown-it'
+
+/**
+ * Get markdown headers info
+ *
+ * Extract them into env
+ */
+export default (md: MarkdownIt): void => {
+  // extract headers to env
+  const render = md.renderer.render.bind(md.renderer)
+
+  const level = [2, 3, 4, 5, 6]
+  md.renderer.render = (tokens, options, env) => {
+    env.headers = resolveHeadersFromTokens(tokens, {
+      level,
+      shouldAllowHtml: true,
+      shouldAllowNested: false,
+      shouldEscapeText: false,
+      slugify,
+    })
+    return render(tokens, options, env)
+  }
+}

docs/.vitepress/plugins/markdown-transform.ts

@@ -36,7 +36,7 @@ export function MarkdownTransform(): Plugin {
         headers: [],
         footers: [],
         scriptSetups: [
-          `const demos = import.meta.globEager('../../examples/${componentId}/*.vue')`,
+          `const demos = import.meta.glob('../../examples/${componentId}/*.vue', { eager: true })`,
         ],
       }
 

docs/.vitepress/plugins/tag.ts

@@ -1,22 +1,6 @@
 import type MarkdownIt from 'markdown-it'
 
 export default (md: MarkdownIt): void => {
-  /**
-   * To enable the plugin to be parsed in the demo description, the content is rendered as span instead of ElTag.
-   */
-  md.renderer.rules.tag = (tokens, idx) => {
-    const token = tokens[idx]
-    const value = token.content
-    /**
-     * Add styles for some special tags
-     * vitepress/styles/content/tag-content.scss
-     */
-    const tagClass = ['beta', 'deprecated', 'a11y', 'required'].includes(value)
-      ? value
-      : ''
-    return `<span class="vp-tag ${tagClass}">${value}</span>`
-  }
-
   md.inline.ruler.before('emphasis', 'tag', (state, silent) => {
     const tagRegExp = /^\^\(([^)]*)\)/
     const str = state.src.slice(state.pos, state.posMax)
@@ -28,8 +12,16 @@ export default (md: MarkdownIt): void => {
 
     if (!result) return false
 
-    const token = state.push('tag', 'tag', 0)
-    token.content = result[1].trim()
+    const token = state.push('html_inline', '', 0)
+    const value = result[1].trim()
+    /**
+     * Add styles for some special tags
+     * vitepress/styles/content/tag-content.scss
+     */
+    const tagClass = ['beta', 'deprecated', 'a11y', 'required'].includes(value)
+      ? value
+      : ''
+    token.content = `<span class="vp-tag ${tagClass}">${value}</span>`
     token.level = state.level
     state.pos += result[0].length
 

docs/.vitepress/theme/style.css

@@ -64,3 +64,6 @@
     transform: rotate(1turn);
   }
 }
+.doc-content .header-anchor:before {
+  content: '#';
+}

docs/.vitepress/utils/highlight.ts

@@ -1,56 +0,0 @@
-// ref https://github.com/vuejs/vitepress/blob/main/src/node/markdown/plugins/highlight.ts
-import chalk from 'chalk'
-import escapeHtml from 'escape-html'
-import prism from 'prismjs'
-import consola from 'consola'
-
-// prism is listed as actual dep so it's ok to require
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const loadLanguages = require('prismjs/components/index')
-
-// required to make embedded highlighting work...
-loadLanguages(['markup', 'css', 'javascript'])
-
-function wrap(code: string, lang: string): string {
-  if (lang === 'text') {
-    code = escapeHtml(code)
-  }
-  return `<pre v-pre><code>${code}</code></pre>`
-}
-
-export const highlight = (str: string, lang: string) => {
-  if (!lang) {
-    return wrap(str, 'text')
-  }
-  lang = lang.toLowerCase()
-  const rawLang = lang
-  if (lang === 'vue' || lang === 'html') {
-    lang = 'markup'
-  }
-  if (lang === 'md') {
-    lang = 'markdown'
-  }
-  if (lang === 'ts') {
-    lang = 'typescript'
-  }
-  if (lang === 'py') {
-    lang = 'python'
-  }
-  if (!prism.languages[lang]) {
-    try {
-      loadLanguages([lang])
-    } catch {
-      // eslint-disable-next-line no-console
-      consola.warn(
-        chalk.yellow(
-          `[vitepress] Syntax highlight for language "${lang}" is not supported.`
-        )
-      )
-    }
-  }
-  if (prism.languages[lang]) {
-    const code = prism.highlight(str, prism.languages[lang], lang)
-    return wrap(code, rawLang)
-  }
-  return wrap(str, 'text')
-}

docs/.vitepress/vitepress/components/common/vp-link.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { isExternal } from '../../utils'
 
-const props = defineProps<{
+defineProps<{
   href?: string
   noIcon?: boolean
 }>()
-
-const isExternal = computed(() => props.href && /^[a-z]+:/i.test(props.href))
 </script>
 
 <template>
@@ -15,11 +13,11 @@ const isExternal = computed(() => props.href && /^[a-z]+:/i.test(props.href))
     class="link-item"
     :class="{ link: href }"
     :href="href"
-    :target="isExternal ? '_blank' : undefined"
-    :rel="isExternal ? 'noopener noreferrer' : undefined"
+    :target="isExternal(href) ? '_blank' : undefined"
+    :rel="isExternal(href) ? 'noopener noreferrer' : undefined"
   >
     <slot />
-    <ElIcon v-if="isExternal && !noIcon">
+    <ElIcon v-if="isExternal(href) && !noIcon">
       <i-ri-external-link-line class="link-icon" />
     </ElIcon>
   </component>

docs/.vitepress/vitepress/components/demo/vp-source-code.vue

@@ -15,13 +15,13 @@ const decoded = computed(() => {
 
 <template>
   <div class="example-source-wrapper">
-    <div class="example-source language-vue" v-html="decoded" />
+    <div class="example-source" v-html="decoded" />
   </div>
 </template>
 
 <style scoped lang="scss">
-.language-vue {
-  margin: 0;
-  border-radius: 0;
+:deep(.language-vue) {
+  margin: 0 !important;
+  border-radius: 0 !important;
 }
 </style>

docs/.vitepress/vitepress/components/doc-content/vp-table-of-content.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import MarkdownIt from 'markdown-it'
 import { useToc } from '../../composables/use-toc'
 
 import sponsorLocale from '../../../i18n/component/sponsor.json'
@@ -9,10 +8,8 @@ import SponsorsButton from '../sponsors/sponsors-button.vue'
 import SponsorRightBigLogoList from '../sponsors/right-big-logo-list.vue'
 import SponsorRightTextList from '../sponsors/right-richtext-list.vue'
 import SponsorRightLogoSmallList from '../sponsors/right-logo-small-list.vue'
-import tag from '../../../plugins/tag'
 // import SponsorLarge from '../vp-sponsor-large.vue'
 
-const localMd = MarkdownIt().use(tag)
 const headers = useToc()
 const lang = useLang()
 const sponsor = computed(() => sponsorLocale[lang.value])
@@ -30,7 +27,7 @@ const sponsor = computed(() => sponsorLocale[lang.value])
             :href="link"
             :title="text"
           >
-            <div v-html="localMd.render(text)" />
+            <div v-html="text" />
             <template v-if="children" #sub-link>
               <el-anchor-link
                 v-for="{ link: childLink, text: childText } in children"
@@ -38,7 +35,7 @@ const sponsor = computed(() => sponsorLocale[lang.value])
                 :href="childLink"
                 :title="text"
               >
-                <div v-html="localMd.render(childText)" />
+                <div v-html="childText" />
               </el-anchor-link>
             </template>
           </el-anchor-link>

docs/.vitepress/vitepress/components/navbar/vp-menu-link.vue

@@ -2,7 +2,7 @@
 import { useRoute } from 'vitepress'
 import { useStorage } from '@vueuse/core'
 import VPLink from '../common/vp-link.vue'
-import { isActiveLink } from '../../utils'
+import { isActive } from '../../utils'
 
 import type { Link } from '../../types'
 const USER_VISITED_NEW_RESOURCE_PAGE = 'USER_VISITED_NEW_RESOURCE_PAGE'
@@ -28,8 +28,8 @@ const onNavClick = (item: Link) => {
   <VPLink
     :class="{
       'is-menu-link': true,
-      active: isActiveLink(
-        route,
+      active: isActive(
+        route.data.relativePath,
         item.activeMatch || item.link,
         !!item.activeMatch
       ),

docs/.vitepress/vitepress/components/sidebar/vp-sidebar-link.vue

@@ -15,7 +15,9 @@ const sidebarItem = ref<HTMLElement>()
 
 const route = useRoute()
 
-const activeLink = computed<boolean>(() => isActive(route, props.item.link))
+const activeLink = computed<boolean>(() =>
+  isActive(route.data.relativePath, props.item.link)
+)
 
 watch([activeLink, sidebarItem], ([active, el]) => {
   if (active && el) {

docs/.vitepress/vitepress/components/vp-app.vue

@@ -153,6 +153,5 @@ onMounted(async () => {
         <slot name="aside-bottom" />
       </template>
     </VPContent>
-    <Debug />
   </div>
 </template>

docs/.vitepress/vitepress/composables/page-nav.ts

@@ -1,10 +1,6 @@
 import { computed } from 'vue'
 import { useData } from 'vitepress'
-import {
-  ensureStartingSlash,
-  isArray,
-  removeExtention as removeExtension,
-} from '../utils'
+import { isActive } from '../utils'
 import { useLang } from './lang'
 import { getFlatSideBarLinks, getSidebarConfig } from './sidebar'
 
@@ -12,22 +8,18 @@ export function usePageNav() {
   const { page, theme } = useData()
   const lang = useLang()
 
-  const path = computed(() => {
-    return removeExtension(ensureStartingSlash(page.value.relativePath))
-  })
-
   const candidates = computed(() => {
     const config = getSidebarConfig(
       theme.value.sidebars,
-      path.value,
+      page.value.relativePath,
       lang.value
     )
-    return isArray(config) ? getFlatSideBarLinks(config) : []
+    return Array.isArray(config) ? getFlatSideBarLinks(config) : []
   })
 
   const index = computed(() => {
     return candidates.value.findIndex((item) => {
-      return item.link === path.value
+      return isActive(page.value.relativePath, item.link)
     })
   })
   const next = computed(() => {

docs/.vitepress/vitepress/composables/sidebar.ts

@@ -1,6 +1,6 @@
 import { computed } from 'vue'
 import { useData, useRoute } from 'vitepress'
-import { ensureStartingSlash, isArray, removeExtention } from '../utils'
+import { ensureStartingSlash } from '../utils'
 import { useLang } from './lang'
 
 export const useSidebar = () => {
@@ -30,13 +30,13 @@ export const useSidebar = () => {
 }
 
 export function isSideBarConfig(sidebar) {
-  return sidebar === false || sidebar === 'auto' || isArray(sidebar)
+  return sidebar === false || sidebar === 'auto' || Array.isArray(sidebar)
 }
 export function isSideBarGroup(item) {
   return item.children !== undefined
 }
 export function isSideBarEmpty(sidebar) {
-  return isArray(sidebar) ? sidebar.length === 0 : !sidebar
+  return Array.isArray(sidebar) ? sidebar.length === 0 : !sidebar
 }
 
 type SidebarItem = {
@@ -67,16 +67,11 @@ export function getSidebarConfig(sidebar: Sidebar, path: string, lang: string) {
   }
   return []
 }
-/**
- * Get flat sidebar links from the sidebar items. This method is useful for
- * creating the "next and prev link" feature. It will ignore any items that
- * don't have `link` property and removes `.md` or `.html` extension if a
- * link contains it.
- */
+
 export function getFlatSideBarLinks(sidebar) {
   return sidebar.reduce((links, item) => {
     if (item.link) {
-      links.push({ text: item.text, link: removeExtention(item.link) })
+      links.push({ text: item.text, link: item.link })
     }
     if (isSideBarGroup(item)) {
       links = [...links, ...getFlatSideBarLinks(item.children)]

docs/.vitepress/vitepress/styles/code.scss

@@ -1,183 +1,281 @@
-/* https://github.com/antfu/prism-theme-vars */
-@use 'prism-theme-vars/base.css';
-@use 'prism-theme-vars/marker.css';
-
-[class*='language-']:before {
-  font-family: var(--code-font-family);
-}
-
-span[class~='language-css']:before {
-  content: '';
-}
+@use 'vitepress/dist/client/theme-default/styles/vars.css';
+@use 'vitepress/dist/client/theme-default/styles/icons.css';
+@use 'vitepress/dist/client/theme-default/styles/components/vp-code.css';
 
 :root {
-  --prism-marker-opacity: 0.6;
-  --prism-marker-color: var(--code-text-color);
-  --prism-line-height: var(--code-line-height);
+  --vp-code-block-bg: var(--el-fill-color-light);
+  --vp-code-line-height: 1.6;
+}
+pre,
+code,
+kbd,
+samp {
+  font-family: var(--code-font-family);
 }
 
-html:not(.dark) {
-  --prism-builtin: #3182bd;
-  --prism-comment: #848486;
-  --prism-deleted: #3182bd;
-  --prism-function: #6196cc;
-  --prism-boolean: #c25205;
-  --prism-number: #c25205;
-  --prism-property: #717c11;
-  --prism-punctuation: #a8a9cc;
-  --prism-keyword: #c792ea;
-  --prism-variable: #0b8235;
-  --prism-url-decoration: #67cdcc;
-  --prism-symbol: green;
-  --prism-selector: #0b8235;
-}
-
-html.dark {
-  --prism-scheme: dark;
-  --prism-foreground: #a6accd;
-  --prism-background: #181818;
-  --prism-comment: #758575;
-  --prism-string: #c3e88d;
-  --prism-literal: #429988;
-  --prism-keyword: #89ddff;
-  --prism-boolean: #6394bf;
-  --prism-number: #6394bf;
-  --prism-variable: #c2b36e;
-  --prism-function: #82aaff;
-  --prism-deleted: #bc6066;
-  --prism-class: #54b1bf;
-  --prism-builtin: var(--el-color-primary-light-3);
-  --prism-property: #c792ea;
-  --prism-namespace: #db889a;
-  --prism-punctuation: #89ddff;
-  --prism-decorator: #bd8f8f;
-  --prism-regex: #ab5e3f;
-  --prism-json-property: #6b8b9e;
-  --prism-line-number: #888888;
-  --prism-line-number-gutter: #eeeeee;
-  --prism-line-highlight-background: #444444;
-  --prism-selection-background: #444444;
-  --prism-inline-background: #2d2d2d;
-}
-
-code {
-  margin: 0;
+:not(pre) > code {
   border-radius: 4px;
   padding: 0.15rem 0.5rem;
-  font-family: var(--code-font-family);
-  font-size: var(--code-font-size);
-  color: var(--code-text-color);
-  line-height: var(--code-line-height);
-  background-color: var(--code-bg-color);
+  background-color: var(--el-fill-color-light);
+  transition: color 0.25s, background-color 0.5s;
+  font-size: 14px;
 }
 
-pre {
-  code {
-    background-color: transparent;
-  }
+.doc-content a > code {
+  color: var(--vp-code-link-color);
 }
 
-a > code {
-  color: var(--code-link-color);
+.doc-content a:hover > code {
+  color: var(--vp-code-link-hover-color);
 }
 
-code .token.deleted {
-  color: #ec5975;
+.doc-content h1 > code,
+.doc-content h2 > code,
+.doc-content h3 > code {
+  font-size: 0.9em;
 }
 
-code .token.inserted {
-  color: var(--c-brand);
-}
-
-div[class*='language-'] {
+.doc-content div[class*='language-'],
+.vp-block {
   position: relative;
-  margin: 1rem -1.5rem;
-  background-color: var(--code-bg-color);
+  margin: 16px 0;
+  background-color: var(--vp-code-block-bg);
   overflow-x: auto;
+  transition: background-color 0.5s;
 }
 
-li > div[class*='language-'] {
-  border-radius: 6px 0 0 6px;
-  margin: 1rem -1.5rem 1rem -1.25rem;
-}
-
-@media (min-width: 420px) {
-  div[class*='language-'] {
-    margin: 1rem 0;
-    border-radius: 6px;
-  }
-
-  li > div[class*='language-'] {
-    margin: 1rem 0 1rem 0;
-    border-radius: 6px;
+@media (min-width: 640px) {
+  .doc-content div[class*='language-'],
+  .vp-block {
+    border-radius: 8px;
   }
 }
 
-[class*='language-'] pre,
-[class*='language-'] code {
+@media (max-width: 639px) {
+  .doc-content li div[class*='language-'] {
+    border-radius: 8px 0 0 8px;
+  }
+}
+
+.doc-content div[class*='language-'] + div[class*='language-'],
+.doc-content div[class$='-api'] + div[class*='language-'],
+.doc-content
+  div[class*='language-']
+  + div[class$='-api']
+  > div[class*='language-'] {
+  margin-top: -8px;
+}
+
+.doc-content [class*='language-'] pre,
+.doc-content [class*='language-'] code {
+  /*rtl:ignore*/
+  direction: ltr;
+  /*rtl:ignore*/
   text-align: left;
   white-space: pre;
   word-spacing: normal;
   word-break: normal;
   word-wrap: normal;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
   tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
   hyphens: none;
 }
 
-[class*='language-'] pre {
+.doc-content [class*='language-'] pre {
   position: relative;
   z-index: 1;
   margin: 0;
-  padding: 0.25rem;
+  padding: 20px 0;
   background: transparent;
   overflow-x: auto;
 }
 
-[class*='language-'] code {
-  padding: 0;
-  line-height: var(--code-line-height);
-  font-size: var(--code-font-size);
-  color: var(--code-text-color);
+.doc-content [class*='language-'] code {
+  display: block;
+  padding: 0 24px;
+  width: fit-content;
+  min-width: 100%;
+  line-height: var(--vp-code-line-height);
+  font-size: var(--vp-code-font-size);
+  color: var(--vp-code-block-color);
+  transition: color 0.5s;
 }
 
-/* Line highlighting */
+.doc-content [class*='language-'] code .highlighted {
+  background-color: var(--vp-code-line-highlight-color);
+  transition: background-color 0.5s;
+  margin: 0 -24px;
+  padding: 0 24px;
+  width: calc(100% + 2 * 24px);
+  display: inline-block;
+}
 
-.highlight-lines {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  padding: 1.25rem 0;
-  width: 100%;
-  line-height: var(--code-line-height);
-  font-family: var(--code-font-family);
-  font-size: var(--code-font-size);
-  user-select: none;
-  overflow: hidden;
-}
-
-.highlight-lines .highlighted {
-  background-color: rgba(0, 0, 0, 0.66);
-}
-
-/* Line numbers mode */
-
-div[class*='language-'].line-numbers-mode {
-  padding-left: 3.5rem;
-}
-
-.line-numbers-wrapper {
+.doc-content [class*='language-'] code .highlighted.error {
+  background-color: var(--vp-code-line-error-color);
+}
+
+.doc-content [class*='language-'] code .highlighted.warning {
+  background-color: var(--vp-code-line-warning-color);
+}
+
+.doc-content [class*='language-'] code .diff {
+  transition: background-color 0.5s;
+  margin: 0 -24px;
+  padding: 0 24px;
+  width: calc(100% + 2 * 24px);
+  display: inline-block;
+}
+
+.doc-content [class*='language-'] code .diff::before {
+  position: absolute;
+  left: 10px;
+}
+
+.doc-content [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+  filter: blur(0.095rem);
+  opacity: 0.4;
+  transition: filter 0.35s, opacity 0.35s;
+}
+
+.doc-content [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+  opacity: 0.7;
+  transition: filter 0.35s, opacity 0.35s;
+}
+
+.doc-content
+  [class*='language-']:hover
+  .has-focused-lines
+  .line:not(.has-focus) {
+  filter: blur(0);
+  opacity: 1;
+}
+
+.doc-content [class*='language-'] code .diff.remove {
+  background-color: var(--vp-code-line-diff-remove-color);
+  opacity: 0.7;
+}
+
+.doc-content [class*='language-'] code .diff.remove::before {
+  content: '-';
+  color: var(--vp-code-line-diff-remove-symbol-color);
+}
+
+.doc-content [class*='language-'] code .diff.add {
+  background-color: var(--vp-code-line-diff-add-color);
+}
+
+.doc-content [class*='language-'] code .diff.add::before {
+  content: '+';
+  color: var(--vp-code-line-diff-add-symbol-color);
+}
+
+.doc-content div[class*='language-'].line-numbers-mode {
+  /*rtl:ignore*/
+  padding-left: 32px;
+}
+
+.doc-content .line-numbers-wrapper {
   position: absolute;
   top: 0;
   bottom: 0;
+  /*rtl:ignore*/
   left: 0;
   z-index: 3;
-  border-right: 1px solid var(--el-overlay-color-lighter);
-  padding: 1.25rem 0;
-  width: 3.5rem;
+  /*rtl:ignore*/
+  border-right: 1px solid var(--vp-code-block-divider-color);
+  padding-top: 20px;
+  width: 32px;
   text-align: center;
-  line-height: var(--code-line-height);
-  font-family: var(--code-font-family);
-  font-size: var(--code-font-size);
-  color: #888;
+  font-family: var(--vp-font-family-mono);
+  line-height: var(--vp-code-line-height);
+  font-size: var(--vp-code-font-size);
+  color: var(--vp-code-line-number-color);
+  transition: border-color 0.5s, color 0.5s;
+}
+
+.doc-content [class*='language-'] > button.copy {
+  /*rtl:ignore*/
+  direction: ltr;
+  position: absolute;
+  top: 12px;
+  /*rtl:ignore*/
+  right: 12px;
+  z-index: 3;
+  border: 1px solid var(--vp-code-copy-code-border-color);
+  border-radius: 4px;
+  width: 40px;
+  height: 40px;
+  background-color: var(--vp-code-copy-code-bg);
+  opacity: 0;
+  cursor: pointer;
+  background-image: var(--vp-icon-copy);
+  background-position: 50%;
+  background-size: 20px;
+  background-repeat: no-repeat;
+  transition: border-color 0.25s, background-color 0.25s, opacity 0.25s;
+}
+
+.doc-content [class*='language-']:hover > button.copy,
+.doc-content [class*='language-'] > button.copy:focus {
+  opacity: 1;
+}
+
+.doc-content [class*='language-'] > button.copy:hover,
+.doc-content [class*='language-'] > button.copy.copied {
+  border-color: var(--vp-code-copy-code-hover-border-color);
+  background-color: var(--vp-code-copy-code-hover-bg);
+}
+
+.doc-content [class*='language-'] > button.copy.copied,
+.doc-content [class*='language-'] > button.copy:hover.copied {
+  /*rtl:ignore*/
+  border-radius: 0 4px 4px 0;
+  background-color: var(--vp-code-copy-code-hover-bg);
+  background-image: var(--vp-icon-copied);
+}
+
+.doc-content [class*='language-'] > button.copy.copied::before,
+.doc-content [class*='language-'] > button.copy:hover.copied::before {
+  position: relative;
+  top: -1px;
+  /*rtl:ignore*/
+  transform: translateX(calc(-100% - 1px));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid var(--vp-code-copy-code-hover-border-color);
+  /*rtl:ignore*/
+  border-right: 0;
+  border-radius: 4px 0 0 4px;
+  padding: 0 10px;
+  width: fit-content;
+  height: 40px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-code-copy-code-active-text);
+  background-color: var(--vp-code-copy-code-hover-bg);
+  white-space: nowrap;
+  content: var(--vp-code-copy-copied-text-content);
+}
+
+.doc-content [class*='language-'] > span.lang {
+  position: absolute;
+  top: 2px;
+  /*rtl:ignore*/
+  right: 8px;
+  z-index: 2;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-code-lang-color);
+  transition: color 0.4s, opacity 0.4s;
+}
+
+.doc-content [class*='language-']:hover > button.copy + span.lang,
+.doc-content [class*='language-'] > button.copy:focus + span.lang {
+  opacity: 0;
 }

docs/.vitepress/vitepress/utils/index.ts

@@ -1,26 +1,11 @@
-import {
-  endingSlashRE,
-  isActive,
-  isExternal,
-  normalize,
-} from 'vitepress/dist/client/theme-default/utils'
-
-import type { Route } from 'vitepress'
+import { isExternal } from 'vitepress/dist/client/shared'
 
 export * from './colors'
 
-export {
-  isArray,
-  isNullish,
-  isExternal,
-  isActive,
-  normalize,
-  joinUrl,
-  ensureEndingSlash,
-  ensureStartingSlash,
-  removeExtention,
-} from 'vitepress/dist/client/theme-default/utils'
+export { isExternal, isActive } from 'vitepress/dist/client/shared'
+export { ensureStartingSlash } from 'vitepress/dist/client/theme-default/support/utils'
 
+const endingSlashRE = /\/$/
 export function utoa(data: string): string {
   return btoa(unescape(encodeURIComponent(data)))
 }
@@ -44,18 +29,6 @@ export const throttleAndDebounce = (fn: () => any, delay: number) => {
   }
 }
 
-// When match === true, meaning `path` is a string for build regex
-export const isActiveLink = (
-  route: Route,
-  pathPattern: string,
-  match?: boolean
-) => {
-  if (!match) return isActive(route, pathPattern)
-  const regex = new RegExp(pathPattern)
-
-  return regex.test(normalize(`/${route.data.relativePath}`))
-}
-
 export function createGitHubUrl(
   docsRepo: string,
   docsDir: string,

docs/components.d.ts

@@ -30,7 +30,6 @@ declare module '@vue/runtime-core' {
     Icons: typeof import('./.vitepress/vitepress/components/globals/icons.vue')['default']
     IRiCodeLine: typeof import('~icons/ri/code-line')['default']
     IRiExternalLinkLine: typeof import('~icons/ri/external-link-line')['default']
-    IRiFileCopyLine: typeof import('~icons/ri/file-copy-line')['default']
     IRiFlaskLine: typeof import('~icons/ri/flask-line')['default']
     IRiGithubLine: typeof import('~icons/ri/github-line')['default']
     IRiTranslate2: typeof import('~icons/ri/translate2')['default']
@@ -41,7 +40,6 @@ declare module '@vue/runtime-core' {
     LeftLayerSvg: typeof import('./.vitepress/vitepress/components/home/svg/left-layer-svg.vue')['default']
     Light: typeof import('./.vitepress/vitepress/components/icons/light.vue')['default']
     MainColor: typeof import('./.vitepress/vitepress/components/globals/main-color.vue')['default']
-    MasterGoUiKit: typeof import('./.vitepress/vitepress/components/globals/resources/master-go-ui-kit.vue')['default']
     MasterGoUiKitSvg: typeof import('./.vitepress/vitepress/components/globals/resources/master-go-ui-kit-svg.vue')['default']
     NeutralColor: typeof import('./.vitepress/vitepress/components/globals/neutral-color.vue')['default']
     OvAffix: typeof import('./.vitepress/vitepress/components/overview-icons/ov-affix.vue')['default']

docs/package.json

@@ -17,7 +17,6 @@
     "axios": "^0.27.2",
     "clipboard-copy": "^4.0.1",
     "element-plus": "npm:element-plus@latest",
-    "markdown-it": "^13.0.1",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "prism-theme-vars": "^0.2.3",
@@ -30,7 +29,8 @@
     "@element-plus/build-constants": "workspace:*",
     "@element-plus/build-utils": "workspace:*",
     "@iconify-json/ri": "^1.1.3",
-    "@types/markdown-it": "^12.2.3",
+    "@mdit-vue/shared": "^2.1.3",
+    "@types/markdown-it": "^14.1.1",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "chalk": "^4.1.2",
     "consola": "^2.15.3",
@@ -38,7 +38,6 @@
     "fast-glob": "^3.2.11",
     "markdown-it-container": "^3.0.0",
     "octokit": "^2.0.3",
-    "prismjs": "^1.28.0",
     "unocss": "0.33.5",
     "unplugin-icons": "^0.14.6",
     "unplugin-vue-components": "^0.20.1",
@@ -47,6 +46,6 @@
     "vite-plugin-inspect": "^0.5.0",
     "vite-plugin-mkcert": "^1.7.2",
     "vite-plugin-pwa": "^0.12.0",
-    "vitepress": "^0.22.4"
+    "vitepress": "^1.2.3"
   }
 }

docs/unocss.config.ts

@@ -3,7 +3,10 @@ import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss'
 export default defineConfig({
   presets: [presetUno(), presetAttributify(), presetIcons()],
   include: [`${__dirname}/**/*`],
-  exclude: [`${__dirname}/node_modules/**/*`],
+  exclude: [
+    `${__dirname}/node_modules/**/*`,
+    `${__dirname}/.vitepress/cache/**/*`,
+  ],
   theme: {
     breakpoints: {
       sm: '640px',

docs/vite.config.ts

@@ -72,6 +72,9 @@ export default defineConfig(async ({ mode }) => {
       VueMacros({
         setupComponent: false,
         setupSFC: false,
+        hoistStatic: {
+          exclude: ['./**/*.vue'],
+        },
         plugins: {
           vueJsx: vueJsx(),
         },

internal/build-constants/package.json

@@ -9,12 +9,19 @@
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
   "scripts": {
     "build": "unbuild",
     "dev": "pnpm run stub",
     "stub": "unbuild --stub"
   },
   "devDependencies": {
-    "unbuild": "^0.7.4"
+    "unbuild": "^2.0.0"
   }
 }

internal/build-utils/package.json

@@ -10,6 +10,13 @@
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
   "scripts": {
     "build": "unbuild",
     "dev": "pnpm run stub",
@@ -21,6 +28,6 @@
     "consola": "^2.15.3"
   },
   "devDependencies": {
-    "unbuild": "^0.7.4"
+    "unbuild": "^2.0.0"
   }
 }