valaxy-theme-yun 0.25.7 → 0.25.9

package/components/collection/YunCollectionItem.vue

@@ -8,9 +8,19 @@ defineProps<{
 
 <template>
   <RouterLink
-    class="inline-flex rounded p-4 h-50 w-40 bg-gray-100 dark:bg-dark-300 shadow"
-    :to="`/collections/${collection.id}`"
+    :to="`/collections/${collection.key}/`"
+    :title="collection.title"
+    class="flex flex-col gap-2 hover:border-b-0!"
   >
-    Book
+    <div class="inline-flex rounded h-40 w-30 bg-gray-100 dark:bg-dark-300 shadow hover:shadow-md transition overflow-hidden">
+      <img
+        :src="collection.cover"
+        :alt="collection.title"
+        class="flex size-full object-cover max-w-none"
+      >
+    </div>
+    <div class="text-sm font-bold text-center op-80 hover:op-100">
+      {{ collection.title }}
+    </div>
   </RouterLink>
 </template>

package/components/collection/YunCollectionSidebar.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { useCollection } from 'valaxy'
+
+const { collection } = useCollection()
+</script>
+
+<template>
+  <YunCard class="collection p-4 min-h-sm justify-start items-start" flex="~ col gap-1">
+    <section class="yun-sidebar-item">
+      <RouterLink :to="`/collections/${collection.key}/`" class="title">
+        {{ collection.title }}
+      </RouterLink>
+      <div class="items">
+        <div v-for="item in collection.items" :key="item.key" class="item">
+          <div class="indicator" />
+          <RouterLink
+            :to="`/collections/${collection.key}/${item.key}`"
+          >
+            <p class="text">
+              {{ item.title }}
+            </p>
+          </RouterLink>
+        </div>
+      </div>
+    </section>
+  </YunCard>
+</template>
+
+<style lang="scss">
+.collection {
+  .yun-sidebar-item {
+    .title {
+      font-weight: 500;
+      font-size: 16px;
+      color: var(--va-c-text-1);
+    }
+
+    .items {
+      border-left: 1px solid var(--va-c-divider);
+
+      color: #666;
+      font-size: 0.9em;
+
+      padding-left: 16px;
+
+      .item {
+        .text {
+          color: var(--va-c-text-2);
+          flex-grow: 1;
+          padding: 4px 0;
+          font-size: 14px;
+          line-height: 24px;
+          transition: color .25s;
+        }
+
+        .indicator {
+          border-radius: 2px;
+          width: 2px;
+          transition: background-color .25s;
+          position: absolute;
+          top: 6px;
+          bottom: 6px;
+        }
+
+        .router-link-active {
+          color: var(--va-c-primary);
+          font-weight: 500;
+
+          .text {
+            color: var(--va-c-primary);
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/components/layout/YunLayoutLeft.vue

@@ -1,12 +1,26 @@
 <script setup lang="ts">
+import { useFrontmatter } from 'valaxy'
+import { computed } from 'vue'
 import { useYunAppStore } from '../../stores'
 
 const yun = useYunAppStore()
+
+const fm = useFrontmatter()
+const showLeftLayout = computed(() => {
+  if (typeof fm.value.sidebar !== 'undefined')
+    return fm.value.sidebar
+  return yun.size.isLg
+})
 </script>
 
 <template>
-  <div v-if="yun.size.isLg" flex="~ col" class="gap-4 sticky top-$yun-margin-top w-80">
-    <YunSidebarCard />
-    <YunAdBoard />
+  <div
+    v-if="showLeftLayout"
+    flex="~ col" class="gap-4 sticky top-$yun-margin-top w-80"
+  >
+    <slot>
+      <YunSidebarCard />
+      <YunAdBoard />
+    </slot>
   </div>
 </template>

package/layouts/categories.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { defineWebPage, useSchemaOrg } from '@unhead/schema-org/vue'
-import { useCategories, useFrontmatter, usePostTitle, useSiteStore } from 'valaxy'
+import { useCategories, useFrontmatter, useSiteStore, useValaxyI18n } from 'valaxy'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
@@ -36,7 +36,7 @@ const posts = computed(() => {
   return list
 })
 
-const title = usePostTitle(frontmatter)
+const { $tO } = useValaxyI18n()
 
 useSchemaOrg([
   defineWebPage({
@@ -53,7 +53,7 @@ useSchemaOrg([
       <component :is="Component">
         <template #main-header>
           <YunPageHeader
-            :title="title || t('menu.categories')"
+            :title="$tO(frontmatter.title) || t('menu.categories')"
             :icon="pageIcon"
             :color="frontmatter.color"
             :page-title-class="frontmatter.pageTitleClass"

package/layouts/collection.vue

@@ -4,12 +4,28 @@
 
 <template>
   <YunLayoutWrapper>
+    <YunLayoutLeft>
+      <YunCollectionSidebar />
+    </YunLayoutLeft>
+
     <RouterView v-slot="{ Component }">
       <component :is="Component">
-        <div flex="~ wrap" gap="4">
-          Collection
-        </div>
+        <template #main-header-after>
+          <YunMainHeaderAfter />
+        </template>
+        <template #main-content-after>
+          <YunMainContentAfter />
+        </template>
+        <template #aside-custom>
+          <slot name="aside-custom" />
+        </template>
+
+        <template #main-nav>
+          <!--  -->
+        </template>
       </component>
     </RouterView>
+
+    <YunLayoutRight />
   </YunLayoutWrapper>
 </template>

package/layouts/collections.vue

@@ -1,19 +1,36 @@
 <script setup lang="ts">
-import { useCollections } from 'valaxy'
+import { useCollections, useFrontmatter, useValaxyI18n } from 'valaxy'
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
+const { $tO } = useValaxyI18n()
+const fm = useFrontmatter()
 const { collections } = useCollections()
 </script>
 
 <template>
   <YunLayoutWrapper>
+    <YunLayoutLeft />
+
     <RouterView v-slot="{ Component }">
       <component :is="Component">
-        <div flex="~ wrap" gap="4">
-          <YunCollectionItem
-            v-for="collection in collections" :key="collection.id"
-            :collection="collection"
+        <template #main-header>
+          <YunPageHeader
+            :title="$tO(fm.title) || t('menu.collections')"
+            :icon="fm.icon"
+            :page-title-class="fm.pageTitleClass"
           />
-        </div>
+        </template>
+
+        <template #main-content>
+          <div flex="~ wrap" gap="6">
+            <YunCollectionItem
+              v-for="collection in collections"
+              :key="collection.key"
+              :collection="collection"
+            />
+          </div>
+        </template>
       </component>
     </RouterView>
   </YunLayoutWrapper>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valaxy-theme-yun",
   "type": "module",
-  "version": "0.25.7",
+  "version": "0.25.9",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -32,8 +32,8 @@
   },
   "devDependencies": {
     "@types/animejs": "^3.1.13",
-    "valaxy": "0.25.7",
-    "valaxy-addon-waline": "0.2.1"
+    "valaxy-addon-waline": "0.2.1",
+    "valaxy": "0.25.9"
   },
   "scripts": {
     "release": "bumpp && pnpm publish"