valaxy-theme-yun 0.18.8 → 0.18.10

package/components/ValaxyMain.vue

@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import { computed, nextTick } from 'vue'
 import type { PageData, Post } from 'valaxy'
-import { onContentUpdated, usePostTitle, useSiteConfig } from 'valaxy'
+import { onClickHref, onContentUpdated, scrollTo, usePostTitle, useSiteConfig } from 'valaxy'
 import type { StyleValue } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { scrollTo } from '../utils'
 import { usePostProperty } from '../composables'
 
 const props = defineProps<{
@@ -25,48 +24,15 @@ const router = useRouter()
 nextTick(() => {
   if (route.hash) {
     setTimeout(() => {
-      scrollTo(document.body, route.hash, true)
+      scrollTo(document.body, route.hash, {
+        smooth: 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: decodeURIComponent(hash) })
-
-              // use smooth scroll when clicking on header anchor links
-              scrollTo(link, hash, link.classList.contains('header-anchor'))
-            }
-          }
-        }
-      }
-    },
-    { capture: true },
-  )
+  onClickHref(router)
 })
 </script>
 
@@ -80,8 +46,10 @@ onContentUpdated(() => {
               <YunPageHeader
                 class="mb-2"
                 :title="title"
-                :icon="frontmatter.icon || icon" :color="frontmatter.color || color"
+                :icon="frontmatter.icon || icon"
+                :color="frontmatter.color || color"
                 :cover="frontmatter.cover"
+                :page-title-class="frontmatter.pageTitleClass"
               />
             </slot>
             <slot name="main-header-after" />

package/components/YunPageHeader.vue

@@ -1,5 +1,9 @@
 <script lang="ts" setup>
 defineProps<{
+  pageTitleClass?: string
+  /**
+   * @deprecated Use `pageTitleClass` instead
+   */
   color?: string
   icon?: string
   title?: string
@@ -10,7 +14,9 @@ defineProps<{
   <header class="post-header" m="t-16 sm:t-6">
     <h1
       class="post-title flex-center" p="2" text="2xl center"
-      font="serif black" :style="`color:${color}`"
+      font="serif black"
+      :style="`color:${color}`"
+      :class="pageTitleClass"
     >
       <div v-if="icon" class="icon" m="r-1 t-1px" inline-flex :class="icon" />
       <span inline-flex class="leading-none">{{ title }}</span>

package/components/YunPostCard.vue

@@ -31,9 +31,11 @@ const { icon, styles } = usePostProperty(props.post.type)
           class="post-title-link cursor-pointer"
           :to="post.path || ''"
           m="t-3"
+          :class="post.postTitleClass"
         >
           <div class="flex-center title text-2xl" text="center" font="serif black">
-            <div v-if="post.type" class="inline-flex" m="r-1" :class="icon" />{{ post.title }}
+            <div v-if="post.type" class="inline-flex" m="r-1" :class="icon" />
+            <span>{{ post.title }}</span>
           </div>
         </AppLink>
 

package/components/YunSidebarLinks.vue

@@ -9,7 +9,8 @@ const themeConfig = useThemeConfig()
     <AppLink
       v-for="item, i in themeConfig.pages" :key="i"
       class="link-item yun-icon-btn" inline-flex
-      :to="item.url" :title="item.name" :style="`color:${item.color}`"
+      :to="item.url" :title="item.name"
+      :style="`color:${item.color}`"
     >
       <div :class="item.icon" class="icon w-8 h-8" />
     </AppLink>

package/layouts/albums.vue

@@ -28,7 +28,12 @@ const albums = computed(() => frontmatter.value.albums || [])
   <RouterView v-slot="{ Component }">
     <component :is="Component">
       <template #main-header>
-        <YunPageHeader :title="title || t('title.album')" :icon="frontmatter.icon || 'i-ri-gallery-line'" :color="frontmatter.color" />
+        <YunPageHeader
+          :title="title || t('title.album')"
+          :icon="frontmatter.icon || 'i-ri-gallery-line'"
+          :color="frontmatter.color"
+          :page-title-class="frontmatter.pageTitleClass"
+        />
       </template>
       <template #main-content>
         <div text="center" class="yun-text-light" p="2">

package/layouts/archives.vue

@@ -26,7 +26,12 @@ useSchemaOrg([
   <RouterView v-slot="{ Component }">
     <component :is="Component">
       <template #main-header>
-        <YunPageHeader :title="title || t('menu.archives')" :icon="frontmatter.icon || 'i-ri-archive-line'" :color="frontmatter.color" />
+        <YunPageHeader
+          :title="title || t('menu.archives')"
+          :icon="frontmatter.icon || 'i-ri-archive-line'"
+          :color="frontmatter.color"
+          :page-title-class="frontmatter.pageTitleClass"
+        />
       </template>
       <template #main-content>
         <RouterView />

package/layouts/categories.vue

@@ -51,6 +51,7 @@ useSchemaOrg([
           :title="title || t('menu.categories')"
           :icon="frontmatter.icon || 'i-ri-folder-2-line'"
           :color="frontmatter.color"
+          :page-title-class="frontmatter.pageTitleClass"
         />
       </template>
       <template #main-content>

package/layouts/gallery.vue

@@ -41,6 +41,7 @@ const YunGallery = runtimeConfig.value.addons['valaxy-addon-lightgallery']
           :title="title || t('title.gallery')"
           :icon="frontmatter.icon || 'i-ri-gallery-line'"
           :color="frontmatter.color"
+          :page-title-class="frontmatter.pageTitleClass"
         />
       </template>
       <template #main-content>

package/layouts/tags.vue

@@ -70,6 +70,7 @@ const title = usePostTitle(frontmatter)
           :title="title || t('menu.tags')"
           :icon="frontmatter.icon || 'i-ri-tag-line'"
           :color="frontmatter.color"
+          :page-title-class="frontmatter.pageTitleClass"
         />
       </template>
       <template #main-content>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.18.8",
+  "version": "0.18.10",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -20,12 +20,12 @@
   "dependencies": {
     "@explosions/fireworks": "^0.0.2",
     "@iconify-json/ant-design": "^1.1.16",
-    "@iconify-json/simple-icons": "^1.1.105",
+    "@iconify-json/simple-icons": "^1.1.107",
     "animejs": "^3.2.2"
   },
   "devDependencies": {
     "@types/animejs": "^3.1.12",
-    "valaxy": "0.18.8",
-    "valaxy-addon-waline": "0.1.4"
+    "valaxy-addon-waline": "0.1.4",
+    "valaxy": "0.18.10"
   }
 }

package/types/index.d.ts

@@ -27,8 +27,21 @@ export namespace YunTheme {
 
 export interface Page {
   name: string
+  /**
+   * @description:en-US Page URL
+   * @description:zh-CN 页面链接
+   */
   url: string
+  /**
+   * @see https://valaxy.site/guide/features#icones
+   * @description:en-US Icon of page
+   * @description:zh-CN 页面图标
+   */
   icon: string
+  /**
+   * @description:en-US Color of icon
+   * @description:zh-CN 图标颜色
+   */
   color: string
 }
 

package/utils/index.ts

@@ -9,35 +9,3 @@ export function onImgError(e: Event, defaultImg = noneImg) {
   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',
-      })
-    }
-  }
-}