Change tag display for PostPreview component and post page

Author: stelcodes

src/components/PostPreview.astro

@@ -3,6 +3,7 @@ import { dateString } from '@utils'
 import { Icon } from 'astro-icon/components'
 import type { CollectionEntry } from 'astro:content'
 import { render } from 'astro:content'
+import Tags from './Tags.astro'
 
 interface Props {
   post: CollectionEntry<'posts'>
@@ -39,15 +40,8 @@ const description = remarkPluginFrontmatter.description || post.data.description
   {description && <p class="my-4 text-base/7 text-foreground">{description}</p>}
   {
     post.data.tags && (
-      <div class="text-accent mb-6">
-        {post.data.tags.map((tag) => (
-          <a
-            class="underline mr-4 inline-block"
-            href={`/tags/${encodeURIComponent(tag)}`}
-          >
-            #{tag}
-          </a>
-        ))}
+      <div class="mb-6">
+        <Tags tags={post.data.tags} />
       </div>
     )
   }

src/components/Tags.astro

@@ -0,0 +1,21 @@
+---
+interface Props {
+  tags: string[]
+}
+
+const { tags } = Astro.props
+---
+
+<div class="flex flex-wrap gap-3 text-sm">
+  <slot />
+  {
+    tags.map((tag) => (
+      <a
+        href={`/tags/${encodeURIComponent(tag)}`}
+        class="py-1 px-3 bg-accent/2 hover:bg-accent/10 border-1 border-accent/10 text-accent/90 rounded-2xl"
+      >
+        {tag}
+      </a>
+    ))
+  }
+</div>

src/content/posts/showing-off-blog-features/index.md

@@ -2,7 +2,7 @@
 title: 'Showing Off Blog Features'
 published: 2025-07-20
 draft: false
-tags: ['astro']
+tags: ['astro', 'demo', 'markdown']
 toc: true
 coverImage:
   src: './cover.jpg'

src/pages/posts/[...page].astro

@@ -16,7 +16,7 @@ export const getStaticPaths = (async ({ paginate }) => {
 const { page } = Astro.props
 ---
 
-<Layout>
+<Layout title="Archive" description="All posts in the archive">
   <BlockHeader>Archive</BlockHeader>
   <PostPreviewsWithYear posts={page.data} />
   <Pagination

src/pages/posts/[slug].astro

@@ -10,6 +10,7 @@ import TableOfContents from '@components/TableOfContents.astro'
 import { Image } from 'astro:assets'
 import GiscusLoader from '@components/GiscusLoader.astro'
 import siteConfig from '../../site.config'
+import Tags from '@components/Tags.astro'
 
 export const getStaticPaths = (async () => {
   const posts = await getSortedPosts()
@@ -59,7 +60,7 @@ if (addendum.length > 0) {
       <h1 class="mb-3 text-[1.75rem] text-[var(--theme-h1)] font-semibold">
         # {postData.title}
       </h1>
-      <div class="text-foreground/80 mb-2.5">
+      <div class="text-foreground/80 mb-1">
         <time>{dateString(postData.published)}</time>
         {
           postData.author && (
@@ -68,21 +69,14 @@ if (addendum.length > 0) {
             </span>
           )
         }
-      </div>
       {
         postData.tags && (
-          <div class="text-accent mb-5 lg:mb-0">
-            {postData.tags.map((tag) => (
-              <a
-                class="underline mr-4 inline-block"
-                href={`/tags/${encodeURIComponent(tag)}`}
-              >
-                #{tag}
-              </a>
-            ))}
+          <div class="mt-4">
+            <Tags tags={postData.tags} />
           </div>
         )
       }
+      </div>
     </div>
     <!-- <hr class="border-accent/10 border-2 rounded-xl hidden lg:block" /> -->
     <div class="flex flex-col xl:gap-4 2xl:gap-18 xl:flex-row xl:items-start">

src/pages/tags/[tag]/[...page].astro

@@ -23,10 +23,11 @@ export const getStaticPaths = (async ({ paginate }) => {
 
 const { page } = Astro.props
 const { tag } = Astro.params
+const title = `Tag: ${tag}`
 ---
 
-<Layout>
-  <BlockHeader>#{tag}</BlockHeader>
+<Layout title={title} description={`All posts tagged with ${tag}`}>
+  <BlockHeader>{title}</BlockHeader>
   <PostPreviewsWithYear posts={page.data} />
   <Pagination
     prevLink={page.url.prev ? encodeURI(page.url.prev) : undefined}