From fbe57418f9a12d209b1c3f527834eafcf02707e0 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sun, 16 Jun 2024 15:41:27 +0800
Subject: [PATCH] chore: tweak

---
 theme/src/client/components/VPDocFooter.vue   |  44 ++--
 theme/src/client/components/VPFriends.vue     |  10 +-
 theme/src/client/components/VPLink.vue        |   4 +-
 theme/src/client/composables/contributors.ts  |  20 ++
 theme/src/client/composables/edit-link.ts     |  45 ++++
 theme/src/client/composables/index.ts         |  17 +-
 .../src/client/composables/latest-updated.ts  |  42 ++++
 theme/src/client/composables/page.ts          | 217 ------------------
 theme/src/client/composables/prev-next.ts     | 118 ++++++++++
 theme/src/client/composables/watermark.ts     |   5 +-
 10 files changed, 273 insertions(+), 249 deletions(-)
 create mode 100644 theme/src/client/composables/contributors.ts
 create mode 100644 theme/src/client/composables/edit-link.ts
 create mode 100644 theme/src/client/composables/latest-updated.ts
 delete mode 100644 theme/src/client/composables/page.ts
 create mode 100644 theme/src/client/composables/prev-next.ts

diff --git a/theme/src/client/components/VPDocFooter.vue b/theme/src/client/components/VPDocFooter.vue
index 37ad0782..7b5f4431 100644
--- a/theme/src/client/components/VPDocFooter.vue
+++ b/theme/src/client/components/VPDocFooter.vue
@@ -1,22 +1,34 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import VPLink from '@theme/VPLink.vue'
-import {
-  useContributors,
-  useEditNavLink,
-  useLastUpdated,
-  usePageNav,
-} from '../composables/page.js'
+import { useContributors } from '../composables/contributors.js'
+import { useEditLink } from '../composables/edit-link.js'
+import { useLastUpdated } from '../composables/latest-updated.js'
+import { usePrevNext } from '../composables/prev-next.js'
 import { useData } from '../composables/data.js'
 
-const { theme } = useData()
-const editNavLink = useEditNavLink()
+const { theme, frontmatter } = useData()
+const editLink = useEditLink()
 const { datetime: lastUpdated, isoDatetime, lastUpdatedText } = useLastUpdated()
 const contributors = useContributors()
-const { prev, next } = usePageNav()
+const { prev, next } = usePrevNext()
+
+const hasEditLink = computed(() =>
+  Boolean(theme.value.editLink && frontmatter.value.editLink !== false && editLink.value),
+)
+const hasLastUpdated = computed(() =>
+  Boolean(theme.value.lastUpdated && frontmatter.value.lastUpdated !== false && lastUpdated.value),
+)
+const hasContributors = computed(() =>
+  Boolean(theme.value.contributors && frontmatter.value.contributors !== false && contributors.value?.length),
+)
 
 const showFooter = computed(() => {
-  return editNavLink.value || lastUpdated.value || contributors.value || prev.value || next.value
+  return hasEditLink.value
+    || hasLastUpdated.value
+    || hasContributors.value
+    || prev.value?.link
+    || next.value?.link
 })
 </script>
 
