valaxy-theme-yun 0.13.11 → 0.14.0

package/components/YunBanner.vue

@@ -5,7 +5,7 @@
  * @description https://github.com/YunYouJun/hexo-theme-yun
  */
 
-import { CSSProperties, computed } from 'vue'
+import { CSSProperties, computed, onMounted, ref } from 'vue'
 import { random } from 'valaxy'
 import { useThemeConfig } from '../composables'
 
@@ -22,16 +22,20 @@ const chars = computed(() => {
 // height of top/bottom line
 const lineH = computed(() => chars.value.reduce((a, b) => a + b, 0) / 2)
 
-const lineStyle = computed(() => (
-  {
-    '--banner-line-height': `calc(var(--app-height, 100vh) / 2 - ${lineH.value}rem)`,
+const bannerStyles = ref()
+onMounted(() => {
+  bannerStyles.value = {
+    '--banner-height': `${window.innerHeight}px`,
+    '--banner-line-height': `calc(var(--banner-height, 100vh) / 2 - ${lineH.value}rem)`,
   } as CSSProperties
-))
+})
 </script>
 
 <template>
-  <div id="banner" :style="lineStyle">
-    <div class="banner-line vertical-line-top" :style="lineStyle" />
+  <div id="banner" :style="bannerStyles">
+    <div class="banner-line-container">
+      <div class="banner-line vertical-line-top" />
+    </div>
     <div class="banner-char-container">
       <div v-for="c, i in themeConfig.banner.title" :key="i" class="char-box">
         <span
@@ -45,11 +49,12 @@ const lineStyle = computed(() => (
         </span>
       </div>
     </div>
-    <div class="banner-line vertical-line-bottom" :style="lineStyle" />
+    <div class="banner-line-container bottom">
+      <div class="banner-line vertical-line-bottom" />
+    </div>
+    <YunCloud v-if="themeConfig.banner.cloud?.enable" />
+    <YunGoDown />
   </div>
-
-  <YunGoDown />
-  <YunCloud v-if="themeConfig.banner.cloud?.enable" />
 </template>
 
 <style lang="scss">

package/components/YunCategories.vue

@@ -8,7 +8,6 @@ const props = withDefaults(defineProps<{
    * 当前层级
    */
   level?: number
-  displayCategory?: (category: string) => void
   collapsable?: boolean
 }>(), {
   level: 0,
@@ -19,8 +18,13 @@ const collapsable = ref(props.collapsable)
 </script>
 
 <template>
-  <ul v-for="category, key in Object.fromEntries(categories)" :key="key" class="category-list" m="l-4">
-    <YunCategory :name="key.toString()" :category="category" :level="level + 1" :display-category="displayCategory" :collapsable="collapsable" />
+  <ul v-for="category in categories" :key="category.name" class="category-list" m="l-4">
+    <YunCategory
+      :parent-key="category.name"
+      :category="category"
+      :level="level + 1"
+      :collapsable="collapsable"
+    />
   </ul>
 </template>
 

package/components/YunCategory.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import type { Category, Post } from 'valaxy'
-import { isParentCategory } from 'valaxy'
+import { isCategoryList, useInvisibleElement } from 'valaxy'
 import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
 
-const props = withDefaults(defineProps<{
-  name: string
+withDefaults(defineProps<{
+  parentKey: string
   // to eliminate the warning
   category: Category
   level?: number
-  displayCategory?: (category: string) => void
 
   /**
    * collapse children
@@ -19,34 +19,70 @@ const props = withDefaults(defineProps<{
   collapsable: true,
 })
 
-const collapsable = ref(props.collapsable)
-const { t, locale } = useI18n()
+const router = useRouter()
 
+const collapse = ref(true)
+const { t } = useI18n()
+
+/**
+ * i18n
+ */
+const { locale } = useI18n()
 const getTitle = (post: Post | any) => {
   const lang = locale.value === 'zh-CN' ? 'zh' : locale.value
   return post[`title_${lang}`] ? post[`title_${lang}`] : post.title
 }
+
+const postCollapseElRef = ref<HTMLElement>()
+const { show } = useInvisibleElement(postCollapseElRef)
+/**
+ * scroll to post collapse by category
+ * @param category
+ */
+const jumpToDisplayCategory = (category: string) => {
+  router.push({
+    query: {
+      category,
+    },
+  })
+
+  show()
+}
+
+onMounted(() => {
+  const postCollapseEl = document.querySelector('.post-collapse-container') as HTMLElement
+  if (postCollapseEl)
+    postCollapseElRef.value = postCollapseEl
+})
 </script>
 
 <template>
-  <li v-if="category.total" class="category-list-item inline-flex items-center cursor-pointer">
-    <span class="folder-action inline-flex" @click="collapsable = !collapsable">
-      <div v-if="collapsable" i-ri-folder-add-line />
+  <li class="category-list-item inline-flex items-center cursor-pointer">
+    <span class="folder-action inline-flex" @click="collapse = !collapse">
+      <div v-if="collapse" i-ri-folder-add-line />
       <div v-else style="color:var(--va-c-primary)" i-ri-folder-reduce-line /></span>
-    <span class="category-name" m="l-1" @click="displayCategory ? displayCategory(name) : null">
-      {{ name === 'Uncategorized' ? t('category.uncategorized') : name }} [{{ category.total }}]
+    <span class="category-name" m="l-1" @click="jumpToDisplayCategory(parentKey)">
+      {{ category.name === 'Uncategorized' ? t('category.uncategorized') : category.name }} [{{ category.total }}]
     </span>
   </li>
 
-  <template v-if="!collapsable">
-    <ul v-if="!isParentCategory(category)">
-      <li v-for="post, i in category.posts" :key="i" class="post-list-item" m="l-4">
-        <router-link v-if="post.title" :to="post.path || ''" class="inline-flex items-center">
-          <div i-ri-file-text-line />
-          <span m="l-1" font="serif black">{{ getTitle(post) }}</span>
-        </router-link>
+  <template v-if="!collapse">
+    <ul>
+      <li v-for="categoryItem, i in category.children" :key="i" class="post-list-item" m="l-4">
+        <template v-if="isCategoryList(categoryItem)">
+          <YunCategory
+            :parent-key="parentKey ? `${parentKey}/${categoryItem.name}` : categoryItem.name"
+            :category="categoryItem"
+          />
+        </template>
+
+        <template v-else>
+          <router-link 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>
+        </template>
       </li>
     </ul>
-    <YunCategories v-else :categories="category.children" :display-category="displayCategory" :collapsable="collapsable" />
   </template>
 </template>

package/components/YunPostCard.vue

@@ -38,7 +38,8 @@ const { icon, styles } = usePostProperty(props.post.type)
 
         <YunPostMeta :frontmatter="post" />
 
-        <div v-if="post.excerpt" class="markdown-body" text="left" w="full" p="x-6 lt-sm:4" v-html="post.excerpt" />
+        <div v-if="post.excerpt_type === 'text'" py="1" />
+        <div v-if="post.excerpt" class="markdown-body" text="left" w="full" p="x-6 lt-sm:4 y-1" v-html="post.excerpt" />
         <div m="b-5" />
 
         <a
@@ -57,7 +58,7 @@ const { icon, styles } = usePostProperty(props.post.type)
     <!-- always show -->
     <div w="full" class="yun-card-actions flex justify-between" border="t" text="sm">
       <div class="inline-flex">
-        <YunPostCategories :categories="post.categories" />
+        <YunPostCategories m="l-2" :categories="post.categories" />
       </div>
 
       <div class="post-tags inline-flex" m="r-2">

package/components/YunPostCategories.vue

@@ -12,7 +12,7 @@ defineProps<{
       path: '/categories/',
       query: { category: Array.isArray(categories) ? categories[categories.length - 1] : categories },
     }"
-    class="post-categories inline-flex justify-center items-center" m="l-2"
+    class="post-categories inline-flex justify-center items-center"
   >
     <div m="x-1" i-ri-folder-2-line />
     {{ Array.isArray(categories) ? categories.join(' > ') : categories }}

package/components/YunPostCollapse.vue

@@ -11,20 +11,22 @@ const props = defineProps<{
 const { t } = useI18n()
 
 const years = ref<number[]>([])
-const postList = ref<Record<string, Post[]>>({})
+const postListByYear = ref<Record<string, Post[]>>({})
 
 watch(() => props.posts, () => {
-  postList.value = {}
+  postListByYear.value = {}
   years.value = []
   props.posts.forEach((post) => {
+    if (post.hide && post.hide !== 'index')
+      return
     if (post.date) {
       const year = parseInt(formatDate(post.date, 'YYYY'))
-      if (postList.value[year]) {
-        postList.value[year].push(post)
+      if (postListByYear.value[year]) {
+        postListByYear.value[year].push(post)
       }
       else {
         years.value.push(year)
-        postList.value[year] = [post]
+        postListByYear.value[year] = [post]
       }
     }
   })
@@ -58,7 +60,7 @@ const sortedYears = computed(() => {
         </h2>
       </div>
 
-      <article v-for="post, j in sortByDate(postList[year], isDesc)" :key="j" class="post-item">
+      <article v-for="post, j in sortByDate(postListByYear[year], isDesc)" :key="j" class="post-item">
         <header class="post-header">
           <div class="post-meta">
             <time v-if="post.date" class="post-time" font="mono" opacity="80">{{ formatDate(post.date, 'MM-DD') }}</time>

package/components/YunPostMeta.vue

@@ -4,6 +4,7 @@ import { formatDate } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 
 defineProps<{
+  // FrontMatter
   frontmatter: Post
 }>()
 
@@ -14,7 +15,11 @@ const { t } = useI18n()
   <div v-if="frontmatter.draft" class="post-draft-icon" title="draft">
     <div i-ri-draft-line />
   </div>
-  <div v-if="frontmatter.top" class="post-top-icon">
+  <div v-if="frontmatter.hide" class="post-top-icon" color="$va-c-danger" :title="`hide:${frontmatter.hide}`">
+    <div v-if="frontmatter.hide === 'index'" i-ri-eye-close-line />
+    <div v-else i-ri-eye-off-line />
+  </div>
+  <div v-if="frontmatter.top" class="post-top-icon" color="$va-c-warning">
     <div i-ri-pushpin-line />
   </div>
 
@@ -52,7 +57,6 @@ const { t } = useI18n()
   position: absolute;
   top: 1rem;
   right: 1rem;
-  color: var(--va-c-warning);
   font-size: 1.2rem;
 }
 </style>

package/components/YunPostTags.vue

@@ -7,7 +7,10 @@ defineProps<{
 </script>
 
 <template>
-  <router-link v-for="tag, i in tags" :key="i" :to="{ path: '/tags/', query: { tag } }" m="x-1" class="post-tag inline-flex justify-center items-center">
+  <router-link
+    v-for="tag, i in tags" :key="i" :to="{ path: '/tags/', query: { tag } }" m="x-1"
+    class="post-tag inline-flex-center"
+  >
     <div m="r-1" i-ri-price-tag-3-line />
     {{ tag }}
   </router-link>

package/layouts/categories.vue

@@ -1,18 +1,17 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
-import { useCategory, useFrontmatter, useInvisibleElement, usePostTitle, useSiteStore } from 'valaxy'
+import { computed } from 'vue'
+import { useCategory, useFrontmatter, usePostTitle, useSiteStore } from 'valaxy'
 import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 
 const { t } = useI18n()
 
 const site = useSiteStore()
-
 const frontmatter = useFrontmatter()
-const categories = useCategory()
 
 const route = useRoute()
 const curCategory = computed(() => (route.query.category as string || ''))
+const categories = useCategory()
 
 const posts = computed(() => {
   const list = site.postList.filter((post) => {
@@ -20,7 +19,7 @@ const posts = computed(() => {
       if (typeof post.categories === 'string')
         return post.categories === curCategory.value
       else
-        return post.categories.includes(curCategory.value)
+        return post.categories.join('/').startsWith(curCategory.value) && post.categories[0] === curCategory.value.split('/')[0]
     }
     if (!post.categories && curCategory.value === 'Uncategorized')
       return post.categories === undefined
@@ -29,20 +28,6 @@ const posts = computed(() => {
   return list
 })
 
-const collapse = ref()
-const { show } = useInvisibleElement(collapse)
-
-const router = useRouter()
-const displayCategory = (category: string) => {
-  router.push({
-    query: {
-      category,
-    },
-  })
-
-  show()
-}
-
 const title = usePostTitle(frontmatter)
 </script>
 
@@ -57,15 +42,15 @@ const title = usePostTitle(frontmatter)
     </template>
     <template #main-content>
       <div text="center" class="yun-text-light" p="2">
-        {{ t('counter.categories', categories.children!.size) }}
+        {{ t('counter.categories', categories.children.length) }}
       </div>
-      <YunCategories :categories="categories.children!" :display-category="displayCategory" />
+      <YunCategories :categories="categories.children" />
       <router-view />
     </template>
 
     <template #main-nav-before>
-      <YunCard v-if="curCategory" ref="collapse" m="t-4" w="full">
-        <YunPageHeader :title="curCategory === 'Uncategorized' ? t('category.uncategorized') : curCategory" icon="i-ri-folder-open-line" />
+      <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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.13.11",
+  "version": "0.14.0",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -22,6 +22,6 @@
     "valaxy-addon-waline": "0.0.9"
   },
   "devDependencies": {
-    "valaxy": "0.13.11"
+    "valaxy": "0.14.0"
   }
 }

package/styles/common/markdown.scss

@@ -40,4 +40,8 @@ html.dark {
   img {
     margin: auto;
   }
+
+  p {
+    overflow: unset;
+  }
 }