feat: refactor components and update navigation links

src/component/Header.astro

@@ -23,10 +23,10 @@ let menuList: TMenu[] = list.map<TMenu>(item => ({
 <div class="relative mt-20 w-full">
   <div class="absolute left-0 right-0 top-0 -z-10 overflow-hidden">
     <div
-      class="px-20 font-texture text-[22vw] font-bold leading-none text-stroke-1 text-stroke-gray-100 text-stroke-fill-transparent dark:text-stroke-zinc-900 forced-colors:opacity-5"
+      class="font-texture text-[22vw] font-bold leading-none text-stroke-1 text-stroke-gray-100 text-stroke-fill-transparent dark:text-stroke-zinc-900 forced-colors:opacity-5"
       aria-label={DISPLAY_SITE_TITLE}
     >
-      {title.map(str => <span class="block even:ml-[2em]">{str}</span>)}
+      {title.map(str => <span class="block even:ml-[2.4em]">{str}</span>)}
     </div>
   </div>
 

src/component/PostItem.astro

@@ -1,6 +1,9 @@
 ---
 import type { BlogEntry } from '@content/config'
+import type { Tag } from '@model/tag'
+import { convertDash } from '@util/convertDash'
 import FormattedDate from './FormattedDate.astro'
+import Tags from './Tags.astro'
 
 type Props = {
   post: BlogEntry
@@ -11,13 +14,20 @@ const { post, showPin } = Astro.props
 
 const isPin = post.data.pin
 const date = post.data.date || (post.data.pubDate as Date)
+const tags = post.data.tags?.map<Tag>(tag => ({
+  id: convertDash(tag),
+  title: tag,
+}))
 ---
 
 <article
   class={`m-4 rounded-md border border-transparent p-4 hover:border-gray-300  transition-[border] duration-200 ${showPin && isPin && 'bg-main/5 dark:bg-main/15'}`}
   aria-label={`Article: ${post.data.title}`}
 >
-  <div class="flex items-center text-sm uppercase text-gray-500" transition:name={`post-time-${post.id}`}>
+  <div
+    class="flex items-center text-sm uppercase text-gray-500"
+    transition:name={`post-time-${post.id}`}
+  >
     <FormattedDate date={date} />
     {
       post.data.category && (
@@ -47,4 +57,5 @@ const date = post.data.date || (post.data.pubDate as Date)
       )
     }
   </a>
+  {tags && <Tags list={tags} />}
 </article>

src/component/PostMeta.astro

@@ -1,6 +1,5 @@
 ---
 import type { PostMeta } from '@model/post-meta'
-import { convertDash } from 'src/util/convertDash'
 import FormattedDate from './FormattedDate.astro'
 
 type Props = {
@@ -11,7 +10,10 @@ const { meta } = Astro.props
 ---
 
 <div class="flex flex-col">
-  <div class="mx-1 flex items-center text-sm text-gray-400" transition:name={`post-time-${meta.id}`}>
+  <div
+    class="mx-1 flex items-center text-sm text-gray-400"
+    transition:name={`post-time-${meta.id}`}
+  >
     <FormattedDate date={meta.updatedDate || meta.date} />
     {
       meta.category && (
@@ -30,32 +32,23 @@ const { meta } = Astro.props
       )
     }
   </div>
-  <div class="flex justify-between">
-    <div class="flex flex-1 flex-col">
-      <div class="mb-8 pt-1">
-        <h1 class="text-7xl font-bold uppercase" aria-label="Post title" transition:name={`post-title-${meta.id}`}>
-          {meta.title}
-        </h1>
-        {
-          meta.subTitle && (
-            <div class="flex justify-end pt-4">
-              <h1 class="text-3xl text-gray-400" aria-label="Post subtitle">
-                —— {meta.subTitle}
-              </h1>
-            </div>
-          )
-        }
-      </div>
-    </div>
-    <div>
-      {
-        meta.tags?.map(tag => (
-          <a href={`/tags/${convertDash(tag)}`} class="rounded-sm text-main hover:animate-flashBtn">
-            {tag}
-          </a>
-        ))
-      }
-    </div>
+  <div class="mb-8 pt-1">
+    <h1
+      class="text-7xl font-bold uppercase"
+      aria-label="Post title"
+      transition:name={`post-title-${meta.id}`}
+    >
+      {meta.title}
+    </h1>
+    {
+      meta.subTitle && (
+        <div class="flex justify-end pt-4">
+          <h1 class="text-3xl text-gray-400" aria-label="Post subtitle">
+            —— {meta.subTitle}
+          </h1>
+        </div>
+      )
+    }
   </div>
 </div>
 

src/component/Tags.astro

@@ -1,17 +1,26 @@
 ---
+import type { Tag } from '@model/tag'
+
 type Props = {
-  list?: string[]
+  list?: Tag[]
 }
 
 const { list = [] } = Astro.props
 ---
 
 {
   list.length && (
-    <div class="max-w-3xl mx-auto">
-      {list.map(item => (
-        <a class="text-main hover:underline" aria-label="article tag">{`# ${item}`}</a>
-      ))}
-    </div>
+    <>
+      <div class="mb-2 mt-4 border-b border-gray-200" />
+      <div class="w-fit flex gap-x-1 text-sm opacity-30 hover:opacity-100 transition-opacity">
+        {list.map(item => (
+          <a
+            href={`/archive/tags/${item.id}`}
+            class="rounded-sm px-1 text-main hover:animate-flashBtn"
+            aria-label="article tag"
+          >{`#${item.title}`}</a>
+        ))}
+      </div>
+    </>
   )
 }

src/layout/BlogPost.astro

@@ -3,9 +3,12 @@ import '../style/content.css'
 import type { ReadTimeResults } from 'reading-time'
 import type { BlogEntry } from '@content/config'
 import type { PostMeta as TPostMeta } from '@model/post-meta'
+import type { Tag } from '@model/tag'
 import { SITE_DESCRIPTION, SITE_TITLE } from '@constant/app'
 import Header from '@component/Header.astro'
 import PostMeta from '@component/PostMeta.astro'
+import Tags from '@component/Tags.astro'
+import { convertDash } from '@util/convertDash'
 import Page from './Page.astro'
 import MainLayout from '../layout/Main.astro'
 
@@ -25,18 +28,25 @@ const postMeta: TPostMeta = {
 }
 
 const title = `${data.title} · ${SITE_TITLE} `
+const tags = postMeta.tags?.map<Tag>(tag => ({
+  id: convertDash(tag),
+  title: tag,
+}))
 ---
 
 <Page title={title} description={data.description || SITE_DESCRIPTION}>
   <Header />
   <MainLayout>
-    <article class="pt-32" aria-label="Article Detail">
+    <article class="pt-32 pb-4" aria-label="Article Detail">
       <PostMeta meta={postMeta} />
       <div class="flex justify-center">
-        <div class="content prose-base max-w-3xl py-6 font-bodytext" aria-label="Article Content">
+        <div class="content prose-base max-w-3xl pt-6 font-bodytext" aria-label="Article Content">
           <slot />
         </div>
       </div>
+      <div class="max-w-3xl mx-auto">
+        {tags && <Tags list={tags} />}
+      </div>
     </article>
   </MainLayout>
 </Page>

src/pages/tags/[id]/[...page].astro → src/pages/archive/tags/[id]/[...page].astro

@@ -8,7 +8,7 @@ import Page from '@layout/Page.astro'
 import MainLayout from '@layout/Main.astro'
 import PostList from '@component/PostList.astro'
 import Header from '@component/Header.astro'
-import { convertDash } from '../../../util/convertDash'
+import { convertDash } from '@util/convertDash'
 
 export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
   const tags = await postService.getTags()

src/service/post.ts

@@ -2,7 +2,7 @@ import type { Tag } from '@model/tag'
 import type { Category } from '../model/category'
 import type { CollectionEntry } from 'astro:content'
 import { getCollection } from 'astro:content'
-import { convertDash } from '../util/convertDash'
+import { convertDash } from '@util/convertDash'
 
 class PostService {
   private static Instance: PostService

tsconfig.json

@@ -10,7 +10,8 @@
       "@constant/*": ["src/constant/*"],
       "@model/*": ["src/model/*"],
       "@service/*": ["src/service/*"],
-      "@content/*": ["src/content/*"]
+      "@content/*": ["src/content/*"],
+      "@util/*": ["src/util/*"]
     },
   },
 }