valaxy-theme-yun 0.2.2 → 0.3.0

package/components/YunAlgoliaSearch.vue

@@ -29,7 +29,6 @@ watch(showPopup, () => {
   else
     document.documentElement.classList.remove('no-scroll')
 })
-
 </script>
 
 <template>

package/components/YunBackToTop.vue

@@ -27,17 +27,22 @@ const strokeOffset = computed(() => {
 @use "sass:map";
 
 .back-to-top {
-  position: relative;
   position: fixed;
-  right: -0.9rem;
-  bottom: 1.1rem;
+  right: -1.5rem;
+  bottom: 1rem;
   z-index: var(--yun-z-go-up-btn);
   opacity: 0;
+  pointer-events: none;
+
   color: var(--va-c-primary);
+  transform: translateX(0) rotate(270deg);
+  // override yun-icon-btn transition
+  transition: transform var(--va-transition-duration), opacity var(--va-transition-duration-fast) !important;
 
   &.show {
-    transform: translateX(-30px) rotate(360deg);
+    transform: translateX(-32px) rotate(360deg);
     opacity: 1;
+    pointer-events: fill;
   }
 
   .icon {

package/components/YunBanner.vue

@@ -35,7 +35,7 @@ const lintStyle = computed(() => (
     <div class="banner-char-container">
       <div v-for="c, i in themeConfig.banner.title" :key="i" class="char-box">
         <span
-          :class="[i%2 !== 0 ? 'char-right' : 'char-left']" :style="{
+          :class="[i % 2 !== 0 ? 'char-right' : 'char-left']" :style="{
             '--banner-char-size': `${chars[i]}rem`,
           } as CSSProperties"
         >

package/components/YunBoard.vue

@@ -16,7 +16,6 @@
   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);
 }

package/components/YunCategory.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import type { Category, ParentCategory, Post, PostCategory } from 'valaxy'
+import type { Category, Post } from 'valaxy'
+import { isParentCategory } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 
 const props = withDefaults(defineProps<{
@@ -20,9 +21,9 @@ const props = withDefaults(defineProps<{
 
 const collapsable = ref(props.collapsable)
 const { t, locale } = useI18n()
-const lang = locale.value === 'zh-CN' ? 'zh' : locale.value
 
 const getTitle = (post: Post | any) => {
+  const lang = locale.value === 'zh-CN' ? 'zh' : locale.value
   return post[`title_${lang}`] ? post[`title_${lang}`] : post.title
 }
 </script>
@@ -38,14 +39,14 @@ const getTitle = (post: Post | any) => {
   </li>
 
   <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">
+    <ul v-if="!isParentCategory(category)">
+      <li v-for="post, i in category.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">{{ getTitle(post) }}</span>
         </router-link>
       </li>
     </ul>
-    <YunCategories v-else :categories="(category as ParentCategory).children" :display-category="displayCategory" :collapsable="collapsable" />
+    <YunCategories v-else :categories="category.children" :display-category="displayCategory" :collapsable="collapsable" />
   </template>
 </template>

package/components/YunConfig.vue

@@ -7,7 +7,7 @@ const { t } = useI18n()
 
 <template>
   <div>
-    <button class="yun-icon-btn" :title="t('button.toggle_dark')" :style="{color: isDark ? '' : '#f1cb64'}" @click="toggleDark()">
+    <button class="yun-icon-btn" :title="t('button.toggle_dark')" :style="{ color: isDark ? '' : '#f1cb64' }" @click="toggleDark()">
       <div i="ri-sun-line dark:ri-moon-line" />
     </button>
 

package/components/YunGirls.vue

@@ -2,7 +2,7 @@
 import { useRandomData } from 'valaxy-theme-yun/composables'
 import { onImgError } from '../utils'
 
-export interface GirlType {
+interface GirlType {
   name: string
   url: string
   avatar: string
@@ -22,10 +22,10 @@ const { data } = useRandomData(props.girls, props.random)
   <div class="girls">
     <ul class="girl-items">
       <li v-for="girl, i in data" :key="girl.name" class="girl-item">
-        <a :href="girl.url || 'https://zh.moegirl.org/' + girl.name" :title="girl.reason" alt="portrait" target="_blank" rel="noopener">
+        <a :href="girl.url || `https://zh.moegirl.org/${girl.name}`" :title="girl.reason" alt="portrait" target="_blank" rel="noopener">
           <figure class="girl-info">
             <img class="girl-avatar" loading="lazy" :src="girl.avatar" :alt="girl.name" :onError="onImgError">
-            <figcaption class="girl-name" :title="(i+1).toString()">{{ girl.name }}</figcaption>
+            <figcaption class="girl-name" :title="(i + 1).toString()">{{ girl.name }}</figcaption>
             <figcaption class="girl-from">{{ girl.from }}</figcaption>
           </figure>
         </a>

package/components/YunLinks.vue

@@ -2,7 +2,7 @@
 import { useRandomData } from '../composables'
 import { onImgError } from '../utils'
 
-export interface LinkType {
+interface LinkType {
   avatar: string
   name: string
   url: string
@@ -38,7 +38,6 @@ const { data } = useRandomData(props.links, props.random)
 </template>
 
 <stye lang="scss">
-
 .link-item {
   display: inline-flex;
 }

package/components/YunPostCollapse.vue

@@ -4,12 +4,12 @@ import type { Post } from 'valaxy'
 import { formatDate, sortByDate } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n()
-
 const props = defineProps<{
   posts: Post[]
 }>()
 
+const { t } = useI18n()
+
 const years = ref<number[]>([])
 const postList = ref<Record<string, Post[]>>({})
 
@@ -34,7 +34,6 @@ const sortedYears = computed(() => {
   const arr = y.sort((a, b) => b - a)
   return isDesc.value ? arr : arr.reverse()
 })
-
 </script>
 
 <template>
@@ -57,7 +56,7 @@ const sortedYears = computed(() => {
         </h2>
       </div>
 
-      <article v-for="post,j in sortByDate(postList[year], isDesc)" :key="j" class="post-item">
+      <article v-for="post, j in sortByDate(postList[year], isDesc)" :key="j" class="post-item">
         <header class="post-header">
           <div class="post-meta">
             <time v-if="post.date" class="post-time" font="mono" opacity="80">{{ formatDate(post.date, 'MM-DD') }}</time>

package/components/YunPostMeta.vue

@@ -3,11 +3,11 @@ import type { Post } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 import { formatDate } from 'valaxy'
 
-const { t } = useI18n()
-
 defineProps<{
   frontmatter: Post
 }>()
+
+const { t } = useI18n()
 </script>
 
 <template>

package/components/YunPostNav.vue

@@ -6,13 +6,13 @@ const [prev, next] = usePrevNext()
 <template>
   <div class="post-nav">
     <div class="post-nav-item">
-      <router-link v-if="prev" class="post-nav-prev" :to="prev.path" :title="prev.title">
+      <router-link v-if="prev" class="post-nav-prev" :to="prev.path || ''" :title="prev.title">
         <div class="icon" i-ri-arrow-left-s-line />
         <span class="title truncate" text="sm">{{ prev.title }}</span>
       </router-link>
     </div>
     <div class="post-nav-item">
-      <router-link v-if="next" :to="next.path" :title="next.title" class="post-nav-next">
+      <router-link v-if="next" :to="next.path || ''" :title="next.title" class="post-nav-next">
         <span class="title truncate" text="sm">{{ next.title }}</span>
         <div class="icon" i-ri-arrow-right-s-line />
       </router-link>

package/components/YunSay.vue

@@ -56,7 +56,7 @@ onMounted(() => {
 
 <template>
   <div class="say">
-    <span v-if="sayContent" class="say-content" :class="['animate-fade-in', 'animate-iteration-1']">{{ sayContent }}</span>
+    <span v-if="sayContent" class="say-content animate-fade-in animate-iteration-1">{{ sayContent }}</span>
     <span v-if="sayAuthor" class="say-author"> {{ sayAuthor }}</span>
     <span v-if="sayFrom" class="say-from">{{ sayFrom }}</span>
   </div>

package/composables/index.ts

@@ -10,7 +10,7 @@ import { isClient } from '@vueuse/core'
 export function useRandomData<T>(source: string | T[], random = false) {
   const data = ref<T[]>()
 
-  watch(() => source, async() => {
+  watch(() => source, async () => {
     let rawData: T[]
     if (typeof source === 'string') {
       if (!isClient)

package/layouts/base.vue

@@ -19,8 +19,8 @@ const title = usePostTitle(frontmatter)
   </ValaxySidebar>
 
   <main class="yun-main flex lt-md:ml-0">
-    <div flex="~ 1 col" w="full" p="l-4 lt-md:0">
-      <YunCard m="0" p="4" class="relative page-card sm:p-6 lg:px-12 xl:px-16" :style="styles">
+    <div flex="~ 1 col" w="full" p="l-4 lt-md:0" class="content">
+      <YunCard m="0" p="4" class="relative sm:p-6 lg:px-12 xl:px-16" :style="styles">
         <slot name="header">
           <YunPageHeader :title="title" :icon="frontmatter.icon || icon" :color="frontmatter.color || color" />
         </slot>
@@ -38,7 +38,7 @@ const title = usePostTitle(frontmatter)
       </slot>
 
       <slot v-if="frontmatter.comment !== false" name="comment">
-        <YunCard w="full" p="4" class="comment sm:p-8 lg:px-12 xl:px-16" :class="frontmatter.nav === false ? 'mt-4' : 0">
+        <YunCard w="full" p="4" class="comment sm:p-6 lg:px-12 xl:px-16" :class="frontmatter.nav === false ? 'mt-4' : 0">
           <YunWaline v-if="config.comment.waline.enable" />
           <YunTwikoo v-if="config.comment.twikoo.enable" />
         </YunCard>
@@ -50,7 +50,7 @@ const title = usePostTitle(frontmatter)
     </div>
 
     <slot name="right-sidebar">
-      <ValaxyRightSidebar :frontmatter="frontmatter" class="lt-xl:hidden">
+      <ValaxyRightSidebar :frontmatter="frontmatter">
         <template #custom>
           <slot name="right-custom" />
         </template>
@@ -65,9 +65,9 @@ const title = usePostTitle(frontmatter)
 <style lang="scss">
 @use '~/styles/mixins' as *;
 @include xl {
-  .page-card {
+  .content{
     // 8px scrollbar width
-    max-width: calc(100vw - 2 * var(--va-sidebar-width-mobile) - 2rem - 8px);
+    max-width: calc(100vw - 2 * var(--va-sidebar-width-mobile) - 1rem - 8px);
   }
 }
 </style>

package/layouts/categories.vue

@@ -54,7 +54,7 @@ const title = usePostTitle(frontmatter)
     </template>
     <template #content>
       <div text="center" class="yun-text-light" p="2">
-        {{ t('counter.categories', categories.children!.size ) }}
+        {{ t('counter.categories', categories.children!.size) }}
       </div>
       <YunCategories :categories="categories.children!" :display-category="displayCategory" />
       <router-view />

package/layouts/post.vue

@@ -13,7 +13,7 @@ const url = useFullUrl()
         <slot name="header">
           <YunPostMeta :frontmatter="frontmatter" />
         </slot>
-        <router-view v-slot="{Component}">
+        <router-view v-slot="{ Component }">
           <Transition appear>
             <component :is="Component" />
           </Transition>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": {
@@ -10,7 +10,7 @@
   "homepage": "https://valaxy.yyj.moe/",
   "dependencies": {
     "@iconify-json/ant-design": "^1.1.1",
-    "@iconify-json/simple-icons": "^1.1.7"
+    "@iconify-json/simple-icons": "^1.1.10"
   },
   "author": {
     "email": "me@yunyoujun.cn",
@@ -18,11 +18,10 @@
     "url": "https://www.yunyoujun.cn"
   },
   "devDependencies": {
-    "valaxy": "0.2.2"
+    "valaxy": "0.3.0"
   },
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch"
-  },
-  "readme": "<p align='center'>\n  <img width=\"200\" src=\"https://cdn.jsdelivr.net/gh/YunYouJun/yun/images/meme/yun-good-alpha-compressed.png\">\n</p>\n\n<p align='center'>\nTheme-Yun<sup><em>(vue)</em></sup>\n</p>\n\n## Usage\n\nTODO\n\n### Development\n\nJust run and visit <http://localhost:3333>\n\n```bash\npnpm dev\n```\n\n### Build\n\n```bash\npnpm build\n```\n\n## [Sponsors](https://sponsors.yunyoujun.cn)\n\n<p align=\"center\">\n  <a href=\"https://cdn.jsdelivr.net/gh/YunYouJun/sponsors/public/sponsors.svg\">\n    <img src='https://cdn.jsdelivr.net/gh/YunYouJun/sponsors/public/sponsors.svg'/>\n  </a>\n</p>\n"
+  }
 }