Skip to content

Commit 8bfbf61

Browse files
wilfredinniwilfredinni
committed
Enhance blog article display with tag overlays and improve layout structure
1 parent 0aa05fc commit 8bfbf61

File tree

1 file changed

+65
-67
lines changed

1 file changed

+65
-67
lines changed

‎src/pages/blog/index.vue

Lines changed: 65 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const getTags = (article) => {
4242
class="group block overflow-hidden rounded-lg border border-slate-200 bg-white shadow-md transition-all duration-300 hover:shadow-xl dark:border-slate-700 dark:bg-slate-800"
4343
>
4444
<div class="md:flex">
45-
<div class="md:w-1/2">
45+
<div class="relative md:w-1/2">
4646
<img
4747
v-if="latestArticle.children[0]?.meta?.socialImage"
4848
:src="latestArticle.children[0]?.meta?.socialImage"
@@ -68,6 +68,19 @@ const getTags = (article) => {
6868
/>
6969
</svg>
7070
</div>
71+
<div
72+
class="absolute top-0 left-0 w-full bg-gradient-to-b from-black/70 to-transparent p-4"
73+
>
74+
<div class="flex flex-wrap gap-2">
75+
<span
76+
v-for="tag in getTags(latestArticle).slice(0, 2)"
77+
:key="tag"
78+
class="rounded-full bg-sky-500/80 px-2.5 py-0.5 text-xs text-white"
79+
>
80+
#{{ tag }}
81+
</span>
82+
</div>
83+
</div>
7184
</div>
7285
<div class="flex flex-col p-6 md:w-1/2">
7386
<div class="flex-1">
@@ -80,38 +93,25 @@ const getTags = (article) => {
8093
{{ latestArticle.children[0]?.meta?.description }}
8194
</p>
8295
</div>
83-
<div class="mt-4">
84-
<div class="mb-4 flex flex-wrap gap-2">
85-
<span
86-
v-for="tag in getTags(latestArticle)"
87-
:key="tag"
88-
class="rounded-full bg-sky-100 px-2.5 py-0.5 text-xs font-medium text-sky-800 dark:bg-sky-900 dark:text-sky-200"
89-
>
90-
{{ tag }}
91-
</span>
92-
</div>
93-
<div class="flex items-center justify-between">
94-
<time class="text-sm text-slate-500 dark:text-slate-400">
95-
{{ latestArticle.children[0]?.meta?.date }}
96-
</time>
97-
<div
98-
class="flex items-center text-sm font-medium text-sky-500"
96+
<div class="mt-4 flex items-center justify-between">
97+
<time class="text-sm text-slate-500 dark:text-slate-400">
98+
{{ latestArticle.children[0]?.meta?.date }}
99+
</time>
100+
<div class="flex items-center text-sm font-medium text-sky-500">
101+
Read article
102+
<svg
103+
viewBox="0 0 16 16"
104+
fill="none"
105+
aria-hidden="true"
106+
class="ml-1 h-4 w-4 stroke-current"
99107
>
100-
Read article
101-
<svg
102-
viewBox="0 0 16 16"
103-
fill="none"
104-
aria-hidden="true"
105-
class="ml-1 h-4 w-4 stroke-current"
106-
>
107-
<path
108-
d="M6.75 5.75 9.25 8l-2.5 2.25"
109-
stroke-width="1.5"
110-
stroke-linecap="round"
111-
stroke-linejoin="round"
112-
/>
113-
</svg>
114-
</div>
108+
<path
109+
d="M6.75 5.75 9.25 8l-2.5 2.25"
110+
stroke-width="1.5"
111+
stroke-linecap="round"
112+
stroke-linejoin="round"
113+
/>
114+
</svg>
115115
</div>
116116
</div>
117117
</div>
@@ -152,50 +152,48 @@ const getTags = (article) => {
152152
/>
153153
</svg>
154154
</div>
155+
<div
156+
class="absolute top-0 left-0 w-full bg-gradient-to-b from-black/70 to-transparent p-4"
157+
>
158+
<div class="flex flex-wrap gap-2">
159+
<span
160+
v-for="tag in getTags(article).slice(0, 2)"
161+
:key="tag"
162+
class="rounded-full bg-sky-500/80 px-2.5 py-0.5 text-xs text-white"
163+
>
164+
#{{ tag }}
165+
</span>
166+
</div>
167+
</div>
155168
</div>
156169
<div class="flex flex-1 flex-col p-6">
157170
<div class="flex-1">
158-
<h2
159-
class="text-xl font-semibold text-slate-800 dark:text-slate-100"
160-
>
171+
<h2 class="text-xl font-semibold text-slate-800 dark:text-slate-100">
161172
{{ article.children[0]?.meta?.title }}
162173
</h2>
163174
<p class="mt-2 text-sm text-slate-600 dark:text-slate-400">
164175
{{ article.children[0]?.meta?.description }}
165176
</p>
166177
</div>
167-
<div class="mt-4">
168-
<div class="mb-4 flex flex-wrap gap-2">
169-
<span
170-
v-for="tag in getTags(article)"
171-
:key="tag"
172-
class="rounded-full bg-sky-100 px-2.5 py-0.5 text-xs font-medium text-sky-800 dark:bg-sky-900 dark:text-sky-200"
173-
>
174-
{{ tag }}
175-
</span>
176-
</div>
177-
<div class="flex items-center justify-between">
178-
<time class="text-xs text-slate-500 dark:text-slate-400">
179-
{{ article.children[0]?.meta?.date }}
180-
</time>
181-
<div
182-
class="flex items-center text-sm font-medium text-sky-500"
178+
<div class="mt-4 flex items-center justify-between">
179+
<time class="text-xs text-slate-500 dark:text-slate-400">
180+
{{ article.children[0]?.meta?.date }}
181+
</time>
182+
<div class="flex items-center text-sm font-medium text-sky-500">
183+
Read article
184+
<svg
185+
viewBox="0 0 16 16"
186+
fill="none"
187+
aria-hidden="true"
188+
class="ml-1 h-4 w-4 stroke-current"
183189
>
184-
Read article
185-
<svg
186-
viewBox="0 0 16 16"
187-
fill="none"
188-
aria-hidden="true"
189-
class="ml-1 h-4 w-4 stroke-current"
190-
>
191-
<path
192-
d="M6.75 5.75 9.25 8l-2.5 2.25"
193-
stroke-width="1.5"
194-
stroke-linecap="round"
195-
stroke-linejoin="round"
196-
/>
197-
</svg>
198-
</div>
190+
<path
191+
d="M6.75 5.75 9.25 8l-2.5 2.25"
192+
stroke-width="1.5"
193+
stroke-linecap="round"
194+
stroke-linejoin="round"
195+
/>
196+
</svg>
199197
</div>
200198
</div>
201199
</div>
@@ -206,4 +204,4 @@ const getTags = (article) => {
206204
<route lang="yaml">
207205
meta:
208206
layout: blog
209-
</route>
207+
</route>

0 commit comments

Comments
 (0)