valaxy-theme-yun 0.25.3 → 0.25.5

package/components/YunCard.vue

@@ -4,7 +4,7 @@ defineProps<{ cover?: string }>()
 
 <template>
   <div
-    class="yun-card flex-center rounded" flex="col"
+    class="yun-card flex-center rounded-2" flex="col"
     min-h="100px"
     bg="$va-c-bg-light"
   >

package/components/YunPostCard.vue

@@ -24,76 +24,67 @@ const postTitleClass = computed(() => {
 </script>
 
 <template>
-  <YunCard
-    class="w-full"
-    m="auto"
-    :class="post.cover ? 'post-card-image' : 'post-card'"
-    overflow="hidden" :style="styles"
-  >
-    <div class="flex flex-1 of-hidden justify-start items-start post-card-info" w="full">
-      <img
-        v-if="post.cover"
-        :src="post.cover"
-        :alt="t('post.cover')"
-        width="320" height="180"
-        w="40%" h="54"
-        class="cover object-cover object-center md:shadow"
-        loading="lazy"
-      >
-
-      <div class="flex flex-col items-center relative px-6" :class="post.cover && 'h-54'" w="full">
-        <AppLink
-          class="post-title-link cursor-pointer"
-          :to="post.path || ''"
-          m="t-3"
-          :class="postTitleClass"
+  <RouterLink class="post-card-link flex-center w-full" :to="post.path || ''">
+    <YunCard
+      class="w-full hover:scale-102 hover:z-1" mx="4" :class="post.cover ? 'post-card-image' : 'post-card'"
+      overflow="hidden" :style="styles"
+    >
+      <div class="flex flex-1 of-hidden justify-start items-start post-card-info" w="full">
+        <img
+          v-if="post.cover" :src="post.cover" :alt="t('post.cover')" width="320" height="180" w="40%" h="54"
+          class="cover object-cover object-center md:shadow" loading="lazy"
         >
-          <div
-            class="flex-center title text-2xl"
-            text="center" font="serif black"
-          >
-            <div v-if="post.type" class="inline-flex" m="r-1" :class="icon" />
-            <span>{{ $tO(post.title) }}</span>
+
+        <div class="flex flex-col items-center relative" :class="post.cover && 'h-54'" w="full">
+          <AppLink class="post-title-link cursor-pointer" :to="post.path || ''" m="t-3" :class="postTitleClass">
+            <div class="flex-center title text-2xl" text="center" font="serif black">
+              <div v-if="post.type" class="inline-flex" m="r-1" :class="icon" />
+              <span>{{ $tO(post.title) }}</span>
+            </div>
+          </AppLink>
+
+          <YunPostMeta :frontmatter="post" />
+
+          <div flex="~ grow col" w="full" justify="center" items="center">
+            <div v-if="post.excerpt_type === 'text'" py="1" />
+            <template v-if="post.excerpt">
+              <div
+                v-if="post.excerpt_type === 'html'"
+                class="markdown-body" op="90" text="left" w="full" p="x-8 y-2"
+              >
+                <ValaxyDynamicComponent :template-str="post.excerpt" />
+              </div>
+              <div
+                v-else
+                class="markdown-body" op="90" text="left" w="full" p="x-8 y-2"
+                v-html="post.excerpt"
+              />
+            </template>
+            <div v-else m="b-5" />
           </div>
-        </AppLink>
+          <!-- <div m="b-5" /> -->
 
-        <YunPostMeta :frontmatter="post" />
+          <YunExcerptBottomGradient v-if="post.excerpt" />
 
-        <div flex="~ grow col" w="full" justify="center" items="center">
-          <div v-if="post.excerpt_type === 'text'" py="1" />
-          <div v-if="post.excerpt" class="markdown-body" op="90" text="left" w="full" p="x-6 lt-sm:4 y-2" v-html="post.excerpt" />
-          <div v-else m="b-5" />
+          <a
+            v-if="post.url" :href="post.url" class="post-link-btn shadow hover:shadow-md z-2" rounded target="_blank"
+            m="b-4"
+          >
+            {{ t('post.view_link') }}
+          </a>
         </div>
-        <!-- <div m="b-5" /> -->
-
-        <YunExcerptBottomGradient v-if="post.excerpt" />
-
-        <a
-          v-if="post.url"
-          :href="post.url"
-          class="post-link-btn shadow hover:shadow-md z-2"
-          rounded
-          target="_blank"
-          m="b-4"
-        >
-          {{ t('post.view_link') }}
-        </a>
       </div>
-    </div>
 
-    <!-- always show -->
-    <div
-      w="full" class="yun-card-actions flex justify-between px-6"
-      min-h="10"
-      text="sm"
-    >
-      <div class="post-categories inline-flex" flex="wrap 1" items="center">
-        <YunPostCategories m="l-1" :categories="post.categories" />
-      </div>
+      <!-- always show -->
+      <div w="full" class="yun-card-actions flex justify-between p-4" min-h="10" text="sm">
+        <div class="post-categories inline-flex" flex="wrap 1" items="center">
+          <YunPostCategories m="l-1" :categories="post.categories" />
+        </div>
 
-      <YunPostTags v-if="post.tags" m="1" :tags="post.tags" />
-    </div>
-  </YunCard>
+        <YunPostTags v-if="post.tags" m="1" :tags="post.tags" />
+      </div>
+    </YunCard>
+  </RouterLink>
 </template>
 
 <style lang="scss">
@@ -104,6 +95,30 @@ const postTitleClass = computed(() => {
   // animation-range: entry, exit;
 }
 
+.post-card-link {
+  text-decoration: none;
+  color: inherit;
+  // max-w-$yun-post-card-max-width
+  max-width: calc(var(--yun-post-card-max-width) + 2rem);
+
+  &:hover {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  &:visited {
+    color: inherit;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.post-card-link :hover {
+  cursor: var(--cursor-pointer), pointer;
+}
+
 @keyframes card-appear {
   0% {
     opacity: 0;

package/components/YunPostList.vue

@@ -28,7 +28,7 @@ const displayedPosts = computed(() =>
 </script>
 
 <template>
-  <div flex="~ col" class="yun-post-list gap-4" w="full" p="x-4 lt-sm:0">
+  <div flex="~ col" class="yun-post-list gap-4 items-center" w="full" p="x-4 lt-sm:0">
     <template v-if="!displayedPosts.length">
       <div py2 op50 text-center>
         博主还什么都没写哦～

package/components/menu/YunNavMenuTitle.vue

@@ -60,8 +60,9 @@ function goToLink() {
     >
       <div class="gap-1" flex="~">
         <div
+          v-if="fm.icon"
           class="size-4"
-          :class="fm.icon || 'i-ri-article-line'"
+          :class="fm.icon"
         />
         <span class="truncate"> {{ $tO(fm.title || '') }}</span>
       </div>

package/components/project/YunProjects.vue

@@ -13,11 +13,13 @@ const curCategory = ref('all')
 
 <template>
   <div flex="~ col center">
-    <h2 class="mb-3 text-2xl">
-      {{ fm.title || t('title.projects') }}
-    </h2>
+    <YunPageHeader
+      :title="fm.title || t('title.projects')"
+      :icon="fm.icon"
+      :page-title-class="fm.pageTitleClass"
+    />
 
-    <div flex="~ wrap" justify="center">
+    <div class="mt-3" flex="~ wrap" justify="center">
       <YunProjectToggleButton
         :active="curCategory === 'all'"
         @click="curCategory = 'all'"

package/components/ui/YunExcerptBottomGradient.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    w="full" h="10"
+    w="full" h="30%"
     class="absolute bottom-0 bg-gradient-to-t from-$va-c-bg-light to-transparent z-1"
   />
 </template>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valaxy-theme-yun",
   "type": "module",
-  "version": "0.25.3",
+  "version": "0.25.5",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -24,7 +24,7 @@
     "@ctrl/tinycolor": "^4.1.0",
     "@explosions/fireworks": "^0.2.0",
     "@iconify-json/ant-design": "^1.2.5",
-    "@iconify-json/simple-icons": "^1.2.42",
+    "@iconify-json/simple-icons": "^1.2.43",
     "@vueuse/motion": "^3.0.3",
     "animejs": "^4.0.2",
     "gsap": "^3.13.0",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@types/animejs": "^3.1.13",
-    "valaxy": "0.25.3",
+    "valaxy": "0.25.5",
     "valaxy-addon-waline": "0.2.1"
   },
   "scripts": {

package/styles/common/markdown.scss

@@ -32,13 +32,13 @@
   ul {
     list-style: initial;
 
-    li > p {
+    li>p {
       margin-bottom: 0;
     }
   }
 
   ol {
-    > li {
+    >li {
       list-style: decimal;
     }
   }
@@ -122,3 +122,41 @@
     }
   }
 }
+
+@media (width <=767.9px) {
+  .markdown-body {
+    padding: 0.5rem;
+  }
+}
+
+@include mobile {
+  .markdown-body {
+    div[class*="language-"] {
+      position: relative;
+      // left: 50%;
+      // right: 50%;
+      // margin-left: -50vw !important;
+      // margin-right: -50vw !important;
+      // width: 100vw !important;
+      margin-top: 16px;
+      margin-bottom: 0;
+      margin-left: -24px;
+      margin-right: -24px;
+      height: auto;
+    }
+  }
+}
+
+@media (width <=639.9px) {
+
+  .markdown-body .vp-code-group .tabs,
+  .markdown-body .vp-code-group div[class*="language-"] {
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: -50vw !important;
+    margin-right: -50vw !important;
+    width: 100vw !important;
+    height: auto;
+  }
+}

package/unocss.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'unocss'
 
 export default defineConfig({
   shortcuts: [
-    ['yun-card', 'transition yun-transition shadow hover:shadow-lg'],
+    ['yun-card', 'transition-all yun-transition shadow hover:shadow-2xl'],
   ],
   rules: [
     [