Move tags to correct place

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
+  <div class="flex flex-wrap gap-2">
-    class="zag-muted zag-transition flex justify-between items-center"
+    {tags?.map((tag: string) => (
-  >
+      <span class="-zag-text -zag-bg zag-transition px-2 py-1 text-sm font-semibold">
-    {timestamp ? <p>{processArticleDate(timestamp)}</p> : null}
+        {tag}
-    {duration ? <p>{duration}</p> : null}
+      </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/lib/utils.ts

@@ -90,3 +90,15 @@ export const generateSourceUrl = (
 ) => {
   return `${GLOBAL.rootUrl}/${contentType}/${sourceUrl}`;
 };
+
+export const countTags = (tags: string[]) => {
+  const tagCount: Record<string, number> = {};
+  tags.forEach((tag) => {
+    if (tagCount[tag]) {
+      tagCount[tag]++;
+    } else {
+      tagCount[tag] = 1;
+    }
+  });
+  return tagCount;
+}

src/pages/blog/html-intro.md

@@ -7,4 +7,12 @@ time: 4
 featured: true
 timestamp: 2024-12-18T02:39:03+00:00
 filename: html-intro
----
+---
+
+<div class="flex flex-wrap gap-2">
+  {tags.map((tag) => (
+    <span class="-zag-text -zag-bg zag-transition px-2 py-1 text-sm font-semibold">
+      {tag}
+    </span>
+  ))}
+</div>

src/pages/blog/index.astro

@@ -4,6 +4,9 @@ import Layout from "../../layouts/Layout.astro";
 import ArticleSnippet from "../../components/ArticleSnippet.astro";
 import Section from "../../components/common/Section.astro";
 import { articles } from "../../lib/list";
+import { countTags } from "../../lib/utils";
+
+const tagCounts = countTags(articles.map((article) => article.tags).flat().filter((tag): tag is string => tag !== undefined));
 
 ---
 
@@ -33,9 +36,16 @@ import { articles } from "../../lib/list";
     <link rel="canonical" href={`${GLOBAL.rootUrl}/blog`} />
   </Fragment>
   <Section class="my-8">
-    <div class="flex items-center gap-4 pt-8 pb-16">
+    <div class="flex items-center gap-4 pt-8 pb-4">
       <h1 class="font-display text-3xl sm:text-4xl leading-loose">{GLOBAL.articlesName}</h1>
     </div>
+    <div class="flex flex-wrap gap-2 pb-16">
+      {Object.entries(tagCounts).map(([tag, count]) => (
+        <span class="-zag-text -zag-bg zag-transition px-2 py-1 text-sm font-semibold">
+          {tag}: {count}
+        </span>
+      ))}
+    </div>
     <ul>
       {
         articles.map((project) => (
@@ -46,6 +56,7 @@ import { articles } from "../../lib/list";
               duration={`${project.time} min`}
               url={project.filename}
               timestamp={project.timestamp}
+              tags={project.tags}
             />
           </li>
         ))