valaxy-theme-yun 0.14.57 → 0.14.58

package/components/ValaxyMain.vue

@@ -1,8 +1,10 @@
 <script lang="ts" setup>
+import { computed, nextTick } from 'vue'
 import type { PageData, Post } from 'valaxy'
-import { usePostTitle, useSiteConfig } from 'valaxy'
+import { onContentUpdated, usePostTitle, useSiteConfig } from 'valaxy'
 import type { StyleValue } from 'vue'
-import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { scrollTo } from '../utils'
 import { usePostProperty } from '../composables'
 
 const props = defineProps<{
@@ -16,6 +18,59 @@ const { styles, icon, color } = usePostProperty(props.frontmatter.type)
 const title = usePostTitle(computed(() => props.frontmatter))
 
 const aside = computed(() => props.frontmatter.aside !== false)
+
+const route = useRoute()
+const router = useRouter()
+
+nextTick(() => {
+  if (route.hash) {
+    setTimeout(() => {
+      scrollTo(document.body, route.hash, true)
+    }, 0)
+  }
+})
+
+onContentUpdated(() => {
+  // to extract
+  // click title scroll
+  window.addEventListener(
+    'click',
+    async (e) => {
+      const link = (e.target as Element).closest('a')
+      if (link) {
+        const { protocol, hostname, pathname, hash, target } = link
+        const currentUrl = window.location
+        const extMatch = pathname.match(/\.\w+$/)
+        // only intercept inbound links
+        if (
+          !e.ctrlKey
+            && !e.shiftKey
+            && !e.altKey
+            && !e.metaKey
+            && target !== '_blank'
+            && protocol === currentUrl.protocol
+            && hostname === currentUrl.hostname
+            && !(extMatch && extMatch[0] !== '.html')
+        ) {
+          if (pathname === currentUrl.pathname) {
+            e.preventDefault()
+            // scroll between hash anchors in the same page
+            if (hash && hash !== currentUrl.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
+              scrollTo(link, hash, link.classList.contains('header-anchor'))
+            }
+          }
+        }
+      }
+    },
+    { capture: true },
+  )
+})
 </script>
 
 <template>

package/components/YunFireworks.vue

@@ -2,8 +2,9 @@
 import { useThemeConfig } from 'valaxy'
 import { onMounted } from 'vue'
 import { createFireworks } from '@explosions/fireworks'
+import type { YunTheme } from '../types'
 
-const themeConfig = useThemeConfig()
+const themeConfig = useThemeConfig<YunTheme.Config>()
 
 onMounted(() => {
   createFireworks({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.14.57",
+  "version": "0.14.58",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@types/animejs": "^3.1.7",
-    "valaxy": "0.14.57",
+    "valaxy": "0.14.58",
     "valaxy-addon-waline": "0.1.0"
   }
 }

package/utils/index.ts

@@ -9,3 +9,35 @@ export function onImgError(e: Event, defaultImg = anonymousImage) {
   targetEl.setAttribute('data-src', targetEl.src)
   targetEl.src = defaultImg
 }
+
+export function scrollTo(el: HTMLElement, hash: string, smooth = false) {
+  let target: Element | null = null
+  try {
+    target = el.classList.contains('header-anchor')
+      ? el
+      : ((decodeURIComponent(hash) && document.querySelector(decodeURIComponent(hash))) || null)
+  }
+  catch (e) {
+    console.warn(e)
+  }
+
+  if (target) {
+    const targetPadding = -64
+    const targetTop
+      = window.scrollY
+      + (target as HTMLElement).getBoundingClientRect().top
+      + targetPadding
+
+    // only smooth scroll if distance is smaller than screen height.
+    if (!smooth || Math.abs(targetTop - window.scrollY) > window.innerHeight) {
+      window.scrollTo(0, targetTop)
+    }
+    else {
+      window.scrollTo({
+        // left: 0,
+        top: targetTop,
+        behavior: 'smooth',
+      })
+    }
+  }
+}