@@ -24,15 +36,15 @@ const showFooter = computed(() => {
   <footer v-if="showFooter" class="vp-doc-footer">
     <slot name="doc-footer-before" />
 
-    <div v-if="editNavLink || lastUpdated" class="edit-info">
-      <div v-if="editNavLink" class="edit-link">
-        <VPLink class="edit-link-button" :href="editNavLink.link" :no-icon="true">
+    <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">
           <span class="vpi-square-pen edit-link-icon" aria-label="edit icon" />
-          {{ editNavLink.text }}
+          {{ editLink.text }}
         </VPLink>
       </div>
 
-      <div v-if="lastUpdated" class="last-updated">
+      <div v-if="hasLastUpdated" class="last-updated">
         <p class="last-updated-text">
           {{ lastUpdatedText }}:
           <time :datetime="isoDatetime" class="last-updated-time">
@@ -42,7 +54,7 @@ const showFooter = computed(() => {
       </div>
     </div>
 
-    <div v-if="contributors && contributors.length" class="contributors">
+    <div v-if="hasContributors && contributors?.length" class="contributors">
       <span class="contributors-label">
         {{ theme.contributorsText || 'Contributors' }}:
       </span>
diff --git a/theme/src/client/components/VPFriends.vue b/theme/src/client/components/VPFriends.vue
index 515c2b3d..59976ca6 100644
--- a/theme/src/client/components/VPFriends.vue
+++ b/theme/src/client/components/VPFriends.vue
@@ -3,10 +3,10 @@ import { computed } from 'vue'
 import VPLink from '@theme/VPLink.vue'
 import VPFriendsItem from '@theme/VPFriendsItem.vue'
 import VPFriendsGroup from '@theme/VPFriendsGroup.vue'
-import { useEditNavLink } from '../composables/page.js'
+import { useEditLink } from '../composables/edit-link.js'
 import { useData } from '../composables/data.js'
 
-const editNavLink = useEditNavLink()
+const editLink = useEditLink()
 const { frontmatter: matter } = useData<'friends'>()
 
 const list = computed(() => matter.value.list || [])
@@ -31,14 +31,14 @@ const groups = computed(() => matter.value.groups || [])
 
     <VPFriendsGroup v-for="(group, index) in groups" :key="index" :group="group" />
 
-    <div v-if="editNavLink" class="edit-link">
+    <div v-if="editLink" class="edit-link">
       <VPLink
         class="edit-link-button"
-        :href="editNavLink.link"
+        :href="editLink.link"
         :no-icon="true"
       >
         <span class="vpi-square-pen edit-link-icon" aria-label="edit icon" />
-        {{ editNavLink.text }}
+        {{ editLink.text }}
       </VPLink>
     </div>
   </div>
diff --git a/theme/src/client/components/VPLink.vue b/theme/src/client/components/VPLink.vue
index 7be24b6e..a1af5403 100644
--- a/theme/src/client/components/VPLink.vue
+++ b/theme/src/client/components/VPLink.vue
@@ -11,14 +11,12 @@ const props = defineProps<{
   rel?: string
 }>()
 
-declare const __VUEPRESS_BASE__: string
-
 const router = useRouter()
 const route = useRoute()
 
 const tag = computed(() => props.tag ?? (props.href ? 'a' : 'span'))
 const isExternal = computed(
-  () => (props.href && isLinkExternal(props.href, __VUEPRESS_BASE__)) || props.target === '_blank',
+  () => (props.href && isLinkExternal(props.href)) || props.target === '_blank',
 )
 const link = computed(() => {
   if (!props.href)
diff --git a/theme/src/client/composables/contributors.ts b/theme/src/client/composables/contributors.ts
new file mode 100644
index 00000000..7a8c98e7
--- /dev/null
+++ b/theme/src/client/composables/contributors.ts
@@ -0,0 +1,20 @@
+import { computed } from 'vue'
+import type { ComputedRef } from 'vue'
+import type { PlumeThemePageData } from '../../shared/index.js'
+import { useData } from '../composables/data.js'
+
+export function useContributors(): ComputedRef<
+  null | Required<PlumeThemePageData['git']>['contributors']
+> {
+  const { theme, page, frontmatter } = useData()
+
+  return computed(() => {
+    const showContributors
+      = frontmatter.value.contributors ?? theme.value.contributors ?? true
+
+    if (!showContributors)
+      return null
+
+    return page.value.git?.contributors ?? null
+  })
+}
diff --git a/theme/src/client/composables/edit-link.ts b/theme/src/client/composables/edit-link.ts
new file mode 100644
index 00000000..d9a8cc22
--- /dev/null
+++ b/theme/src/client/composables/edit-link.ts
@@ -0,0 +1,45 @@
+import { computed } from 'vue'
+import type { ComputedRef } from 'vue'
+import type {
+  NavItemWithLink,
+} from '../../shared/index.js'
+import { useData } from '../composables/data.js'
+import { resolveEditLink } from '../utils/index.js'
+
+export function useEditLink(): ComputedRef<null | NavItemWithLink> {
+  const { theme, page, frontmatter } = useData()
+
+  return computed(() => {
+    const showEditLink
+      = frontmatter.value.editLink ?? theme.value.editLink ?? true
+    if (!showEditLink)
+      return null
+
+    const {
+      docsRepo,
+      docsBranch = 'main',
+      docsDir = '',
+      editLinkText,
+    } = theme.value
+
+    if (!docsRepo)
+      return null
+
+    const editLink = resolveEditLink({
+      docsRepo,
+      docsBranch,
+      docsDir,
+      filePathRelative: page.value.filePathRelative,
+      editLinkPattern:
+        frontmatter.value.editLinkPattern ?? theme.value.editLinkPattern,
+    })
+
+    if (!editLink)
+      return null
+
+    return {
+      text: editLinkText ?? 'Edit this page',
+      link: editLink,
+    }
+  })
+}
diff --git a/theme/src/client/composables/index.ts b/theme/src/client/composables/index.ts
index f52d62f4..53608071 100644
--- a/theme/src/client/composables/index.ts
+++ b/theme/src/client/composables/index.ts
@@ -1,13 +1,20 @@
-export * from './dark-mode.js'
-export * from './scroll-promise.js'
 export * from './theme-data.js'
+export * from './dark-mode.js'
+export * from './data.js'
+export * from './scroll-promise.js'
+
 export * from './sidebar.js'
 export * from './aside.js'
-export * from './page.js'
+export * from './outline.js'
+
+export * from './prev-next.js'
+export * from './edit-link.js'
+export * from './latest-updated.js'
+export * from './contributors.js'
+
 export * from './blog.js'
 export * from './tag-colors.js'
+
 export * from './locale.js'
 export * from './route-query.js'
 export * from './watermark.js'
-export * from './data.js'
-export * from './outline.js'
diff --git a/theme/src/client/composables/latest-updated.ts b/theme/src/client/composables/latest-updated.ts
new file mode 100644
index 00000000..38affb90
--- /dev/null
+++ b/theme/src/client/composables/latest-updated.ts
@@ -0,0 +1,42 @@
+import { usePageLang } from 'vuepress/client'
+import { computed, onMounted, ref, watchEffect } from 'vue'
+import { useData } from '../composables/data.js'
+
+export function useLastUpdated() {
+  const { theme, page, frontmatter } = useData()
+  const lang = usePageLang()
+
+  const date = computed(() => page.value.git?.updatedTime ? new Date(page.value.git.updatedTime) : null)
+  const isoDatetime = computed(() => date.value?.toISOString())
+
+  const datetime = ref('')
+
+  const lastUpdatedText = computed(() => {
+    if (theme.value.lastUpdated === false)
+      return
+    return theme.value.lastUpdated?.text || theme.value.lastUpdatedText || 'Last updated'
+  })
+
+  onMounted(() => {
+    watchEffect(() => {
+      if (frontmatter.value.lastUpdated === false || theme.value.lastUpdated === false)
+        return
+
+      datetime.value = date.value
+        ? new Intl.DateTimeFormat(
+          theme.value.lastUpdated?.formatOptions?.forceLocale ? lang.value : undefined,
+          theme.value.lastUpdated?.formatOptions ?? {
+            dateStyle: 'short',
+            timeStyle: 'short',
+          },
+        ).format(date.value)
+        : ''
+    })
+  })
+
+  return {
+    datetime,
+    isoDatetime,
+    lastUpdatedText,
+  }
+}
diff --git a/theme/src/client/composables/page.ts b/theme/src/client/composables/page.ts
deleted file mode 100644
index f4b5c51e..00000000
--- a/theme/src/client/composables/page.ts
+++ /dev/null
@@ -1,217 +0,0 @@
-import { resolveRouteFullPath, usePageData, usePageFrontmatter, usePageLang, useRoute } from 'vuepress/client'
-import { isPlainObject, isString } from 'vuepress/shared'
-import { useBlogPostData } from '@vuepress-plume/plugin-blog-data/client'
-import type { NotesSidebarItem } from '@vuepress-plume/plugin-notes-data'
-import { computed, onMounted, ref, watchEffect } from 'vue'
-import type { ComputedRef, Ref } from 'vue'
-import type {
-  NavItemWithLink,
-  PlumeThemeBlogPostItem,
-  PlumeThemePageData,
-  PlumeThemePageFrontmatter,
-} from '../../shared/index.js'
-import { useSidebar, useThemeLocaleData } from '../composables/index.js'
-import { useData } from '../composables/data.js'
-import { resolveEditLink, resolveNavLink } from '../utils/index.js'
-
-export function useEditNavLink(): ComputedRef<null | NavItemWithLink> {
-  const { theme, page, frontmatter } = useData()
-
-  return computed(() => {
-    const showEditLink
-      = frontmatter.value.editLink ?? theme.value.editLink ?? true
-    if (!showEditLink)
-      return null
-
-    const {
-      docsRepo,
-      docsBranch = 'main',
-      docsDir = '',
-      editLinkText,
-    } = theme.value
-
-    if (!docsRepo)
-      return null
-
-    const editLink = resolveEditLink({
-      docsRepo,
-      docsBranch,
-      docsDir,
-      filePathRelative: page.value.filePathRelative,
-      editLinkPattern:
-        frontmatter.value.editLinkPattern ?? theme.value.editLinkPattern,
-    })
-
-    if (!editLink)
-      return null
-
-    return {
-      text: editLinkText ?? 'Edit this page',
-      link: editLink,
-    }
-  })
-}
-
-export function useLastUpdated() {
-  const { theme, page, frontmatter } = useData()
-  const lang = usePageLang()
-
-  const date = computed(() => page.value.git?.updatedTime ? new Date(page.value.git.updatedTime) : null)
-  const isoDatetime = computed(() => date.value?.toISOString())
-
-  const datetime = ref('')
-
-  const lastUpdatedText = computed(() => {
-    if (theme.value.lastUpdated === false)
-      return
-    return theme.value.lastUpdated?.text || theme.value.lastUpdatedText || 'Last updated'
-  })
-
-  onMounted(() => {
-    watchEffect(() => {
-      if (frontmatter.value.lastUpdated === false || theme.value.lastUpdated === false)
-        return
-
-      datetime.value = date.value
-        ? new Intl.DateTimeFormat(
-          theme.value.lastUpdated?.formatOptions?.forceLocale ? lang.value : undefined,
-          theme.value.lastUpdated?.formatOptions ?? {
-            dateStyle: 'short',
-            timeStyle: 'short',
-          },
-        ).format(date.value)
-        : ''
-    })
-  })
-
-  return {
-    datetime,
-    isoDatetime,
-    lastUpdatedText,
-  }
-}
-
-export function useContributors(): ComputedRef<
-  null | Required<PlumeThemePageData['git']>['contributors']
-> {
-  const { theme, page, frontmatter } = useData()
-
-  return computed(() => {
-    const showContributors
-      = frontmatter.value.contributors ?? theme.value.contributors ?? true
-
-    if (!showContributors)
-      return null
-
-    return page.value.git?.contributors ?? null
-  })
-}
-
-/**
- * Resolve `prev` or `next` config from frontmatter
- */
-function resolveFromFrontmatterConfig(conf: unknown): null | false | NavItemWithLink {
-  if (conf === false)
-    return null
-
-  if (isString(conf))
-    return resolveNavLink(conf)
-
-  if (isPlainObject<NavItemWithLink>(conf))
-    return conf
-
-  return false
-}
-
-function flatSidebar(sidebar: NotesSidebarItem[], res: NavItemWithLink[] = []): NavItemWithLink[] {
-  for (const item of sidebar) {
-    if (item.link)
-      res.push({ link: item.link, text: item.text || item.dir || '' })
-
-    if (Array.isArray(item.items) && item.items.length)
-      flatSidebar(item.items as NotesSidebarItem[], res)
-  }
-
-  return res
-}
-
-/**
- * Resolve `prev` or `next` config from sidebar items
- */
-function resolveFromSidebarItems(sidebarItems: NavItemWithLink[], currentPath: string, offset: number): null | NavItemWithLink {
-  const index = sidebarItems.findIndex(item => resolveRouteFullPath(item.link) === currentPath)
-  if (index !== -1) {
-    const targetItem = sidebarItems[index + offset]
-    if (targetItem?.link) {
-      return {
-        link: targetItem.link,
-        text: targetItem.text,
-      }
-    }
-  }
-
-  return null
-}
-
-function resolveFromBlogPostData(postList: PlumeThemeBlogPostItem[], currentPath: string, offset: number): null | NavItemWithLink {
-  const index = postList.findIndex(item => item.path === currentPath)
-  if (index !== -1) {
-    const targetItem = postList[index + offset]
-    if (!targetItem?.path)
-      return null
-
-    return {
-      link: targetItem.path,
-      text: targetItem.title,
-    }
-  }
-  return null
-}
-
-export function usePageNav() {
-  const route = useRoute()
-  const page = usePageData<PlumeThemePageData>()
-  const frontmatter = usePageFrontmatter<PlumeThemePageFrontmatter>()
-  const { sidebar } = useSidebar()
-  const postList = useBlogPostData() as unknown as Ref<PlumeThemeBlogPostItem[]>
-  const locale = usePageLang()
-
-  const prevNavList = computed(() => {
-    const prevConfig = resolveFromFrontmatterConfig(frontmatter.value.prev)
-    if (prevConfig !== false)
-      return prevConfig
-
-    if (page.value.isBlogPost) {
-      return resolveFromBlogPostData(
-        postList.value.filter(item => item.lang === locale.value),
-        route.path,
-        -1,
-      )
-    }
-    else {
-      return resolveFromSidebarItems(flatSidebar(sidebar.value), route.path, -1)
-    }
-  })
-
-  const nextNavList = computed(() => {
-    const nextConfig = resolveFromFrontmatterConfig(frontmatter.value.next)
-    if (nextConfig !== false)
-      return nextConfig
-
-    if (page.value.isBlogPost) {
-      return resolveFromBlogPostData(
-        postList.value.filter(item => item.lang === locale.value),
-        route.path,
-        1,
-      )
-    }
-    else {
-      return resolveFromSidebarItems(flatSidebar(sidebar.value), route.path, 1)
-    }
-  })
-
-  return {
-    prev: prevNavList,
-    next: nextNavList,
-  }
-}
diff --git a/theme/src/client/composables/prev-next.ts b/theme/src/client/composables/prev-next.ts
new file mode 100644
index 00000000..5b43f3e3
--- /dev/null
+++ b/theme/src/client/composables/prev-next.ts
@@ -0,0 +1,118 @@
+import { resolveRouteFullPath, usePageLang, useRoute } from 'vuepress/client'
+import { isPlainObject, isString } from 'vuepress/shared'
+import { useBlogPostData } from '@vuepress-plume/plugin-blog-data/client'
+import type { NotesSidebarItem } from '@vuepress-plume/plugin-notes-data'
+import { computed } from 'vue'
+import type { Ref } from 'vue'
+import type { NavItemWithLink, PlumeThemeBlogPostItem } from '../../shared/index.js'
+import { resolveNavLink } from '../utils/index.js'
+import { useSidebar } from './sidebar.js'
+import { useData } from './data.js'
+
+export function usePrevNext() {
+  const route = useRoute()
+  const { page, frontmatter } = useData()
+  const { sidebar } = useSidebar()
+  const postList = useBlogPostData() as unknown as Ref<PlumeThemeBlogPostItem[]>
+  const locale = usePageLang()
+
+  const prevNavList = computed(() => {
+    const prevConfig = resolveFromFrontmatterConfig(frontmatter.value.prev)
+    if (prevConfig !== false)
+      return prevConfig
+
+    if (page.value.isBlogPost) {
+      return resolveFromBlogPostData(
+        postList.value.filter(item => item.lang === locale.value),
+        route.path,
+        -1,
+      )
+    }
+    else {
+      return resolveFromSidebarItems(flatSidebar(sidebar.value), route.path, -1)
+    }
+  })
+
+  const nextNavList = computed(() => {
+    const nextConfig = resolveFromFrontmatterConfig(frontmatter.value.next)
+    if (nextConfig !== false)
+      return nextConfig
+
+    if (page.value.isBlogPost) {
+      return resolveFromBlogPostData(
+        postList.value.filter(item => item.lang === locale.value),
+        route.path,
+        1,
+      )
+    }
+    else {
+      return resolveFromSidebarItems(flatSidebar(sidebar.value), route.path, 1)
+    }
+  })
+
+  return {
+    prev: prevNavList,
+    next: nextNavList,
+  }
+}
+
+/**
+ * Resolve `prev` or `next` config from frontmatter
+ */
+function resolveFromFrontmatterConfig(conf: unknown): null | false | NavItemWithLink {
+  if (conf === false)
+    return null
+
+  if (isString(conf))
+    return resolveNavLink(conf)
+
+  if (isPlainObject<NavItemWithLink>(conf))
+    return conf
+
+  return false
+}
+
+function flatSidebar(sidebar: NotesSidebarItem[], res: NavItemWithLink[] = []): NavItemWithLink[] {
+  for (const item of sidebar) {
+    if (item.link)
+      res.push({ link: item.link, text: item.text || item.dir || '' })
+
+    if (Array.isArray(item.items) && item.items.length)
+      flatSidebar(item.items as NotesSidebarItem[], res)
+  }
+
+  return res
+}
+
+/**
+ * Resolve `prev` or `next` config from sidebar items
+ */
+function resolveFromSidebarItems(sidebarItems: NavItemWithLink[], currentPath: string, offset: number): null | NavItemWithLink {
+  const index = sidebarItems.findIndex(item => resolveRouteFullPath(item.link) === currentPath)
+  if (index !== -1) {
+    const targetItem = sidebarItems[index + offset]
+    if (targetItem?.link) {
+      return {
+        link: targetItem.link,
+        text: targetItem.text,
+      }
+    }
+  }
+
+  return null
+}
+
+function resolveFromBlogPostData(postList: PlumeThemeBlogPostItem[], currentPath: string, offset: number): null | NavItemWithLink {
+  const index = postList.findIndex(item => item.path === currentPath)
+  if (index !== -1) {
+    const targetItem = postList[index + offset]
+    if (!targetItem?.path)
+      return null
+
+    return {
+      link: targetItem.path,
+      text: targetItem.title,
+    }
+  }
+  return null
+}
diff --git a/theme/src/client/composables/watermark.ts b/theme/src/client/composables/watermark.ts
index 3011893f..83929937 100644
--- a/theme/src/client/composables/watermark.ts
+++ b/theme/src/client/composables/watermark.ts
@@ -1,14 +1,13 @@
 import { defineWatermarkConfig } from '@vuepress/plugin-watermark/client'
 import { computed } from 'vue'
-import { usePageFrontmatter } from 'vuepress/client'
-import type { PlumeThemePageFrontmatter } from '../../shared/index.js'
+import { useData } from './data.js'
 
 declare const __PLUME_WM_FP__: boolean
 
 const FP = __PLUME_WM_FP__
 
 export function setupWatermark(): void {
-  const frontmatter = usePageFrontmatter<PlumeThemePageFrontmatter>()
+  const { frontmatter } = useData()
 
   defineWatermarkConfig(computed(() => {
     const disableFullPage = typeof frontmatter.value.watermark === 'object' && frontmatter.value.watermark.fullPage === false