valaxy-theme-yun 0.18.9 → 0.19.0

package/App.vue

@@ -4,6 +4,8 @@ import { useAppStore, useSiteConfig } from 'valaxy'
 import { onMounted } from 'vue'
 import { useThemeConfig } from './composables'
 
+const appStore = useAppStore()
+
 useHead({
   link: [
     {
@@ -11,6 +13,17 @@ useHead({
       href: 'https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@900&display=swap',
     },
   ],
+
+  meta: [
+    {
+      name: 'theme-color',
+      content: appStore.themeColor,
+    },
+    {
+      name: 'msapplication-TileColor',
+      content: appStore.themeColor,
+    },
+  ],
 })
 
 const siteConfig = useSiteConfig()

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/YunBg.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import { computed, watch } from 'vue'
 import { useCssVar } from '@vueuse/core'
-import { isDark } from 'valaxy'
+import { useAppStore } from 'valaxy'
 import { useThemeConfig } from '../composables'
 
+const appStore = useAppStore()
 const themeConfig = useThemeConfig()
 
 if (typeof themeConfig.value.bg_image.url !== 'undefined') {
@@ -12,7 +13,7 @@ if (typeof themeConfig.value.bg_image.url !== 'undefined') {
     bgImgOpacity.value = themeConfig.value.bg_image.opacity.toString() || '1'
 
   const bgImgUrl = computed(() => {
-    return isDark.value
+    return appStore.isDark
       ? themeConfig.value.bg_image.dark
       : themeConfig.value.bg_image.url
   })

package/components/YunConfig.vue

@@ -1,18 +1,25 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
-import { isDark, toggleDarkWithTransition } from 'valaxy'
+import { useAppStore } from 'valaxy'
 
+const appStore = useAppStore()
 const { t } = useI18n()
 
 const themeTitle = computed(() => {
-  return isDark.value ? t('button.toggle_light') : t('button.toggle_dark')
+  return appStore.isDark ? t('button.toggle_light') : t('button.toggle_dark')
+})
+
+const styles = computed(() => {
+  return {
+    color: appStore.isDark ? '' : '#f1cb64',
+  }
 })
 </script>
 
 <template>
   <div>
-    <button class="yun-icon-btn" :title="themeTitle" :style="{ color: isDark ? '' : '#f1cb64' }" @click="toggleDarkWithTransition">
+    <button class="yun-icon-btn" :title="themeTitle" :style="styles" @click="appStore.toggleDarkWithTransition">
       <div i="ri-sun-line dark:ri-moon-line" />
     </button>
 

package/components/YunMdTimeWarning.vue

@@ -1,21 +1,20 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useFrontmatter } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 
 import { differenceInMilliseconds, formatDistanceToNow } from 'date-fns'
 
 const fm = useFrontmatter()
-const { t } = useI18n()
+const { t, locale } = useI18n()
 
 const updated = computed(() => fm.value.updated || fm.value.date || new Date())
-const ago = computed(() => {
+const ago = ref('')
+
+watch(locale, () => {
   const fromNow = formatDistanceToNow(updated.value, { addSuffix: true })
-  if (/^\d/.test(fromNow))
-    return ` ${fromNow}`
-  else
-    return fromNow
-})
+  ago.value = /^\d/.test(fromNow) ? ` ${fromNow}` : fromNow
+}, { immediate: true })
 
 /**
  * when the post is updated more than 180 days ago, show a warning

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/YunPostMeta.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { Post } from 'valaxy'
+import { formatISO } from 'date-fns'
 import { formatDate, useSiteConfig } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 
@@ -30,14 +31,14 @@ const siteConfig = useSiteConfig()
     flex="~ col" justify="center" items="center" text="sm" py="1"
   >
     <div v-if="frontmatter.date" class="post-time flex items-center">
-      <span class="posted-time inline-flex-center" :title="t('post.posted') + frontmatter.date">
+      <span class="posted-time inline-flex-center" :title="t('post.posted') + formatISO(frontmatter.date)">
         <div class="inline-block" i-ri-calendar-line />
         <time m="l-1">{{ formatDate(frontmatter.date) }}</time>
       </span>
 
       <span
         v-if="frontmatter.updated && frontmatter.updated !== frontmatter.date"
-        class="edited-time inline-flex-center" :title="t('post.edited') + frontmatter.updated"
+        class="edited-time inline-flex-center" :title="t('post.edited') + formatISO(frontmatter.updated)"
       >
         <span m="x-2">-</span>
         <div i-ri-calendar-2-line />

package/components/YunSidebar.vue

@@ -1,28 +1,31 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { useAppStore } from 'valaxy'
+import { useYunAppStore } from '../stores'
 
 defineProps<{
   showHamburger?: boolean
 }>()
 
-const app = useAppStore()
+const yunApp = useYunAppStore()
 const showOverview = ref(false)
 </script>
 
 <template>
-  <ValaxyOverlay class="md:hidden" :show="app.isSidebarOpen" @click="app.toggleSidebar()" />
+  <ValaxyOverlay class="md:hidden" :show="yunApp.leftSidebar.isOpen" @click="yunApp.leftSidebar.toggle()" />
 
   <ValaxyHamburger
-    :active="app.isSidebarOpen"
+    :active="yunApp.leftSidebar.isOpen"
     class="menu-btn sidebar-toggle yun-icon-btn leading-4 fixed left-0.8rem top-0.6rem"
     inline-flex cursor="pointer" z="$yun-z-menu-btn"
-    :class="showHamburger ? '' : 'md:hidden'" @click="app.toggleSidebar()"
+    :class="showHamburger ? '' : 'md:hidden'" @click="yunApp.leftSidebar.toggle()"
   />
 
   <aside
     class="va-card transition sidebar fixed inset-y-0 left-0 overflow-y-auto"
-    :class="[app.isSidebarOpen && 'open', !showHamburger && 'md:translate-x-0']"
+    :class="{
+      'open': yunApp.leftSidebar.isOpen,
+      'md:translate-x-0': !showHamburger,
+    }"
     text="center" bg="$yun-sidebar-bg-color contain no-repeat" z="$yun-z-sidebar"
   >
     <div v-if="$slots.default" class="sidebar-nav" m="t-6">

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/home.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
-import { useAppStore, useLayout } from 'valaxy'
+import { useLayout } from 'valaxy'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { useThemeConfig } from '../composables'
+import { useYunAppStore } from '../stores'
 
-const app = useAppStore()
+const yunApp = useYunAppStore()
 const isHome = useLayout('home')
 const themeConfig = useThemeConfig()
 
@@ -20,7 +21,7 @@ const showNotice = computed(() => {
 <template>
   <main
     class="yun-main flex-center"
-    :class="(isHome && !app.isSidebarOpen) ? 'pl-0' : 'md:pl-$va-sidebar-width'" flex="~ col" w="full"
+    :class="(isHome && !yunApp.leftSidebar.isOpen) ? 'pl-0' : 'md:pl-$va-sidebar-width'" flex="~ col" w="full"
   >
     <YunSidebar :show-hamburger="true" />
 

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/node/config.ts

@@ -4,6 +4,10 @@ import type { ThemeConfig, UserThemeConfig } from '../types'
  * Default Config
  */
 export const defaultThemeConfig: ThemeConfig = {
+  valaxyDarkOptions: {
+    circleTransition: true,
+  },
+
   outlineTitle: 'On this page',
   colors: {
     primary: '#0078E7',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.18.9",
+  "version": "0.19.0",
   "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.106",
+    "@iconify-json/simple-icons": "^1.1.108",
     "animejs": "^3.2.2"
   },
   "devDependencies": {
     "@types/animejs": "^3.1.12",
-    "valaxy": "0.18.9",
+    "valaxy": "0.19.0",
     "valaxy-addon-waline": "0.1.4"
   }
 }

package/setup/main.ts

@@ -1,5 +1,17 @@
-import { defineAppSetup } from 'valaxy'
+import { defineAppSetup, useAppStore } from 'valaxy'
+import { nextTick } from 'vue'
+import { useYunAppStore } from '../stores'
 
-export default defineAppSetup((_ctx) => {
+export default defineAppSetup((ctx) => {
   // can do for setup
+
+  const { router } = ctx
+  const appStore = useAppStore()
+  const yunAppStore = useYunAppStore()
+  router.afterEach(() => {
+    nextTick(() => {
+      if (appStore.isMobile)
+        yunAppStore.leftSidebar.close()
+    })
+  })
 })

package/stores/app.ts

@@ -1,9 +1,13 @@
 import { acceptHMRUpdate, defineStore } from 'pinia'
+import { useDynamicLeftSidebar } from 'valaxy'
 
 export const useYunAppStore = defineStore('yun-app', () => {
   // global cache for yun
+  const leftSidebar = useDynamicLeftSidebar()
 
-  return {}
+  return {
+    leftSidebar,
+  }
 })
 
 if (import.meta.hot)

package/stores/index.ts

@@ -0,0 +1 @@
+export * from './app'

package/types/index.d.ts

@@ -1,3 +1,5 @@
+import type { DefaultTheme } from 'valaxy/types'
+
 export * from '../composables'
 
 export namespace YunTheme {
@@ -27,15 +29,28 @@ 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
 }
 
 /**
  * Theme Config
  */
-export interface ThemeConfig {
+export interface ThemeConfig extends DefaultTheme.Config {
   /**
    * toc title
    * @default 'On this page'

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',
-      })
-    }
-  }
-}