@xenterprises/nuxt-x-marketing 1.2.1 → 1.2.2
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.
|
@@ -1,11 +1,29 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<article
|
|
2
|
+
<article
|
|
3
|
+
class="group flex flex-col h-full"
|
|
4
|
+
:class="featured && 'p-0'"
|
|
5
|
+
>
|
|
3
6
|
<!-- Clickable card surface (image, meta, title, excerpt, author) -->
|
|
4
7
|
<NuxtLink :to="postHref" class="block flex-1">
|
|
8
|
+
<!-- Featured ribbon -->
|
|
9
|
+
<div v-if="featured" class="mb-3">
|
|
10
|
+
<UBadge
|
|
11
|
+
label="Featured"
|
|
12
|
+
color="primary"
|
|
13
|
+
variant="solid"
|
|
14
|
+
size="md"
|
|
15
|
+
/>
|
|
16
|
+
</div>
|
|
17
|
+
|
|
5
18
|
<!-- Image -->
|
|
6
19
|
<figure
|
|
7
20
|
v-if="imageSrc"
|
|
8
|
-
class="
|
|
21
|
+
:class="[
|
|
22
|
+
'rounded-xl overflow-hidden xHover-zoom shadow-md transition-shadow duration-300 group-hover:shadow-xl',
|
|
23
|
+
featured
|
|
24
|
+
? 'aspect-[21/9] mb-6'
|
|
25
|
+
: 'aspect-[16/9] mb-4',
|
|
26
|
+
]"
|
|
9
27
|
>
|
|
10
28
|
<img
|
|
11
29
|
:src="imageSrc"
|
|
@@ -24,19 +42,26 @@
|
|
|
24
42
|
<time
|
|
25
43
|
v-if="post.date || post.publishedAt"
|
|
26
44
|
:datetime="post.date || post.publishedAt"
|
|
27
|
-
class="text-sm text-neutral-500"
|
|
45
|
+
:class="featured ? 'text-base text-neutral-500' : 'text-sm text-neutral-500'"
|
|
28
46
|
>
|
|
29
47
|
{{ formattedDate }}
|
|
30
48
|
</time>
|
|
31
49
|
<span v-if="post.readingTime" class="text-sm text-neutral-400">·</span>
|
|
32
|
-
<span
|
|
50
|
+
<span
|
|
51
|
+
v-if="post.readingTime"
|
|
52
|
+
:class="featured ? 'text-base text-neutral-500' : 'text-sm text-neutral-500'"
|
|
33
53
|
>{{ post.readingTime }} min read</span
|
|
34
54
|
>
|
|
35
55
|
</div>
|
|
36
56
|
|
|
37
57
|
<!-- Title -->
|
|
38
58
|
<h3
|
|
39
|
-
class="
|
|
59
|
+
:class="[
|
|
60
|
+
'text-neutral-900 dark:text-white group-hover:text-primary-500 transition-colors',
|
|
61
|
+
featured
|
|
62
|
+
? 'text-2xl sm:text-3xl lg:text-4xl font-bold leading-tight'
|
|
63
|
+
: 'xText-title',
|
|
64
|
+
]"
|
|
40
65
|
>
|
|
41
66
|
{{ post.title }}
|
|
42
67
|
</h3>
|
|
@@ -44,7 +69,12 @@
|
|
|
44
69
|
<!-- Excerpt / Description -->
|
|
45
70
|
<p
|
|
46
71
|
v-if="hasExcerpt && excerpt"
|
|
47
|
-
class="
|
|
72
|
+
:class="[
|
|
73
|
+
'text-neutral-600 dark:text-neutral-400',
|
|
74
|
+
featured
|
|
75
|
+
? 'mt-4 text-base sm:text-lg leading-relaxed'
|
|
76
|
+
: 'mt-2 text-sm line-clamp-2',
|
|
77
|
+
]"
|
|
48
78
|
>
|
|
49
79
|
{{ excerpt }}
|
|
50
80
|
</p>
|
|
@@ -55,11 +85,13 @@
|
|
|
55
85
|
v-if="post.author.avatar"
|
|
56
86
|
:src="post.author.avatar"
|
|
57
87
|
:alt="post.author.name"
|
|
58
|
-
class="w-8 h-8 rounded-full object-cover"
|
|
88
|
+
:class="featured ? 'w-10 h-10 rounded-full object-cover' : 'w-8 h-8 rounded-full object-cover'"
|
|
59
89
|
/>
|
|
60
90
|
<div
|
|
61
91
|
v-else
|
|
62
|
-
class="
|
|
92
|
+
:class="featured
|
|
93
|
+
? 'w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center'
|
|
94
|
+
: 'w-8 h-8 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center'"
|
|
63
95
|
>
|
|
64
96
|
<span
|
|
65
97
|
class="text-primary-600 dark:text-primary-400 font-medium text-sm"
|
|
@@ -67,7 +99,11 @@
|
|
|
67
99
|
{{ post.author.name?.charAt(0) }}
|
|
68
100
|
</span>
|
|
69
101
|
</div>
|
|
70
|
-
<span
|
|
102
|
+
<span
|
|
103
|
+
:class="featured
|
|
104
|
+
? 'text-base font-medium text-neutral-900 dark:text-white'
|
|
105
|
+
: 'text-sm font-medium text-neutral-900 dark:text-white'"
|
|
106
|
+
>
|
|
71
107
|
{{ post.author.name }}
|
|
72
108
|
</span>
|
|
73
109
|
</div>
|
|
@@ -82,6 +118,7 @@
|
|
|
82
118
|
:variant="button.variant || 'solid'"
|
|
83
119
|
:icon="button.icon"
|
|
84
120
|
block
|
|
121
|
+
:size="featured ? 'xl' : 'md'"
|
|
85
122
|
class="mt-4 w-full justify-center"
|
|
86
123
|
/>
|
|
87
124
|
</article>
|
|
@@ -134,6 +171,14 @@ const props = defineProps({
|
|
|
134
171
|
type: String,
|
|
135
172
|
default: "/blog",
|
|
136
173
|
},
|
|
174
|
+
/**
|
|
175
|
+
* Featured variant: wider image (21:9), larger title (up to 4xl),
|
|
176
|
+
* un-clamped excerpt, larger author, "Featured" ribbon, xl button.
|
|
177
|
+
*/
|
|
178
|
+
featured: {
|
|
179
|
+
type: Boolean,
|
|
180
|
+
default: false,
|
|
181
|
+
},
|
|
137
182
|
});
|
|
138
183
|
|
|
139
184
|
// --- Resolved post fields (handle Nuxt Content + custom shapes) ------------
|