valaxy-theme-yun 1.0.0 → 1.1.0

package/components/ValaxyMain.vue

@@ -48,7 +48,10 @@ onContentUpdated(() => {
         flex="~ col grow"
         p="lt-md:0"
       >
-        <YunCard :cover="frontmatter.cover" m="0" v-bind="styles ? { style: styles } : {}">
+        <YunCard
+          :cover="frontmatter.cover" :cover-component="frontmatter.coverComponent" :cover-props="frontmatter.coverProps"
+          m="0" v-bind="styles ? { style: styles } : {}"
+        >
           <YunPostActions />
           <div class="mt-8 mb-4">
             <slot name="main-header">

package/components/YunCard.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-defineProps<{ cover?: string }>()
+defineProps<{ cover?: string, coverComponent?: string, coverProps?: Record<string, unknown> }>()
 </script>
 
 <template>
@@ -8,7 +8,7 @@ defineProps<{ cover?: string }>()
     min-h="100px"
     bg="$va-c-bg-light"
   >
-    <YunCover :src="cover" />
+    <YunCover :src="cover" :component="coverComponent" :component-props="coverProps" />
 
     <div v-if="$slots.header" class="yun-card-header">
       <header>

package/components/YunCover.vue

@@ -1,16 +1,16 @@
-<script lang="ts" setup>
-defineProps<{
+<script setup lang="ts">
+withDefaults(defineProps<{
   src?: string
-}>()
+  component?: string
+  componentProps?: Record<string, unknown>
+  alt?: string
+  context?: 'card' | 'page'
+}>(), { context: 'page' })
 </script>
 
 <template>
-  <img
-    v-if="src"
-    width="640" height="360"
-    class="yun-cover object-cover select-none" h="64 md:sm" w="full"
-    :src="src"
-    loading="lazy"
-    alt=""
-  >
+  <ValaxyCover
+    class="yun-cover" :class="context === 'page' && 'h-64 md:h-sm'"
+    :src="src" :component="component" :component-props="componentProps" :alt="alt" :context="context"
+  />
 </template>

package/components/YunPostCard.vue

@@ -12,6 +12,7 @@ const props = defineProps<{
 const themeConfig = useThemeConfig()
 const { t } = useI18n()
 const { $tO } = useValaxyI18n()
+const hasCover = computed(() => Boolean(props.post.cover || props.post.coverComponent))
 
 const { icon, styles, color } = usePostProperty(props.post.type)
 
@@ -31,19 +32,20 @@ const postTitleClass = computed(() => {
     <YunCard
       class="post-card-wrapper w-full hover:scale-102 hover:z-1"
       mx="4"
-      :class="post.cover ? 'post-card-image' : 'post-card'"
+      :class="hasCover ? 'post-card-image' : 'post-card'"
       overflow="hidden" v-bind="styles ? { style: styles } : {}"
     >
       <!-- Overlay link covers the entire card -->
       <AppLink class="post-card-overlay" :to="post.path || ''" :aria-label="$tO(post.title)" tabindex="0" />
 
       <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"
-          class="post-card-cover cover object-cover object-center md:shadow" loading="lazy"
-        >
+        <YunCover
+          v-if="hasCover" :src="post.cover" :alt="t('post.cover')"
+          :component="post.coverComponent" :component-props="post.coverProps" context="card"
+          class="post-card-cover cover md:shadow"
+        />
 
-        <div class="post-card-body flex flex-col items-center relative" :class="post.cover && 'post-card-body-with-cover'" w="full">
+        <div class="post-card-body flex flex-col items-center relative" :class="hasCover && 'post-card-body-with-cover'" w="full">
           <AppLink class="post-title-link" :to="post.path || ''" m="t-3" :class="postTitleClass" tabindex="-1">
             <div class="post-card-title flex-center title text-2xl" text="center" font="serif black">
               <div v-if="post.type" class="inline-flex" m="r-1" :class="icon" />
@@ -130,6 +132,11 @@ const postTitleClass = computed(() => {
   }
 }
 
+// Component covers own their interactions; the rest of the card remains a link.
+.post-card-cover .valaxy-cover-content {
+  z-index: 2;
+}
+
 // Interactive elements float above the overlay while empty action-bar space
 // remains part of the card's main click target.
 .post-title-link,

package/node/config.ts

@@ -1,4 +1,5 @@
 import type { ThemeConfig, UserThemeConfig } from '../types'
+import { $t } from 'valaxy'
 
 /**
  * Default Config
@@ -61,7 +62,7 @@ export const defaultThemeConfig: ThemeConfig = {
   },
 
   nav: [
-    { text: 'menu.posts', link: '/posts/', icon: 'i-ri-article-line' },
+    { text: $t('menu.posts'), link: '/posts/', icon: 'i-ri-article-line' },
   ],
   pages: [],
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valaxy-theme-yun",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Default theme (Yun) for Valaxy — a Vite & Vue powered static blog generator",
   "author": {
     "email": "me@yunyoujun.cn",
@@ -41,7 +41,7 @@
     "valaxy-addon-girls": "0.1.0"
   },
   "devDependencies": {
-    "valaxy": "1.0.0",
+    "valaxy": "1.1.0",
     "valaxy-addon-waline": "0.2.1"
   },
   "scripts": {