valaxy-theme-yun 0.15.6 → 0.15.7

package/components/YunAlbumList.vue

@@ -37,7 +37,7 @@ defineProps<{
         height: 96%;
         border: 0.25rem solid white;
         background-color: #666;
-        box-shadow: 0 5px 10px rgba(#000000, 0.3);
+        box-shadow: 0 5px 10px rgba(#000, 0.3);
         transform: rotate(-3deg);
       }
 
@@ -45,7 +45,7 @@ defineProps<{
         vertical-align: bottom;
         display: inline-flex;
         border: 0.25rem solid white;
-        box-shadow: 0 8px 10px rgba(#000000, 0.3);
+        box-shadow: 0 8px 10px rgba(#000, 0.3);
         padding: 0;
         transform: rotate(2deg);
         width: 100%;

package/components/YunAside.vue

@@ -51,9 +51,7 @@ const app = useAppStore()
 
   // need fixed width
   width: var(--va-sidebar-width, 300px);
-
   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);

package/components/YunBackToTop.vue

@@ -33,9 +33,9 @@ const strokeOffset = computed(() => {
   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;
 

package/components/YunBg.vue

@@ -37,14 +37,14 @@ if (typeof themeConfig.value.bg_image.url !== 'undefined') {
   width: 100%;
   height: 100%;
   z-index: -1;
-
   background-image: var(--yun-bg-img);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
+
   // avoid scroll flicker but not compatible with ios
   background-attachment: fixed;
-  animation-name: bgFadeIn;
+  animation-name: bg-fade-in;
   animation-duration: 2s;
   opacity: var(--yun-bg-img-opacity, 1);
 }
@@ -56,7 +56,7 @@ if (typeof themeConfig.value.bg_image.url !== 'undefined') {
   }
 }
 
-@keyframes bgFadeIn {
+@keyframes bg-fade-in {
   from {
     opacity: 0;
   }

package/components/YunCategories.vue

@@ -1,8 +1,10 @@
 <script lang="ts" setup>
 import type { Categories } from 'valaxy'
-import { ref } from 'vue'
+import { computed } from 'vue'
 
-const props = withDefaults(defineProps<{
+import { useRoute } from 'vue-router'
+
+withDefaults(defineProps<{
   categories: Categories
   /**
    * 当前层级
@@ -14,7 +16,11 @@ const props = withDefaults(defineProps<{
   collapsable: true,
 })
 
-const collapsable = ref(props.collapsable)
+const route = useRoute()
+const categoryList = computed(() => {
+  const c = route.query.category || ''
+  return Array.isArray(c) ? [c] : c.split('/')
+})
 </script>
 
 <template>
@@ -23,7 +29,7 @@ const collapsable = ref(props.collapsable)
       :parent-key="category.name"
       :category="category"
       :level="level + 1"
-      :collapsable="collapsable"
+      :collapsable="!categoryList.includes(category.name)"
     />
   </ul>
 </template>
@@ -45,6 +51,7 @@ const collapsable = ref(props.collapsable)
       color: var(--va-c-primary);
     }
   }
+
   .category-name {
     &:hover {
       color: var(--va-c-primary);

package/components/YunCategory.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import type { Category, Post } from 'valaxy'
 import { isCategoryList, useInvisibleElement } from 'valaxy'
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   parentKey: string
   // to eliminate the warning
   category: Category
@@ -20,8 +20,13 @@ withDefaults(defineProps<{
 })
 
 const router = useRouter()
+const route = useRoute()
+const categoryList = computed(() => {
+  const c = (route.query.category as string) || ''
+  return Array.isArray(c) ? [c] : c.split('/')
+})
 
-const collapse = ref(true)
+const collapse = ref(props.collapsable)
 const { t } = useI18n()
 
 /**
@@ -60,7 +65,8 @@ onMounted(() => {
   <li class="category-list-item inline-flex items-center cursor-pointer">
     <span class="folder-action inline-flex" @click="collapse = !collapse">
       <div v-if="collapse" i-ri-folder-add-line />
-      <div v-else style="color:var(--va-c-primary)" i-ri-folder-reduce-line /></span>
+      <div v-else style="color:var(--va-c-primary)" i-ri-folder-reduce-line />
+    </span>
     <span class="category-name" m="l-1" @click="jumpToDisplayCategory(parentKey)">
       {{ category.name === 'Uncategorized' ? t('category.uncategorized') : category.name }} [{{ category.total }}]
     </span>
@@ -73,6 +79,7 @@ onMounted(() => {
           <YunCategory
             :parent-key="parentKey ? `${parentKey}/${categoryItem.name}` : categoryItem.name"
             :category="categoryItem"
+            :collapsable="!categoryList.includes(categoryItem.name)"
           />
         </template>
 

package/components/YunComment.vue

@@ -31,26 +31,31 @@ const AsyncYunTwikoo = runtimeConfig.value.addons['valaxy-addon-twikoo']
     font-weight: 600;
     margin-bottom: 1rem;
   }
+
   h2 {
     font-size: 1.75rem;
     font-weight: 600;
     margin-bottom: 1rem;
   }
+
   h3 {
     font-size: 1.5rem;
     font-weight: 600;
     margin-bottom: 1rem;
   }
+
   h4 {
     font-size: 1.2rem;
     font-weight: 600;
     margin-bottom: 1rem;
   }
+
   h5 {
     font-size: 1rem;
     font-weight: 600;
     margin-bottom: 1rem;
   }
+
   h6 {
     font-size: 0.875rem;
     font-weight: 600;

package/components/YunFuseSearch.vue

@@ -127,15 +127,13 @@ onClickOutside(searchInputRef, () => {
   left: 0;
   width: 100%;
   height: 100%;
-
   backdrop-filter: blur(30px);
+  /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-backdrop-filter: blur(30px);
-
   text-align: center;
   margin: 0;
   z-index: var(--yun-z-search-popup);
   transition: 0.6s;
-
   background-color: var(--va-c-bg-opacity);
 }
 
@@ -177,7 +175,6 @@ onClickOutside(searchInputRef, () => {
   .yun-fuse-result-item {
     // padding: 0.5rem;
     cursor: pointer;
-
     border-top: 1px dashed #ccc;
   }
 }

package/components/YunGoDown.vue

@@ -7,19 +7,15 @@
 <style lang="scss">
 .go-down {
   cursor: pointer;
-
   display: inline-flex;
   justify-content: center;
   align-items: center;
-
   position: absolute;
   bottom: 1rem;
   z-index: var(--yun-z-go-down);
   animation: float 2s ease-in-out infinite;
-
   font-size: 2.5rem;
   color: var(--va-c-primary);
-
   transition: color var(--va-transition-duration);
 
   &:hover {

package/components/YunLoading.vue

@@ -21,17 +21,14 @@
 @keyframes rotateplane {
   0% {
     transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
   }
 
   50% {
-    transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
-    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
   }
 
   100% {
     transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
-    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
   }
 }
 </style>

package/components/YunNotice.vue

@@ -15,7 +15,6 @@ defineProps<{
 .yun-notice {
   border: 1px solid var(--va-c-text);
   width: calc(100% - 2rem);
-
   display: flex;
   flex-direction: column;
   justify-content: center;

package/components/YunOverview.vue

@@ -62,7 +62,7 @@ const router = useRouter()
     height: 96px;
     width: 96px;
     max-width: 100%;
-    margin: 0px;
+    margin: 0;
     padding: 4px;
     background-color: white;
     box-shadow: 0 0 10px rgba(black, 0.2);
@@ -84,7 +84,6 @@ const router = useRouter()
   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);
 }
 

package/components/YunPostCategories.vue

@@ -9,8 +9,8 @@ defineProps<{
 <template>
   <router-link
     :to="{
-      path: '/categories/',
-      query: { category: Array.isArray(categories) ? categories[categories.length - 1] : categories },
+      path: '/categories',
+      query: { category: Array.isArray(categories) ? categories.join('/') : categories },
     }"
     class="transition post-category inline-flex-center text-xs border-$va-c-divider hover:(text-blue-500 border-blue-500)"
     px-2 h="7"

package/components/YunPostNav.vue

@@ -33,12 +33,9 @@ const [prev, next] = usePrevNext()
     display: inline-flex;
     justify-content: center;
     align-items: center;
-
     color: var(--va-c-primary);
-
     outline: none;
     font-size: 1.5rem;
-
     font-weight: bold;
     text-transform: uppercase;
     height: 3rem;
@@ -61,9 +58,7 @@ const [prev, next] = usePrevNext()
   &-prev, &-next {
     display: inline-flex;
     align-items: center;
-
     height: 3rem;
-
     font-size: 1rem;
 
     .title {

package/components/YunSearchBtn.vue

@@ -31,7 +31,6 @@ function onClick() {
   position: fixed;
   top: 0.6rem;
   right: 0.8rem;
-
   color: var(--va-c-primary);
   z-index: var(--yun-z-search-btn);
 }

package/components/YunSidebar.vue

@@ -56,10 +56,8 @@ const showOverview = ref(false)
 .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,
@@ -77,7 +75,6 @@ const showOverview = ref(false)
 
     &.active {
       border: 1px solid var(--va-c-primary);
-
       color: white;
       background-color: var(--va-c-primary);
     }

package/components/YunSidebarNav.vue

@@ -55,9 +55,7 @@ const tags = useTags()
   padding: 0 15px;
   align-items: center;
   border-left: 1px solid get-css-var('c-gray');
-
   flex-direction: column;
-
   color: var(--va-c-text);
 
   &:first-child, &:last-child {

package/components/YunSponsor.vue

@@ -42,6 +42,7 @@ const sponsorBtnTitle = computed(() => {
 
 <style lang="scss">
 @use "valaxy/client/styles/mixins/index.scss" as *;
+
 .sponsor-button {
   background-color: rgba(255, 255, 255, 0.1);
 
@@ -49,6 +50,7 @@ const sponsorBtnTitle = computed(() => {
     transform: scale(1.1);
     transition: transform var(--va-transition-duration) ease-in-out;
   }
+
   &:hover {
     background-color: rgba(255, 255, 255, 0.9);
 
@@ -67,7 +69,6 @@ const sponsorBtnTitle = computed(() => {
 .qrcode-container {
   overflow: hidden;
   height: 0;
-
   transition: height var(--va-transition-duration) ease-in-out;
 
   &.show {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.15.6",
+  "version": "0.15.7",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -19,12 +19,12 @@
   "dependencies": {
     "@explosions/fireworks": "^0.0.2",
     "@iconify-json/ant-design": "^1.1.10",
-    "@iconify-json/simple-icons": "^1.1.73",
+    "@iconify-json/simple-icons": "^1.1.74",
     "animejs": "^3.2.1"
   },
   "devDependencies": {
     "@types/animejs": "^3.1.8",
-    "valaxy": "0.15.6",
+    "valaxy": "0.15.7",
     "valaxy-addon-waline": "0.1.1"
   }
 }

package/styles/common/button.scss

@@ -1,17 +1,13 @@
 .yun-icon-btn {
   background-color: transparent;
   cursor: pointer;
-
   display: inline-flex;
   align-items: center;
   justify-content: center;
-
   border: none;
   width: 3rem;
   height: 3rem;
-
   border-radius: 50%;
-
   transition: background-color var(--va-transition-duration);
 
   div {

package/styles/common/markdown.scss

@@ -11,6 +11,7 @@
   }
 }
 
+/* stylelint-disable-next-line no-duplicate-selectors */
 .markdown-body {
   word-wrap: break-word;
 
@@ -26,6 +27,7 @@
 
   ul {
     list-style: initial;
+
     li > p {
       margin-bottom: 0;
     }
@@ -48,12 +50,10 @@
 
   // alone image
   figure {
-
     figcaption {
       text-align: center;
       font-size: 0.8rem;
       color: var(--va-c-text-2);
-
       margin-bottom: 1rem;
     }
   }
@@ -64,11 +64,10 @@
     border-top-width: 0;
     background-color: var(--va-c-text);
   }
-}
 
-.markdown-body {
+  // lang
   div[class*='language-'].line-numbers-mode {
-    /*rtl:ignore*/
+    /* rtl:ignore */
     padding-left: 32px;
   }
 
@@ -76,10 +75,12 @@
     position: absolute;
     top: 0;
     bottom: 0;
-    /*rtl:ignore*/
+
+    /* rtl:ignore */
     left: 0;
     z-index: 3;
-    /*rtl:ignore*/
+
+    /* rtl:ignore */
     border-right: 1px solid var(--va-code-block-divider-color);
     padding-top: 20px;
     width: 32px;
@@ -92,9 +93,8 @@
       border-color 0.5s,
       color 0.5s;
   }
-}
 
-.markdown-body {
+  // table
   .table-container {
     table {
       thead {

package/styles/css-vars.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable no-duplicate-selectors */
 @use "./vars" as *;
 @use "valaxy/client/styles/mixins/index.scss" as * with($namespace: "yun");
 

package/styles/index.scss

@@ -1,6 +1,5 @@
 @use "./layout" as *;
 @use "./common/button.scss" as *;
-
 @forward "star-markdown-css/src/scss/theme/yun.scss" with (
   $colors: (
     "primary": $c-primary,

package/styles/layout/post.scss

@@ -6,7 +6,8 @@
 }
 
 .post-card-image {
-  @extend .post-card;
+  position: relative;
+  max-width: var(--yun-post-card-max-width);
 
   @include mobile {
     .post-card-info {
@@ -71,12 +72,10 @@
   padding: 0.5rem 1rem;
   color: white;
   font-size: 14px;
-
   margin-top: -0.2rem;
-
   transition: box-shadow var(--va-transition-duration);
 
-  &:before {
+  &::before {
     content: none;
   }
 }

package/styles/vars.scss

@@ -4,15 +4,12 @@
 $light: () !default;
 $light: map.merge(
   (
-    "bg-img":
-      url("../assets/images/light/bg-img.jpg"),
+    "bg-img": url("../assets/images/light/bg-img.jpg"),
     "sidebar-bg-color": var(--va-c-bg-light),
-    "sidebar-bg-img":
-      url("../assets/images/light/sidebar-bg-img.webp"),
+    "sidebar-bg-img": url("../assets/images/light/sidebar-bg-img.webp"),
   ),
   $light
 );
-
 $dark: () !default;
 $dark: map.merge(
   (
@@ -31,7 +28,6 @@ $common: map.merge(
   ),
   $common
 );
-
 $z-index: () !default;
 $z-index: map.merge(
   (

package/styles/widgets/banner.scss

@@ -76,7 +76,6 @@ $char-animation-duration: 0.4s;
   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;
 
@@ -94,8 +93,9 @@ $char-animation-duration: 0.4s;
 
   &-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;
+    /* stylelint-disable-next-line color-function-notation */
+    border-right: 0 solid rgba(var(--va-c-primary-rgb), 0.1);
+    border-right-width: 0;
     animation-name: char-move-left;
     animation-duration: $char-animation-duration;
     animation-delay: var(--line-animation-duration);
@@ -104,9 +104,10 @@ $char-animation-duration: 0.4s;
   }
 
   &-right {
-    border-left: 0px solid rgba(var(--va-c-primary-rgb), 0.1);
+    /* stylelint-disable-next-line color-function-notation */
+    border-left: 0 solid rgba(var(--va-c-primary-rgb), 0.1);
     border-right: 1px solid var(--banner-line-color);
-    border-left-width: 0px;
+    border-left-width: 0;
     animation-name: char-move-right;
     animation-duration: $char-animation-duration;
     animation-delay: var(--line-animation-duration);
@@ -138,6 +139,9 @@ $char-animation-duration: 0.4s;
 
   to {
     opacity: 1;
-    border-left-width: var(--banner-empty-border-size, var(--banner-char-size));
+    border-left-width: var(
+      --banner-empty-border-size,
+      var(--banner-char-size)
+    );
   }
 }

package/unocss.config.ts

@@ -27,6 +27,7 @@ export default defineConfig({
         serif: 'DM Serif Display',
         mono: 'DM Mono',
       },
+      provider: 'fontshare',
     }),
   ],
 })