Add tags at top of blog pages

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());
 
 ---
 
@@ -32,6 +35,15 @@ import { articles } from "../../lib/list";
     <meta name="language" content="English" />
     <link rel="canonical" href={`${GLOBAL.rootUrl}/blog`} />
   </Fragment>
+  <Section class="my-8">
+    <div class="flex flex-wrap gap-2">
+      {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>
+  </Section>
   <Section class="my-8">
     <div class="flex items-center gap-4 pt-8 pb-16">
       <h1 class="font-display text-3xl sm:text-4xl leading-loose">{GLOBAL.articlesName}</h1>