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

package/components/YunPostMeta.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import type { Post } from 'valaxy'
-import { formatDate, useSiteConfig } from 'valaxy'
+import { useAppStore, useSiteConfig } from 'valaxy'
 import { useI18n } from 'vue-i18n'
-import { formatTimestamp } from '../utils'
 
 defineProps<{
   // FrontMatter
   frontmatter: Post
 }>()
 
+const app = useAppStore()
 const { t } = useI18n()
 
 const siteConfig = useSiteConfig()
@@ -27,50 +27,42 @@ const siteConfig = useSiteConfig()
   </div>
 
   <div
-    v-if="frontmatter" class="post-meta"
-    flex="~ col" justify="center" items="center" text="sm" py="1"
+    v-if="frontmatter"
+    class="post-meta gap-4"
+    flex="~ center"
+    text="sm"
+    :class="{
+      'flex-col gap-2!': app.isMobile || frontmatter.updated,
+    }"
   >
-    <div v-if="frontmatter.date" class="post-time flex items-center">
-      <span class="posted-time inline-flex-center" :title="t('post.posted') + formatTimestamp(frontmatter.date)">
-        <div class="inline-block" i-ri-calendar-line />
-        <time m="l-1">{{ formatDate(frontmatter.date) }}</time>
-      </span>
+    <YunPostDateMeta :frontmatter="frontmatter" />
 
-      <span
-        v-if="frontmatter.updated && frontmatter.updated !== frontmatter.date"
-        class="edited-time inline-flex-center" :title="t('post.edited') + formatTimestamp(frontmatter.updated)"
+    <div class="inline-flex-center gap-4">
+      <div
+        v-if="siteConfig.statistics.enable"
+        class="inline-flex-center post-counter gap-4"
       >
-        <span m="x-2">-</span>
-        <div i-ri-calendar-2-line />
-        <time m="l-1">{{ formatDate(frontmatter.updated) }}</time>
-      </span>
-    </div>
+        <span
+          v-if="frontmatter.wordCount"
+          class="word-count inline-flex-center gap-1" :title="t('statistics.word')"
+        >
+          <div class="inline-block" i-ri-file-word-line />
+          <span class="op-80">{{ frontmatter.wordCount }}</span>
+        </span>
 
-    <div
-      v-if="siteConfig.statistics.enable"
-      class="post-counter flex items-center" mt="2"
-    >
-      <span
-        v-if="frontmatter.wordCount"
-        class="word-count inline-flex-center" :title="t('statistics.word')"
-      >
-        <div class="inline-block" i-ri-file-word-line />
-        <span m="l-1">{{ frontmatter.wordCount }}</span>
-      </span>
+        <span
+          v-if="frontmatter.readingTime"
+          class="reading-time inline-flex-center gap-1"
+          :title="t('statistics.time')"
+        >
+          <div i-ri-timer-line />
+          <time class="op-80">{{ frontmatter.readingTime }}m</time>
+        </span>
+      </div>
 
-      <span
-        v-if="frontmatter.readingTime"
-        class="reading-time inline-flex-center"
-        :title="t('statistics.time')"
-      >
-        <span m="x-2">-</span>
-        <div i-ri-timer-line />
-        <time m="l-1">{{ frontmatter.readingTime }}m</time>
-      </span>
+      <YunWalineMeta />
     </div>
   </div>
-
-  <slot />
 </template>
 
 <style>

package/components/YunPostTags.vue

