From 0be314edbeb479ef04919b6c2bdda4b09e3f5412 Mon Sep 17 00:00:00 2001
From: Thuan Bui <9248622+10h30@users.noreply.github.com>
Date: Sun, 15 Mar 2026 10:55:17 +0700
Subject: [PATCH] feat: add tag pages and integrate tags component in post
 layout

---
 src/components/ui/Tags.astro        |  2 +-
 src/pages/[...slug].astro           | 19 ++++++++++++++++++-
 src/pages/{tags => tag}/[tag].astro |  0
 3 files changed, 19 insertions(+), 2 deletions(-)
 rename src/pages/{tags => tag}/[tag].astro (100%)

diff --git a/src/components/ui/Tags.astro b/src/components/ui/Tags.astro
index ac564a9..6432375 100644
--- a/src/components/ui/Tags.astro
+++ b/src/components/ui/Tags.astro
@@ -13,7 +13,7 @@ const { tags, class: className = "text-sm" } = Astro.props;
       {tags.map((tag) => (
         <li class="inline-block relative">
           <a
-            href={`/tags/${tag}`}
+            href={`/tag/${tag}`}
             class="inline-block bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground px-3 py-1 rounded-full border border-border transition-colors duration-200"
           >
             #{tag}
diff --git a/src/pages/[...slug].astro b/src/pages/[...slug].astro
index 33af840..1965de8 100644
--- a/src/pages/[...slug].astro
+++ b/src/pages/[...slug].astro
@@ -1,6 +1,8 @@
 ---
 import BaseLayout from "@/layouts/BaseLayout.astro";
 import Schema from "@/components/seo/Schema.astro";
+import Tags from "@/components/ui/Tags.astro";
+import Categories from "@/components/ui/Categories.astro";
 
 import { getCollection, render } from "astro:content";
 
@@ -14,7 +16,8 @@ export async function getStaticPaths() {
 
 const { post } = Astro.props;
 const { Content, remarkPluginFrontmatter } = await render(post);
-const { title, description, pubDate, author, image } = post.data;
+const { title, description, pubDate, author, image, categories, tags } =
+  post.data;
 
 const formattedDate = pubDate.toLocaleDateString("vi-VN", {
   year: "numeric",
@@ -48,6 +51,13 @@ const metadata = {
   <section class="relative px-4 py-8 sm:px-6 lg:px-8 md:py-12">
     <div class="relative mx-auto max-w-3xl">
       <div class="reveal mb-10 text-center">
+        {
+          categories && categories.length > 0 && (
+            <div class="mb-3 flex flex-wrap justify-center gap-2">
+              <Categories categories={categories} />
+            </div>
+          )
+        }
         <p class="text-sm font-semibold tracking-wide text-primary uppercase">
           {formattedDate} • {author}
           {readingTime && ` • ${readingTime}`}
@@ -72,6 +82,13 @@ const metadata = {
       >
         <Content />
       </div>
+      {
+        tags && tags.length > 0 && (
+          <div class="mt-4 relative z-20">
+            <Tags tags={tags} />
+          </div>
+        )
+      }
     </div>
   </section>
 </BaseLayout>
diff --git a/src/pages/tags/[tag].astro b/src/pages/tag/[tag].astro
similarity index 100%
rename from src/pages/tags/[tag].astro
rename to src/pages/tag/[tag].astro