refactor: optimize code

packages/vuepress-theme-reco/src/client/clientSetup.ts

@@ -1,24 +1,28 @@
 import { computed, provide } from 'vue'
-import { usePageFrontmatter, useRoute, usePageData } from 'vuepress/client'
-import { useExtendPageData } from '@vuepress-reco/vuepress-plugin-page/lib/client/composable/index.js'
+import { useRoute } from 'vuepress/client'
 import {
-  resolveSeriesItems,
-  seriesItemsSymbol,
-  headersToCatalog,
+  usePageData,
   catalogSymbol,
+  headersToCatalog,
+  seriesItemsSymbol,
+  resolveSeriesItems,
   useThemeLocaleData,
-} from './composables/index.js'
+  usePageFrontmatter,
+} from '@composables/index.js'
+import { useExtendPageData } from '@vuepress-reco/vuepress-plugin-page/lib/client/composable/index.js'
 
 import type { RecoThemeNormalPageFrontmatter } from '../types'
 
 export function applyClientSetup() {
   // we need to access series items in multiple components
   // so we make it global computed
   const themeLocal = useThemeLocaleData()
-  const frontmatter = usePageFrontmatter<RecoThemeNormalPageFrontmatter>()
-  const route =  useRoute()
+  const frontmatter = usePageFrontmatter()
+  const route = useRoute()
   const { series } = useExtendPageData()
-  const seriesItems = computed(() => resolveSeriesItems(frontmatter.value, themeLocal.value, route, series))
+  const seriesItems = computed(() =>
+    resolveSeriesItems(frontmatter.value, themeLocal.value, route, series)
+  )
   provide(seriesItemsSymbol, seriesItems)
 
   const page = usePageData()

packages/vuepress-theme-reco/src/client/components/Common/hook.ts

@@ -1,7 +1,7 @@
 import { useRouter, useRoute } from 'vue-router'
 import { watch, ref, onMounted, onUnmounted, toRefs } from 'vue'
+import { useScrollDirection, useThemeLocaleData } from '@composables/index.js'
 import { useInitCopyBtn } from '@vuepress-reco/vuepress-plugin-code-copy/lib/client/composables/initCopyBtn.js'
-import { useScrollDirection, useThemeLocaleData } from '../../composables/index.js'
 
 export function useSeries(toggleSeries, toggleMobileMenus) {
   // close series after navigation

packages/vuepress-theme-reco/src/client/components/Common/index.vue

@@ -31,7 +31,6 @@
 
 <script lang="ts" setup>
 import { onMounted, computed } from 'vue'
-import { usePageFrontmatter } from 'vuepress/client'
 
 import { useSeriesItems } from '../../composables/index.js'
 import Navbar from '../Navbar.vue'
@@ -42,10 +41,10 @@ import Password from '../Password/index.vue'
 import NavbarDropdownNemu from '../NavbarDropdownNemu.vue'
 
 import { useSeries, usePassword, useInitCodeCopy } from './hook.js'
-import { useSeriesData, useMobileMenus } from '../../composables/index.js'
+import { useSeriesData, useMobileMenus, usePageFrontmatter } from '@composables/index.js'
 import { RecoThemeNormalPageFrontmatter } from '../../../types'
 
-const frontmatter = usePageFrontmatter<RecoThemeNormalPageFrontmatter>()
+const frontmatter = usePageFrontmatter()
 
 const {
   isOpenSeries,

packages/vuepress-theme-reco/src/client/components/FriendshipLink.vue

@@ -16,7 +16,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useThemeLocaleData } from '@vuepress/plugin-theme-data/client'
+import { useThemeLocaleData } from '@composables/index.js'
 import { MagicCard } from './global/index.js';
 
 const themeLocal = useThemeLocaleData()

packages/vuepress-theme-reco/src/client/components/Home/Banner.vue

@@ -16,21 +16,11 @@
 </template>
 
 <script setup lang="ts">
+import { RecoThemeHomePageFrontmatter } from "../../../types";
 import { computed } from "vue";
 import { usePageFrontmatter, withBase } from 'vuepress/client'
 
-const frontmatter = usePageFrontmatter<{
-  banner: {
-    tagline?: string
-    heroText?: string
-    buttons?: Array<Record<string, any>>
-    socialLinks?: Array<Record<string, any>>
-    heroImage?: string
-    heroImageStyle?: Record<string, string>
-    bgImage?: string
-    bgImageStyle?: Record<string, string>
-  }
-}>()
+const frontmatter = usePageFrontmatter<RecoThemeHomePageFrontmatter>()
 
 const heroImage = computed(() => {
   return frontmatter.value?.banner?.heroImage

packages/vuepress-theme-reco/src/client/components/Home/BannerBrand.vue

@@ -35,19 +35,10 @@
 import { computed } from "vue";
 import { usePageFrontmatter, withBase } from 'vuepress/client'
 import Link from '../Link.vue'
-import { createOneColor } from '../../utils/index.js'
+import { createOneColor } from '@utils/index.js'
+import { RecoThemeHomePageFrontmatter } from "../../../types";
 
-const frontmatter = usePageFrontmatter<{
-  bannerBrand: {
-    heroImage?: string
-    buttons?: Array<Record<string, any>>
-    socialLinks?: Array<Record<string, any>>
-    heroImageStyle?: Record<string, any>
-    bgImage?: string
-    bgImageStyle?: Record<string, any>
-    [key: string]: any
-  }
-}>()
+const frontmatter = usePageFrontmatter<RecoThemeHomePageFrontmatter>()
 
 const heroImage = computed(() => {
   return frontmatter.value?.bannerBrand?.heroImage

packages/vuepress-theme-reco/src/client/components/Home/Footer.vue

@@ -47,10 +47,10 @@
 
 <script setup>
 import { defineComponent, computed } from 'vue'
-import { useThemeLocaleData } from '@vuepress/plugin-theme-data/client'
-import { usePageFrontmatter, useRouteLocale } from 'vuepress/client'
-import { useComment } from '@vuepress-reco/vuepress-plugin-comments/lib/client/composables'
+import { useRouteLocale } from 'vuepress/client'
 import packageInfo from 'vuepress-theme-reco/package.json'
+import { useThemeLocaleData, usePageFrontmatter } from '@composables/index.js'
+import { useComment } from '@vuepress-reco/vuepress-plugin-comments/lib/client/composables'
 
 const routeLocale = useRouteLocale()
 const themeLocal = useThemeLocaleData()

packages/vuepress-theme-reco/src/client/components/Home/index.vue

@@ -17,6 +17,7 @@ import MdContent from './MdContent.vue'
 import Comment from './Comment.vue'
 import Footer from './Footer.vue'
 import Features from './Features.vue'
+import { RecoThemeHomePageFrontmatter } from '../../../types'
 
 export default defineComponent({
   name: 'HomeWrapper',
@@ -36,8 +37,5 @@ export default defineComponent({
 <script setup lang="ts">
 import { usePageFrontmatter } from 'vuepress/client'
 
-const frontmatter = usePageFrontmatter<{
-  modules?: [string],
-  [key: string]: unknown
-}>()
+const frontmatter = usePageFrontmatter<RecoThemeHomePageFrontmatter>()
 </script>

packages/vuepress-theme-reco/src/client/components/Link.vue

@@ -31,13 +31,15 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, toRefs } from 'vue'
-import type { PropType } from 'vue'
 import { useRoute } from 'vue-router'
-import { useSiteLocaleData, useRouteLocale } from 'vuepress/client'
+import { computed, defineComponent, toRefs } from 'vue'
 import { isLinkHttp, isLinkWithProtocol } from 'vuepress/shared'
+import { useSiteLocaleData, useRouteLocale } from 'vuepress/client'
+
+import { useThemeLocaleData } from '@composables/index.js'
+
+import type { PropType } from 'vue'
 import type { NavLink } from '../../types'
-import { useThemeLocaleData } from '../composables/index.js'
 
 export default defineComponent({
   name: 'Link',

packages/vuepress-theme-reco/src/client/components/Navbar.vue

@@ -18,14 +18,15 @@
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, computed, ref, onMounted } from 'vue'
-import { useRouteLocale, useSiteLocaleData, withBase } from 'vuepress/client'
-import ToggleDarkModeButton from './ToggleDarkModeButton.vue'
-import NavbarLinks from './NavbarLinks.vue'
-import { useThemeLocaleData, useSeriesItems } from '../composables/index.js'
+import { computed, ref, onMounted } from 'vue'
+import { useRouteLocale, useSiteLocaleData } from 'vuepress/client'
+
 import Xicons from './global/Xicons.vue'
 import SiteBrand from './SiteBrand.vue'
 import { throttle } from '../utils/index.js'
+import NavbarLinks from './NavbarLinks.vue'
+import ToggleDarkModeButton from './ToggleDarkModeButton.vue'
+import { useThemeLocaleData, useSeriesItems } from '@composables/index.js'
 
 const seriesItems = useSeriesItems()
 const siteLocale = useSiteLocaleData()

packages/vuepress-theme-reco/src/client/components/NavbarLinks.vue

@@ -1,31 +1,39 @@
 <template>
   <nav v-if="navbarLinks.length" class="navbar-links">
-    <div v-for="item in navbarLinks" :key="item.link" class="navbar-links__item">
+    <div v-for="(item, index) in navbarLinks" :key="index" class="navbar-links__item">
       <template v-if="item.children">
-        <DropdownLink :item="item" />
+        <DropdownLink :item="item as NavGroup<ResolvedNavbarItem>" />
       </template>
 
       <template v-else>
-        <Link :item="item" />
+        <Link :item="item as NavLink" />
       </template>
     </div>
   </nav>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
-import type { ComputedRef } from 'vue'
 import { useRouter } from 'vue-router'
-import { useRouteLocale, useSiteLocaleData } from 'vuepress/client'
 import { isString } from 'vuepress/shared'
-import type { NavbarItem, NavbarGroup, ResolvedNavbarItem } from '../../types'
-import { getNavLink } from '../composables/index.js'
-import { useThemeLocaleData } from '@vuepress/plugin-theme-data/client'
-import { useExtendPageData } from '@vuepress-reco/vuepress-plugin-page/lib/client/composable/index.js'
+import { computed, defineComponent } from 'vue'
 import { convertToPinyin } from '@vuepress-reco/shared'
-import { resolveRepoType } from '../utils/index.js'
-import DropdownLink from './DropdownLink.vue'
+import { useRouteLocale, useSiteLocaleData } from 'vuepress/client'
+import { getNavLink, useThemeLocaleData } from '@composables/index.js'
+import { useExtendPageData } from '@vuepress-reco/vuepress-plugin-page/lib/client/composable/index.js'
+
 import Link from './Link.vue'
+import DropdownLink from './DropdownLink.vue'
+import { resolveRepoType } from '../utils/index.js'
+
+import type { ComputedRef } from 'vue'
+import type {
+  NavLink,
+  NavGroup,
+  NavbarItem,
+  NavbarGroup,
+  ResolvedNavbarItem,
+  AutoAddCategoryToNavbarOptions,
+} from '../../types'
 
 /**
  * Get navbar config of select language dropdown
@@ -157,7 +165,7 @@ const useNavbarConfig = (): ComputedRef<ResolvedNavbarItem[]> => {
   const parseCategories = computed(() => {
     return [
       {
-        text: themeLocal.value.autoAddCategoryToNavbar?.categoryText || 'Categories',
+        text: (themeLocal.value.autoAddCategoryToNavbar as AutoAddCategoryToNavbarOptions)?.categoryText || 'Categories',
         children: Object.values(categorySummary?.categories?.items || {}).map((c) => ({
           // @ts-ignore
           text: c.label,
@@ -166,7 +174,7 @@ const useNavbarConfig = (): ComputedRef<ResolvedNavbarItem[]> => {
         }))
       },
       {
-        text: themeLocal.value.autoAddCategoryToNavbar?.tagText || 'Tags',
+        text: (themeLocal.value.autoAddCategoryToNavbar as AutoAddCategoryToNavbarOptions)?.tagText || 'Tags',
         children: Object.values(categorySummary?.tags?.items || {}).map(t => ({
           // @ts-ignore
           text: t.label,
@@ -182,7 +190,7 @@ const useNavbarConfig = (): ComputedRef<ResolvedNavbarItem[]> => {
 
     if (themeLocal.value.autoAddCategoryToNavbar) {
       navItems.splice(
-        themeLocal.value.autoAddCategoryToNavbar?.location || 0,
+        (themeLocal.value.autoAddCategoryToNavbar as AutoAddCategoryToNavbarOptions)?.location || 0,
         0,
         ...parseCategories.value
       )
@@ -205,7 +213,7 @@ export default defineComponent({
     const navbarSelectLanguage = useNavbarSelectLanguage()
     const navbarRepo = useNavbarRepo()
 
-    const navbarLinks = computed(() => [
+    const navbarLinks: ComputedRef<Array<ResolvedNavbarItem>> = computed(() => [
       ...navbarConfig.value,
       ...navbarSelectLanguage.value,
       ...navbarRepo.value,

packages/vuepress-theme-reco/src/client/components/Page/hook.ts

@@ -1,6 +1,6 @@
 import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
-import { usePageFrontmatter } from 'vuepress/client'
+import { usePageFrontmatter } from '@composables/index.js'
 
 let PAGE_PASSWORD_PASS = 'PAGE_PASSWORD_PASS'
 export function usePassword() {

packages/vuepress-theme-reco/src/client/components/PageMeta.vue

@@ -1,50 +1,38 @@
 <template>
   <footer class="page-meta">
     <div v-if="editNavLink" class="meta-item edit-link">
-      <Xicons
-        class="meta-item-label"
-        :icon="editNavLink.icon"
-        :text="editNavLink.text"
-        :link="editNavLink.link"
-        target="_blank"
-        icon-size="20"
-        text-size="14"
-      />
+      <Xicons class="meta-item-label" :icon="editNavLink.icon" :text="editNavLink.text" :link="editNavLink.link"
+        target="_blank" icon-size="20" text-size="14" />
     </div>
 
     <div v-if="lastUpdated" class="meta-item last-updated">
-      <Xicons
-        class="meta-item-label"
-        icon="Calendar"
-        :text="`${themeLocal.lastUpdatedText || 'Last Updated'} ${lastUpdated}`"
-        icon-size="20"
-        text-size="14"
-      />
+      <Xicons class="meta-item-label" icon="Calendar"
+        :text="`${themeLocal.lastUpdatedText || 'Last Updated'} ${lastUpdated}`" icon-size="20" text-size="14" />
     </div>
   </footer>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import type { ComputedRef } from 'vue'
 import {
   usePageData,
-  usePageFrontmatter,
   useSiteLocaleData,
 } from 'vuepress/client'
+import { useThemeLocaleData, usePageFrontmatter } from '@composables/index.js'
+
+import Link from './Link.vue'
+import { resolveEditLink } from '@utils/index.js'
+
+import type { ComputedRef } from 'vue'
 import type {
   RecoThemePageData,
-  RecoThemeNormalPageFrontmatter,
   NavLink as NavLinkType,
 } from '../../types'
-import { useThemeLocaleData } from '@vuepress/plugin-theme-data/client'
-import { resolveEditLink } from '../utils/index.js'
-import Link from './Link.vue'
 
 const useEditNavLink = (): ComputedRef<null | NavLinkType> => {
   const themeLocal = useThemeLocaleData()
   const page = usePageData<RecoThemePageData>()
-  const frontmatter = usePageFrontmatter<RecoThemeNormalPageFrontmatter>()
+  const frontmatter = usePageFrontmatter()
 
   return computed(() => {
     const showEditLink =
@@ -87,7 +75,7 @@ const useLastUpdated = (): ComputedRef<null | string> => {
   const siteLocale = useSiteLocaleData()
   const themeLocal = useThemeLocaleData()
   const page = usePageData<RecoThemePageData>()
-  const frontmatter = usePageFrontmatter<RecoThemeNormalPageFrontmatter>()
+  const frontmatter = usePageFrontmatter()
 
   return computed(() => {
     const showLastUpdated =

packages/vuepress-theme-reco/src/client/components/PageNav.vue

@@ -17,14 +17,13 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { usePageFrontmatter } from 'vuepress/client'
 import { isPlainObject, isString } from 'vuepress/shared'
 import type {
   RecoThemeNormalPageFrontmatter,
   NavLink as NavLinkType,
   ResolvedSeriesItem,
 } from '../../types'
-import { getNavLink, useSeriesItems } from '../composables/index.js'
+import { getNavLink, useSeriesItems, usePageFrontmatter } from '@composables/index.js'
 import Link from './Link.vue'
 
 /**
@@ -88,7 +87,7 @@ export default defineComponent({
   components: { Link },
 
   setup() {
-    const frontmatter = usePageFrontmatter<RecoThemeNormalPageFrontmatter>()
+    const frontmatter = usePageFrontmatter()
     const seriesItems = useSeriesItems()
     const route = useRoute()
     const router = useRouter()

packages/vuepress-theme-reco/src/client/components/PagePassword/hook.ts

@@ -1,6 +1,6 @@
 import { ref, watch, computed } from 'vue'
 import { md5 } from '@vuepress-reco/shared'
-import { usePageFrontmatter } from 'vuepress/client'
+import { usePageFrontmatter } from '@composables/index.js'
 
 export function usePageInfo() {
   const frontmatter = usePageFrontmatter()