valaxy-theme-yun 0.18.10 → 0.19.1

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

@@ -11,7 +11,7 @@ const router = useRouter()
     <div class="site-info" m="t-6">
       <RouterLink class="site-author-avatar" to="/about">
         <img class="rounded-full" :src="siteConfig.author.avatar" alt="avatar">
-        <span class="site-author-status" :title="siteConfig.author.status.message">{{ siteConfig.author.status.emoji }}</span>
+        <span v-if="siteConfig.author.status.emoji" class="site-author-status" :title="siteConfig.author.status.message || undefined">{{ siteConfig.author.status.emoji }}</span>
       </RouterLink>
       <div
         class="site-author-name leading-6"

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,32 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { useAppStore } from 'valaxy'
+import { useYunAppStore } from '../stores'
 
 defineProps<{
   showHamburger?: boolean
 }>()
 
-const app = useAppStore()
+const yunStore = useYunAppStore()
 const showOverview = ref(false)
 </script>
 
 <template>
-  <ValaxyOverlay class="md:hidden" :show="app.isSidebarOpen" @click="app.toggleSidebar()" />
+  <ValaxyOverlay class="md:hidden" :show="yunStore.leftSidebar.isOpen" @click="yunStore.leftSidebar.toggle()" />
 
   <ValaxyHamburger
-    :active="app.isSidebarOpen"
+    :active="yunStore.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="yunStore.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': yunStore.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">
@@ -51,8 +55,6 @@ const showOverview = ref(false)
 </template>
 
 <style lang="scss">
-@use "sass:map";
-
 .sidebar {
   width: calc(100vw - 64px);
   max-width: var(--va-sidebar-width);

package/layouts/home.vue

@@ -1,14 +1,15 @@
 <script lang="ts" setup>
-import { useAppStore, useLayout } from 'valaxy'
+import { useLayout } from 'valaxy'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
+import { useYunAppStore } from '../stores'
 import { useThemeConfig } from '../composables'
 
-const app = useAppStore()
+const yunStore = useYunAppStore()
+const route = useRoute()
 const isHome = useLayout('home')
 const themeConfig = useThemeConfig()
 
-const route = useRoute()
 const isPage = computed(() => route.path.startsWith('/page'))
 
 const showNotice = computed(() => {
@@ -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 && !yunStore.leftSidebar.isOpen) ? 'pl-0' : 'md:pl-$va-sidebar-width'" flex="~ col" w="full"
   >
     <YunSidebar :show-hamburger="true" />
 

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.10",
+  "version": "0.19.1",
   "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.107",
+    "@iconify-json/simple-icons": "^1.1.108",
     "animejs": "^3.2.2"
   },
   "devDependencies": {
     "@types/animejs": "^3.1.12",
-    "valaxy-addon-waline": "0.1.4",
-    "valaxy": "0.18.10"
+    "valaxy": "0.19.1",
+    "valaxy-addon-waline": "0.1.4"
   }
 }

package/setup/main.ts

@@ -1,5 +1,21 @@
-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
+  router.afterEach(() => {
+    /**
+     * router import order
+     * @see https://pinia.vuejs.org/zh/core-concepts/outside-component-usage.html#single-page-applications
+     */
+    const appStore = useAppStore()
+    const yunAppStore = useYunAppStore()
+    nextTick(() => {
+      if (appStore.isMobile)
+        yunAppStore.leftSidebar.close()
+    })
+  })
 })

package/stores/app.ts

@@ -1,9 +1,12 @@
 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 {
@@ -48,7 +50,7 @@ export interface Page {
 /**
  * Theme Config
  */
-export interface ThemeConfig {
+export interface ThemeConfig extends DefaultTheme.Config {
   /**
    * toc title
    * @default 'On this page'