feat: add `$withBase` global app function

src/client/app/mixin.ts

@@ -1,4 +1,5 @@
 import { App } from 'vue'
+import { joinPath } from './utils'
 import { SiteDataRef } from './composables/siteData'
 import { PageDataRef } from './composables/PageData'
 import { Content } from './components/Content'
@@ -31,7 +32,7 @@ export function mixinGlobalComputed(
 
     $page: {
       get() {
-        return page
+        return page.value
       }
     },
 
@@ -51,6 +52,12 @@ export function mixinGlobalComputed(
       get() {
         return page.value.description || siteByRoute.value.description
       }
+    },
+
+    $withBase: {
+      value(path: string) {
+        return joinPath(site.value.base, path)
+      }
     }
   })
 }

src/client/app/utils.ts

@@ -1,5 +1,12 @@
 export const inBrowser = typeof window !== 'undefined'
 
+/**
+ * Join two paths by resolving the slash collision.
+ */
+export function joinPath(base: string, path: string): string {
+  return `${base}${path}`.replace(/\/+/g, '/')
+}
+
 /**
  * Converts a url path to the corresponding js chunk filename.
  */

src/client/theme-default/components/Home.vue

@@ -2,7 +2,7 @@
   <header class="hero">
     <img
       v-if="data.heroImage"
-      :src="heroImageSrc"
+      :src="$withBase(heroImageSrc)"
       :alt="data.heroAlt || 'hero'"
     />
 
@@ -39,7 +39,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRoute, useSiteData } from 'vitepress'
-import { withBase } from '../utils'
 
 const route = useRoute()
 const siteData = useSiteData()
@@ -48,7 +47,7 @@ const actionLink = computed(() => ({
   link: data.value.actionLink,
   text: data.value.actionText
 }))
-const heroImageSrc = computed(() => withBase(data.value.heroImage))
+const heroImageSrc = computed(() => data.value.heroImage)
 const siteTitle = computed(() => siteData.value.title)
 const siteDescription = computed(() => siteData.value.description)
 </script>

src/client/theme-default/components/NavBarLink.vue

@@ -16,8 +16,9 @@
 <script setup lang="ts">
 import { computed, defineProps } from 'vue'
 import { useRoute } from 'vitepress'
-import { withBase, isExternal } from '../utils'
+import { isExternal } from '../utils'
 import type { DefaultTheme } from '../config'
+import { useUrl } from '../composables/url'
 import OutboundLink from './icons/OutboundLink.vue'
 
 const { item } = defineProps<{
@@ -35,6 +36,7 @@ const normalizePath = (path: string): string => {
   return path
 }
 
+const { withBase } = useUrl()
 const route = useRoute()
 
 const classes = computed(() => ({

src/client/theme-default/components/NavBarTitle.vue

@@ -7,17 +7,13 @@
     <img
       v-if="$themeConfig.logo"
       class="logo"
-      :src="withBase($themeConfig.logo)"
+      :src="$withBase($themeConfig.logo)"
       alt="Logo"
     />
     {{ $site.title }}
   </a>
 </template>
 
-<script setup lang="ts">
-import { withBase } from '../utils'
-</script>
-
 <style scoped>
 .nav-bar-title {
   font-size: 1.3rem;

src/client/theme-default/components/NextAndPrevLinks.vue

@@ -2,13 +2,13 @@
   <div v-if="hasLinks" class="next-and-prev-link">
     <div class="container">
       <div class="prev">
-        <a v-if="prev" class="link" :href="withBase(prev.link)">
+        <a v-if="prev" class="link" :href="$withBase(prev.link)">
           <ArrowLeft class="icon icon-prev" />
           <span class="text">{{ prev.text }}</span>
         </a>
       </div>
       <div class="next">
-        <a v-if="next" class="link" :href="withBase(next.link)">
+        <a v-if="next" class="link" :href="$withBase(next.link)">
           <span class="text">{{ next.text }}</span>
           <ArrowRight class="icon icon-next" />
         </a>
@@ -18,7 +18,6 @@
 </template>
 
 <script setup lang="ts">
-import { withBase } from '../utils'
 import { useNextAndPrevLinks } from '../composables/nextAndPrevLinks'
 import ArrowLeft from './icons/ArrowLeft.vue'
 import ArrowRight from './icons/ArrowRight.vue'

src/client/theme-default/composables/url.ts

@@ -0,0 +1,14 @@
+import { useSiteData } from 'vitepress'
+import { joinPath } from '/@app/utils'
+
+export function useUrl() {
+  const site = useSiteData()
+
+  function withBase(path: string): string {
+    return joinPath(site.value.base, path)
+  }
+
+  return {
+    withBase
+  }
+}

src/client/theme-default/utils.ts

@@ -1,4 +1,4 @@
-import { useSiteData, Route } from 'vitepress'
+import { Route } from 'vitepress'
 
 export const hashRE = /#.*$/
 export const extRE = /(index)?\.(md|html)$/
@@ -13,10 +13,6 @@ export function isArray(value: any): value is any[] {
   return Array.isArray(value)
 }
 
-export function withBase(path: string) {
-  return (useSiteData().value.base + path).replace(/\/+/g, '/')
-}
-
 export function isExternal(path: string): boolean {
   return outboundRE.test(path)
 }