From 6d30303a297451d6365f935242a17ecccfd70d16 Mon Sep 17 00:00:00 2001
From: colmugx <colmugx@qq.com>
Date: Tue, 30 Jul 2024 13:50:52 +0800
Subject: [PATCH] feat: refactor post components and move to astro

---
 src/component/FormattedDate.astro         | 19 +++++++
 src/component/Post.astro                  |  2 +-
 src/component/PostItem.astro              | 49 +++++++++++++++++
 src/component/PostList.astro              |  4 +-
 src/component/PostMeta.astro              | 66 +++++++++++++++++++++++
 src/component/svelte/FormattedDate.svelte | 13 -----
 src/component/svelte/Post/PostItem.svelte | 41 --------------
 src/component/svelte/Post/PostMeta.svelte | 53 ------------------
 src/layout/BlogPost.astro                 |  3 +-
 9 files changed, 138 insertions(+), 112 deletions(-)
 create mode 100644 src/component/FormattedDate.astro
 create mode 100644 src/component/PostItem.astro
 create mode 100644 src/component/PostMeta.astro
 delete mode 100644 src/component/svelte/FormattedDate.svelte
 delete mode 100644 src/component/svelte/Post/PostItem.svelte
 delete mode 100644 src/component/svelte/Post/PostMeta.svelte

diff --git a/src/component/FormattedDate.astro b/src/component/FormattedDate.astro
new file mode 100644
index 0000000..96aded5
--- /dev/null
+++ b/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>
diff --git a/src/component/Post.astro b/src/component/Post.astro
index 959e825..0c51ab6 100644
--- a/src/component/Post.astro
+++ b/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
diff --git a/src/component/PostItem.astro b/src/component/PostItem.astro
new file mode 100644
index 0000000..ea9a628
--- /dev/null
+++ b/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>
diff --git a/src/component/PostList.astro b/src/component/PostList.astro
index 0924509..a0d7551 100644
--- a/src/component/PostList.astro
+++ b/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>
diff --git a/src/component/PostMeta.astro b/src/component/PostMeta.astro
new file mode 100644
index 0000000..8cc5eda
--- /dev/null
+++ b/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>
diff --git a/src/component/svelte/FormattedDate.svelte b/src/component/svelte/FormattedDate.svelte
deleted file mode 100644
index 7c1880f..0000000
--- a/src/component/svelte/FormattedDate.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-  import { SITE_LANG } from '@constant/app'
-
-  export let date: Date
-</script>
-
-<time datetime={date.toISOString()}>
-  {date.toLocaleDateString(SITE_LANG, {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  })}
-</time>
diff --git a/src/component/svelte/Post/PostItem.svelte b/src/component/svelte/Post/PostItem.svelte
deleted file mode 100644
index 477368a..0000000
--- a/src/component/svelte/Post/PostItem.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts">
-  import type { BlogEntry } from '@content/config'
-  import FormattedDate from '@component/svelte/FormattedDate.svelte'
-
-  export let post: BlogEntry
-  export let showPin: boolean = false
-
-  const date = post.data.date || (post.data.pubDate as Date)
-  const isPin = post.data.pin
-</script>
-
-<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} />
-    {#if 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>
-    {/if}
-  </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>
-    {#if post.data.description}
-      <p class="text-gray-500" aria-label={post.data.description}>
-        {post.data.description}
-      </p>
-    {/if}
-  </a>
-</article>
diff --git a/src/component/svelte/Post/PostMeta.svelte b/src/component/svelte/Post/PostMeta.svelte
deleted file mode 100644
index 3266213..0000000
--- a/src/component/svelte/Post/PostMeta.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script lang="ts">
-  import type { PostMeta } from '@model/post-meta'
-  import FormattedDate from '../FormattedDate.svelte'
-  import { convertDash } from '../../../util/convertDash'
-  export let meta: PostMeta
-</script>
-
-<div class="flex flex-col">
-  <div class="mx-1 flex items-center text-sm text-gray-400">
-    <FormattedDate date={meta.updatedDate || meta.date} />
-    {#if meta.category}
-      <a
-        href={`/archive/categories/${meta.category}`}
-        class="relative uppercase dot text-main hover:underline"
-        aria-label={`Link to ${meta.category} category page`}
-      >
-        {meta.category}
-      </a>
-    {/if}
-    {#if meta.readingTime}
-      <div class="relative dot">
-        {Math.ceil(meta.readingTime.minutes)} mins read
-      </div>
-    {/if}
-  </div>
-  <div class="flex justify-between">
-    <div class="flex-1 flex flex-col">
-      <div class="pt-1 mb-8">
-        <h1 class="text-7xl uppercase font-bold" aria-label="Post title">
-          {meta.title}
-        </h1>
-        {#if meta.subTitle}
-          <div class="pt-4 flex justify-end">
-            <h1 class="text-3xl text-gray-400" aria-label="Post subtitle">
-              —— {meta.subTitle}
-            </h1>
-          </div>
-        {/if}
-      </div>
-    </div>
-    <div>
-      {#each meta.tags as tag}
-        <a href={`/tags/${convertDash(tag)}`} class="text-main hover:animate-flashBtn rounded-sm">{tag}</a>
-      {/each}
-    </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>
diff --git a/src/layout/BlogPost.astro b/src/layout/BlogPost.astro
index 114957c..fa8db44 100644
--- a/src/layout/BlogPost.astro
+++ b/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 />