valaxy 0.13.11 → 0.14.0

package/client/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeMount, provide, ref } from 'vue'
+import { computed, provide, ref } from 'vue'
 import { useHead, useSeoMeta } from '@vueuse/head'
 // @ts-expect-error virtual module
 import ValaxyUserApp from '/@valaxyjs/UserAppVue'
@@ -66,11 +66,6 @@ useSeoMeta({
 
 const onContentUpdated = ref()
 provide('onContentUpdated', onContentUpdated)
-
-onBeforeMount(() => {
-  // for browser with nav bar height
-  document.documentElement.style.setProperty('--app-height', `${window.innerHeight}px`)
-})
 </script>
 
 <template>

package/client/composables/category.ts

@@ -1,3 +1,5 @@
+import type { MaybeRef } from '@vueuse/core'
+import { computed, unref } from 'vue'
 import type { Post } from '../..'
 import { useSiteStore } from '../stores'
 
@@ -5,126 +7,148 @@ export interface BaseCategory {
   total: number
 }
 
-export interface ParentCategory extends BaseCategory {
-  children: Categories
-}
-
-export interface PostCategory extends BaseCategory {
-  posts: Post[]
+export interface CategoryList {
+  /**
+   * category name
+   */
+  name: string
+  /**
+   * total posts
+   */
+  total: number
+  children: (Post | CategoryList)[]
 }
+export type Category = CategoryList
+export type Categories = (Post | CategoryList)[]
 
-export type Category = ParentCategory | PostCategory
-
-// export type Categories = Map<string, Post[] | Category>
-export type Categories = Map<string, Category>
-
-export const isParentCategory = (category: any): category is ParentCategory => category.children
+// todo write unit test
+export const isCategoryList = (category: any): category is CategoryList => category.children
 
 /**
  * get categories from posts
+ * category: A/B/C
+ * {
+ *  name: 'A',
+ *  total: 1,
+ *  children: [
+ *    {
+ *      name: 'B'
+ *      total: 1,
+ *      children: [{ name: 'C', total: 1, children: [{ title: '' }] }]
+ *    }
+ *  ]
+ * }
  * @returns
  */
-export function useCategory(category?: string, posts: Post[] = []): ParentCategory {
-  if (!posts.length) {
-    const site = useSiteStore()
-    posts = site.postList
-  }
+export function useCategory(category?: MaybeRef<string>, posts: Post[] = []) {
+  return computed(() => {
+    const categories = unref(category)
 
-  const categoryMap: Category = {
-    total: posts.length,
-    children: new Map([
-      ['Uncategorized', { total: 0, posts: [] }],
-    ]),
-  }
+    if (!posts.length) {
+      const site = useSiteStore()
+      posts = site.postList
+    }
+
+    const categoryList: CategoryList = {
+      name: 'All',
+      total: posts.length,
+      children: [
+        { name: 'Uncategorized', total: 0, children: [] },
+      ],
+    }
+
+    const uncategorized = categoryList.children.find(item => item.name === 'Uncategorized')!
 
-  const uncategorized = categoryMap.children.get('Uncategorized') as PostCategory
-
-  posts.forEach((post: Post) => {
-    if (post.categories) {
-      if (Array.isArray(post.categories)) {
-        const len = post.categories.length
-
-        let c: ParentCategory = categoryMap
-        post.categories.forEach((category, i) => {
-          if (i === len - 1) {
-            if (c.children.has(category)) {
-              const cur = c.children.get(category) as PostCategory
-              if (cur.posts) {
-                cur.total += 1
-                cur.posts!.push(post)
+    posts.forEach((post: Post) => {
+      if (post.categories) {
+        if (Array.isArray(post.categories)) {
+          const len = post.categories.length
+
+          let curCategoryList: CategoryList = categoryList
+          let parentCategory: CategoryList = curCategoryList
+
+          post.categories.forEach((categoryName, i) => {
+            curCategoryList.total += 1
+            curCategoryList = (curCategoryList.children.find(item => item.name === categoryName)) as CategoryList
+
+            if (!curCategoryList) {
+              curCategoryList = {
+                name: categoryName,
+                total: 0,
+                children: [],
               }
+              parentCategory.children.push(curCategoryList)
             }
-            else {
-              c.children?.set(category, {
-                total: 1,
-                posts: [post],
-              })
+
+            if (i === len - 1) {
+              curCategoryList.children.push(post)
+              curCategoryList.total += 1
             }
+
+            parentCategory = curCategoryList
+          })
+        }
+        else {
+          // for string
+          const categoryName = post.categories
+          const curCategory = categoryList.children.find(item => item.name === categoryName)
+          if (curCategory) {
+            curCategory.total += 1
+            curCategory.children.push(post)
           }
           else {
-            if (c.children?.has(category)) {
-              const cur = c.children.get(category) as ParentCategory
-              cur.total += 1
-              c = cur
-            }
-            else {
-              const temp = {
-                total: 1,
-                children: new Map(),
-              }
-              c.children?.set(category, temp)
-              c = temp
-            }
+            categoryList.children.push({
+              name: categoryName,
+              total: 1,
+              children: [post],
+            })
           }
-        })
+        }
       }
       else {
-        // for string
-        const category = post.categories
-        if (categoryMap.children.has(category)) {
-          const cur = categoryMap.children.get(category) as PostCategory
-          cur.total += 1
-          cur.posts.push(post)
+        uncategorized.total += 1
+        uncategorized.children.push(post)
+      }
+    })
+
+    // `top` had been sorted in routes
+
+    // clear uncategorized
+    if (uncategorized!.total === 0)
+      categoryList.children.shift()
+
+    if (!categories) {
+      return categoryList
+    }
+    else {
+      let curCategoryList = categoryList
+      const categoryArr = categories.split('/')
+      for (const categoryName of categoryArr) {
+        const tempCList = curCategoryList.children.find(item => item.name === categoryName)
+        if (tempCList && tempCList.children) {
+          curCategoryList = tempCList as CategoryList
         }
         else {
-          categoryMap.children.set(category, {
-            total: 1,
-            posts: [post],
-          })
+          console.warn(`Do not have category: ${category}`)
+          return categoryList
         }
       }
-    }
-    else {
-      uncategorized.total += 1
-      uncategorized.posts.push(post)
+      return curCategoryList
     }
   })
+}
 
-  categoryMap.children.forEach((child) => {
-    if ('posts' in child)
-      child.posts.sort((a, b) => (b.top || 0) - (a.top || 0))
-  })
-
-  // clear uncategorized
-  if (uncategorized!.total === 0)
-    categoryMap.children?.delete('Uncategorized')
+/**
+ * remove item from category
+ * @param categoryList
+ * @param categoryName
+ */
+export function removeItemFromCategory(categoryList: CategoryList, categoryName: string) {
+  if (isCategoryList(categoryList)) {
+    const categoryArr = categoryName.split('/')
+    // todo loop find
+    const categoryListItemIndex = categoryList.children.findIndex(item => item.name === categoryArr[0])
 
-  if (!category) {
-    return categoryMap
-  }
-  else {
-    const categoryItem = categoryMap.children.get(category)
-    if (categoryItem) {
-      return {
-        total: categoryItem?.total,
-        children: new Map([
-          [category, categoryItem],
-        ]),
-      }
-    }
-    else {
-      console.warn(`Do not have category: ${category}`)
-      return categoryMap
-    }
+    categoryList.children.splice(categoryListItemIndex, 1)
   }
 }

package/client/composables/common.ts

@@ -2,7 +2,7 @@ import { useRoute } from 'vue-router'
 import { computed, inject } from 'vue'
 import { isClient } from '@vueuse/core'
 
-import type { PageData, Post } from '../../types'
+import type { PageData, Post } from '../..'
 import { useSiteConfig } from '../config'
 
 export function useFrontmatter() {

package/client/composables/helper.ts

@@ -7,7 +7,7 @@ import { ref } from 'vue'
  * @param target
  * @returns
  */
-export function useInvisibleElement(target: Ref<HTMLElement>) {
+export function useInvisibleElement(target: Ref<HTMLElement | undefined>) {
   const isVisible = ref(false)
   const { top } = useElementBounding(target)
   useIntersectionObserver(target, ([{ isIntersecting }]) => {

package/client/composables/post.ts

@@ -1,12 +1,12 @@
-import type { Ref } from 'vue'
+import type { ComputedRef } from 'vue'
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import type { Post } from '../..'
+import type { Post } from 'valaxy'
 import { sortByDate } from '../utils'
 import { useSiteStore } from '../stores'
 
-export const usePostTitle = (post: Ref<Post>) => {
+export const usePostTitle = (post: ComputedRef<Post>) => {
   const { locale } = useI18n()
   return computed(() => {
     const lang = locale.value === 'zh-CN' ? 'zh' : locale.value

package/client/main.ts

@@ -10,7 +10,11 @@ import 'uno.css'
 
 import setupMain from './setup/main'
 
-const routes = setupLayouts(__DEV__ ? generatedRoutes : generatedRoutes.filter(i => !i.meta?.frontmatter.draft))
+const routes = setupLayouts(__DEV__
+  ? generatedRoutes
+  : generatedRoutes.filter(i =>
+    !i.meta?.frontmatter.draft && !i.meta?.frontmatter.hide,
+  ))
 
 // https://github.com/antfu/vite-ssg
 export const createApp = ViteSSG(

package/client/styles/widgets/banner.scss

@@ -1,16 +1,18 @@
 @use "../mixins" as *;
 
 $banner-animation-duration: 1s;
-$line-animation-duration: 0.4s;
 $char-animation-duration: 0.4s;
 
 #banner {
+  --banner-line-height: 0;
+  --line-animation-duration: 0.4s;
+
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
-  height: var(--app-height, 100vh);
+  height: var(--banner-height, 100vh);
 }
 
 .banner-char-container {
@@ -19,6 +21,18 @@ $char-animation-duration: 0.4s;
   align-items: center;
 }
 
+.banner-line-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: var(--banner-line-height);
+
+  &.bottom {
+    justify-content: end;
+  }
+}
+
 .vertical-line {
   &-top,
   &-bottom {
@@ -27,14 +41,13 @@ $char-animation-duration: 0.4s;
     width: 1px;
     height: 0;
     animation-name: extend-line;
-    animation-duration: $line-animation-duration;
+    animation-duration: var(--line-animation-duration);
     animation-fill-mode: forwards;
     animation-timing-function: ease-in;
   }
 
   &-bottom {
-    position: absolute;
-    bottom: 0;
+    flex-direction: column-reverse;
   }
 }
 
@@ -76,7 +89,7 @@ $char-animation-duration: 0.4s;
     border-right-width: 0px;
     animation-name: char-move-left;
     animation-duration: $char-animation-duration;
-    animation-delay: $line-animation-duration;
+    animation-delay: var(--line-animation-duration);
     animation-fill-mode: forwards;
     animation-timing-function: ease-out;
   }
@@ -87,7 +100,7 @@ $char-animation-duration: 0.4s;
     border-left-width: 0px;
     animation-name: char-move-right;
     animation-duration: $char-animation-duration;
-    animation-delay: $line-animation-duration;
+    animation-delay: var(--line-animation-duration);
     animation-fill-mode: forwards;
     animation-timing-function: ease-out;
   }