Update Blog Articles with tags

src/components/ArticleSnippet.astro

@@ -8,22 +8,30 @@ export type Props = {
   url: string;
   duration?: string;
   timestamp?: string;
+  tags?: string[];
 };
 
-const { title, description, url, duration, timestamp } = Astro.props;
+const { title, description, url, duration, timestamp, tags } = Astro.props;
 ---
 
 <div class="zag-text zag-transition flex flex-col gap-3 pb-8">
   <Anchor url={url} class="text-xl">
     {title}
   </Anchor>
+  <div
+  class="zag-muted zag-transition flex justify-between items-center"
+>
+  {timestamp ? <p>{processArticleDate(timestamp)}</p> : null}
+  {duration ? <p>{duration}</p> : null}
+</div>
   <p class="">
     {description}
   </p>
-  <div
-    class="zag-muted zag-transition flex justify-between items-center"
-  >
-    {timestamp ? <p>{processArticleDate(timestamp)}</p> : null}
-    {duration ? <p>{duration}</p> : null}
+  <div class="flex flex-wrap gap-2">
+    {tags?.map((tag: string) => (
+      <span class="-zag-text -zag-bg zag-transition px-2 py-1 text-sm font-semibold">
+        {tag}
+      </span>
+    ))}
   </div>
 </div>

src/components/home/FeaturedArticles.astro

@@ -26,6 +26,7 @@ const { featuredArticles } = Astro.props;
             url={article.filename}
             timestamp={article.timestamp}
             duration={`${article.time} min`}
+            tags={article.tags}
           />
         </li>
       ))

src/layouts/BlogLayout.astro

@@ -50,6 +50,13 @@ const sourceUrl = generateSourceUrl(frontmatter.filename, "blog");
     <Prose>
       <slot />
     </Prose>
+    <div class="flex flex-wrap gap-2 mt-4">
+      {frontmatter.tags?.map((tag) => (
+        <span class="-zag-text -zag-bg zag-transition px-2 py-1 text-sm font-semibold">
+          {tag}
+        </span>
+      ))}
+    </div>
     <p class="pt-8">~{GLOBAL.username}</p>
   </Section>
 </Layout>

src/pages/blog/index.astro

@@ -46,6 +46,7 @@ import { articles } from "../../lib/list";
               duration={`${project.time} min`}
               url={project.filename}
               timestamp={project.timestamp}
+              tags={project.tags}
             />
           </li>
         ))