@@ -13,11 +13,11 @@ defineProps<{
   >
     <RouterLink
       v-for="tag, i in tags" :key="i" :to="{ path: '/tags/', query: { tag } }"
-      class="transition post-tag inline-flex-center text-xs border-$va-c-divider hover:(text-blue-500 border-blue-500)"
+      class="transition post-tag inline-flex-center text-xs border-$va-c-divider"
       px-2 h="7"
       rounded-full
       border
-      bg="hover:(blue-500 opacity-10)"
+      hover="bg-blue-500 text-white"
     >
       <span>{{ tag }}</span>
     </RouterLink>

package/components/YunPostsInfo.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { useCategories, useSiteStore, useTags } from 'valaxy'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const site = useSiteStore()
+
+const categories = useCategories()
+const tags = useTags()
+</script>
+
+<template>
+  <nav class="site-nav" text-xl mt-2>
+    <YunPostClassifyNavItem
+      to="/archives/" icon="i-ri-archive-line" :title="t('menu.archives')"
+      :total="site.postList.length"
+    />
+    <YunPostClassifyNavItem
+      to="/categories/" icon="i-ri-folder-2-line" :title="t('menu.categories')"
+      :total="Array.from(categories.children).length"
+    />
+    <YunPostClassifyNavItem
+      to="/tags/" icon="i-ri-price-tag-3-line" :title="t('menu.tags')"
+      :total="Array.from(tags).length"
+    />
+  </nav>
+</template>
+
+<style lang="scss">
+@use "valaxy/client/styles/mixins/index.scss" as *;
+
+.site-nav {
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  line-height: 1.5;
+  white-space: nowrap;
+  text-align: center;
+}
+</style>

package/components/YunPrologue.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="grid-bg">
+    <YunAEFrame />
+    <YunAERect />
+
+    <div
+      flex="~ col"
+      class="justify-center items-center absolute bottom-5 md:bottom-12 left-0 right-0"
+    >
+      <PrologueSocialLinks />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.grid-bg {
+  --size: 40px;
+
+  background:
+    linear-gradient(90deg, rgb(255 255 255 / .1) 1px, transparent 1px),
+    linear-gradient(rgb(255 255 255 / .1) 1px, transparent 1px);
+  background-size: var(--size) var(--size);
+}
+</style>

package/components/YunSearchBtn.vue

@@ -20,18 +20,20 @@ function onClick() {
 </script>
 
 <template>
-  <button class="yun-search-btn popup-trigger yun-icon-btn" :title="t('menu.search')" @click="onClick">
-    <div v-if="!open" i-ri-search-line />
+  <button
+    class="yun-search-btn popup-trigger size-12 inline-flex justify-center items-center"
+    text="xl $va-c-text"
+    hover="bg-white/80 dark:bg-black/80"
+    :title="t('menu.search')"
+    @click="onClick"
+  >
+    <div v-if="!open" i-ri-search-line op-80 hover="op-100" />
     <div v-else text="!2xl" i-ri-close-line />
   </button>
 </template>
 
 <style lang="scss">
 .yun-search-btn {
-  position: fixed;
-  top: 0.6rem;
-  right: 0.8rem;
-  color: var(--va-c-primary);
   z-index: var(--yun-z-search-btn);
 }
 </style>

package/components/YunSelect.vue

@@ -22,7 +22,7 @@ function toggleOptionVisible(e: MouseEvent) {
 </script>
 
 <template>
-  <div class="relative h-8 w-30 text-$va-c-text-2 z-10" @mousedown.stop>
+  <div class="relative h-8 w-30 text-$va-c-text-2 z-$yun-z-select" @mousedown.stop>
     <button
       class="flex h-full w-full px-2 items-center justify-between rounded transition"
       border="~ gray op-30"
@@ -55,14 +55,4 @@ function toggleOptionVisible(e: MouseEvent) {
 .select-options {
   margin: 0;
 }
-
-.v-enter-active,
-.v-leave-active {
-  transition: opacity .2s ease;
-}
-
-.v-enter-from,
-.v-leave-to {
-  opacity: 0;
-}
 </style>

package/components/YunSidebar.vue

@@ -13,13 +13,13 @@ const showOverview = ref(false)
 <template>
   <ValaxyOverlay class="md:hidden" :show="yunStore.leftSidebar.isOpen" @click="yunStore.leftSidebar.toggle()" />
 
-  <ValaxyHamburger
+  <!-- <ValaxyHamburger
     :active="yunStore.leftSidebar.isOpen"
     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="showHamburger ? '' : 'md:hidden'"
     @click="yunStore.leftSidebar.toggle()"
-  />
+  /> -->
 
   <aside
     class="va-card transition sidebar fixed inset-y-0 left-0 overflow-y-auto"
@@ -55,6 +55,9 @@ const showOverview = ref(false)
 </template>
 
 <style lang="scss">
+@use 'sass:map';
+@use 'valaxy-theme-yun/styles/vars.scss' as *;
+
 .sidebar {
   width: calc(100vw - 64px);
   max-width: var(--va-sidebar-width);
@@ -62,8 +65,8 @@ const showOverview = ref(false)
   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;
+    background-color var(--va-transition-duration), opacity var(--va-transition-duration),
+    transform var(--va-transition-duration) map.get($cubic-bezier, 'ease-in-out') !important;
 
   &.open {
     transform: translateX(0);

package/components/YunSidebarCard.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+// new sidebar card
+</script>
+
+<template>
+  <YunCard class="p-4 min-h-sm">
+    <YunSiteInfo class="text-center" />
+    <YunPostsInfo />
+  </YunCard>
+</template>

package/components/YunSidebarNav.vue

@@ -47,7 +47,6 @@ const tags = useTags()
   line-height: 1.5;
   white-space: nowrap;
   text-align: center;
-  margin-top: 1rem;
 }
 
 .site-link-item {

package/components/YunSiteInfo.vue

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import { useSiteConfig } from 'valaxy'
+
+const siteConfig = useSiteConfig()
+</script>
+
+<template>
+  <div class="site-info gap-1 items-center" flex="~ col" m="t-4">
+    <RouterLink
+      class="site-author-avatar inline-flex-center" to="/about"
+    >
+      <img class="rounded-full" :src="siteConfig.author.avatar" alt="avatar">
+      <!-- <span
+        v-if="siteConfig.author.status.emoji"
+        class="site-author-status absolute"
+        :title="siteConfig.author.status.message || undefined"
+      >{{ siteConfig.author.status.emoji }}</span> -->
+    </RouterLink>
+    <YunAuthorName />
+    <YunSiteTitle />
+    <h4
+      v-if="siteConfig.subtitle"
+      class="site-subtitle block"
+      text="xs"
+    >
+      {{ siteConfig.subtitle }}
+    </h4>
+    <div v-if="siteConfig.description" class="site-description">
+      {{ siteConfig.description }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.site-author-avatar {
+  position: relative;
+  line-height: 0;
+
+  img {
+    height: 96px;
+    width: 96px;
+    max-width: 100%;
+    margin: 0;
+    padding: 4px;
+    background-color: white;
+    box-shadow: 0 0 10px rgba(black, 0.2);
+    transition: 0.4s;
+
+    &:hover {
+      box-shadow: 0 0 30px rgba(var(--va-c-primary-rgb), 0.2);
+    }
+  }
+}
+
+.site-author-status {
+  height: 1.8rem;
+  width: 1.8rem;
+  bottom: 0;
+  right: 0;
+  line-height: 1.8rem;
+  border-radius: 50%;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
+  background-color: var(--va-c-bg-light);
+  border: 1px solid rgb(255 255 255 / 0.1);
+}
+
+.site-info {
+  &.fix-top {
+    margin-top: -1.5rem;
+  }
+}
+</style>

package/components/YunSponsor.vue

@@ -18,10 +18,13 @@ const sponsorBtnTitle = computed(() => {
       class="sponsor-button yun-icon-btn shadow hover:shadow-md"
       :title="sponsorBtnTitle" text="red-400" @click="showQr = !showQr"
     >
-      <div i-ri-heart-line />
+      <div class="mt-2px" i-ri-heart-fill />
     </button>
 
-    <div class="qrcode-container qrcode flex-center flex-col" m="y-4" :class="showQr && 'show'">
+    <div
+      class="qrcode-container qrcode flex-center flex-col" m="y-4"
+      :class="showQr && 'show'"
+    >
       <div v-if="siteConfig.sponsor.description" class="sponsor-description" mb="4" text="sm">
         {{ siteConfig.sponsor.description }}
       </div>
@@ -41,10 +44,12 @@ const sponsorBtnTitle = computed(() => {
 </template>
 
 <style lang="scss">
+@use 'sass:map';
+@use 'valaxy-theme-yun/styles/vars.scss' as *;
 @use "valaxy/client/styles/mixins/index.scss" as *;
 
 .sponsor-button {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgb(255 255 255 / 0.1);
 
   div {
     transform: scale(1.1);
@@ -52,7 +57,7 @@ const sponsorBtnTitle = computed(() => {
   }
 
   &:hover {
-    background-color: rgba(255, 255, 255, 0.9);
+    background-color: rgb(255 255 255 / 0.9);
 
     div {
       transform: scale(1.2);
@@ -67,12 +72,22 @@ const sponsorBtnTitle = computed(() => {
 }
 
 .qrcode-container {
+  --height: 200px;
+
   overflow: hidden;
   height: 0;
-  transition: height var(--va-transition-duration) ease-in-out;
+  opacity: 0;
+  transition: all var(--va-transition-duration) map.get($cubic-bezier, 'ease-in-out');
 
   &.show {
-    height: 260px;
+    height: var(--height);
+    opacity: 1;
+  }
+}
+
+@include screen('md') {
+  .qrcode-container {
+    --height: 260px;
   }
 }
 

package/components/animation/LineBurstEffects.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+// 播放完销毁 css 动画
+import { onMounted, ref } from 'vue'
+
+const props = defineProps<{
+  duration: number
+}>()
+
+const destroy = ref(false)
+onMounted(() => {
+  setTimeout(() => {
+    destroy.value = true
+  }, props.duration)
+})
+</script>
+
+<template>
+  <div
+    v-if="!destroy"
+    class="line-burst-effects absolute"
+  >
+    <div v-for="i in 8" :key="i" class="line">
+      <div>
+        <span />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.line-burst-effects {
+  .line {
+    position: absolute;
+    top: 0;
+    left: calc(50% - 2px);
+    width: 4px;
+    height: 100%;
+  }
+
+  @for $i from 1 through 8 {
+    .line:nth-child(#{$i}) {
+      transform: rotate($i * 45deg);
+
+      div {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 20%;
+        overflow: hidden;
+      }
+
+      span {
+        display: block;
+        background-color: white;
+        content: '';
+        width: 100%;
+        height: 100%;
+        transform: translateY(100%);
+        animation: line-burst 0.8s forwards;
+      }
+    }
+  }
+}
+
+@keyframes line-burst {
+  0% {
+    transform: translateY(100%);
+  }
+
+  100% {
+    transform: translateY(-100%);
+  }
+}
+</style>

package/components/author/YunAuthorAvatar.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useSiteConfig } from 'valaxy'
+
+const siteConfig = useSiteConfig()
+</script>
+
+<template>
+  <img
+    class="rounded-full size-full"
+    :src="siteConfig.author.avatar" alt="avatar"
+  >
+</template>

package/components/author/YunAuthorIntro.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useSiteConfig } from 'valaxy'
+
+const siteConfig = useSiteConfig()
+</script>
+
+<template>
+  <div v-if="siteConfig.author.intro" class="site-author-intro" m="t-0 b-4">
+    {{ siteConfig.author.intro }}
+  </div>
+</template>

package/components/author/YunAuthorName.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useSiteConfig } from 'valaxy'
+
+const siteConfig = useSiteConfig()
+</script>
+
+<template>
+  <RouterLink
+    class="site-author-name font-black font-serif text-$va-c-text op-80 hover:op-100 flex-center"
+    to="/about"
+  >
+    {{ siteConfig.author.name }}
+  </RouterLink>
+</template>

package/components/config/YunToggleDark.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
+import { useAppStore } from 'valaxy'
+
+const props = defineProps<{
+  transition?: boolean
+}>()
+
+const appStore = useAppStore()
+const { t } = useI18n()
+
+const themeTitle = computed(() => {
+  return appStore.isDark ? t('button.toggle_light') : t('button.toggle_dark')
+})
+
+const styles = computed(() => {
+  return {
+    color: appStore.isDark ? '' : '#f1cb64',
+  }
+})
+
+function toggle(e: MouseEvent) {
+  props.transition ? appStore.toggleDarkWithTransition(e) : appStore.toggleDark()
+}
+</script>
+
+<template>
+  <button
+    class="yun-icon-btn"
+    :title="themeTitle"
+    :style="styles" @mousedown.prevent="() => { console.log('yes') }"
+    @click="toggle"
+  >
+    <div i="ri-sun-line dark:ri-moon-line" />
+  </button>
+</template>

package/components/layout/YunLayoutLeft.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useYunAppStore } from '../../stores'
+
+const yun = useYunAppStore()
+</script>
+
+<template>
+  <div v-if="yun.size.isLg" flex="~ col" class="gap-4 sticky top-68px w-80">
+    <YunSidebarCard />
+    <YunAdBoard />
+  </div>
+</template>

package/components/layout/YunLayoutRight.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useFrontmatter } from 'valaxy'
+import { useYunAppStore } from '../../stores'
+
+const fm = useFrontmatter()
+const yun = useYunAppStore()
+</script>
+
+<template>
+  <button
+    v-if="fm.aside !== false"
+    class="xl:hidden toc-btn shadow-md fixed yun-icon-btn z-350 bg-$va-c-bg-soft"
+    opacity="75" right="2" bottom="19"
+    @click="yun.rightSidebar.toggle()"
+  >
+    <div i-ri-file-list-line />
+  </button>
+
+  <YunOverlay :show="yun.rightSidebar.isOpen" @click="yun.rightSidebar.toggle()" />
+  <YunAside />
+</template>

package/components/layout/YunLayoutWrapper.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+// common layout
+</script>
+
+<template>
+  <div
+    flex="~"
+    m="t-24 md:t-36"
+    class="w-full max-w-screen-2xl m-auto justify-center items-start gap-4"
+  >
+    <slot />
+  </div>
+</template>

package/components/menu/YunNavMenuItem.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+defineProps<{
+  icon: string
+  to?: string
+}>()
+
+const router = useRouter()
+</script>
+
+<template>
+  <div
+    class="size-12 inline-flex-center cursor-pointer z-$yun-z-nav-menu"
+    text="$va-c-text"
+    hover="bg-white/80 dark:bg-black/80 op-100"
+    op-80
+    @click="to && router.push(to)"
+  >
+    <div class="size-6" :class="icon" />
+  </div>
+</template>