From f792bf6cc76410ac7ac67eaf473d52aa0a0a3598 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Mon, 24 Jun 2024 00:09:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(theme):=20=E6=96=B0=E5=A2=9E=20`useLink`?=
 =?UTF-8?q?=20=E7=BB=84=E5=90=88=E5=BC=8F=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 theme/src/client/components/VPButton.vue | 19 +++----------
 theme/src/client/components/VPLink.vue   | 19 ++++---------
 theme/src/client/composables/index.ts    |  1 +
 theme/src/client/composables/link.ts     | 36 ++++++++++++++++++++++++
 4 files changed, 46 insertions(+), 29 deletions(-)
 create mode 100644 theme/src/client/composables/link.ts

diff --git a/theme/src/client/components/VPButton.vue b/theme/src/client/components/VPButton.vue
index 545829fb..34d89d98 100644
--- a/theme/src/client/components/VPButton.vue
+++ b/theme/src/client/components/VPButton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { resolveRouteFullPath, useRouter, withBase } from 'vuepress/client'
-import { isLinkExternal } from 'vuepress/shared'
+import { computed, toRef } from 'vue'
+import { useRouter, withBase } from 'vuepress/client'
+import { useLink } from '../composables/link.js'
 
 interface Props {
   tag?: string
@@ -20,24 +20,13 @@ const props = withDefaults(defineProps<Props>(), {
   target: undefined,
   rel: undefined,
 })
-
 const router = useRouter()
 
-const isExternal = computed(
-  () => props.href && isLinkExternal(props.href),
-)
-
 const component = computed(() => {
   return props.tag || props.href ? 'a' : 'button'
 })
 
-const link = computed(() => {
-  if (!props.href)
-    return undefined
-  if (isExternal.value)
-    return props.href
-  return resolveRouteFullPath(props.href)
-})
+const { link, isExternal } = useLink(toRef(props, 'href'), toRef(props, 'target'))
 
 function linkTo(e: Event) {
   if (!isExternal.value) {
diff --git a/theme/src/client/components/VPLink.vue b/theme/src/client/components/VPLink.vue
index a1af5403..6b3dfc59 100644
--- a/theme/src/client/components/VPLink.vue
+++ b/theme/src/client/components/VPLink.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
-import { resolveRouteFullPath, useRoute, useRouter, withBase } from 'vuepress/client'
-import { isLinkExternal } from '@vuepress/helper/client'
+import { computed, toRef } from 'vue'
+import { useRouter, withBase } from 'vuepress/client'
+import { useLink } from '../composables/link.js'
 
 const props = defineProps<{
   tag?: string
@@ -12,19 +12,10 @@ const props = defineProps<{
 }>()
 
 const router = useRouter()
-const route = useRoute()
 
 const tag = computed(() => props.tag ?? (props.href ? 'a' : 'span'))
-const isExternal = computed(
-  () => (props.href && isLinkExternal(props.href)) || props.target === '_blank',
-)
-const link = computed(() => {
-  if (!props.href)
-    return undefined
-  if (isExternal.value)
-    return props.href
-  return resolveRouteFullPath(props.href, route.path)
-})
+
+const { link, isExternal } = useLink(toRef(props, 'href'), toRef(props, 'target'))
 
 function linkTo(e: Event) {
   if (!isExternal.value) {
diff --git a/theme/src/client/composables/index.ts b/theme/src/client/composables/index.ts
index f12154f9..6cf3f43a 100644
--- a/theme/src/client/composables/index.ts
+++ b/theme/src/client/composables/index.ts
@@ -19,6 +19,7 @@ export * from './blog-tags.js'
 export * from './blog-archives.js'
 export * from './tag-colors.js'
 
+export * from './link.js'
 export * from './locale.js'
 export * from './route-query.js'
 export * from './watermark.js'
diff --git a/theme/src/client/composables/link.ts b/theme/src/client/composables/link.ts
new file mode 100644
index 00000000..a0188809
--- /dev/null
+++ b/theme/src/client/composables/link.ts
@@ -0,0 +1,36 @@
+import { isLinkExternal } from '@vuepress/helper/client'
+import { resolveRouteFullPath, useRoute } from 'vuepress/client'
+import { type MaybeRefOrGetter, computed, toValue } from 'vue'
+import { useData } from './data.js'
+
+const SEARCH_RE = /\.md(?:(?:#|\?).*)?$/
+
+export function useLink(
+  href: MaybeRefOrGetter<string | undefined>,
+  target?: MaybeRefOrGetter<string | undefined>,
+) {
+  const route = useRoute()
+  const { page } = useData()
+
+  const isExternal = computed(
+    () => {
+      const link = toValue(href)
+      const rawTarget = toValue(target)
+      return (link && isLinkExternal(link)) || rawTarget === '_blank'
+    },
+  )
+
+  const link = computed(() => {
+    const link = toValue(href)
+    if (!link)
+      return undefined
+    if (isExternal.value)
+      return link
+    const currentPath = link.startsWith('./') && SEARCH_RE.test(link)
+      ? `/${page.value.filePathRelative!}`
+      : route.path
+    return resolveRouteFullPath(link, currentPath)
+  })
+
+  return { isExternal, link }
+}