From 802a051bc476aa6c1ce93ac2feeca585b578b68a Mon Sep 17 00:00:00 2001
From: KazooTTT <yjwang.echo@gmail.com>
Date: Sun, 19 Jan 2025 22:50:29 +0800
Subject: [PATCH] Refactor FormattedDate and PostPreview components to include
 cover image support; enhance blog post display with year markers in
 pagination

---
 src/components/FormattedDate.astro    | 31 +++++++++++++++++++--------
 src/components/blog/PostPreview.astro |  8 +++++--
 src/layouts/BlogPost.astro            |  5 ++---
 src/pages/blog/[...page].astro        | 12 +++++++++--
 4 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/src/components/FormattedDate.astro b/src/components/FormattedDate.astro
index 1be0f0e..93814c0 100644
--- a/src/components/FormattedDate.astro
+++ b/src/components/FormattedDate.astro
@@ -1,18 +1,31 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 
-import { getFormattedDate } from '@/utils'
-
-type Props = HTMLAttributes<'time'> & {
+interface Props extends HTMLAttributes<'time'> {
 	date: Date
-	dateTimeOptions?: Intl.DateTimeFormatOptions
+	coverImage: string
 }
 
-const { date, dateTimeOptions, ...attrs } = Astro.props
+const { date, coverImage: coverImage, ...attrs } = Astro.props
+console.log('coverImage', coverImage)
 
-const postDate = getFormattedDate(date, dateTimeOptions)
+const formattedDate = date.toISOString().slice(0, 10).replace(/-/g, '')
 ---
 
-<time datetime={date.toISOString()} {...attrs}>
-	{postDate}
-</time>
+{
+	coverImage ? (
+		<div class='relative'>
+			<time datetime={date.toISOString()} {...attrs}>
+				{formattedDate}
+			</time>
+			<img
+				src={coverImage}
+				class='absolute left-0 top-0 -z-10 h-full w-full object-cover opacity-10'
+			/>
+		</div>
+	) : (
+		<time datetime={date.toISOString()} {...attrs}>
+			{formattedDate}
+		</time>
+	)
+}
diff --git a/src/components/blog/PostPreview.astro b/src/components/blog/PostPreview.astro
index 9b2a6cc..e317242 100644
--- a/src/components/blog/PostPreview.astro
+++ b/src/components/blog/PostPreview.astro
@@ -8,14 +8,18 @@ type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
 	post: CollectionEntry<'post'>
 	prefix?: string
 	withDesc?: boolean
+	showYear?: boolean
 }
 
-const { as: Tag = 'div', post, prefix = '/blog/', withDesc = false } = Astro.props
+const { as: Tag = 'div', post, prefix = '/blog/', withDesc = false, showYear = false } = Astro.props
 const postDate = post.data.date
+const year = postDate.getFullYear()
+const coverImage = post.data.coverImage
 ---
 
+{showYear && <h2 class='my-2 text-xl font-semibold'>{year}</h2>}
 <li class='flex flex-col gap-2 sm:flex-row sm:gap-x-4 [&_q]:basis-full'>
-	<FormattedDate class='min-w-[120px]' date={postDate} />
+	<FormattedDate class='min-w-[80px]' date={postDate} coverImage={coverImage} />
 
 	<Tag>
 		{post.data.draft && <span class='text-red-500'>(Draft) </span>}
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index 0b6e49c..5b5493a 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -15,11 +15,10 @@ interface Props {
 
 const { post, simple = false, backHref = '/blog' } = Astro.props
 const {
-	data: { description, ogImage, title, date },
-	slug
+	data: { description, ogImage, title, date }
 } = post
 
-const socialImage = ogImage ?? `/og-image/${slug}.png`
+const socialImage = ogImage
 const articleDate = date?.toISOString()
 const { headings } = await post.render()
 ---
diff --git a/src/pages/blog/[...page].astro b/src/pages/blog/[...page].astro
index 5de3a04..69a829c 100644
--- a/src/pages/blog/[...page].astro
+++ b/src/pages/blog/[...page].astro
@@ -53,6 +53,14 @@ const paginationProps = {
 		}
 	})
 }
+
+// Group posts by year and mark first post of each year
+const postsWithYearMarkers = page.data.map((post, index) => {
+	const currentYear = post.data.date.getFullYear()
+	const prevYear = index > 0 ? page.data[index - 1].data.date.getFullYear() : null
+	const showYear = currentYear !== prevYear
+	return { post, showYear }
+})
 ---
 
 <PageLayout meta={meta}>
@@ -81,8 +89,8 @@ const paginationProps = {
 				<div class='grid gap-y-16 sm:grid-cols-[3fr_1fr] sm:gap-x-8'>
 					<section aria-label='Blog posts list'>
 						<ul class='flex flex-col gap-y-4 text-start'>
-							{page.data.map((p) => (
-								<PostPreview post={p} />
+							{postsWithYearMarkers.map(({ post, showYear }) => (
+								<PostPreview post={post} showYear={showYear} withDesc={true} />
 							))}
 						</ul>
 						<Pagination {...paginationProps} />