valaxy-theme-yun 0.15.10 → 0.15.11

package/components/ValaxyMain.vue

@@ -56,11 +56,8 @@ onContentUpdated(() => {
             e.preventDefault()
             // scroll between hash anchors in the same page
             if (hash && hash !== currentUrl.hash) {
-              await router.push({ hash })
-              history.replaceState({ ...history.state }, '')
+              await router.push({ hash: decodeURIComponent(hash) })
 
-              // 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'))
             }
@@ -94,7 +91,7 @@ onContentUpdated(() => {
                 <Transition appear>
                   <ValaxyMd :frontmatter="frontmatter">
                     <YunAiExcerpt v-if="frontmatter.excerpt_type === 'ai' && frontmatter.excerpt" />
-                    <YunMdTimeWarning :frontmatter="frontmatter" />
+                    <YunMdTimeWarning />
 
                     <slot name="main-content-md" />
                     <slot />

package/components/YunCategory.vue

@@ -84,10 +84,10 @@ onMounted(() => {
         </template>
 
         <template v-else>
-          <router-link v-if="categoryItem.title" :to="categoryItem.path || ''" class="inline-flex items-center">
+          <RouterLink v-if="categoryItem.title" :to="categoryItem.path || ''" class="inline-flex items-center">
             <div i-ri-file-text-line />
             <span m="l-1" font="serif black">{{ getTitle(categoryItem) }}</span>
-          </router-link>
+          </RouterLink>
         </template>
       </li>
     </ul>

package/components/YunConfig.vue

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

package/components/YunFuseSearch.vue

@@ -78,7 +78,7 @@ onClickOutside(searchInputRef, () => {
 </script>
 
 <template>
-  <transition
+  <Transition
     name="fade"
     @enter="lockBodyScroll"
     @after-leave="unlockBodyScroll"
@@ -117,7 +117,7 @@ onClickOutside(searchInputRef, () => {
         </div>
       </div>
     </div>
-  </transition>
+  </Transition>
 </template>
 
 <style lang="scss">

package/components/YunMdTimeWarning.vue

@@ -1,35 +1,33 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import type { Post } from 'valaxy'
+import { useFrontmatter } from 'valaxy'
 
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 
 import { useI18n } from 'vue-i18n'
 
-const props = defineProps<{
-  frontmatter: Post
-}>()
+const fm = useFrontmatter()
 
 dayjs.extend(relativeTime)
 
 const { t } = useI18n()
 
 /**
- * when the post is updated more than 30 days ago, show a warning
- * default 30 days, you can set `time_warning` in frontmatter to change it
+ * when the post is updated more than 180 days ago, show a warning
+ * default 180 days, you can set `time_warning` in frontmatter to change it
  */
 const time_warning = computed(() => {
-  const diff = dayjs().valueOf() - dayjs(props.frontmatter.updated).valueOf()
-  if (typeof props.frontmatter.time_warning === 'number')
-    return diff > props.frontmatter.time_warning
+  const diff = dayjs().valueOf() - dayjs(fm.value.updated || fm.value.date).valueOf()
+  if (typeof fm.value.time_warning === 'number')
+    return diff > fm.value.time_warning
   else
-    return props.frontmatter.time_warning || diff > 30 * 24 * 60 * 60 * 1000
+    return fm.value.time_warning
 })
 </script>
 
 <template>
-  <blockquote v-if="time_warning" op="80">
-    {{ t('post.time_warning', { ago: dayjs(frontmatter.updated).fromNow() }) }}
+  <blockquote v-if="time_warning" class="yun-time-warning" op="80">
+    {{ t('post.time_warning', { ago: dayjs(fm.updated).fromNow() }) }}
   </blockquote>
 </template>

package/components/YunOverview.vue

@@ -9,21 +9,21 @@ const router = useRouter()
 <template>
   <div class="sidebar-panel" p="2">
     <div class="site-info" m="t-6">
-      <router-link class="site-author-avatar" to="/about">
+      <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>
-      </router-link>
+      </RouterLink>
       <div
         class="site-author-name leading-6"
         m="t-0 b-4"
       >
-        <router-link to="/about">
+        <RouterLink to="/about">
           {{ siteConfig.author.name }}
-        </router-link>
+        </RouterLink>
       </div>
-      <router-link v-if="router.hasRoute('about-site')" to="/about/site" class="site-name">
+      <RouterLink v-if="router.hasRoute('about-site')" to="/about/site" class="site-name">
         {{ siteConfig.title }}
-      </router-link>
+      </RouterLink>
       <span v-else class="site-name">{{ siteConfig.title }}</span>
       <h4 v-if="siteConfig.subtitle" class="site-subtitle block" text="xs">
         {{ siteConfig.subtitle }}

package/components/YunPostCategories.vue

@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <router-link
+  <RouterLink
     :to="{
       path: '/categories',
       query: { category: Array.isArray(categories) ? categories.join('/') : categories },
@@ -21,5 +21,5 @@ defineProps<{
     <span>
       {{ Array.isArray(categories) ? categories.join(' > ') : categories }}
     </span>
-  </router-link>
+  </RouterLink>
 </template>

package/components/YunPostCollapse.vue

@@ -69,9 +69,9 @@ const sortedYears = computed(() => {
             <time v-if="post.date" class="post-time" font="mono" opacity="80">{{ formatDate(post.date, 'MM-DD') }}</time>
           </div>
           <h2 class="post-title" inline-flex items-center font="serif black">
-            <router-link :to="post.path || ''" class="post-title-link">
+            <RouterLink :to="post.path || ''" class="post-title-link">
               {{ post.title }}
-            </router-link>
+            </RouterLink>
           </h2>
         </header>
       </article>

package/components/YunPostNav.vue

@@ -7,16 +7,16 @@ const [prev, next] = usePrevNext()
 <template>
   <div class="post-nav">
     <div class="post-nav-item">
-      <router-link v-if="prev" class="post-nav-prev" :to="prev.path || ''" :title="prev.title">
+      <RouterLink v-if="prev" class="post-nav-prev" :to="prev.path || ''" :title="prev.title">
         <div class="icon" i-ri-arrow-left-s-line />
         <span class="title truncate" text="sm">{{ prev.title }}</span>
-      </router-link>
+      </RouterLink>
     </div>
     <div class="post-nav-item">
-      <router-link v-if="next" :to="next.path || ''" :title="next.title" class="post-nav-next">
+      <RouterLink v-if="next" :to="next.path || ''" :title="next.title" class="post-nav-next">
         <span class="title truncate" text="sm">{{ next.title }}</span>
         <div class="icon" i-ri-arrow-right-s-line />
-      </router-link>
+      </RouterLink>
     </div>
   </div>
 </template>

package/components/YunPostTags.vue

@@ -11,7 +11,7 @@ defineProps<{
     class="post-tags inline-flex" items="center" gap="1"
     flex="wrap 1" justify="end"
   >
-    <router-link
+    <RouterLink
       v-for="tag, i in tags" :key="i" :to="{ path: '/tags/', query: { tag } }"
       class="transition post-tag inline-flex-center text-xs border-$va-c-divider hover:(text-blue-500 border-blue-500)"
       px-2 h="7"
@@ -21,6 +21,6 @@ defineProps<{
     >
       <!-- <div m="r-1" i-ri-price-tag-3-line /> -->
       <span>{{ tag }}</span>
-    </router-link>
+    </RouterLink>
   </div>
 </template>

package/components/YunSidebarNav.vue

@@ -14,22 +14,22 @@ const tags = useTags()
 
 <template>
   <nav class="site-nav" text-xl mt-6>
-    <router-link class="site-link-item yun-icon-btn" to="/" :title="t('menu.home')">
+    <RouterLink class="site-link-item yun-icon-btn" to="/" :title="t('menu.home')">
       <div i-ri-home-4-line />
-    </router-link>
+    </RouterLink>
 
-    <router-link class="site-link-item" to="/archives/" :title="t('menu.archives')">
+    <RouterLink class="site-link-item" to="/archives/" :title="t('menu.archives')">
       <div class="icon" i-ri-archive-line />
       <span class="count">{{ site.postList.length }}</span>
-    </router-link>
-    <router-link class="site-link-item" to="/categories/" :title="t('menu.categories')">
+    </RouterLink>
+    <RouterLink class="site-link-item" to="/categories/" :title="t('menu.categories')">
       <div class="icon" i-ri-folder-2-line />
       <span class="count">{{ Array.from(categories.children).length }}</span>
-    </router-link>
-    <router-link class="site-link-item" to="/tags/" :title="t('menu.tags')">
+    </RouterLink>
+    <RouterLink class="site-link-item" to="/tags/" :title="t('menu.tags')">
       <div class="icon" i-ri-price-tag-3-line />
       <span class="count">{{ Array.from(tags).length }}</span>
-    </router-link>
+    </RouterLink>
 
     <AppLink class="site-link-item yun-icon-btn" :to="themeConfig.menu.custom.url" :title="t(themeConfig.menu.custom.title)">
       <div :class="themeConfig.menu.custom.icon" />

package/components/third/YunWaline.vue

@@ -9,5 +9,5 @@ const addon = addonWaline.useAddonWaline()
 </script>
 
 <template>
-  <WalineClient w="full" :options="addon.options" />
+  <WalineClient w="full" :options="addon.options || {}" />
 </template>

package/docs/zh-CN/README.md

@@ -10,4 +10,4 @@
 
 如「作者头像」、「站点名称」等属于通用信息，请在 `site.config.ts` 中配置。
 
-可参见 [Site Config | Valaxy Docs](https://valaxy.site/guide/config#site-config)。
+可参见 [Site Config | Valaxy Docs](https://valaxy.site/guide/config/#site-config)。

package/layouts/404.vue

@@ -14,7 +14,7 @@ const { back } = useBack()
       404
     </div>
 
-    <router-view />
+    <RouterView />
 
     <div>
       <button class="btn rounded-full" p="x-6 y-2" text="sm" m="3 t8" :title="t('button.back')" @click="back">
@@ -25,7 +25,6 @@ const { back } = useBack()
 </template>
 
 <style lang="scss" scoped>
-// inspired by https://codepen.io/pgalor/pen/OeRWJQ
 .not-found {
   font-size: 10rem;
   text-shadow: 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);

package/layouts/albums.vue

@@ -29,7 +29,7 @@ const albums = computed(() => frontmatter.value.albums || [])
         {{ t('counter.albums', albums.length) }}
       </div>
       <YunAlbumList :albums="albums" />
-      <router-view />
+      <RouterView />
     </template>
   </Layout>
 </template>

package/layouts/archives.vue

@@ -23,7 +23,7 @@ useSchemaOrg([
       <YunPageHeader :title="title || t('menu.archives')" :icon="frontmatter.icon || 'i-ri-archive-line'" :color="frontmatter.color" />
     </template>
     <template #main-content>
-      <router-view />
+      <RouterView />
       <YunPostCollapse :posts="site.postList" />
     </template>
   </Layout>

package/layouts/categories.vue

@@ -52,7 +52,7 @@ useSchemaOrg([
         {{ t('counter.categories', categories.children.length) }}
       </div>
       <YunCategories :categories="categories.children" />
-      <router-view />
+      <RouterView />
     </template>
 
     <template #main-nav-before>

package/layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
   <Layout>
     <template #content>
-      <router-view />
+      <RouterView />
     </template>
   </Layout>
 </template>

package/layouts/gallery.vue

@@ -48,7 +48,7 @@ const YunGallery = runtimeConfig.value.addons['valaxy-addon-lightgallery']
       </div>
       <ValaxyGalleryDecrypt v-if="frontmatter.encryptedPhotos" :encrypted-photos="frontmatter.encryptedPhotos" />
       <YunGallery v-else :photos="photos" />
-      <router-view />
+      <RouterView />
     </template>
   </Layout>
 </template>

package/layouts/home.vue

@@ -32,7 +32,7 @@ const isPage = computed(() => route.path.startsWith('/page'))
     <slot name="board" />
 
     <slot>
-      <router-view />
+      <RouterView />
     </slot>
 
     <YunFooter />

package/layouts/layout.vue

@@ -8,7 +8,7 @@ import { asAny } from 'valaxy'
   </YunSidebar>
   <YunSidebar v-else />
 
-  <router-view v-slot="{ Component }">
+  <RouterView v-slot="{ Component }">
     <component :is="asAny(Component)">
       <template #main-header>
         <slot name="main-header" />
@@ -36,7 +36,7 @@ import { asAny } from 'valaxy'
         <slot name="aside-custom" />
       </template>
     </component>
-  </router-view>
+  </RouterView>
 
   <YunBackToTop />
 </template>

package/layouts/tags.vue

@@ -82,7 +82,7 @@ const title = usePostTitle(frontmatter)
         />
       </div>
 
-      <router-view />
+      <RouterView />
     </template>
 
     <template #main-nav-before>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.15.10",
+  "version": "0.15.11",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -19,12 +19,12 @@
   "dependencies": {
     "@explosions/fireworks": "^0.0.2",
     "@iconify-json/ant-design": "^1.1.10",
-    "@iconify-json/simple-icons": "^1.1.75",
+    "@iconify-json/simple-icons": "^1.1.76",
     "animejs": "^3.2.1"
   },
   "devDependencies": {
     "@types/animejs": "^3.1.10",
-    "valaxy": "0.15.10",
+    "valaxy": "0.15.11",
     "valaxy-addon-waline": "0.1.1"
   }
 }

package/styles/common/effects.scss

@@ -0,0 +1,21 @@
+// transition
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+/* 进入dark模式和退出dark模式时，两个图像的位置顺序正好相反 */
+.dark::view-transition-old(root) {
+  z-index: 9999;
+}
+.dark::view-transition-new(root) {
+  z-index: 1;
+}
+
+::view-transition-old(root) {
+  z-index: 1;
+}
+::view-transition-new(root) {
+  z-index: 9999;
+}

package/styles/index.scss

@@ -1,5 +1,4 @@
 @use "./layout" as *;
-@use "./common/button.scss" as *;
 @forward "star-markdown-css/src/scss/theme/yun.scss" with (
   $colors: (
     "primary": $c-primary,
@@ -7,6 +6,9 @@
 );
 
 // override the default style of star-markdown-css
+@use "./common/button.scss" as *;
 @use "./common/markdown.scss" as *;
+@use './common/effects.scss' as *;
+
 @use 'valaxy/client/styles/components/code-group.scss' as *;
 @use 'valaxy/client/styles/components/custom-block.scss' as *;