feat: refactor post components and move to astro

src/component/FormattedDate.astro

@@ -0,0 +1,19 @@
+---
+import { SITE_LANG } from '@constant/app'
+
+type Props = {
+  date: Date
+}
+
+const { date } = Astro.props
+---
+
+<time datetime={date.toISOString()}>
+  {
+    date.toLocaleDateString(SITE_LANG, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    })
+  }
+</time>

src/component/Post.astro

@@ -1,6 +1,6 @@
 ---
 import type { BlogEntry } from '@content/config'
-import FormattedDate from '@component/svelte/FormattedDate.svelte'
+import FormattedDate from './FormattedDate.astro'
 
 type Props = {
   post: BlogEntry

src/component/PostItem.astro

@@ -0,0 +1,49 @@
+---
+import type { BlogEntry } from '@content/config'
+import FormattedDate from './FormattedDate.astro'
+
+type Props = {
+  post: BlogEntry
+  showPin?: boolean
+}
+
+const { post, showPin } = Astro.props
+
+const isPin = post.data.pin
+const date = post.data.date || (post.data.pubDate as Date)
+---
+
+<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">
+    <FormattedDate date={date} />
+    {
+      post.data.category && (
+        <a
+          href={`/archive/categories/${post.data.category}`}
+          class="relative ml-2 pl-1 text-main before:absolute before:-left-1 before:top-1/2 before:h-0.5 before:w-0.5 before:-translate-y-1/2 before:rounded-full before:bg-gray-500 hover:underline"
+          aria-label={`Link to ${post.data.category} category page`}
+        >
+          {post.data.category}
+        </a>
+      )
+    }
+  </div>
+  <a href={`/posts/${post.slug}/`}>
+    <h2
+      class="my-2 line-clamp-2 text-4xl font-bold uppercase tracking-wide dark:text-gray-400"
+      aria-label={post.data.title}
+    >
+      {post.data.title}
+    </h2>
+    {
+      post.data.description && (
+        <p class="text-gray-500" aria-label={post.data.description}>
+          {post.data.description}
+        </p>
+      )
+    }
+  </a>
+</article>

src/component/PostList.astro

@@ -1,7 +1,7 @@
 ---
 import type { BlogEntry } from '@content/config'
-import PostItem from './svelte/Post/PostItem.svelte'
 import ToArchive from './ToArchive.astro'
+import PostItem from './PostItem.astro'
 
 type Props = {
   list: BlogEntry[]
@@ -17,7 +17,7 @@ const _list = home && isMax ? list.slice(0, 10) : list
 ---
 
 <section class="mx-auto my-8 max-w-3xl" aria-label="Article List">
-  {_list.map(post => <PostItem {post} showPin={home} />)}
+  {_list.map(post => <PostItem post={post} showPin={home} />)}
 
   {isMax && <ToArchive tag={category} />}
 </section>

src/component/PostMeta.astro

@@ -0,0 +1,66 @@
+---
+import type { PostMeta } from '@model/post-meta'
+import { convertDash } from 'src/util/convertDash'
+import FormattedDate from './FormattedDate.astro'
+
+type Props = {
+  meta: PostMeta
+}
+
+const { meta } = Astro.props
+---
+
+<div class="flex flex-col">
+  <div class="mx-1 flex items-center text-sm text-gray-400">
+    <FormattedDate date={meta.updatedDate || meta.date} />
+    {
+      meta.category && (
+        <a
+          href={`/archive/categories/${meta.category}`}
+          class="dot relative uppercase text-main hover:underline"
+          aria-label={`Link to ${meta.category} category page`}
+        >
+          {meta.category}
+        </a>
+      )
+    }
+    {
+      meta.readingTime && (
+        <div class="dot relative">{Math.ceil(meta.readingTime.minutes)} mins read</div>
+      )
+    }
+  </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">
+          {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>
+</div>
+
+<style>
+  .dot {
+    @apply ml-2 pl-1 before:absolute before:-left-1 before:top-1/2 before:h-0.5 before:w-0.5 before:-translate-y-1/2 before:rounded-full before:bg-gray-500;
+  }
+</style>

src/layout/BlogPost.astro

@@ -3,7 +3,6 @@ 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 PostMeta from '@component/svelte/Post/PostMeta.svelte'
 import { SITE_DESCRIPTION, SITE_TITLE } from '@constant/app'
 import Header from '@component/Header.astro'
 import Page from './Page.astro'
@@ -31,7 +30,7 @@ const title = `${data.title} · ${SITE_TITLE} `
   <Header />
   <MainLayout>
     <article class="pt-32" aria-label="Article Detail">
-      <PostMeta meta={postMeta} />
+      <postMeta meta={postMeta} />
       <div class="flex justify-center">
         <div class="content prose-base max-w-3xl py-6 font-bodytext" aria-label="Article Content">
           <slot />