valaxy-theme-yun 0.20.0-beta.1 → 0.20.0-beta.11

package/layouts/home.vue

@@ -1,10 +1,8 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { useYunAppStore } from '../stores'
 import { useThemeConfig } from '../composables'
 
-const yunStore = useYunAppStore()
 const route = useRoute()
 const themeConfig = useThemeConfig()
 
@@ -17,16 +15,12 @@ const showNotice = computed(() => {
 </script>
 
 <template>
-  <main
-    class="yun-main flex-center"
+  <YunLayoutWrapper
+    class="items-center flex-col"
     :class="{
-      'pl-0': !yunStore.leftSidebar.isOpen,
-      'md:pl-$va-sidebar-width': yunStore.leftSidebar.isOpen,
-      'pt-36': isPage,
-    }" flex="~ col" w="full"
+      'mt-0!': !isPage,
+    }"
   >
-    <YunSidebar :show-hamburger="true" />
-
     <template v-if="!isPage">
       <YunBanner />
       <YunSay v-if="themeConfig.say.enable" w="full" />
@@ -35,7 +29,7 @@ const showNotice = computed(() => {
 
     <YunNotice
       v-if="showNotice"
-      class="mb-10"
+      class="mb-2 md:mb-6"
       :class="{
         'mt-4': !isPage,
       }"
@@ -49,5 +43,5 @@ const showNotice = computed(() => {
     </slot>
 
     <YunFooter />
-  </main>
+  </YunLayoutWrapper>
 </template>

package/layouts/tags.vue

@@ -53,6 +53,7 @@ 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>
@@ -65,7 +66,6 @@ const title = usePostTitle(frontmatter)
       <component :is="Component">
         <template #main-header>
           <YunPageHeader
-            class="mt-8"
             :title="title || t('menu.tags')"
             :icon="frontmatter.icon || 'i-ri-tag-line'"
             :color="frontmatter.color"
@@ -73,14 +73,20 @@ const title = usePostTitle(frontmatter)
           />
         </template>
         <template #main-content>
-          <div class="yun-text-light" text="center" p="2">
-            {{ t('counter.tags', Array.from(tags).length) }}
-          </div>
+          <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] in Array.from(tags).sort()"
+              v-for="([key, tag], i) in tagArr"
               :key="key"
+              :i="i"
               :title="key"
               :count="tag.count"
               :style="getTagStyle(tag.count)"

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.20.0-beta.1",
+  "type": "module",
+  "version": "0.20.0-beta.11",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -19,9 +20,12 @@
   },
   "main": "index.ts",
   "module": "index.ts",
+  "scripts": {
+    "release": "bumpp && npm publish"
+  },
   "dependencies": {
     "@ctrl/tinycolor": "^4.1.0",
-    "@explosions/fireworks": "^0.0.2",
+    "@explosions/fireworks": "^0.1.0",
     "@iconify-json/ant-design": "^1.2.1",
     "@iconify-json/simple-icons": "^1.2.5",
     "@vueuse/motion": "^2.2.5",
@@ -32,7 +36,7 @@
   },
   "devDependencies": {
     "@types/animejs": "^3.1.12",
-    "valaxy-addon-waline": "0.2.0",
-    "valaxy": "0.20.0-beta.1"
+    "valaxy": "workspace:*",
+    "valaxy-addon-waline": "workspace:*"
   }
-}
+}

package/styles/animations/index.scss

@@ -4,6 +4,14 @@
 @use 'sass:map';
 @use '../vars.scss' as *;
 
+.transition-cubic-bezier-ease-in {
+  transition-timing-function: map.get($cubic-bezier, 'ease-in');
+}
+
+.transition-cubic-bezier-ease-in-out {
+  transition-timing-function: map.get($cubic-bezier, 'ease-in-out');
+}
+
 .v-enter-active,
 .v-leave-active {
   transition: opacity .2s map.get($cubic-bezier, 'ease-in');
@@ -34,3 +42,40 @@
     opacity: 1;
   }
 }
+
+// title-effects
+.yun-title-effects {
+  position: relative;
+  
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    opacity: 0;
+    border: 2px solid;
+    transition: 0.3s;
+    transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
+  }
+
+  &::before {
+    top: 0;
+    left: 0;
+    border-width: 2px 0 0 2px;
+    transform: translate3d(10px, 10px, 0);
+  }
+
+  &::after {
+    right: 0;
+    bottom: 0;
+    border-width: 0 2px 2px 0;
+    transform: translate3d(-10px, -10px, 0);
+  }
+
+  &:hover::before,
+  &:hover::after {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}

package/styles/css-vars.scss

@@ -26,7 +26,7 @@ html.dark {
 // animation
 @media screen and (width <= 768px) {
   :root {
-    --rect-margin: 20px;
+    --rect-margin: 16px;
   }
 }
 

package/styles/layout/index.scss

@@ -6,8 +6,3 @@
 html {
   overflow-y: scroll;
 }
-
-.yun-main {
-  transition: padding-left var(--va-transition-duration);
-  transition-timing-function: map.get($cubic-bezier, 'ease-in-out');
-}

package/unocss.config.ts

@@ -2,7 +2,6 @@ import { defineConfig } from 'unocss'
 
 export default defineConfig({
   shortcuts: [
-    ['yun-main', 'lt-md:pl-0'],
     ['yun-card', 'transition yun-transition shadow hover:shadow-lg'],
   ],
   rules: [

package/utils/animation.ts

@@ -1,4 +1,6 @@
 import { gsap } from 'gsap'
+// gsap/ScrollToPlugin is ESM, but gsap not include 'type:module' in package.json
+// use cjs for vite-ssg, optimizeDeps for ESM
 import ScrollToPlugin from 'gsap/dist/ScrollToPlugin'
 
 gsap.registerPlugin(ScrollToPlugin)

package/valaxy.config.ts

@@ -20,6 +20,7 @@ function ThemeVitePlugin(options: ResolvedValaxyOptions<ThemeConfig>): Plugin {
         },
 
         optimizeDeps: {
+          include: ['gsap/dist/ScrollToPlugin'],
           exclude: ['@docsearch/js'],
         },
       }