Add Tag component and update blog index to display tags using the new component

Author: wilfredinni

.vscode/settings.json

@@ -198,24 +198,7 @@
         "zophie"
     ],
     "workbench.colorCustomizations": {
-        "activityBar.activeBorder": "#945bc4",
-        "activityBar.activeBackground": "#2f344a",
-        "activityBar.background": "#2f344a",
-        "activityBar.foreground": "#e7e7e7",
-        "activityBar.inactiveForeground": "#e7e7e799",
-        "activityBarBadge.background": "#885760",
-        "activityBarBadge.foreground": "#e7e7e7",
-        "commandCenter.border": "#e7e7e799",
-        "sash.hoverBorder": "#2f344a",
-        "statusBar.background": "#1b1e2b",
-        "statusBar.foreground": "#e7e7e7",
-        "statusBarItem.hoverBackground": "#2f344a",
-        "statusBarItem.remoteBackground": "#1b1e2b",
-        "statusBarItem.remoteForeground": "#e7e7e7",
-        "titleBar.activeBackground": "#1b1e2b",
-        "titleBar.activeForeground": "#e7e7e7",
-        "titleBar.inactiveBackground": "#1b1e2b99",
-        "titleBar.inactiveForeground": "#e7e7e799"
+        "activityBar.activeBorder": "#945bc4"
     },
     "peacock.remoteColor": "1b1e2b",
     "cSpell.language": "en",

src/components.d.ts

@@ -53,6 +53,7 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     SubscriptionForm: typeof import('./components/SubscriptionForm.vue')['default']
     Switch: typeof import('@headlessui/vue')['Switch']
+    Tag: typeof import('./components/ui/Tag.vue')['default']
     TheFooter: typeof import('./components/layout/TheFooter.vue')['default']
     TheNavbar: typeof import('./components/layout/TheNavbar.vue')['default']
     TheNavbarReader: typeof import('./components/layout/TheNavbarReader.vue')['default']

src/components/ui/Tag.vue

@@ -0,0 +1,11 @@
+<template>
+  <span
+    class="rounded text-xs bg-sky-500 px-1.5 py-1 dark:bg-sky-600 text-slate-50 dark:text-white"
+  >
+    #<slot />
+  </span>
+</template>
+
+<script setup lang="ts">
+// No props needed, tag content is passed via slot
+</script>

src/pages/blog/index.vue

@@ -68,22 +68,14 @@ const getTags = (article) => {
               />
             </svg>
           </div>
-          <div
-            class="absolute top-0 left-0 w-full bg-gradient-to-b from-black/70 to-transparent p-4"
-          >
-            <div class="flex flex-wrap gap-2">
-              <span
-                v-for="tag in getTags(latestArticle).slice(0, 2)"
-                :key="tag"
-                class="rounded-full bg-sky-500/80 px-2.5 py-0.5 text-xs text-white"
-              >
-                #{{ tag }}
-              </span>
-            </div>
-          </div>
         </div>
         <div class="flex flex-col p-6 md:w-1/2">
           <div class="flex-1">
+            <div class="mb-2 flex flex-wrap gap-2">
+              <Tag v-for="tag in getTags(latestArticle).slice(0, 2)" :key="tag">
+                {{ tag }}
+              </Tag>
+            </div>
             <h2
               class="text-2xl font-semibold text-slate-800 dark:text-slate-100"
             >
@@ -152,22 +144,14 @@ const getTags = (article) => {
             />
           </svg>
         </div>
-        <div
-          class="absolute top-0 left-0 w-full bg-gradient-to-b from-black/70 to-transparent p-4"
-        >
-          <div class="flex flex-wrap gap-2">
-            <span
-              v-for="tag in getTags(article).slice(0, 2)"
-              :key="tag"
-              class="rounded-full bg-sky-500/80 px-2.5 py-0.5 text-xs text-white"
-            >
-              #{{ tag }}
-            </span>
-          </div>
-        </div>
       </div>
       <div class="flex flex-1 flex-col p-6">
         <div class="flex-1">
+          <div class="mb-2 flex flex-wrap gap-2">
+            <Tag v-for="tag in getTags(article).slice(0, 2)" :key="tag">
+              {{ tag }}
+            </Tag>
+          </div>
           <h2 class="text-xl font-semibold text-slate-800 dark:text-slate-100">
             {{ article.children[0]?.meta?.title }}
           </h2>