valaxy-theme-yun 0.28.3 → 0.28.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/YunPostCard.vue +78 -104
- package/layouts/home.vue +1 -0
- package/package.json +2 -2
|
@@ -23,89 +23,82 @@ const postTitleClass = computed(() => {
|
|
|
23
23
|
}
|
|
24
24
|
return props.post.postTitleClass || gradientClasses.value
|
|
25
25
|
})
|
|
26
|
-
|
|
27
|
-
/**
|
|
28
|
-
* Guard navigation so clicks on nested interactive elements (e.g. external links)
|
|
29
|
-
* don't also trigger the card's route navigation.
|
|
30
|
-
*/
|
|
31
|
-
function guardedNavigate(e: Event, navigate: () => void) {
|
|
32
|
-
if ((e.target as HTMLElement)?.closest('a'))
|
|
33
|
-
return
|
|
34
|
-
navigate()
|
|
35
|
-
}
|
|
36
26
|
</script>
|
|
37
27
|
|
|
38
28
|
<template>
|
|
39
|
-
<
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
<YunPostMeta :frontmatter="post" />
|
|
62
|
-
|
|
63
|
-
<div class="post-card-excerpt" flex="~ grow col" w="full" justify="center" items="center">
|
|
64
|
-
<div v-if="post.excerpt_type === 'text'" py="1" />
|
|
65
|
-
<template v-if="post.excerpt">
|
|
66
|
-
<div
|
|
67
|
-
v-if="post.excerpt_type === 'html'"
|
|
68
|
-
class="post-card-excerpt-content markdown-body" op="90" text="left" w="full" p="x-6 y-2"
|
|
69
|
-
>
|
|
70
|
-
<ValaxyDynamicComponent :template-str="post.excerpt" />
|
|
71
|
-
</div>
|
|
72
|
-
<div
|
|
73
|
-
v-else
|
|
74
|
-
class="post-card-excerpt-content markdown-body" op="90" text="left" w="full" p="x-6 y-2"
|
|
75
|
-
v-html="post.excerpt"
|
|
76
|
-
/>
|
|
77
|
-
</template>
|
|
78
|
-
<div v-else m="b-5" />
|
|
29
|
+
<div class="post-card-link flex-center w-full">
|
|
30
|
+
<YunCard
|
|
31
|
+
class="post-card-wrapper w-full hover:scale-102 hover:z-1"
|
|
32
|
+
mx="4"
|
|
33
|
+
:class="post.cover ? 'post-card-image' : 'post-card'"
|
|
34
|
+
overflow="hidden" v-bind="styles ? { style: styles } : {}"
|
|
35
|
+
>
|
|
36
|
+
<!-- Overlay link covers the entire card -->
|
|
37
|
+
<AppLink class="post-card-overlay" :to="post.path || ''" :aria-label="$tO(post.title)" tabindex="0" />
|
|
38
|
+
|
|
39
|
+
<div class="flex flex-1 of-hidden justify-start items-start post-card-info" w="full">
|
|
40
|
+
<img
|
|
41
|
+
v-if="post.cover" :src="post.cover" :alt="t('post.cover')" width="320" height="180"
|
|
42
|
+
class="post-card-cover cover object-cover object-center md:shadow" loading="lazy"
|
|
43
|
+
>
|
|
44
|
+
|
|
45
|
+
<div class="post-card-body flex flex-col items-center relative" :class="post.cover && 'post-card-body-with-cover'" w="full">
|
|
46
|
+
<AppLink class="post-title-link" :to="post.path || ''" m="t-3" :class="postTitleClass" tabindex="-1">
|
|
47
|
+
<div class="post-card-title flex-center title text-2xl" text="center" font="serif black">
|
|
48
|
+
<div v-if="post.type" class="inline-flex" m="r-1" :class="icon" />
|
|
49
|
+
<span>{{ $tO(post.title) }}</span>
|
|
79
50
|
</div>
|
|
51
|
+
</AppLink>
|
|
52
|
+
|
|
53
|
+
<YunPostMeta :frontmatter="post" />
|
|
54
|
+
|
|
55
|
+
<div class="post-card-excerpt" flex="~ grow col" w="full" justify="center" items="center">
|
|
56
|
+
<div v-if="post.excerpt_type === 'text'" py="1" />
|
|
57
|
+
<template v-if="post.excerpt">
|
|
58
|
+
<div
|
|
59
|
+
v-if="post.excerpt_type === 'html'"
|
|
60
|
+
class="post-card-excerpt-content markdown-body" op="90" text="left" w="full" p="x-6 y-2"
|
|
61
|
+
>
|
|
62
|
+
<ValaxyDynamicComponent :template-str="post.excerpt" />
|
|
63
|
+
</div>
|
|
64
|
+
<div
|
|
65
|
+
v-else
|
|
66
|
+
class="post-card-excerpt-content markdown-body" op="90" text="left" w="full" p="x-6 y-2"
|
|
67
|
+
v-html="post.excerpt"
|
|
68
|
+
/>
|
|
69
|
+
</template>
|
|
70
|
+
<div v-else m="b-5" />
|
|
71
|
+
</div>
|
|
80
72
|
|
|
81
|
-
|
|
73
|
+
<YunExcerptBottomGradient v-if="post.excerpt" />
|
|
82
74
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
</div>
|
|
75
|
+
<a
|
|
76
|
+
v-if="post.url" :href="post.url" class="post-link-btn shadow hover:shadow-md" rounded target="_blank"
|
|
77
|
+
rel="noopener noreferrer"
|
|
78
|
+
m="b-4"
|
|
79
|
+
>
|
|
80
|
+
{{ t('post.view_link') }}
|
|
81
|
+
</a>
|
|
91
82
|
</div>
|
|
83
|
+
</div>
|
|
92
84
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
</div>
|
|
99
|
-
|
|
100
|
-
<YunPostTags v-if="post.tags" m="l-2" :tags="post.tags" />
|
|
85
|
+
<!-- always show -->
|
|
86
|
+
<div w="full" class="yun-card-actions flex items-center justify-between" p="x-4 y-2" text="sm">
|
|
87
|
+
<div class="post-categories inline-flex gap-2" flex="wrap 1" items="center">
|
|
88
|
+
<YunPostCategories :categories="post.categories" />
|
|
89
|
+
<YunPostCollectionBadge v-if="postCollections.length" :collections="postCollections" />
|
|
101
90
|
</div>
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
91
|
+
|
|
92
|
+
<YunPostTags v-if="post.tags" m="l-2" :tags="post.tags" />
|
|
93
|
+
</div>
|
|
94
|
+
</YunCard>
|
|
95
|
+
</div>
|
|
105
96
|
</template>
|
|
106
97
|
|
|
107
98
|
<style lang="scss">
|
|
108
99
|
.post-card-wrapper {
|
|
100
|
+
// Stacking context for the overlay
|
|
101
|
+
position: relative;
|
|
109
102
|
transition: box-shadow var(--va-transition-duration), scale var(--va-transition-duration);
|
|
110
103
|
|
|
111
104
|
&:hover {
|
|
@@ -117,32 +110,17 @@ function guardedNavigate(e: Event, navigate: () => void) {
|
|
|
117
110
|
gap: 0.15rem;
|
|
118
111
|
}
|
|
119
112
|
|
|
120
|
-
.post-card {
|
|
121
|
-
// safari not support
|
|
122
|
-
// animation: card-appear 0.6s ease-in-out forwards, card-appear 0.6s ease-in-out forwards reverse;
|
|
123
|
-
// animation-timeline: view();
|
|
124
|
-
// animation-range: entry, exit;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
113
|
.post-card-link {
|
|
128
|
-
text-decoration: none;
|
|
129
|
-
color: inherit;
|
|
130
|
-
|
|
131
114
|
// max-w-$yun-post-card-max-width
|
|
132
115
|
max-width: calc(var(--yun-post-card-max-width) + 2rem);
|
|
116
|
+
}
|
|
133
117
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
color: inherit;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
&:focus {
|
|
144
|
-
outline: none;
|
|
145
|
-
}
|
|
118
|
+
// Overlay link covers the entire card as the click target
|
|
119
|
+
// Sits above normal content but below interactive elements
|
|
120
|
+
.post-card-overlay {
|
|
121
|
+
position: absolute;
|
|
122
|
+
inset: 0;
|
|
123
|
+
z-index: 1;
|
|
146
124
|
|
|
147
125
|
&:focus-visible {
|
|
148
126
|
outline: 2px solid var(--va-c-primary);
|
|
@@ -151,6 +129,14 @@ function guardedNavigate(e: Event, navigate: () => void) {
|
|
|
151
129
|
}
|
|
152
130
|
}
|
|
153
131
|
|
|
132
|
+
// Interactive elements (title, tags, categories, external link) float above the overlay
|
|
133
|
+
.post-title-link,
|
|
134
|
+
.yun-card-actions,
|
|
135
|
+
.post-link-btn {
|
|
136
|
+
position: relative;
|
|
137
|
+
z-index: 2;
|
|
138
|
+
}
|
|
139
|
+
|
|
154
140
|
.post-card-link :hover {
|
|
155
141
|
cursor: var(--cursor-pointer), pointer;
|
|
156
142
|
}
|
|
@@ -160,18 +146,6 @@ function guardedNavigate(e: Event, navigate: () => void) {
|
|
|
160
146
|
line-height: 1.7;
|
|
161
147
|
}
|
|
162
148
|
|
|
163
|
-
@keyframes card-appear {
|
|
164
|
-
0% {
|
|
165
|
-
opacity: 0;
|
|
166
|
-
transform: scale(0.8) translateY(20px);
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
100% {
|
|
170
|
-
opacity: 1;
|
|
171
|
-
transform: scale(1) translateY(0);
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
|
|
175
149
|
.yun-card-actions {
|
|
176
150
|
border-top: 1px solid rgb(122 122 122 / 0.08);
|
|
177
151
|
}
|
package/layouts/home.vue
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "valaxy-theme-yun",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.28.
|
|
4
|
+
"version": "0.28.4",
|
|
5
5
|
"author": {
|
|
6
6
|
"email": "me@yunyoujun.cn",
|
|
7
7
|
"name": "YunYouJun",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@types/animejs": "^3.1.13",
|
|
36
36
|
"valaxy-addon-waline": "0.2.1",
|
|
37
|
-
"valaxy": "0.28.
|
|
37
|
+
"valaxy": "0.28.4"
|
|
38
38
|
},
|
|
39
39
|
"scripts": {
|
|
40
40
|
"release": "bumpp && pnpm publish"
|