valaxy-theme-yun 0.19.13 → 0.20.0-beta.10

package/layouts/categories.vue

@@ -14,6 +14,13 @@ const route = useRoute()
 const curCategory = computed(() => (route.query.category as string || ''))
 const categories = useCategories()
 
+const pageIcon = computed(() => {
+  if (!frontmatter.value.icon)
+    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    frontmatter.value.icon = 'i-ri-folder-2-line'
+  return frontmatter.value.icon
+})
+
 const posts = computed(() => {
   const list = site.postList.filter((post) => {
     if (post.categories && curCategory.value !== 'Uncategorized') {
@@ -39,38 +46,47 @@ useSchemaOrg([
 </script>
 
 <template>
-  <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.categories')"
-          :icon="frontmatter.icon || 'i-ri-folder-2-line'"
-          :color="frontmatter.color"
-          :page-title-class="frontmatter.pageTitleClass"
-        />
-      </template>
-      <template #main-content>
-        <div text="center" class="yun-text-light" p="2">
-          {{ t('counter.categories', Array.from(categories.children).length) }}
-        </div>
-        <YunCategories :categories="categories.children" />
-        <RouterView />
-      </template>
+  <YunLayoutWrapper>
+    <YunLayoutLeft />
 
-      <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="pageIcon"
+            :color="frontmatter.color"
+            :page-title-class="frontmatter.pageTitleClass"
           />
-          <YunPostCollapse w="full" m="b-4" p="x-20 lt-sm:x-5" :posts="posts" />
-        </YunCard>
-      </template>
-    </component>
-  </RouterView>
+        </template>
+        <template #main-content>
+          <Transition
+            enter-active-class="animate-fade-in animate-duration-400"
+            appear
+          >
+            <div text="center" class="yun-text-light" p="2">
+              {{ t('counter.categories', Array.from(categories.children).length) }}
+            </div>
+          </Transition>
+          <YunCategories :categories="categories.children" />
+          <RouterView />
+        </template>
+
+        <template #main-nav-before>
+          <YunCard v-if="curCategory" class="post-collapse-container" m="t-4" w="full">
+            <YunPageHeader
+              m="t-10"
+              :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>
+
+    <YunLayoutRight />
+  </YunLayoutWrapper>
+
+  <YunFooter />
 </template>

package/layouts/default.vue

@@ -1,8 +1,13 @@
+<script setup lang="ts">
+// layout
+</script>
+
 <template>
-  <YunSidebar v-if="$slots['sidebar-child']">
-    <slot name="sidebar-child" />
-  </YunSidebar>
-  <YunSidebar v-else />
+  <YunLayoutWrapper>
+    <YunLayoutLeft />
+    <RouterView />
+    <YunLayoutRight />
+  </YunLayoutWrapper>
 
-  <RouterView />
+  <YunFooter />
 </template>

package/layouts/empty.vue

@@ -0,0 +1,3 @@
+<template>
+  <RouterView />
+</template>

package/layouts/gallery.vue

@@ -29,34 +29,35 @@ const YunGallery = runtimeConfig.value.addons['valaxy-addon-lightgallery']
 </script>
 
 <template>
-  <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"
-          :page-title-class="frontmatter.pageTitleClass"
-        />
-      </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>
+  <YunLayoutWrapper>
+    <YunLayoutLeft />
+
+    <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"
+            :page-title-class="frontmatter.pageTitleClass"
+          />
+        </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>
+  </YunLayoutWrapper>
+
+  <YunFooter />
 </template>

package/layouts/home.vue

@@ -1,13 +1,9 @@
 <script lang="ts" setup>
-import { useLayout } from 'valaxy'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { useYunAppStore } from '../stores'
 import { useThemeConfig } from '../composables'
 
-const yunStore = useYunAppStore()
 const route = useRoute()
-const isHome = useLayout('home')
 const themeConfig = useThemeConfig()
 
 const isPage = computed(() => route.path.startsWith('/page'))
@@ -19,20 +15,25 @@ const showNotice = computed(() => {
 </script>
 
 <template>
-  <main
-    class="yun-main flex-center"
-    :class="(isHome && !yunStore.leftSidebar.isOpen) ? 'pl-0' : 'md:pl-$va-sidebar-width'" flex="~ col" w="full"
+  <YunLayoutWrapper
+    class="items-center  flex-col"
+    :class="{
+      'mt-0!': !isPage,
+    }"
   >
-    <YunSidebar :show-hamburger="true" />
-
     <template v-if="!isPage">
-      <YunBanner v-if="themeConfig.banner.enable" />
+      <YunBanner />
       <YunSay v-if="themeConfig.say.enable" w="full" />
+      <YunPrologue class="absolute left-0 top-0 right-0 bottom-0" />
     </template>
 
     <YunNotice
       v-if="showNotice"
-      :content="themeConfig.notice.content" mt="4"
+      class="mb-10"
+      :class="{
+        'mt-4': !isPage,
+      }"
+      :content="themeConfig.notice.content"
     />
 
     <slot name="board" />
@@ -42,5 +43,5 @@ const showNotice = computed(() => {
     </slot>
 
     <YunFooter />
-  </main>
+  </YunLayoutWrapper>
 </template>

package/layouts/post.vue

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

package/layouts/posts.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+// not use
+</script>
+
+<template>
+  <div class="pt-36">
+    <YunPostList />
+  </div>
+  <YunFooter />
+</template>

package/layouts/projects.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useFrontmatter, useSiteConfig } from 'valaxy'
+
+// layout
+const siteConfig = useSiteConfig()
+const fm = useFrontmatter()
+</script>
+
+<template>
+  <YunLayoutWrapper>
+    <div flex="~ col">
+      <YunProjects />
+      <!-- <YunLayoutLeft /> -->
+      <!-- <RouterView /> -->
+      <!-- <YunLayoutRight /> -->
+      <YunSponsor class="mt-4" />
+      <YunComment
+        v-if="siteConfig.comment.enable && fm.comment !== false"
+        class="max-w-4xl m-auto"
+      />
+    </div>
+  </YunLayoutWrapper>
+
+  <YunFooter />
+</template>

package/layouts/tags.vue

@@ -53,51 +53,61 @@ function displayTag(tag: string) {
 }
 
 const title = usePostTitle(frontmatter)
+const tagArr = computed(() => Array.from(tags.value).sort())
 
 // use flex to fix `overflow-wrap: break-words;` not working in Safari
 </script>
 
 <template>
-  <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"
-          :page-title-class="frontmatter.pageTitleClass"
-        />
-      </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())"
+  <YunLayoutWrapper>
+    <YunLayoutLeft />
+
+    <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"
+            :page-title-class="frontmatter.pageTitleClass"
           />
-        </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>
+        <template #main-content>
+          <Transition
+            enter-active-class="animate-fade-in animate-duration-400"
+            appear
+          >
+            <div class="yun-text-light" text="center" p="2">
+              {{ t('counter.tags', tagArr.length) }}
+            </div>
+          </Transition>
+
+          <div class="justify-center items-end" flex="~ wrap" gap="1">
+            <YunLayoutPostTag
+              v-for="([key, tag], i) in tagArr"
+              :key="key"
+              :i="i"
+              :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>
+
+    <YunLayoutRight />
+  </YunLayoutWrapper>
+
+  <YunFooter />
 </template>

package/node/config.ts

@@ -15,9 +15,6 @@ export const defaultThemeConfig: ThemeConfig = {
   banner: {
     enable: true,
     title: '云游君的小站',
-    cloud: {
-      enable: true,
-    },
   },
 
   bg_image: {
@@ -27,7 +24,7 @@ export const defaultThemeConfig: ThemeConfig = {
   },
 
   say: {
-    enable: true,
+    enable: false,
     api: '',
     // api: 'https://el-bot-api.elpsy.cn/api/words/young',
     hitokoto: {
@@ -96,7 +93,7 @@ export const defaultThemeConfig: ThemeConfig = {
     },
     'twitter': {
       color: '#1da1f2',
-      icon: 'i-ri-twitter-line',
+      icon: 'i-ri-twitter-x-fill',
     },
     'wechat': {
       color: '#1AAD19',

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.19.13",
+  "type": "module",
+  "version": "0.20.0-beta.10",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -19,15 +20,23 @@
   },
   "main": "index.ts",
   "module": "index.ts",
+  "scripts": {
+    "release": "bumpp && npm publish"
+  },
   "dependencies": {
-    "@explosions/fireworks": "^0.0.2",
+    "@ctrl/tinycolor": "^4.1.0",
+    "@explosions/fireworks": "^0.1.0",
     "@iconify-json/ant-design": "^1.2.1",
-    "@iconify-json/simple-icons": "^1.2.4",
-    "animejs": "^3.2.2"
+    "@iconify-json/simple-icons": "^1.2.5",
+    "@vueuse/motion": "^2.2.5",
+    "animejs": "^3.2.2",
+    "gsap": "^3.12.5",
+    "primevue": "^4.0.7",
+    "radix-vue": "^1.9.6"
   },
   "devDependencies": {
     "@types/animejs": "^3.1.12",
-    "valaxy": "0.19.13",
-    "valaxy-addon-waline": "0.2.0"
+    "valaxy": "workspace:*",
+    "valaxy-addon-waline": "workspace:*"
   }
-}
+}

package/pages/page/[page].vue

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

package/pages/posts/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// TODO
+</script>
+
+<template>
+  <div class="mt-37 mb-4">
+    <YunPostList />
+  </div>
+
+  <YunFooter />
+</template>

package/setup/main.ts

@@ -1,21 +1,63 @@
-import { defineAppSetup, useAppStore } from 'valaxy'
-import { nextTick } from 'vue'
+import { defineAppSetup } from 'valaxy'
+import '../styles/global.scss'
+import { MotionPlugin } from '@vueuse/motion'
+
+import PrimeVue from 'primevue/config'
+import AnimateOnScroll from 'primevue/animateonscroll'
+import StyleClass from 'primevue/styleclass'
+import ToastService from 'primevue/toastservice'
+
+import primeStyles from '../styles/primevue'
+import '../styles/primevue/tooltip.scss'
 import { useYunAppStore } from '../stores'
 
 export default defineAppSetup((ctx) => {
   // can do for setup
 
-  const { router } = ctx
+  const { router, app } = ctx
+  // https://motion.vueuse.org/
+  app.use(MotionPlugin)
+  // primevue
+  app.use(PrimeVue, {
+    unstyled: true,
+    // ripple: true,
+
+    pt: {
+      // tooltip: {
+      //   arrow: {
+      //     style: {
+      //       borderBottomColor: 'var(--p-primary-color)',
+      //     },
+      //   },
+      //   text: '!bg-primary !text-primary-contrast !font-medium',
+      // },
+      ...primeStyles,
+
+      dock: {
+        root: 'yun-dock',
+        list: 'yun-dock-list',
+        listContainer: 'yun-dock-list-container',
+        item: 'yun-dock-item',
+        itemLink: 'yun-dock-item-link',
+      },
+    },
+  })
+  app.directive('animateonscroll', AnimateOnScroll)
+  app.directive('styleclass', StyleClass)
+
+  // use floating-vue
+  // app.directive('tooltip', Tooltip)
+  app.use(ToastService)
+
+  // app.$primevue.config.ripple = true
+
   router.afterEach(() => {
     /**
      * router import order
      * @see https://pinia.vuejs.org/zh/core-concepts/outside-component-usage.html#single-page-applications
      */
-    const appStore = useAppStore()
-    const yunAppStore = useYunAppStore()
-    nextTick(() => {
-      if (appStore.isMobile)
-        yunAppStore.leftSidebar.close()
-    })
+    const app = useYunAppStore()
+    if (app.fullscreenMenu.isOpen)
+      app.fullscreenMenu.toggle()
   })
 })

package/stores/app.ts

@@ -1,11 +1,33 @@
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import { useDynamicLeftSidebar } from 'valaxy'
+import { isClient, useScroll, useToggle } from '@vueuse/core'
+import { useScreenSize } from 'valaxy'
 
 export const useYunAppStore = defineStore('yun-app', () => {
-  const leftSidebar = useDynamicLeftSidebar()
+  // 左侧边栏
+  const [isLeftSidebarOpen, toggleLeftSidebar] = useToggle()
+  // 右侧边栏
+  const [isRightSidebarOpen, toggleRightSidebar] = useToggle()
+  // 全屏菜单
+  const [isFullscreenMenuOpen, toggleFullscreenMenu] = useToggle()
+
+  // init once
+  const size = useScreenSize()
 
   return {
-    leftSidebar,
+    size,
+    leftSidebar: {
+      isOpen: isLeftSidebarOpen,
+      toggle: toggleLeftSidebar,
+    },
+    rightSidebar: {
+      isOpen: isRightSidebarOpen,
+      toggle: toggleRightSidebar,
+    },
+    fullscreenMenu: {
+      isOpen: isFullscreenMenuOpen,
+      toggle: toggleFullscreenMenu,
+    },
+    scrollY: isClient ? useScroll(window).y : 0,
   }
 })