From 0d509a91c2557be48f638adb35e25eac7b0785f9 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Tue, 1 Oct 2024 00:41:40 +0800
Subject: [PATCH] perf(theme): improve `<VPLink>`

---
 .../plugin-md-power/src/client/components/Tabs.vue | 14 +++++++-------
 theme/src/client/components/Blog/VPCategories.vue  |  5 +----
 theme/src/client/components/Home/VPHomeFeature.vue |  2 +-
 theme/src/client/components/VPDocBreadcrumbs.vue   |  4 +---
 theme/src/client/components/VPDocFooter.vue        |  2 +-
 theme/src/client/components/VPLink.vue             | 11 +----------
 theme/src/client/components/VPMenuLink.vue         |  2 +-
 theme/src/node/plugins/getPlugins.ts               |  5 +----
 8 files changed, 14 insertions(+), 31 deletions(-)

diff --git a/plugins/plugin-md-power/src/client/components/Tabs.vue b/plugins/plugin-md-power/src/client/components/Tabs.vue
index 5a3dbddd..fb4af52b 100644
--- a/plugins/plugin-md-power/src/client/components/Tabs.vue
+++ b/plugins/plugin-md-power/src/client/components/Tabs.vue
@@ -248,30 +248,30 @@ function onTabNavClick(index: number): void {
 }
 
 .vp-doc .hint-container.info .vp-tabs .vp-tabs-nav {
-  background: var(--vp-custom-block-info-code-bg);
+  --vp-code-tab-bg: var(--vp-custom-block-info-code-bg);
 }
 
 .vp-doc .hint-container.note .vp-tabs .vp-tabs-nav {
-  background: var(--vp-custom-block-note-code-bg);
+  --vp-code-tab-bg: var(--vp-custom-block-note-code-bg);
 }
 
 .vp-doc .hint-container.tip .vp-tabs .vp-tabs-nav {
-  background: var(--vp-custom-block-tip-code-bg);
+  --vp-code-tab-bg: var(--vp-custom-block-tip-code-bg);
 }
 
 .vp-doc .hint-container.warning .vp-tabs .vp-tabs-nav {
-  background: var(--vp-custom-block-warning-code-bg);
+  --vp-code-tab-bg: var(--vp-custom-block-warning-code-bg);
 }
 
 .vp-doc .hint-container.danger .vp-tabs .vp-tabs-nav {
-  background: var(--vp-custom-block-danger-code-bg);
+  --vp-code-tab-bg: var(--vp-custom-block-danger-code-bg);
 }
 
 .vp-doc .hint-container.caution .vp-tabs .vp-tabs-nav {
-  background: var(--vp-custom-block-caution-code-bg);
+  --vp-code-tab-bg: var(--vp-custom-block-caution-code-bg);
 }
 
 .vp-doc .hint-container.important .vp-tabs .vp-tabs-nav {
-  background: var(--vp-custom-block-important-code-bg);
+  --vp-code-tab-bg: var(--vp-custom-block-important-code-bg);
 }
 </style>
