chore: tweak

theme/src/client/components/AutoLink.vue

@@ -39,8 +39,10 @@ function linkTo(e: Event) {
 
 <template>
   <Component
-    :is="tag" class="auto-link" :class="{ link }" :href="link"
-    :target="target ?? (isExternal ? '_blank' : undefined)" :rel="rel ?? (isExternal ? 'noreferrer' : undefined)"
+    :is="tag" class="auto-link" :class="{ link }"
+    :href="link"
+    :target="target ?? (isExternal ? '_blank' : undefined)"
+    :rel="rel ?? (isExternal ? 'noreferrer' : undefined)"
     @click="linkTo($event)"
   >
     <slot />

theme/src/client/components/BackToTop.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { useElementSize, useWindowScroll, useWindowSize } from '@vueuse/core'
 import { computed, onMounted, ref, shallowRef, watch } from 'vue'
-import { usePageData } from 'vuepress/client'
-import type { PlumeThemePageData } from '../../shared/index.js'
+import { useData } from '../composables/data.js'
 
 const body = shallowRef<HTMLElement | null>()
 const { height: bodyHeight } = useElementSize(body)
@@ -11,7 +10,7 @@ onMounted(() => {
   body.value = document.body
 })
 
-const page = usePageData<PlumeThemePageData>()
+const { page } = useData()
 
 const { y } = useWindowScroll()
 const isScrolling = ref(false)

theme/src/client/components/EncryptForm.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useThemeLocaleData } from '../composables/index.js'
+import { useData } from '../composables/data.js'
 
 const props = defineProps<{
   compare: (password: string) => boolean
   info?: string
 }>()
 
-const theme = useThemeLocaleData()
+const { theme } = useData()
 
 const password = ref('')
 const errorCode = ref(0) // 0: no error, 1: wrong password

theme/src/client/components/EncryptGlobal.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useSiteLocaleData } from 'vuepress/client'
-import { useThemeLocaleData } from '../composables/index.js'
+import { useData } from '../composables/data.js'
 import { useGlobalEncrypt } from '../composables/encrypt.js'
 import VFooter from './VFooter.vue'
 import EncryptForm from './EncryptForm.vue'
 
-const theme = useThemeLocaleData()
-const siteData = useSiteLocaleData()
+const { theme, site } = useData()
 const { compareGlobal } = useGlobalEncrypt()
 
 const avatar = computed(() => theme.value.avatar)
-const title = computed(() => avatar.value?.name || siteData.value.title)
+const title = computed(() => avatar.value?.name || site.value.title)
 </script>
 
 <template>

theme/src/client/components/EncryptPage.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { usePageEncrypt } from '../composables/encrypt.js'
-import { useThemeLocaleData } from '../composables/index.js'
+import { useData } from '../composables/data.js'
 import EncryptForm from './EncryptForm.vue'
 
-const theme = useThemeLocaleData()
+const { theme } = useData()
 const { comparePage } = usePageEncrypt()
 </script>
 

theme/src/client/components/Friends.vue

@@ -1,14 +1,12 @@
 <script lang="ts" setup>
-import { usePageFrontmatter } from 'vuepress/client'
 import { computed } from 'vue'
-import type { PlumeThemeFriendsFrontmatter } from '../../shared/index.js'
-import { useEditNavLink } from '../composables/index.js'
+import { useData, useEditNavLink } from '../composables/index.js'
 import AutoLink from './AutoLink.vue'
 import FriendsItem from './FriendsItem.vue'
 import FriendsGroup from './FriendsGroup.vue'
 
-const matter = usePageFrontmatter<PlumeThemeFriendsFrontmatter>()
 const editNavLink = useEditNavLink()
+const { frontmatter: matter } = useData<'friends'>()
 
 const list = computed(() => matter.value.list || [])
 const groups = computed(() => matter.value.groups || [])

theme/src/client/components/Home/HomeTextImage.vue

@@ -72,7 +72,7 @@ const maxWidth = computed(() => {
   }
 }
 
