feat: replace a to AppLink router, close #126

packages/valaxy-theme-press/setup/main.ts

@@ -8,7 +8,7 @@ export default defineAppSetup((ctx) => {
 
   window.addEventListener(
     'click',
-    (e) => {
+    async (e) => {
       const link = (e.target as Element).closest('a')
       if (link) {
         const { protocol, hostname, pathname, hash, target } = link
@@ -29,7 +29,9 @@ export default defineAppSetup((ctx) => {
             e.preventDefault()
             // scroll between hash anchors in the same page
             if (hash && hash !== currentUrl.hash) {
-              history.pushState(null, '', hash)
+              await router.push({ hash })
+              history.replaceState({ ...history.state }, '')
+
               // still emit the event so we can listen to it in themes
               window.dispatchEvent(new Event('hashchange'))
               // use smooth scroll when clicking on header anchor links

packages/valaxy/client/components/AppLink.vue

@@ -14,11 +14,11 @@ const isExternalLink = computed(() => {
 </script>
 
 <template>
-  <a v-if="isExternalLink || href" v-bind="$attrs" :href="href || to" target="_blank">
+  <a v-if="isExternalLink" v-bind="$attrs" :href="href || to" target="_blank">
     <slot />
     <div v-if="showExternalIcon" class="icon-link inline-block" i-ri-arrow-right-up-line />
   </a>
-  <router-link v-else v-bind="$props as any">
+  <router-link v-else v-bind="$props" :to="href || to || '#'">
     <slot />
   </router-link>
 </template>

packages/valaxy/client/composables/outline/anchor.ts

@@ -68,7 +68,7 @@ export function useActiveAnchor(
       const [isActive, hash] = isAnchorActive(i, anchor, nextAnchor)
 
       if (isActive) {
-        history.replaceState(null, document.title, hash || ' ')
+        history.replaceState(history.state, document.title, hash || ' ')
         activateLink(hash)
         return
       }

packages/valaxy/client/composables/sidebar.ts

@@ -24,7 +24,7 @@ export function useActiveSidebarLinks(container: Ref<HTMLElement>, marker: Ref<H
       const [isActive, hash] = isAnchorActive(i, anchor, nextAnchor)
 
       if (isActive) {
-        history.replaceState(null, document.title, hash || ' ')
+        history.replaceState(history.state, document.title, hash || ' ')
         activateLink(hash)
         return
       }

packages/valaxy/node/markdown/markdownToVue.ts

@@ -43,6 +43,9 @@ function genReplaceRegexp(
  * @see https://vitejs.dev/guide/env-and-mode.html#production-replacement
  */
 function replaceConstants(str: string, replaceRegex: RegExp, breaker: string) {
+  // replace a to AppLink
+  str = str.replace(/<a (.*?)>(.*?)<\/a>/g, '<AppLink $1>$2</AppLink>')
+
   return str.replace(replaceRegex, _ => `${_[0]}${breaker}${_.slice(1)}`)
 }