valaxy-theme-yun 0.14.35 → 0.14.37

package/components/YunAside.vue

@@ -19,8 +19,12 @@ const app = useAppStore()
   <ValaxyOverlay :show="app.isRightSidebarOpen" @click="app.toggleRightSidebar()" />
 
   <!--  -->
-  <aside class="va-card yun-aside" :class="app.isRightSidebarOpen && 'open'" m="l-4" text="center">
-    <div class="aside-container" flex="~ col" overflow="auto">
+  <aside
+    class="va-card yun-aside"
+    :class="app.isRightSidebarOpen && 'open'" m="l-4" text="center"
+    overflow="auto"
+  >
+    <div class="aside-container" flex="~ col">
       <h2 v-if="frontmatter.toc !== false" m="t-6 b-2" font="serif black">
         {{ t('sidebar.toc') }}
       </h2>

package/components/YunBanner.vue

@@ -57,6 +57,8 @@ const bannerStyles = computed<CSSProperties>(() => {
 </template>
 
 <style lang="scss">
+@use "../styles/widgets/banner.scss" as *;
+
 :root {
   // banner
   --banner-line-color: black;

package/components/YunCard.vue

@@ -3,7 +3,7 @@ defineProps<{ cover?: string }>()
 </script>
 
 <template>
-  <div class="yun-card">
+  <div class="yun-card flex-center" flex="col" min-h="100px" bg="$va-c-bg-light">
     <img
       v-if="cover"
       width="640" height="360"
@@ -21,17 +21,3 @@ defineProps<{ cover?: string }>()
     </div>
   </div>
 </template>
-
-<style lang="scss">
-.yun-card {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-
-  min-height: 100px;
-
-  // todo
-  background-color: var(--va-c-bg-light);
-}
-</style>

package/components/YunComment.vue

@@ -16,7 +16,7 @@ const YunTwikoo = runtimeConfig.value.addons['valaxy-addon-twikoo']
 </script>
 
 <template>
-  <YunCard w="full" p="4" class="comment sm:p-6 lg:px-12 xl:px-16">
+  <YunCard w="full" p="4" class="comment markdown-body sm:p-6 lg:px-12 xl:px-16">
     <ClientOnly>
       <YunWaline />
       <YunTwikoo />

package/components/YunOverview.vue

@@ -7,13 +7,16 @@ const router = useRouter()
 </script>
 
 <template>
-  <div class="sidebar-panel">
+  <div class="sidebar-panel" p="2">
     <div class="site-info" m="t-6">
       <router-link class="site-author-avatar" to="/about">
         <img class="rounded-full" :src="siteConfig.author.avatar" alt="avatar">
         <span class="site-author-status">{{ siteConfig.author.status.emoji }}</span>
       </router-link>
-      <div class="site-author-name">
+      <div
+        class="site-author-name leading-6"
+        m="t-0 b-4"
+      >
         <router-link to="/about">
           {{ siteConfig.author.name }}
         </router-link>
@@ -44,10 +47,6 @@ const router = useRouter()
 <style lang="scss">
 @use "valaxy/client/styles/mixins/index.scss" as *;
 
-.sidebar-panel {
-  padding: 0.5rem;
-}
-
 .site-info {
   &.fix-top {
     margin-top: -1.5rem;
@@ -75,12 +74,6 @@ const router = useRouter()
   }
 }
 
-.site-author-name {
-  margin-top: 0;
-  margin-bottom: 1rem;
-  line-height: 1.5;
-}
-
 .site-author-status {
   position: absolute;
   height: 1.8rem;

package/components/YunSidebar.vue

@@ -1,29 +1,72 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
+import { useAppStore, useLayout } from 'valaxy'
 
+const app = useAppStore()
 const showOverview = ref(false)
+const isHome = useLayout('home')
 </script>
 
 <template>
-  <div v-if="$slots.default" class="sidebar-nav" m="t-6">
-    <button m="x-4" class="sidebar-nav-item yun-icon-btn" :class="showOverview && 'active'" @click="showOverview = true">
-      <div i-ri-passport-line />
-    </button>
-    <button m="x-4" class="sidebar-nav-item yun-icon-btn" :class="!showOverview && 'active'" @click="showOverview = false">
-      <div i-ri-list-ordered />
-    </button>
-  </div>
-
-  <div v-if="showOverview || !$slots.default" :class="$slots.default && '-mt-4'">
-    <YunOverview />
-  </div>
-
-  <div v-else>
-    <slot />
-  </div>
+  <ValaxyOverlay class="md:hidden" :show="app.isSidebarOpen" @click="app.toggleSidebar()" />
+
+  <ValaxyHamburger
+    :active="app.isSidebarOpen"
+    class="menu-btn sidebar-toggle yun-icon-btn leading-4 fixed left-0.8rem top-0.6rem"
+    inline-flex cursor="pointer" z="$yun-z-menu-btn"
+    :class="isHome ? '' : 'md:hidden'" @click="app.toggleSidebar()"
+  />
+
+  <aside
+    class="va-card transition sidebar fixed inset-y-0 left-0 overflow-y-auto"
+    :class="[app.isSidebarOpen && 'open', !isHome && 'md:translate-x-0']"
+    text="center" bg="$yun-sidebar-bg-color contain no-repeat" z="$yun-z-sidebar"
+  >
+    <div v-if="$slots.default" class="sidebar-nav" m="t-6">
+      <button
+        m="x-4" class="sidebar-nav-item yun-icon-btn"
+        :class="showOverview && 'active'" @click="showOverview = true"
+      >
+        <div i-ri-passport-line />
+      </button>
+      <button
+        m="x-4" class="sidebar-nav-item yun-icon-btn"
+        :class="!showOverview && 'active'" @click="showOverview = false"
+      >
+        <div i-ri-list-ordered />
+      </button>
+    </div>
+
+    <div v-if="showOverview || !$slots.default" :class="$slots.default && '-mt-4'">
+      <YunOverview />
+    </div>
+
+    <div v-else>
+      <slot />
+    </div>
+  </aside>
 </template>
 
 <style lang="scss">
+@use "sass:map";
+
+.sidebar {
+  width: calc(100vw - 64px);
+  max-width: var(--va-sidebar-width);
+
+  background-image: var(--yun-sidebar-bg-img);
+  background-position: bottom 1rem center;
+
+  transform: translateX(-100%);
+  transition: box-shadow var(--va-transition-duration),
+    background-color var(--va-transition-duration), opacity 0.25s,
+    transform var(--va-transition-duration) cubic-bezier(0.19, 1, 0.22, 1) !important;
+
+  &.open {
+    transform: translateX(0);
+  }
+}
+
 .sidebar-nav {
   .sidebar-nav-item {
     color: var(--va-c-primary);

package/components/YunSidebarLinks.vue

@@ -5,27 +5,13 @@ const themeConfig = useThemeConfig()
 </script>
 
 <template>
-  <div class="links">
-    <AppLink v-for="item, i in themeConfig.pages" :key="i" class="link-item yun-icon-btn" :to="item.url" :title="item.name" :style="`color:${item.color}`">
-      <div :class="item.icon" class="icon" />
+  <div class="links flex-center">
+    <AppLink
+      v-for="item, i in themeConfig.pages" :key="i"
+      class="link-item yun-icon-btn" inline-flex
+      :to="item.url" :title="item.name" :style="`color:${item.color}`"
+    >
+      <div :class="item.icon" class="icon w-8 h-8" />
     </AppLink>
   </div>
 </template>
-
-<style lang="scss">
-.sidebar {
-  .links {
-    display: flex;
-    justify-content: center;
-  }
-
-  .link-item {
-    display: inline-flex;
-
-  .icon {
-      width: 2rem;
-      height: 2rem;
-    }
-  }
-}
-</style>

package/layouts/home.vue

@@ -13,12 +13,11 @@ const isPage = computed(() => route.path.startsWith('/page'))
 </script>
 
 <template>
-  <main class="yun-main justify-center items-center" :class="(isHome && !app.isSidebarOpen) && 'pl-0'" flex="~ col" w="full">
-    <ValaxySidebar>
-      <slot name="sidebar">
-        <YunSidebar />
-      </slot>
-    </ValaxySidebar>
+  <main
+    class="yun-main flex-center"
+    :class="(isHome && !app.isSidebarOpen) && 'pl-0'" flex="~ col" w="full"
+  >
+    <YunSidebar />
 
     <template v-if="!isPage">
       <YunBanner v-if="themeConfig.banner.enable" />

package/layouts/layout.vue

@@ -3,14 +3,10 @@ import { asAny } from 'valaxy'
 </script>
 
 <template>
-  <ValaxySidebar>
-    <slot name="sidebar">
-      <YunSidebar v-if="$slots['sidebar-child']">
-        <slot name="sidebar-child" />
-      </YunSidebar>
-      <YunSidebar v-else />
-    </slot>
-  </ValaxySidebar>
+  <YunSidebar v-if="$slots['sidebar-child']">
+    <slot name="sidebar-child" />
+  </YunSidebar>
+  <YunSidebar v-else />
 
   <router-view v-slot="{ Component }">
     <component :is="asAny(Component)">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.14.35",
+  "version": "0.14.37",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -18,12 +18,12 @@
   "types": "types/index.d.ts",
   "dependencies": {
     "@iconify-json/ant-design": "^1.1.5",
-    "@iconify-json/simple-icons": "^1.1.55",
+    "@iconify-json/simple-icons": "^1.1.59",
     "animejs": "^3.2.1",
     "valaxy-addon-waline": "0.1.0"
   },
   "devDependencies": {
     "@types/animejs": "^3.1.7",
-    "valaxy": "0.14.35"
+    "valaxy": "0.14.37"
   }
 }

package/styles/widgets/banner.scss

@@ -0,0 +1,133 @@
+$banner-animation-duration: 1s;
+$char-animation-duration: 0.4s;
+
+#banner {
+  --banner-line-height: 0;
+  --line-animation-duration: 0.4s;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: var(--banner-container-height, 100vh);
+}
+
+.banner-char-container {
+  display: flex;
+  flex-direction: column;
+  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 {
+    display: flex;
+    background-color: var(--banner-line-color);
+    width: 1px;
+    height: 0;
+    animation-name: extend-line;
+    animation-duration: var(--line-animation-duration);
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-in;
+  }
+
+  &-bottom {
+    flex-direction: column-reverse;
+  }
+}
+
+@keyframes extend-line {
+  from {
+    height: 0;
+  }
+
+  to {
+    height: var(--banner-line-height);
+  }
+}
+
+.char {
+  font-family: var(--va-font-serif);
+  font-weight: 900;
+  font-size: var(--banner-char-size, 1rem);
+  background-color: var(--banner-char-bg-color);
+  line-height: 1;
+
+  transition: all 0.3s ease-in-out;
+  transition-delay: 0s;
+
+  &:hover {
+    color: var(--banner-char-hover-color);
+    background-color: var(--banner-char-color);
+  }
+
+  &-left,
+  &-right {
+    display: flex;
+    color: var(--banner-char-color);
+    opacity: 0;
+  }
+
+  &-left {
+    border-left: 1px solid var(--banner-line-color);
+    border-right: 0px solid rgba(var(--va-c-primary-rgb), 0.1);
+    border-right-width: 0px;
+    animation-name: char-move-left;
+    animation-duration: $char-animation-duration;
+    animation-delay: var(--line-animation-duration);
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-out;
+  }
+
+  &-right {
+    border-left: 0px solid rgba(var(--va-c-primary-rgb), 0.1);
+    border-right: 1px solid var(--banner-line-color);
+    border-left-width: 0px;
+    animation-name: char-move-right;
+    animation-duration: $char-animation-duration;
+    animation-delay: var(--line-animation-duration);
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-out;
+  }
+}
+
+@keyframes char-move-left {
+  from {
+    opacity: 0;
+    border-right-width: 0;
+  }
+
+  to {
+    opacity: 1;
+    border-right-width: var(
+      --banner-empty-border-size,
+      var(--banner-char-size)
+    );
+  }
+}
+
+@keyframes char-move-right {
+  from {
+    opacity: 0;
+    border-left-width: 0;
+  }
+
+  to {
+    opacity: 1;
+    border-left-width: var(--banner-empty-border-size, var(--banner-char-size));
+  }
+}