Skip to content

Commit 4e564a5

Browse files
wilfredinniwilfredinni
committed
Add tags display for latest and other articles in blog index
1 parent 0570e33 commit 4e564a5

File tree

1 file changed

+85
-51
lines changed

1 file changed

+85
-51
lines changed

‎src/pages/blog/index.vue

Lines changed: 85 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,12 @@ const articles = computed(() => {
2727
2828
const latestArticle = computed(() => articles.value[0])
2929
const otherArticles = computed(() => articles.value.slice(1))
30+
31+
const getTags = (article) => {
32+
const tags = article.children[0]?.meta?.tags
33+
if (!tags) return []
34+
return tags.split(',').map((tag) => tag.trim())
35+
}
3036
</script>
3137
3238
<template>
@@ -63,32 +69,47 @@ const otherArticles = computed(() => articles.value.slice(1))
6369
</svg>
6470
</div>
6571
</div>
66-
<div class="p-6 md:w-1/2">
67-
<h2 class="text-2xl font-semibold text-slate-800 dark:text-slate-100">
68-
{{ latestArticle.children[0]?.meta?.title }}
69-
</h2>
70-
<p class="mt-2 text-slate-600 dark:text-slate-400">
71-
{{ latestArticle.children[0]?.meta?.description }}
72-
</p>
73-
<div class="mt-4 flex items-center justify-between">
74-
<time class="text-sm text-slate-500 dark:text-slate-400">
75-
{{ latestArticle.children[0]?.meta?.date }}
76-
</time>
77-
<div class="flex items-center text-sm font-medium text-sky-500">
78-
Read article
79-
<svg
80-
viewBox="0 0 16 16"
81-
fill="none"
82-
aria-hidden="true"
83-
class="ml-1 h-4 w-4 stroke-current"
72+
<div class="flex flex-col p-6 md:w-1/2">
73+
<div class="flex-1">
74+
<h2
75+
class="text-2xl font-semibold text-slate-800 dark:text-slate-100"
76+
>
77+
{{ latestArticle.children[0]?.meta?.title }}
78+
</h2>
79+
<p class="mt-2 text-slate-600 dark:text-slate-400">
80+
{{ latestArticle.children[0]?.meta?.description }}
81+
</p>
82+
</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"
8489
>
85-
<path
86-
d="M6.75 5.75 9.25 8l-2.5 2.25"
87-
stroke-width="1.5"
88-
stroke-linecap="round"
89-
stroke-linejoin="round"
90-
/>
91-
</svg>
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 class="flex items-center text-sm font-medium text-sky-500">
98+
Read article
99+
<svg
100+
viewBox="0 0 16 16"
101+
fill="none"
102+
aria-hidden="true"
103+
class="ml-1 h-4 w-4 stroke-current"
104+
>
105+
<path
106+
d="M6.75 5.75 9.25 8l-2.5 2.25"
107+
stroke-width="1.5"
108+
stroke-linecap="round"
109+
stroke-linejoin="round"
110+
/>
111+
</svg>
112+
</div>
92113
</div>
93114
</div>
94115
</div>
@@ -101,7 +122,7 @@ const otherArticles = computed(() => articles.value.slice(1))
101122
v-for="article in otherArticles"
102123
:key="article.path"
103124
:to="article.path"
104-
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"
125+
class="group flex flex-col 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"
105126
>
106127
<div class="relative overflow-hidden">
107128
<img
@@ -130,32 +151,45 @@ const otherArticles = computed(() => articles.value.slice(1))
130151
</svg>
131152
</div>
132153
</div>
133-
<div class="p-6">
134-
<h2 class="text-xl font-semibold text-slate-800 dark:text-slate-100">
135-
{{ article.children[0]?.meta?.title }}
136-
</h2>
137-
<p class="mt-2 text-sm text-slate-600 dark:text-slate-400">
138-
{{ article.children[0]?.meta?.description }}
139-
</p>
140-
<div class="mt-4 flex items-center justify-between">
141-
<time class="text-xs text-slate-500 dark:text-slate-400">
142-
{{ article.children[0]?.meta?.date }}
143-
</time>
144-
<div class="flex items-center text-sm font-medium text-sky-500">
145-
Read article
146-
<svg
147-
viewBox="0 0 16 16"
148-
fill="none"
149-
aria-hidden="true"
150-
class="ml-1 h-4 w-4 stroke-current"
154+
<div class="flex flex-1 flex-col p-6">
155+
<div class="flex-1">
156+
<h2 class="text-xl font-semibold text-slate-800 dark:text-slate-100">
157+
{{ article.children[0]?.meta?.title }}
158+
</h2>
159+
<p class="mt-2 text-sm text-slate-600 dark:text-slate-400">
160+
{{ article.children[0]?.meta?.description }}
161+
</p>
162+
</div>
163+
<div class="mt-4">
164+
<div class="mb-4 flex flex-wrap gap-2">
165+
<span
166+
v-for="tag in getTags(article)"
167+
:key="tag"
168+
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"
151169
>
152-
<path
153-
d="M6.75 5.75 9.25 8l-2.5 2.25"
154-
stroke-width="1.5"
155-
stroke-linecap="round"
156-
stroke-linejoin="round"
157-
/>
158-
</svg>
170+
{{ tag }}
171+
</span>
172+
</div>
173+
<div class="flex items-center justify-between">
174+
<time class="text-xs text-slate-500 dark:text-slate-400">
175+
{{ article.children[0]?.meta?.date }}
176+
</time>
177+
<div class="flex items-center text-sm font-medium text-sky-500">
178+
Read article
179+
<svg
180+
viewBox="0 0 16 16"
181+
fill="none"
182+
aria-hidden="true"
183+
class="ml-1 h-4 w-4 stroke-current"
184+
>
185+
<path
186+
d="M6.75 5.75 9.25 8l-2.5 2.25"
187+
stroke-width="1.5"
188+
stroke-linecap="round"
189+
stroke-linejoin="round"
190+
/>
191+
</svg>
192+
</div>
159193
</div>
160194
</div>
161195
</div>

0 commit comments

Comments
 (0)