From 26f0f634be29bb7e21b7f8e2be88f3636457564e Mon Sep 17 00:00:00 2001
From: KazooTTT <work@kazoottt.top>
Date: Fri, 26 Jul 2024 00:32:10 +0800
Subject: [PATCH] feat: add category and finished

---
 src/components/blog/Hero.astro        | 23 +++++++++++++++++++++++
 src/components/blog/PostPreview.astro |  2 +-
 src/icons/category.svg                |  1 +
 src/icons/progress.svg                |  1 +
 src/layouts/BlogPost.astro            |  4 ++--
 5 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 src/icons/category.svg
 create mode 100644 src/icons/progress.svg

diff --git a/src/components/blog/Hero.astro b/src/components/blog/Hero.astro
index f4db0a4..ed59400 100644
--- a/src/components/blog/Hero.astro
+++ b/src/components/blog/Hero.astro
@@ -2,6 +2,9 @@
 import type { CollectionEntry } from 'astro:content'
 import { Image } from 'astro:assets'
 import FormattedDate from '../FormattedDate.astro'
+import Card from '../Card.astro'
+import { Icon } from 'astro-icon/components'
+import Label from '../Label.astro'
 
 interface Props {
 	content: CollectionEntry<'post'>
@@ -32,11 +35,23 @@ const dateTimeOptions: Intl.DateTimeFormatOptions = {
 	)
 }
 {data.draft ? <span class='text-red-500'>(Draft)</span> : null}
+
 <div class='flex flex-wrap items-center gap-x-3 gap-y-2'>
 	<p class='text-xs'>
 		<FormattedDate date={data.date} dateTimeOptions={dateTimeOptions} /> /{' '}
 		{remarkPluginFrontmatter.minutesRead}
 	</p>
+	<Label
+		title={data.category ?? '未分类'}
+		as='a'
+		href={`/categories/${data.category ?? '未分类'}/`}
+	>
+		<Icon name='category' slot='icon' />
+	</Label>
+
+	<Label title={data.finished ? '已完成' : '未完成'} as='a'>
+		<Icon name='progress' slot='icon' />
+	</Label>
 </div>
 <h1 class='mt-2 text-3xl font-medium sm:mb-1'>
 	{data.title}
@@ -79,6 +94,14 @@ const dateTimeOptions: Intl.DateTimeFormatOptions = {
 	)
 }
 
+{
+	(data.description + '').trim().length > 0 && (
+		<Card heading='摘要（由ai生成）' altText='摘要' class='my-4 w-full'>
+			<div class='ml-4 text-muted-foreground'>{data.description}</div>
+		</Card>
+	)
+}
+
 <!-- {
 	data.date && (
 		<p class='mt-6 text-base'>
diff --git a/src/components/blog/PostPreview.astro b/src/components/blog/PostPreview.astro
index 42a84b7..8c7272c 100644
--- a/src/components/blog/PostPreview.astro
+++ b/src/components/blog/PostPreview.astro
@@ -27,7 +27,7 @@ const postDate = post.data.date
 		</a>
 		{
 			withDesc && (
-				<p class='line-clamp-3 block text-sm italic text-muted-foreground'>
+				<p class='line-clamp-2 text-sm italic text-muted-foreground'>
 					{post.data.description}
 				</p>
 			)
diff --git a/src/icons/category.svg b/src/icons/category.svg
new file mode 100644
index 0000000..07a1680
--- /dev/null
+++ b/src/icons/category.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M6.5 11L12 2l5.5 9zm11 11q-1.875 0-3.187-1.312T13 17.5t1.313-3.187T17.5 13t3.188 1.313T22 17.5t-1.312 3.188T17.5 22M3 21.5v-8h8v8z"/></svg>
\ No newline at end of file
diff --git a/src/icons/progress.svg b/src/icons/progress.svg
new file mode 100644
index 0000000..bc7febd
--- /dev/null
+++ b/src/icons/progress.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20.777a9 9 0 0 1-2.48-.969M14 3.223a9.003 9.003 0 0 1 0 17.554m-9.421-3.684a9 9 0 0 1-1.227-2.592M3.124 10.5c.16-.95.468-1.85.9-2.675l.169-.305m2.714-2.941A9 9 0 0 1 10 3.223"/></svg>
\ No newline at end of file
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index bf7af9a..7281254 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -22,7 +22,7 @@ const articleDate = date?.toISOString()
 const { headings } = await post.render()
 ---
 
-<PageLayout meta={{ articleDate, description, ogImage: socialImage, title }}>
+<PageLayout meta={{ articleDate, description: description ?? '', ogImage: socialImage, title }}>
 	<div class='w-full'>
 		<Button title='Back' href='/blog' style='button'>
 			<svg
@@ -41,7 +41,7 @@ const { headings } = await post.render()
 		</Button>
 		<div class='mt-8 gap-x-10 lg:flex lg:items-start'>
 			{!!headings.length && <TOC headings={headings} />}
-			<article class='flex-grow break-words' data-pagefind-body>
+			<article class='flex-1 flex-grow break-words' data-pagefind-body>
 				<div id='blog-hero'><BlogHero content={post} /></div>
 				<div
 					class='prose prose-base prose-zinc mt-12 text-muted-foreground dark:prose-invert prose-headings:font-medium prose-headings:text-foreground prose-headings:before:absolute prose-headings:before:-ms-4 prose-th:before:content-none'