-.content-image :deep(.plume-image) {
+.content-image :deep(.vp-image) {
   width: 100%;
   max-width: 128px;
   margin: 0 auto;
@@ -114,7 +114,7 @@ const maxWidth = computed(() => {
 }
 
 @media (min-width: 768px) {
-  .content-image :deep(.plume-image) {
+  .content-image :deep(.vp-image) {
     max-width: 180px;
     margin: 0 48px;
   }
@@ -129,7 +129,7 @@ const maxWidth = computed(() => {
     gap: 48px;
   }
 
-  .content-image :deep(.plume-image) {
+  .content-image :deep(.vp-image) {
     max-width: 220px;
     margin: 0 96px;
   }

theme/src/client/components/PageFooter.vue

@@ -2,14 +2,14 @@
 import { computed } from 'vue'
 import {
   useContributors,
+  useData,
   useEditNavLink,
   useLastUpdated,
   usePageNav,
-  useThemeLocaleData,
 } from '../composables/index.js'
 import AutoLink from './AutoLink.vue'
 
-const themeLocale = useThemeLocaleData()
+const { theme } = useData()
 const editNavLink = useEditNavLink()
 const { datetime: lastUpdated, isoDatetime, lastUpdatedText } = useLastUpdated()
 const contributors = useContributors()
@@ -42,7 +42,7 @@ const showFooter = computed(() => {
 
     <div v-if="contributors && contributors.length" class="contributors">
       <span class="contributors-label">
-        {{ themeLocale.contributorsText || 'Contributors' }}:
+        {{ theme.contributorsText || 'Contributors' }}:
       </span>
       <span class="contributors-info">
         <template v-for="(contributor, index) in contributors" :key="contributor">
@@ -57,13 +57,13 @@ const showFooter = computed(() => {
     <nav v-if="prev?.link || next?.link" class="prev-next">
       <div class="pager">
         <AutoLink v-if="prev?.link" class="pager-link prev" :href="prev.link">
-          <span class="desc" v-html="themeLocale.prevPageLabel || 'Previous page'" />
+          <span class="desc" v-html="theme.prevPageLabel || 'Previous page'" />
           <span class="title" v-html="prev.text" />
         </AutoLink>
       </div>
       <div class="pager">
         <AutoLink v-if="next?.link" class="pager-link next" :href="next.link">
-          <span class="desc" v-html="themeLocale.nextPageLabel || 'Next page'" />
+          <span class="desc" v-html="theme.nextPageLabel || 'Next page'" />
           <span class="title" v-html="next.text" />
         </AutoLink>
       </div>

theme/src/client/components/VButton.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRouter } from 'vuepress/client'
-import { EXTERNAL_URL_RE } from '../utils/index.js'
+import { isLinkExternal } from 'vuepress/shared'
 
 interface Props {
   tag?: string
@@ -20,7 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
 const router = useRouter()
 
 const isExternal = computed(
-  () => props.href && EXTERNAL_URL_RE.test(props.href),
+  () => props.href && isLinkExternal(props.href),
 )
 
 const component = computed(() => {

theme/src/client/components/VFooter.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useCssVar } from '@vueuse/core'
 import { onMounted, ref } from 'vue'
-import { useSidebar, useThemeLocaleData } from '../composables/index.js'
+import { useData, useSidebar } from '../composables/index.js'
 import { inBrowser } from '../utils/index.js'
 
-const theme = useThemeLocaleData()
+const { theme } = useData()
 const { hasSidebar } = useSidebar()
 
 const footerHeight = useCssVar('--vp-footer-height', inBrowser ? document.body : null)

theme/src/client/components/VImage.vue

@@ -1,11 +1,9 @@
 <script lang="ts" setup>
 import { withBase } from 'vuepress/client'
+import type { ThemeImage } from '../../shared/index.js'
 
 defineProps<{
-  image:
-    | string
-    | { src: string, alt?: string }
-    | { dark: string, light: string, alt?: string }
+  image: ThemeImage
   alt?: string
 }>()
 </script>
@@ -20,7 +18,7 @@ export default {
   <template v-if="image">
     <img
       v-if="typeof image === 'string' || 'src' in image"
-      class="plume-image"
+      class="vp-image"
       v-bind="typeof image === 'string' ? $attrs : { ...image, ...$attrs }"
       :src="withBase(typeof image === 'string' ? image : image.src)"
       :alt="alt ?? (typeof image === 'string' ? '' : image.alt || '')"
@@ -43,11 +41,11 @@ export default {
 </template>
 
 <style scoped>
-html:not(.dark) .plume-image.dark {
+html:not(.dark) .vp-image.dark {
   display: none;
 }
 
-.dark .plume-image.light {
+.dark .vp-image.light {
   display: none;
 }
 </style>

theme/src/client/composables/data.ts

@@ -3,6 +3,7 @@ import type { ThemeLocaleDataRef } from '@vuepress/plugin-theme-data/client'
 import {
   usePageData,
   usePageFrontmatter,
+  usePageLang,
   useSiteLocaleData,
 } from 'vuepress/client'
 import type {
@@ -11,6 +12,7 @@ import type {
   SiteLocaleDataRef,
 } from 'vuepress/client'
 import type {
+  PlumeThemeFriendsFrontmatter,
   PlumeThemeLocaleData,
   PlumeThemePageData,
   PlumeThemePageFrontmatter,
@@ -20,16 +22,19 @@ import { useThemeLocaleData } from './themeData.js'
 import { hashRef } from './hash.js'
 import { useDarkMode } from './darkMode.js'
 
-type FrontmatterType = 'post' | 'page'
+type FrontmatterType = 'post' | 'friends' | 'page'
 
 type Frontmatter<T extends FrontmatterType = 'page'> = T extends 'post'
   ? PlumeThemePostFrontmatter
-  : PlumeThemePageFrontmatter
+  : T extends 'friends'
+    ? PlumeThemeFriendsFrontmatter
+    : PlumeThemePageFrontmatter
 
 export interface Data<T extends FrontmatterType = 'page'> {
   theme: ThemeLocaleDataRef<PlumeThemeLocaleData>
   page: PageDataRef<PlumeThemePageData>
   frontmatter: PageFrontmatterRef<Frontmatter<T>>
+  lang: Ref<string>
   hash: Ref<string>
   site: SiteLocaleDataRef
   isDark: Ref<boolean>
@@ -41,6 +46,7 @@ export function useData<T extends FrontmatterType = 'page'>(): Data<T> {
   const frontmatter = usePageFrontmatter<Frontmatter<T>>()
   const site = useSiteLocaleData()
   const isDark = useDarkMode()
+  const lang = usePageLang()
 
-  return { theme, page, frontmatter, hash: hashRef, site, isDark }
+  return { theme, page, frontmatter, lang, hash: hashRef, site, isDark }
 }

theme/src/client/composables/langs.ts

@@ -1,14 +1,14 @@
-import { resolveRoute, usePageData, useRouteLocale, withBase } from 'vuepress/client'
+import { resolveRoute, useRouteLocale, withBase } from 'vuepress/client'
 import { computed } from 'vue'
-import type { PlumeThemePageData } from '../../shared/index.js'
 import { useThemeData } from './themeData.js'
+import { useData } from './data.js'
 import { getSidebarFirstLink, getSidebarList, normalizePath, useNotesData } from './sidebar.js'
 
 export function useLangs({
   removeCurrent = true,
 } = {}) {
-  const page = usePageData<PlumeThemePageData>()
   const theme = useThemeData()
+  const { page } = useData()
   const routeLocale = useRouteLocale()
   const notesData = useNotesData()
 

theme/src/client/layouts/Layout.vue

@@ -16,10 +16,7 @@ import VFooter from '../components/VFooter.vue'
 import BackToTop from '../components/BackToTop.vue'
 import EncryptGlobal from '../components/EncryptGlobal.vue'
 import TransitionFadeSlideY from '../components/TransitionFadeSlideY.vue'
-import {
-  useCloseSidebarOnEscape,
-  useSidebar,
-} from '../composables/index.js'
+import { useCloseSidebarOnEscape, useSidebar } from '../composables/index.js'
 import { useGlobalEncrypt, usePageEncrypt } from '../composables/encrypt.js'
 
 const page = usePageData<PlumeThemePageData>()