valaxy-theme-yun 0.1.1 → 0.2.1

package/components/YunAlgoliaSearch.vue

@@ -60,8 +60,8 @@ watch(showPopup, () => {
   top: 0.6rem;
   right: 0.8rem;
 
-  color: var(--yun-c-primary);
-  z-index: map.get($z-index, 'search-btn');
+  color: var(--va-c-primary);
+  z-index: var(--yun-z-search-btn);
 }
 
 .search-popup {
@@ -77,7 +77,7 @@ watch(showPopup, () => {
   text-align: center;
   padding-top: 3.5rem;
   margin: 0;
-  z-index: map.get($z-index, 'search-popup');
+  z-index: var(--yun-z-search-popup);
   transition: 0.6s;
 }
 
@@ -91,15 +91,15 @@ watch(showPopup, () => {
 
 .search-input {
   background: transparent;
-  color: var(--yun-c-text);
+  color: var(--va-c-text);
   font-size: 1.5rem;
   border-radius: 3rem;
   padding: 1rem 1.5rem;
-  border: 1px solid var(--yun-c-gray);
+  border: 1px solid var(--va-c-gray);
   box-sizing: border-box;
   width: 90%;
   max-width: 800px;
-  font-family: var(--yun-font-serif);
+  font-family: var(--va-font-serif);
   font-weight: 900;
   text-align: center;
 }
@@ -169,13 +169,13 @@ watch(showPopup, () => {
   width: 100%;
   padding: 0.5rem;
   border-bottom: 1px dashed #ccc;
-  font-family: var(--yun-font-serif);
+  font-family: var(--va-font-serif);
   font-weight: 900;
   font-size: 1.2rem;
   max-width: 800px;
 
   mark {
-    color: var(--yun-c-danger);
+    color: var(--va-c-danger);
     font-family: 900;
     background-color: transparent;
     text-decoration: underline;
@@ -185,7 +185,7 @@ watch(showPopup, () => {
     display: flex;
     font-size: 12px;
     justify-content: center;
-    font-family: var(--yun-font-sans);
+    font-family: var(--va-font-sans);
     font-weight: normal;
     line-height: 1;
     margin-top: -0.2rem;
@@ -215,7 +215,7 @@ watch(showPopup, () => {
   .active {
     .page-number {
       background: var(--page-btn-active-bg-color);
-      color: var(--yun-c-bg);
+      color: var(--va-c-bg);
     }
   }
 }

package/components/YunBackToTop.vue

@@ -25,16 +25,15 @@ const strokeOffset = computed(() => {
 
 <style lang="scss">
 @use "sass:map";
-@use "~/styles/vars" as *;
 
 .back-to-top {
   position: relative;
   position: fixed;
   right: -0.9rem;
   bottom: 1.1rem;
-  z-index: map.get($z-index, 'go-up-btn');
+  z-index: var(--yun-z-go-up-btn);
   opacity: 0;
-  color: var(--yun-c-primary);
+  color: var(--va-c-primary);
 
   &.show {
     transform: translateX(-30px) rotate(360deg);

package/components/YunBase.vue

@@ -5,6 +5,9 @@ import Base from '../layouts/base.vue'
 
 <template>
   <Base>
+    <template #sidebar>
+      <slot name="sidebar" />
+    </template>
     <template #content>
       <slot name="content" />
     </template>

package/components/YunBoard.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="yun-board">
+    <slot />
+  </div>
+</template>
+
+<style>
+.yun-board {
+  border: 1px solid var(--va-c-text);
+  width: calc(100% - 2rem);
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-family: var(--va-font-serif);
+  font-weight: bold;
+  padding: 1rem;
+  margin: 1rem auto;
+  max-width: var(--yun-post-card-max-width);
+  background-color: rgba(200, 200, 200, 0.1);
+}
+</style>

package/components/YunCard.vue

@@ -24,6 +24,6 @@
   margin: auto;
 
   // todo
-  background-color: var(--yun-c-bg-light);
+  background-color: var(--va-c-bg-light);
 }
 </style>

package/components/YunCategories.vue

@@ -1,31 +1,36 @@
 <script lang="ts" setup>
 import type { Categories } from 'valaxy'
+import { ref } from 'vue'
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   categories: Categories
   /**
    * 当前层级
    */
   level?: number
-  displayCategory: (category: string) => void
+  displayCategory?: (category: string) => void
+  collapsable?: boolean
 }>(), {
   level: 0,
+  collapsable: true,
 })
+
+const collapsable = ref(props.collapsable)
 </script>
 
 <template>
   <ul v-for="category, key in Object.fromEntries(categories)" :key="key" class="category-list" m="l-4">
-    <YunCategory :name="key.toString()" :category="category" :level="level + 1" :display-category="displayCategory" />
+    <YunCategory :name="key.toString()" :category="category" :level="level + 1" :display-category="displayCategory" :collapsable="collapsable" />
   </ul>
 </template>
 
 <style lang="scss">
 .post-list-item {
   a {
-    color: var(--yun-c-text);
+    color: var(--va-c-text);
 
     &:hover {
-      color: var(--yun-c-primary);
+      color: var(--va-c-primary);
     }
   }
 }
@@ -33,12 +38,12 @@ withDefaults(defineProps<{
 .category-list-item {
   .folder-action {
     &:hover {
-      color: var(--yun-c-primary);
+      color: var(--va-c-primary);
     }
   }
   .category-name {
     &:hover {
-      color: var(--yun-c-primary);
+      color: var(--va-c-primary);
     }
   }
 }

package/components/YunCategory.vue

@@ -1,39 +1,51 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import type { Category, ParentCategory, PostCategory } from 'valaxy'
+import type { Category, ParentCategory, Post, PostCategory } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 
-defineProps<{
+const props = withDefaults(defineProps<{
   name: string
   // to eliminate the warning
   category: Category
   level?: number
-  displayCategory: (category: string) => void
-}>()
+  displayCategory?: (category: string) => void
 
-const showChild = ref(false)
-const { t } = useI18n()
+  /**
+   * collapse children
+   */
+  collapsable?: boolean
+}>(), {
+  collapsable: true,
+})
+
+const collapsable = ref(props.collapsable)
+const { t, locale } = useI18n()
+const lang = locale.value === 'zh-CN' ? 'zh' : locale.value
+
+const getTitle = (post: Post | any) => {
+  return post[`title_${lang}`] ? post[`title_${lang}`] : post.title
+}
 </script>
 
 <template>
   <li v-if="category.total" class="category-list-item inline-flex items-center cursor-pointer">
-    <span class="folder-action inline-flex" @click="showChild = !showChild">
-      <div v-if="!showChild" i-ri-folder-add-line />
-      <div v-else style="color:var(--yun-c-primary)" i-ri-folder-reduce-line /></span>
-    <span class="category-name" m="l-1" @click="displayCategory(name)">
+    <span class="folder-action inline-flex" @click="collapsable = !collapsable">
+      <div v-if="collapsable" i-ri-folder-add-line />
+      <div v-else style="color:var(--va-c-primary)" i-ri-folder-reduce-line /></span>
+    <span class="category-name" m="l-1" @click="displayCategory ? displayCategory(name) : null">
       {{ name === 'Uncategorized' ? t('category.uncategorized') : name }} [{{ category.total }}]
     </span>
   </li>
 
-  <template v-if="showChild">
+  <template v-if="!collapsable">
     <ul v-if="(category as PostCategory).posts">
       <li v-for="post, i in (category as PostCategory).posts" :key="i" class="post-list-item" m="l-4">
         <router-link v-if="post.title" :to="post.path" class="inline-flex items-center">
           <div i-ri-file-text-line />
-          <span m="l-1" font="serif black">{{ post.title }}</span>
+          <span m="l-1" font="serif black">{{ getTitle(post) }}</span>
         </router-link>
       </li>
     </ul>
-    <YunCategories v-else :categories="(category as ParentCategory).children" :display-category="displayCategory" />
+    <YunCategories v-else :categories="(category as ParentCategory).children" :display-category="displayCategory" :collapsable="collapsable" />
   </template>
 </template>

package/components/YunConfig.vue

@@ -2,13 +2,7 @@
 import { useI18n } from 'vue-i18n'
 import { isDark, toggleDark } from '~/composables'
 
-const { t, availableLocales, locale } = useI18n()
-
-const toggleLocales = () => {
-  // change to some real logic
-  const locales = availableLocales
-  locale.value = locales[(locales.indexOf(locale.value) + 1) % locales.length]
-}
+const { t } = useI18n()
 </script>
 
 <template>
@@ -17,8 +11,6 @@ const toggleLocales = () => {
       <div i="ri-sun-line dark:ri-moon-line" />
     </button>
 
-    <button class="yun-icon-btn" :title="t('button.toggle_langs')" style="color:var(--yun-c-text)" @click="toggleLocales">
-      <div i-ri-translate class="transition transform" :class="locale === 'en' ? 'rotate-y-180' : ''" />
-    </button>
+    <YunToggleLocale />
   </div>
 </template>

package/components/YunGirls.vue

@@ -1,4 +1,3 @@
-
 <script lang="ts" setup>
 import { useRandomData } from 'valaxy-theme-yun/composables'
 import { onImgError } from '../utils'
@@ -87,9 +86,9 @@ const { data } = useRandomData(props.girls, props.random)
 
     &-from {
       font-size: 12px;
-      font-family: var(--yun-font-serif);
+      font-family: var(--va-font-serif);
       font-weight: bold;
-      color: var(--yun-c-text-light);
+      color: var(--va-c-text-light);
 
       &::before {
         content: '「';

package/components/YunGoDown.vue

@@ -18,12 +18,12 @@
   animation: float 2s ease-in-out infinite;
 
   font-size: 2.5rem;
-  color: var(--yun-c-primary);
+  color: var(--va-c-primary);
 
-  transition: color var(--yun-transition-duration);
+  transition: color var(--va-transition-duration);
 
   &:hover {
-    color: rgba(var(--yun-c-primary-rgb), 0.6);
+    color: rgba(var(--va-c-primary-rgb), 0.6);
   }
 }
 

package/components/YunOverview.vue

@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+import { useConfig } from 'valaxy'
+import { useRouter } from 'vue-router'
+
+const config = useConfig()
+const router = useRouter()
+</script>
+
+<template>
+  <div class="sidebar-panel">
+    <div class="site-info" m="t-6">
+      <a class="site-author-avatar" href="/about">
+        <img class="rounded-full" :src="config.author.avatar" alt="avatar">
+        <span class="site-author-status">{{ config.author.status.emoji }}</span>
+      </a>
+      <div class="site-author-name">
+        <a href="/about">
+          {{ config.author.name }}
+        </a>
+      </div>
+      <router-link v-if="router.hasRoute('about-site')" to="/about/site" class="site-name">
+        {{ config.title }}
+      </router-link>
+      <span v-else class="site-name">{{ config.title }}</span>
+      <h4 v-if="config.subtitle" class="site-subtitle block" text="xs">
+        {{ config.subtitle }}
+      </h4>
+      <div v-if="config.description" class="site-description my-1">
+        {{ config.description }}
+      </div>
+    </div>
+
+    <YunSidebarNav />
+    <hr m="t-4 b-2">
+    <YunSocialLinks />
+    <hr m="y-2">
+    <YunSidebarLinks />
+    <br>
+  </div>
+
+  <YunConfig />
+</template>
+
+<style lang="scss">
+@use "~/styles/mixins" as *;
+
+.sidebar-panel {
+  padding: 0.5rem;
+}
+
+.site-info {
+  &.fix-top {
+    margin-top: -1.5rem;
+  }
+}
+
+.site-author-avatar {
+  display: inline-block;
+  line-height: 0;
+  position: relative;
+
+  img {
+    height: 96px;
+    width: 96px;
+    max-width: 100%;
+    margin: 0px;
+    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-name {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  line-height: 1.5;
+}
+
+.site-author-status {
+  position: absolute;
+  height: 1.8rem;
+  width: 1.8rem;
+  bottom: 0;
+  right: 0;
+  line-height: 1.8rem;
+  border-radius: 50%;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  background-color: var(--va-c-bg-light);
+
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.site-name {
+  color: var(--va-c-text);
+  font-family: get-css-var('font-serif');
+  font-weight: get-css-var('font-serif-weight');
+}
+
+.site-subtitle {
+  color: get-css-var('c-gray');
+  display: block;
+}
+
+.site-description {
+  color: var(--va-c-text);
+  font-size: 0.8rem;
+}
+</style>

package/components/YunPostCollapse.vue

@@ -85,7 +85,7 @@ const sortedYears = computed(() => {
   .collection-title {
     position: relative;
     margin: 0;
-    border-bottom: 2px solid rgba(var(--yun-c-primary-rgb), 0.6);
+    border-bottom: 2px solid rgba(var(--va-c-primary-rgb), 0.6);
 
     &::before {
       content: '';
@@ -93,11 +93,11 @@ const sortedYears = computed(() => {
       top: 50%;
       width: 2px;
       height: 50%;
-      background: rgba(var(--yun-c-primary-rgb), 0.3);
+      background: rgba(var(--va-c-primary-rgb), 0.3);
     }
 
     .archive-year {
-      color: var(--yun-c-primary);
+      color: var(--va-c-primary);
       margin: 0 1.5rem;
 
       &::before {
@@ -109,7 +109,7 @@ const sortedYears = computed(() => {
         margin-top: -4px;
         width: 1.5rem;
         height: 1.5rem;
-        background: var(--yun-c-primary);
+        background: var(--va-c-primary);
         border-radius: 50%;
       }
     }
@@ -123,7 +123,7 @@ const sortedYears = computed(() => {
       position: absolute;
       width: 2px;
       height: 100%;
-      background: rgba(var(--yun-c-primary-rgb), 0.3);
+      background: rgba(var(--va-c-primary-rgb), 0.3);
     }
   }
 
@@ -132,7 +132,7 @@ const sortedYears = computed(() => {
     align-items: center;
 
     position: relative;
-    border-bottom: 1px solid rgba(var(--yun-c-primary-rgb), 0.3);
+    border-bottom: 1px solid rgba(var(--va-c-primary-rgb), 0.3);
     display: flex;
 
     &::before {
@@ -143,15 +143,15 @@ const sortedYears = computed(() => {
       height: 10px;
       margin-left: -4px;
       border-radius: 50%;
-      border: 1px solid var(--yun-c-primary);
-      background-color: var(--yun-c-bg-light);
+      border: 1px solid var(--va-c-primary);
+      background-color: var(--va-c-bg-light);
       z-index: 1;
-      transition: background var(--yun-transition-duration);
+      transition: background var(--va-transition-duration);
     }
 
     &:hover {
       &::before {
-        background: var(--yun-c-primary);
+        background: var(--va-c-primary);
       }
     }
 

package/components/YunPostMeta.vue

@@ -11,6 +11,13 @@ defineProps<{
 </script>
 
 <template>
+  <div v-if="frontmatter.draft" class="post-draft-icon" title="draft">
+    <div i-ri-draft-line />
+  </div>
+  <div v-if="frontmatter.top" class="post-top-icon">
+    <div i-ri-pushpin-line />
+  </div>
+
   <div v-if="frontmatter" class="post-meta justify-center" flex="~" text="sm">
     <div v-if="frontmatter.date" class="post-time flex items-center">
       <div class="inline-block" i-ri-calendar-line />
@@ -25,5 +32,20 @@ defineProps<{
   </div>
 </template>
 
-<style lang="scss">
+<style>
+.post-draft-icon {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  color: var(--va-c-gray);
+  font-size: 1.2rem;
+}
+
+.post-top-icon {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  color: var(--va-c-warning);
+  font-size: 1.2rem;
+}
 </style>

package/components/YunPostNav.vue

@@ -33,7 +33,7 @@ const [prev, next] = usePrevNext()
     justify-content: center;
     align-items: center;
 
-    color: var(--yun-c-primary);
+    color: var(--va-c-primary);
 
     outline: none;
     font-size: 1.5rem;
@@ -44,7 +44,7 @@ const [prev, next] = usePrevNext()
     transition: 0.4s;
 
     &:hover {
-      background-color: rgba(var(--yun-c-primary-rgb), 0.1);
+      background-color: rgba(var(--va-c-primary-rgb), 0.1);
       box-shadow: 0 0 15px rgba(black, 0.1);
     }
   }

package/components/YunSay.vue

@@ -13,7 +13,8 @@ const sayFrom = ref('')
  */
 function fetchApiToSay() {
   const api = themeConfig.value.say.hitokoto.enable ? themeConfig.value.say.hitokoto.api : themeConfig.value.say.api
-  if (!api) return
+  if (!api)
+    return
 
   fetch(api)
     .then((res) => {
@@ -63,14 +64,14 @@ onMounted(() => {
 
 <style lang="scss">
 .say {
-  color: var(--yun-c-text);
+  color: var(--va-c-text);
   display: block;
   text-align: center;
-  font-family: var(--yun-font-serif);
+  font-family: var(--va-font-serif);
   font-weight: bold;
   padding: 0.5rem;
-  border-top: var(--yun-border-width) solid var(--yun-c-text-light);
-  border-bottom: var(--yun-border-width) solid var(--yun-c-text-light);
+  border-top: var(--va-border-width) solid var(--va-c-text-light);
+  border-bottom: var(--va-border-width) solid var(--va-c-text-light);
 
   .say-content {
     display: block;