diff --git a/theme/src/client/components/Blog/VPCategories.vue b/theme/src/client/components/Blog/VPCategories.vue
index 1f7dfaf5..bdfe2406 100644
--- a/theme/src/client/components/Blog/VPCategories.vue
+++ b/theme/src/client/components/Blog/VPCategories.vue
@@ -17,10 +17,7 @@ defineProps<{
     >
       <p v-if="item.type === 'post'" class="post">
         <span class="vpi-post" />
-        <VPLink
-          :href="item.path"
-          :text="item.title"
-        />
+        <VPLink :href="item.path" :text="item.title" />
       </p>
       <VPCategoriesGroup v-else :item="item" />
     </li>
diff --git a/theme/src/client/components/Home/VPHomeFeature.vue b/theme/src/client/components/Home/VPHomeFeature.vue
index 10d13f78..337e5540 100644
--- a/theme/src/client/components/Home/VPHomeFeature.vue
+++ b/theme/src/client/components/Home/VPHomeFeature.vue
@@ -24,7 +24,7 @@ const isIconify = computed(() => {
     :href="link"
     :rel="rel"
     :target="target"
-    :no-icon="true"
+    no-icon
     :tag="link ? 'a' : 'div'"
   >
     <article class="box">
diff --git a/theme/src/client/components/VPDocBreadcrumbs.vue b/theme/src/client/components/VPDocBreadcrumbs.vue
index 098c605a..3cefd9be 100644
--- a/theme/src/client/components/VPDocBreadcrumbs.vue
+++ b/theme/src/client/components/VPDocBreadcrumbs.vue
@@ -81,9 +81,7 @@ function resolveSidebar(
         property="itemListElement"
         typeof="ListItem"
       >
-        <VPLink :href="link" class="breadcrumb" :class="{ current }" property="item" typeof="WebPage">
-          {{ text }}
-        </VPLink>
+        <VPLink :href="link" class="breadcrumb" :class="{ current }" property="item" typeof="WebPage" :text="text" />
         <span v-if="index !== breadcrumbList.length - 1" class="vpi-chevron-right" />
         <meta property="position" :content="`${index + 1}`">
       </li>
diff --git a/theme/src/client/components/VPDocFooter.vue b/theme/src/client/components/VPDocFooter.vue
index 13b1faa6..2b4221c6 100644
--- a/theme/src/client/components/VPDocFooter.vue
+++ b/theme/src/client/components/VPDocFooter.vue
@@ -38,7 +38,7 @@ const showFooter = computed(() => {
 
     <div v-if="hasEditLink || hasLastUpdated" class="edit-info">
       <div v-if="hasEditLink && editLink" class="edit-link">
-        <VPLink class="edit-link-button" :href="editLink.link" :no-icon="true">
+        <VPLink class="edit-link-button" :href="editLink.link" no-icon>
           <span class="vpi-square-pen edit-link-icon" aria-label="edit icon" />
           {{ editLink.text }}
         </VPLink>
diff --git a/theme/src/client/components/VPLink.vue b/theme/src/client/components/VPLink.vue
index 72999a41..75d6d4f4 100644
--- a/theme/src/client/components/VPLink.vue
+++ b/theme/src/client/components/VPLink.vue
@@ -29,7 +29,7 @@ function linkTo(e: Event) {
 
 <template>
   <Component
-    :is="tag" class="vp-link" :class="{ link }"
+    :is="tag" class="vp-link no-icon" :class="{ link }"
     :href="withBase(link || '')"
     :target="target ?? (isExternal ? '_blank' : undefined)"
     :rel="rel ?? (isExternal ? 'noreferrer' : undefined)"
@@ -44,18 +44,9 @@ function linkTo(e: Event) {
 
 <style scoped>
 .icon {
-  display: inline-block;
   width: 11px;
   height: 11px;
   margin-top: -1px;
   margin-left: 4px;
-  fill: var(--vp-c-text-3);
-  transition: fill 0.25s;
-}
-
-.vp-link :deep(i) {
-  font-style: normal;
-  font-weight: inherit;
-  line-height: normal;
 }
 </style>
diff --git a/theme/src/client/components/VPMenuLink.vue b/theme/src/client/components/VPMenuLink.vue
index d9dae409..ad6202af 100644
--- a/theme/src/client/components/VPMenuLink.vue
+++ b/theme/src/client/components/VPMenuLink.vue
@@ -24,7 +24,7 @@ const { page } = useData()
       }" :href="item.link"
     >
       <VPIcon v-if="item.icon" :name="item.icon" />
-      <i v-text="item.text" />
+      {{ item.text }}
     </VPLink>
   </div>
 </template>
diff --git a/theme/src/node/plugins/getPlugins.ts b/theme/src/node/plugins/getPlugins.ts
index e071c9e7..978de691 100644
--- a/theme/src/node/plugins/getPlugins.ts
+++ b/theme/src/node/plugins/getPlugins.ts
@@ -20,10 +20,7 @@ import { searchPlugin } from '@vuepress-plume/plugin-search'
 import { shikiPlugin } from '@vuepress-plume/plugin-shikiji'
 import { type MarkdownEnhancePluginOptions, mdEnhancePlugin } from 'vuepress-plugin-md-enhance'
 import { markdownPowerPlugin } from 'vuepress-plugin-md-power'
-import {
-  resolveDocsearchOptions,
-  resolveSearchOptions,
-} from '../config/index.js'
+import { resolveDocsearchOptions, resolveSearchOptions } from '../config/index.js'
 import { deleteAttrs } from '../utils/index.js'
 import { customContainerPlugins } from './containerPlugins.js'
 import { markdownTitlePlugin } from './markdown-title.js'