valaxy-theme-yun 0.16.4 → 0.17.0-beta.2

package/App.vue

@@ -31,4 +31,5 @@ onMounted(() => {
   <Transition name="fade">
     <YunLoading v-if="app.showLoading" />
   </Transition>
+  <YunBackToTop />
 </template>

package/components/YunPostCollapse.vue

@@ -66,7 +66,9 @@ const sortedYears = computed(() => {
       >
         <header class="post-header" flex items-center relative>
           <div class="post-meta">
-            <time v-if="post.date" class="post-time" font="mono" opacity="80">{{ formatDate(post.date, 'MM-DD') }}</time>
+            <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">
             <RouterLink :to="post.path || ''" class="post-title-link">

package/components/YunPostMeta.vue

@@ -30,14 +30,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="inline-flex-center" :title="t('post.posted') + frontmatter.date">
+      <span class="posted-time inline-flex-center" :title="t('post.posted') + 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="inline-flex-center" :title="t('post.edited') + frontmatter.updated"
+        class="edited-time inline-flex-center" :title="t('post.edited') + frontmatter.updated"
       >
         <span m="x-2">-</span>
         <div i-ri-calendar-2-line />
@@ -51,15 +51,16 @@ const siteConfig = useSiteConfig()
     >
       <span
         v-if="frontmatter.wordCount"
-        class="inline-flex-center" :title="t('statistics.word')"
+        class="word-count inline-flex-center" :title="t('statistics.word')"
       >
         <div class="inline-block" i-ri-file-word-line />
-        <time m="l-1">{{ frontmatter.wordCount }}</time>
+        <span m="l-1">{{ frontmatter.wordCount }}</span>
       </span>
 
       <span
         v-if="frontmatter.readingTime"
-        class="inline-flex-center" :title="t('statistics.time')"
+        class="reading-time inline-flex-center"
+        :title="t('statistics.time')"
       >
         <span m="x-2">-</span>
         <div i-ri-timer-line />

package/components/YunPostTags.vue

@@ -19,7 +19,6 @@ defineProps<{
       border
       bg="hover:(blue-500 opacity-10)"
     >
-      <!-- <div m="r-1" i-ri-price-tag-3-line /> -->
       <span>{{ tag }}</span>
     </RouterLink>
   </div>

package/components/YunSidebar.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
-import { useAppStore } from 'valaxy'
+import { ref, watch } from 'vue'
+import { useAppStore, useLayout } from 'valaxy'
 
 defineProps<{
   showHamburger?: boolean
@@ -8,6 +8,13 @@ defineProps<{
 
 const app = useAppStore()
 const showOverview = ref(false)
+
+const isHome = useLayout('home')
+watch(isHome, () => {
+  app.isSidebarOpen = !isHome.value
+}, {
+  immediate: true,
+})
 </script>
 
 <template>

package/layouts/albums.vue

@@ -20,16 +20,23 @@ const albums = computed(() => frontmatter.value.albums || [])
 </script>
 
 <template>
-  <Layout>
-    <template #main-header>
-      <YunPageHeader :title="title || t('title.album')" :icon="frontmatter.icon || 'i-ri-gallery-line'" :color="frontmatter.color" />
-    </template>
-    <template #main-content>
-      <div text="center" class="yun-text-light" p="2">
-        {{ t('counter.albums', albums.length) }}
-      </div>
-      <YunAlbumList :albums="albums" />
-      <RouterView />
-    </template>
-  </Layout>
+  <YunSidebar v-if="$slots['sidebar-child']">
+    <slot name="sidebar-child" />
+  </YunSidebar>
+  <YunSidebar v-else />
+
+  <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" />
+      </template>
+      <template #main-content>
+        <div text="center" class="yun-text-light" p="2">
+          {{ t('counter.albums', albums.length) }}
+        </div>
+        <YunAlbumList :albums="albums" />
+        <RouterView />
+      </template>
+    </component>
+  </RouterView>
 </template>

package/layouts/archives.vue

@@ -18,13 +18,20 @@ useSchemaOrg([
 </script>
 
 <template>
-  <Layout>
-    <template #main-header>
-      <YunPageHeader :title="title || t('menu.archives')" :icon="frontmatter.icon || 'i-ri-archive-line'" :color="frontmatter.color" />
-    </template>
-    <template #main-content>
-      <RouterView />
-      <YunPostCollapse :posts="site.postList" />
-    </template>
-  </Layout>
+  <YunSidebar v-if="$slots['sidebar-child']">
+    <slot name="sidebar-child" />
+  </YunSidebar>
+  <YunSidebar v-else />
+
+  <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" />
+      </template>
+      <template #main-content>
+        <RouterView />
+        <YunPostCollapse :posts="site.postList" />
+      </template>
+    </component>
+  </RouterView>
 </template>

package/layouts/categories.vue

@@ -39,30 +39,37 @@ useSchemaOrg([
 </script>
 
 <template>
-  <Layout>
-    <template #main-header>
-      <YunPageHeader
-        :title="title || t('menu.categories')"
-        :icon="frontmatter.icon || 'i-ri-folder-2-line'"
-        :color="frontmatter.color"
-      />
-    </template>
-    <template #main-content>
-      <div text="center" class="yun-text-light" p="2">
-        {{ t('counter.categories', categories.children.length) }}
-      </div>
-      <YunCategories :categories="categories.children" />
-      <RouterView />
-    </template>
+  <YunSidebar v-if="$slots['sidebar-child']">
+    <slot name="sidebar-child" />
+  </YunSidebar>
+  <YunSidebar v-else />
 
-    <template #main-nav-before>
-      <YunCard v-if="curCategory" class="post-collapse-container" m="t-4" w="full">
+  <RouterView v-slot="{ Component }">
+    <component :is="Component">
+      <template #main-header>
         <YunPageHeader
-          :title="curCategory === 'Uncategorized' ? t('category.uncategorized') : curCategory.split('/').join(' / ')"
-          icon="i-ri-folder-open-line"
+          :title="title || t('menu.categories')"
+          :icon="frontmatter.icon || 'i-ri-folder-2-line'"
+          :color="frontmatter.color"
         />
-        <YunPostCollapse w="full" m="b-4" p="x-20 lt-sm:x-5" :posts="posts" />
-      </YunCard>
-    </template>
-  </Layout>
+      </template>
+      <template #main-content>
+        <div text="center" class="yun-text-light" p="2">
+          {{ t('counter.categories', categories.children.length) }}
+        </div>
+        <YunCategories :categories="categories.children" />
+        <RouterView />
+      </template>
+
+      <template #main-nav-before>
+        <YunCard v-if="curCategory" class="post-collapse-container" m="t-4" w="full">
+          <YunPageHeader
+            :title="curCategory === 'Uncategorized' ? t('category.uncategorized') : curCategory.split('/').join(' / ')"
+            icon="i-ri-folder-open-line"
+          />
+          <YunPostCollapse w="full" m="b-4" p="x-20 lt-sm:x-5" :posts="posts" />
+        </YunCard>
+      </template>
+    </component>
+  </RouterView>
 </template>

package/layouts/default.vue

@@ -1,7 +1,8 @@
 <template>
-  <Layout>
-    <template #content>
-      <RouterView />
-    </template>
-  </Layout>
+  <YunSidebar v-if="$slots['sidebar-child']">
+    <slot name="sidebar-child" />
+  </YunSidebar>
+  <YunSidebar v-else />
+
+  <RouterView />
 </template>

package/layouts/gallery.vue

@@ -29,26 +29,33 @@ const YunGallery = runtimeConfig.value.addons['valaxy-addon-lightgallery']
 </script>
 
 <template>
-  <Layout>
-    <template #main-header>
-      <YunPageHeader
-        :title="title || t('title.gallery')"
-        :icon="frontmatter.icon || 'i-ri-gallery-line'"
-        :color="frontmatter.color"
-      />
-    </template>
-    <template #main-content>
-      <div text="center" class="yun-text-light" p="2">
-        {{ t('counter.photos', photos.length) }}
-      </div>
-      <div class="page-action" text="center">
-        <a class="yun-icon-btn" :title="t('accessibility.back')" @click="() => router.back()">
-          <div i-ri-arrow-go-back-line />
-        </a>
-      </div>
-      <ValaxyGalleryDecrypt v-if="frontmatter.encryptedPhotos" :encrypted-photos="frontmatter.encryptedPhotos" />
-      <YunGallery v-else :photos="photos" />
-      <RouterView />
-    </template>
-  </Layout>
+  <YunSidebar v-if="$slots['sidebar-child']">
+    <slot name="sidebar-child" />
+  </YunSidebar>
+  <YunSidebar v-else />
+
+  <RouterView v-slot="{ Component }">
+    <component :is="Component">
+      <template #main-header>
+        <YunPageHeader
+          :title="title || t('title.gallery')"
+          :icon="frontmatter.icon || 'i-ri-gallery-line'"
+          :color="frontmatter.color"
+        />
+      </template>
+      <template #main-content>
+        <div text="center" class="yun-text-light" p="2">
+          {{ t('counter.photos', photos.length) }}
+        </div>
+        <div class="page-action" text="center">
+          <a class="yun-icon-btn" :title="t('accessibility.back')" @click="() => router.back()">
+            <div i-ri-arrow-go-back-line />
+          </a>
+        </div>
+        <ValaxyGalleryDecrypt v-if="frontmatter.encryptedPhotos" :encrypted-photos="frontmatter.encryptedPhotos" />
+        <YunGallery v-else :photos="photos" />
+        <RouterView />
+      </template>
+    </component>
+  </RouterView>
 </template>

package/layouts/post.vue

@@ -41,20 +41,27 @@ useSchemaOrg(
 </script>
 
 <template>
-  <Layout>
-    <template #main-header-after>
-      <YunPostMeta :frontmatter="frontmatter" />
-      <YunWalineMeta />
-      <YunPostCategoriesAndTags :frontmatter="frontmatter" />
-    </template>
-
-    <template #main-content-after>
-      <YunSponsor v-if="showSponsor" m="t-6" />
-      <ValaxyCopyright v-if="frontmatter.copyright || siteConfig.license.enabled" :url="url" m="y-4" />
-    </template>
-
-    <template #aside-custom>
-      <slot name="aside-custom" />
-    </template>
-  </Layout>
+  <YunSidebar v-if="$slots['sidebar-child']">
+    <slot name="sidebar-child" />
+  </YunSidebar>
+  <YunSidebar v-else />
+
+  <RouterView v-slot="{ Component }">
+    <component :is="Component">
+      <template #main-header-after>
+        <YunPostMeta :frontmatter="frontmatter" />
+        <YunWalineMeta />
+        <YunPostCategoriesAndTags :frontmatter="frontmatter" />
+      </template>
+
+      <template #main-content-after>
+        <YunSponsor v-if="showSponsor" m="t-6" />
+        <ValaxyCopyright v-if="frontmatter.copyright || siteConfig.license.enabled" :url="url" m="y-4" />
+      </template>
+
+      <template #aside-custom>
+        <slot name="aside-custom" />
+      </template>
+    </component>
+  </RouterView>
 </template>

package/layouts/tags.vue

@@ -58,38 +58,45 @@ const title = usePostTitle(frontmatter)
 </script>
 
 <template>
-  <Layout>
-    <template #main-header>
-      <YunPageHeader
-        :title="title || t('menu.tags')"
-        :icon="frontmatter.icon || 'i-ri-tag-line'"
-        :color="frontmatter.color"
-      />
-    </template>
-    <template #main-content>
-      <div class="yun-text-light" text="center" p="2">
-        {{ t('counter.tags', Array.from(tags).length) }}
-      </div>
-
-      <div class="justify-center items-end" flex="~ wrap" gap="1">
-        <YunLayoutPostTag
-          v-for="[key, tag] in Array.from(tags).sort()"
-          :key="key"
-          :title="key"
-          :count="tag.count"
-          :style="getTagStyle(tag.count)"
-          @click="displayTag(key.toString())"
+  <YunSidebar v-if="$slots['sidebar-child']">
+    <slot name="sidebar-child" />
+  </YunSidebar>
+  <YunSidebar v-else />
+
+  <RouterView v-slot="{ Component }">
+    <component :is="Component">
+      <template #main-header>
+        <YunPageHeader
+          :title="title || t('menu.tags')"
+          :icon="frontmatter.icon || 'i-ri-tag-line'"
+          :color="frontmatter.color"
         />
-      </div>
-
-      <RouterView />
-    </template>
-
-    <template #main-nav-before>
-      <YunCard v-if="curTag" ref="collapse" m="t-4" w="full">
-        <YunPageHeader :title="curTag" icon="i-ri-hashtag" />
-        <YunPostCollapse w="full" m="b-4" p="x-20 lt-sm:x-5" :posts="posts" />
-      </YunCard>
-    </template>
-  </Layout>
+      </template>
+      <template #main-content>
+        <div class="yun-text-light" text="center" p="2">
+          {{ t('counter.tags', Array.from(tags).length) }}
+        </div>
+
+        <div class="justify-center items-end" flex="~ wrap" gap="1">
+          <YunLayoutPostTag
+            v-for="[key, tag] in Array.from(tags).sort()"
+            :key="key"
+            :title="key"
+            :count="tag.count"
+            :style="getTagStyle(tag.count)"
+            @click="displayTag(key.toString())"
+          />
+        </div>
+
+        <RouterView />
+      </template>
+
+      <template #main-nav-before>
+        <YunCard v-if="curTag" ref="collapse" m="t-4" w="full">
+          <YunPageHeader :title="curTag" icon="i-ri-hashtag" />
+          <YunPostCollapse w="full" m="b-4" p="x-20 lt-sm:x-5" :posts="posts" />
+        </YunCard>
+      </template>
+    </component>
+  </RouterView>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.16.4",
+  "version": "0.17.0-beta.2",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@types/animejs": "^3.1.12",
-    "valaxy": "0.16.4",
+    "valaxy": "0.17.0-beta.2",
     "valaxy-addon-waline": "0.1.1"
   }
 }

package/pages/page/[page].vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-defineProps<{ page: string }>()
+import { useRoute } from 'vue-router'
+import { computed } from 'vue'
+
+const route = useRoute()
+const pageIndex = computed(() => Number.parseInt((route.params as { page: string }).page))
 </script>
 
 <template>
-  <YunPostList :cur-page="parseInt(page)" />
+  <YunPostList :cur-page="pageIndex" />
 </template>
-
-<route lang="yaml">
-meta:
-  layout: home
-</route>

package/tsconfig.json

@@ -11,8 +11,8 @@
     "resolveJsonModule": true,
     "types": [
       "vite/client",
-      "vite-plugin-pages/client",
-      "vite-plugin-vue-layouts/client"
+      "vite-plugin-vue-layouts/client",
+      "valaxy/client"
     ],
     "allowJs": true,
     "strict": true,

package/layouts/layout.vue

@@ -1,42 +0,0 @@
-<script lang="ts" setup>
-import { asAny } from 'valaxy'
-</script>
-
-<template>
-  <YunSidebar v-if="$slots['sidebar-child']">
-    <slot name="sidebar-child" />
-  </YunSidebar>
-  <YunSidebar v-else />
-
-  <RouterView v-slot="{ Component }">
-    <component :is="asAny(Component)">
-      <template #main-header>
-        <slot name="main-header" />
-      </template>
-
-      <template #main-header-after>
-        <slot name="main-header-after" />
-      </template>
-      <template #main>
-        <slot name="main" />
-      </template>
-      <template #main-content>
-        <slot name="main-content" />
-      </template>
-      <template #main-content-after>
-        <slot name="main-content-after" />
-      </template>
-      <template #main-nav-before>
-        <slot name="main-nav-before" />
-      </template>
-      <template #main-nav-after>
-        <slot name="main-nav-after" />
-      </template>
-      <template #aside-custom>
-        <slot name="aside-custom" />
-      </template>
-    </component>
-  </RouterView>
-
-  <YunBackToTop />
-</template>