perf(theme): improve <VPLink> (#239)

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>

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>

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">

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>

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>

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>

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>

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'