From a57b48af3a9fcb32efbcbbc47e22a563f925e959 Mon Sep 17 00:00:00 2001
From: dealjus <justindeal@protonmail.com>
Date: Sun, 27 Apr 2025 00:13:55 -0700
Subject: [PATCH] Update Blog Articles with tags

---
 src/components/ArticleSnippet.astro        | 20 ++++++++++++++------
 src/components/home/FeaturedArticles.astro |  1 +
 src/layouts/BlogLayout.astro               |  7 +++++++
 src/pages/blog/index.astro                 |  1 +
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/components/ArticleSnippet.astro b/src/components/ArticleSnippet.astro
index b16eb69..e41071b 100644
--- a/src/components/ArticleSnippet.astro
+++ b/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>
diff --git a/src/components/home/FeaturedArticles.astro b/src/components/home/FeaturedArticles.astro
index a05a509..c18662a 100644
--- a/src/components/home/FeaturedArticles.astro
+++ b/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>
       ))
diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
index a9602e8..9e8aa0b 100644
--- a/src/layouts/BlogLayout.astro
+++ b/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>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 70fd27f..6162ce5 100644
--- a/src/pages/blog/index.astro
+++ b/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>
         ))