feat: 新增分类

src/components/blog/Masthead.astro

@@ -2,6 +2,9 @@
 import { Image } from "astro:assets";
 import type { CollectionEntry } from "astro:content";
 import FormattedDate from "@/components/FormattedDate.astro";
+import Card from "../componentsBefore/Card.astro";
+import { Icon } from "astro-icon/components";
+import Label from "../componentsBefore/Label.astro";
 
 interface Props {
 	content: CollectionEntry<"post">;
@@ -19,19 +22,30 @@ const dateTimeOptions: Intl.DateTimeFormatOptions = {
 ---
 
 {
-	data.coverImage && (
+	data.banner && (
 		<div class="mb-6 aspect-video">
 			<Image
-				alt={data.coverImage.alt}
+				alt={data.banner}
 				class="object-cover"
 				fetchpriority="high"
 				loading="eager"
-				src={data.coverImage.src}
+				src={data.banner}
 			/>
 		</div>
 	)
 }
 {data.draft ? <span class="text-base text-red-500">(Draft)</span> : null}
+
+{
+	data.category && (
+		<div class="my-2">
+			<Label title={data.category} as="a" href={`/categories/${data.category}/`}>
+				<Icon name="category" slot="icon" />
+			</Label>
+		</div>
+	)
+}
+
 <h1 class="title">
 	{data.title}
 </h1>
@@ -81,3 +95,11 @@ const dateTimeOptions: Intl.DateTimeFormatOptions = {
 		</div>
 	)
 }
+
+{
+	data.description && data.description.trim().length > 0 && (
+		<Card heading="摘要（由llm生成）" altText="摘要" class="my-4 w-full">
+			<div class="text-muted-foreground ml-4">{data.description}</div>
+		</Card>
+	)
+}

src/components/componentsBefore/Card.astro

@@ -1,10 +1,10 @@
 ---
-import { cn } from '@/utils'
+import { cn } from "@/utils/tailwind";
-import type { ImageMetadata } from 'astro'
+import type { ImageMetadata } from "astro";
-import { Image } from 'astro:assets'
+import { Image } from "astro:assets";
 
 const {
-	as: Tag = 'div',
+	as: Tag = "div",
 	class: className,
 	href,
 	target,
@@ -13,25 +13,25 @@ const {
 	date,
 	imagePath,
 	altText,
-	imageClass
+	imageClass,
-} = Astro.props
+} = Astro.props;
 
 // If href is provided, use 'a' tag instead of the default or provided tag
-const Component = href ? 'a' : Tag
+const Component = href ? "a" : Tag;
 
-const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif}')
+const images = import.meta.glob<{ default: ImageMetadata }>("/src/assets/*.{jpeg,jpg,png,gif}");
 
 if (imagePath) {
 	if (!images[imagePath])
-		throw new Error(`"${imagePath}" does not exist in glob: "src/assets/*.{jpeg,jpg,png,gif}"`)
+		throw new Error(`"${imagePath}" does not exist in glob: "src/assets/*.{jpeg,jpg,png,gif}"`);
 }
 ---
 
 <Component
 	class={cn(
 		className,
-		'relative rounded-2xl border border-border bg-primary-foreground px-5 py-3',
+		"relative rounded-2xl border border-border bg-primary-foreground px-5 py-3",
-		href && 'transition-all hover:border-foreground/25 hover:shadow-sm'
+		href && "transition-all hover:border-foreground/25 hover:shadow-sm"
 	)}
 	href={href}
 	target={target}
@@ -41,16 +41,16 @@ if (imagePath) {
 			<Image
 				src={images[imagePath]()}
 				alt={altText}
-				class={cn('mb-3 md:absolute md:mb-0', imageClass)}
+				class={cn("mb-3 md:absolute md:mb-0", imageClass)}
-				loading='eager'
+				loading="eager"
 			/>
 		)
 	}
-	<div class='flex flex-col gap-y-1.5'>
+	<div class="flex flex-col gap-y-1.5">
-		<div class='flex flex-col gap-y-0.5'>
+		<div class="flex flex-col gap-y-0.5">
-			<h1 class='text-lg font-medium'>{heading}</h1>
+			<h1 class="text-lg font-medium">{heading}</h1>
-			{subheading && <h2 class='text-muted-foreground'>{subheading}</h2>}
+			{subheading && <h2 class="text-muted-foreground">{subheading}</h2>}
-			{date && <h2 class='text-muted-foreground'>{date}</h2>}
+			{date && <h2 class="text-muted-foreground">{date}</h2>}
 		</div>
 		<slot />
 	</div>

src/components/componentsBefore/Label.astro

@@ -1,18 +1,18 @@
 ---
-import { cn } from '@/utils'
+import { cn } from "@/utils/tailwind";
 
-const { class: className, as: Tag = 'div', title, href, ...props } = Astro.props
+const { class: className, as: Tag = "div", title, href, ...props } = Astro.props;
 ---
 
 <Tag
 	class={cn(
 		className,
-		'flex flex-row items-center justify-center gap-x-2',
+		"flex flex-row items-center gap-x-2",
-		href && 'hover:opacity-75 transition-all'
+		href && "hover:opacity-75 transition-all"
 	)}
 	href={href}
 	{...props}
 >
-	<slot name='icon' />
+	<slot name="icon" />
 	<p>{title}</p>
 </Tag>

src/components/componentsBefore/ProjectCard.astro

@@ -1,24 +1,24 @@
 ---
-import { Image } from 'astro:assets'
+import { Image } from "astro:assets";
-import type { ImageMetadata } from 'astro'
+import type { ImageMetadata } from "astro";
-import { cn } from '@/utils'
+import { cn } from "@/utils/tailwind";
 
 const {
-	as: Tag = 'a',
+	as: Tag = "a",
 	class: className,
 	href,
 	heading,
 	subheading,
 	imagePath,
 	altText,
-	target
+	target,
-} = Astro.props
+} = Astro.props;
 
-let imageComponent = null
+let imageComponent = null;
 if (imagePath) {
-	const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif}')
+	const images = import.meta.glob<{ default: ImageMetadata }>("/src/assets/*.{jpeg,jpg,png,gif}");
 	if (images[imagePath]) {
-		imageComponent = images[imagePath]
+		imageComponent = images[imagePath];
 	}
 }
 ---
@@ -26,9 +26,9 @@ if (imagePath) {
 <Tag
 	class={cn(
 		className,
-		'flex flex-col rounded-2xl border border-border bg-primary-foreground h-[240px]',
+		"flex flex-col rounded-2xl border border-border bg-primary-foreground h-[240px]",
-		'justify-center items-center',
+		"justify-center items-center",
-		href && 'transition-all hover:border-foreground/25 hover:shadow-sm'
+		href && "transition-all hover:border-foreground/25 hover:shadow-sm"
 	)}
 	href={href}
 	target={target}
@@ -38,14 +38,14 @@ if (imagePath) {
 			<Image
 				src={imageComponent()}
 				alt={altText}
-				class='h-32 w-full rounded-2xl rounded-bl-none rounded-br-none object-cover'
+				class="h-32 w-full rounded-2xl rounded-br-none rounded-bl-none object-cover"
-				loading='eager'
+				loading="eager"
 			/>
 		)
 	}
-	<div class='flex w-full flex-1 flex-col justify-center gap-y-2 px-5 py-4 text-center'>
+	<div class="flex w-full flex-1 flex-col justify-center gap-y-2 px-5 py-4 text-center">
-		<h1 class='text-lg font-medium'>{heading}</h1>
+		<h1 class="text-lg font-medium">{heading}</h1>
-		<h2 class='line-clamp-2 text-sm text-muted-foreground'>{subheading}</h2>
+		<h2 class="text-muted-foreground line-clamp-2 text-sm">{subheading}</h2>
 	</div>
 
 	<slot />

src/components/componentsBefore/Section.astro

@@ -1,15 +1,15 @@
 ---
-import { cn } from '@/utils'
+import { cn } from "@/utils/tailwind";
 
-const { class: className, title, subtitle } = Astro.props
+const { class: className, title, subtitle } = Astro.props;
 ---
 
-<section class={cn(className, 'flex flex-col gap-y-5 md:flex-row md:gap-y-0')}>
+<section class={cn(className, "flex flex-col gap-y-5 md:flex-row md:gap-y-0")}>
-	<div class='md:w-1/3'>
+	<div class="md:w-1/3">
-		<h2 class='font-semibol text-xl'>{title}</h2>
+		<h2 class="font-semibol text-xl">{title}</h2>
-		<h3 class='text-muted-foreground'>{subtitle}</h3>
+		<h3 class="text-muted-foreground">{subtitle}</h3>
 	</div>
-	<div class='flex flex-col gap-y-3 md:w-2/3'>
+	<div class="flex flex-col gap-y-3 md:w-2/3">
 		<slot />
 	</div>
 </section>

src/components/note/Note.astro

@@ -10,6 +10,21 @@ type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
 
 const { as: Tag = "div", note, isPreview = false } = Astro.props;
 const { Content } = await render(note);
+const dateTimeOptions: Intl.DateTimeFormatOptions = note.data.date_created
+	? {
+			hour: "2-digit",
+			minute: "2-digit",
+			year: "2-digit",
+			month: "2-digit",
+			day: "2-digit",
+		}
+	: {
+			year: "2-digit",
+			month: "2-digit",
+			day: "2-digit",
+		};
+
+const date = note.data.date_created ?? note.data.date;
 ---
 
 <article
@@ -30,16 +45,7 @@ const { Content } = await render(note);
 			)
 		}
 	</Tag>
-	<FormattedDate
+	<FormattedDate dateTimeOptions={dateTimeOptions} date={date} />
-		dateTimeOptions={{
-			hour: "2-digit",
-			minute: "2-digit",
-			year: "2-digit",
-			month: "2-digit",
-			day: "2-digit",
-		}}
-		date={note.data.date}
-	/>
 	<div
 		class="prose prose-sm prose-cactus mt-4 max-w-none [&>p:last-of-type]:mb-0"
 		class:list={{ "line-clamp-6": isPreview }}

src/content.config.ts

@@ -6,7 +6,7 @@ function removeDupsAndLowerCase(array: string[]) {
 }
 
 const baseSchema = z.object({
-	title: z.string()
+	title: z.string(),
 });
 
 const post = defineCollection({
@@ -20,6 +20,8 @@ const post = defineCollection({
 			categories: z.array(z.string()).default([]).transform(removeDupsAndLowerCase),
 			date: z.union([z.string(), z.date()]).transform((val) => new Date(val)),
 			date_modified: z.date().optional(),
+			data_created: z.date().optional(),
+			category: z.string().optional().nullable(),
 		}),
 });
 
@@ -28,9 +30,10 @@ const note = defineCollection({
 	schema: baseSchema.extend({
 		description: z.string().optional().nullable(),
 		date: z.union([z.string(), z.date()]).transform((val) => new Date(val)),
+		date_modified: z.date().optional(),
+		data_created: z.date().optional(),
 		tags: z.array(z.string()).default([]).transform(removeDupsAndLowerCase),
 	}),
 });
 
-
 export const collections = { post, note };

src/data/post.ts

@@ -55,3 +55,25 @@ export function getUniqueTagsWithCount(posts: CollectionEntry<"post">[]): [strin
 		),
 	].sort((a, b) => b[1] - a[1]);
 }
+
+/** Note: This function doesn't filter draft posts, pass it the result of getAllPosts above to do so. */
+export function getAllCategories(posts: Array<CollectionEntry<"post">>): string[] {
+	return posts.map((post) => post.data.category ?? "未分类");
+}
+
+/** Note: This function doesn't filter draft posts, pass it the result of getAllPosts above to do so. */
+export function getUniqueCategories(posts: Array<CollectionEntry<"post">>): string[] {
+	return [...new Set(getAllCategories(posts))];
+}
+
+/** Note: This function doesn't filter draft posts, pass it the result of getAllPosts above to do so. */
+export function getUniqueCategoriesWithCount(
+	posts: Array<CollectionEntry<"post">>,
+): Array<[string, number]> {
+	return [
+		...getAllCategories(posts).reduce(
+			(acc, t) => acc.set(t, (acc.get(t) || 0) + 1),
+			new Map<string, number>(),
+		),
+	].sort((a, b) => b[1] - a[1]);
+}

src/layouts/BlogPost.astro

@@ -19,6 +19,7 @@ const {
 	date_modified: updatedDate,
 	date: publishDate,
 	tags,
+	category,
 } = post.data;
 const socialImage = ogImage ?? `/og-image/${post.id}.png`;
 const articleDate = updatedDate?.toISOString() ?? publishDate.toISOString();
@@ -32,7 +33,7 @@ const readingTime: string = remarkPluginFrontmatter.readingTime;
 		description: description ?? "",
 		ogImage: socialImage,
 		title,
-		tags: tags.join(", "),
+		tags: [category, ...tags].join(", "),
 	}}
 >
 	<article class="grow break-words" data-pagefind-body>

src/pages/categories/[category]/[...page].astro

@@ -0,0 +1,74 @@
+---
+import type { CollectionEntry } from "astro:content";
+import Pagination from "@/components/Paginator.astro";
+import PostPreview from "@/components/blog/PostPreview.astro";
+import { getAllPosts, getUniqueCategories } from "@/data/post";
+import PageLayout from "@/layouts/Base.astro";
+import { collectionDateSort } from "@/utils/date";
+import type { GetStaticPaths, Page } from "astro";
+
+export const getStaticPaths: GetStaticPaths = async ({ paginate }) => {
+	const allPosts = await getAllPosts();
+	const sortedPosts = allPosts.sort(collectionDateSort);
+	const uniqueCategories = getUniqueCategories(sortedPosts);
+
+	return uniqueCategories.flatMap((category) => {
+		const filterPosts = sortedPosts.filter((post) => post.data.category === category);
+		return paginate(filterPosts, {
+			pageSize: 10,
+			params: { category },
+		});
+	});
+};
+
+interface Props {
+	page: Page<CollectionEntry<"post">>;
+}
+
+const { page } = Astro.props;
+const { category } = Astro.params;
+
+const meta = {
+	description: `View all posts with the category - ${category}`,
+	title: `Category: ${category}`,
+};
+
+const paginationProps = {
+	...(page.url.prev && {
+		prevUrl: {
+			text: "← Previous Categories",
+			url: page.url.prev,
+		},
+	}),
+	...(page.url.next && {
+		nextUrl: {
+			text: "Next Categories →",
+			url: page.url.next,
+		},
+	}),
+};
+---
+
+<PageLayout meta={meta}>
+	<div class="mb-6 flex items-center">
+		<h1 class="sr-only">Posts with the category {category}</h1>
+		<a class="title text-accent" href="/categories/"
+			><span class="sr-only">All {" "}</span>Categories</a
+		>
+		<span aria-hidden="true" class="ms-2 me-3 text-xl">→</span>
+		<span aria-hidden="true" class="text-xl">#{category}</span>
+	</div>
+	<section aria-labelledby={`categories-${category}`}>
+		<h2 id={`categories-${category}`} class="sr-only">Post List</h2>
+		<ul class="space-y-4">
+			{
+				page.data.map((p) => (
+					<li class="grid gap-2 sm:grid-cols-[auto_1fr]">
+						<PostPreview as="h2" post={p} />
+					</li>
+				))
+			}
+		</ul>
+		<Pagination {...paginationProps} />
+	</section>
+</PageLayout>

src/pages/categories/index.astro

@@ -0,0 +1,35 @@
+---
+import { getAllPosts, getUniqueCategoriesWithCount } from "@/data/post";
+import PageLayout from "@/layouts/Base.astro";
+
+const allPosts = await getAllPosts();
+const allCategories = getUniqueCategoriesWithCount(allPosts);
+
+const meta = {
+	description: "A list of all the categories I've written about in my posts",
+	title: "All Categories",
+};
+---
+
+<PageLayout meta={meta}>
+	<h1 class="title mb-6">Categories</h1>
+	<ul class="space-y-4">
+		{
+			allCategories.map(([item, val]) => (
+				<li class="flex items-center gap-x-2">
+					<a
+						class="cactus-link inline-block"
+						data-astro-prefetch
+						href={`/categories/${item}/`}
+						title={`View posts with the category: ${item}`}
+					>
+						&#35;{item}
+					</a>
+					<span class="inline-block">
+						- {val} Post{val > 1 && "s"}
+					</span>
+				</li>
+			))
+		}
+	</ul>
+</PageLayout>

src/pages/posts/[...page].astro

@@ -2,7 +2,7 @@
 import type { CollectionEntry } from "astro:content";
 import Pagination from "@/components/Paginator.astro";
 import PostPreview from "@/components/blog/PostPreview.astro";
-import { getAllPosts, getUniqueTags, groupPostsByYear } from "@/data/post";
+import { getAllPosts, getUniqueCategories, getUniqueTags, groupPostsByYear } from "@/data/post";
 import PageLayout from "@/layouts/Base.astro";
 import { collectionDateSort } from "@/utils/date";
 import type { GetStaticPaths, Page } from "astro";
@@ -11,20 +11,23 @@ import { Icon } from "astro-icon/components";
 export const getStaticPaths = (async ({ paginate }) => {
 	const MAX_POSTS_PER_PAGE = 10;
 	const MAX_TAGS = 7;
+	const MAX_CATEGORIES = 7;
 	const allPosts = await getAllPosts();
 	const uniqueTags = getUniqueTags(allPosts).slice(0, MAX_TAGS);
+	const uniqueCategories = getUniqueCategories(allPosts).slice(0, MAX_CATEGORIES);
 	return paginate(allPosts.sort(collectionDateSort), {
 		pageSize: MAX_POSTS_PER_PAGE,
-		props: { uniqueTags },
+		props: { uniqueTags, uniqueCategories },
 	});
 }) satisfies GetStaticPaths;
 
 interface Props {
 	page: Page<CollectionEntry<"post">>;
 	uniqueTags: string[];
+	uniqueCategories: string[];
 }
 
-const { page, uniqueTags } = Astro.props;
+const { page, uniqueTags, uniqueCategories } = Astro.props;
 
 const meta = {
 	description: "Read my collection of posts and the things that interest me",
@@ -79,9 +82,11 @@ const descYearKeys = Object.keys(groupedByYear).sort((a, b) => +b - +a);
 			}
 			<Pagination {...paginationProps} />
 		</div>
+
+		<aside class="flex flex-col gap-2">
 			{
 				!!uniqueTags.length && (
-				<aside>
+					<div>
 						<h2 class="title mb-4 flex items-center gap-2 text-lg">
 							Tags
 							<svg
@@ -118,8 +123,55 @@ const descYearKeys = Object.keys(groupedByYear).sort((a, b) => +b - +a);
 								<span class="sr-only">blog tags</span>
 							</a>
 						</span>
-				</aside>
+					</div>
 				)
 			}
+
+			{
+				!!uniqueCategories.length && (
+					<div>
+						<h2 class="title mb-4 flex items-center gap-2 text-lg">
+							Categories
+							<svg
+								aria-hidden="true"
+								class="h-6 w-6"
+								fill="none"
+								stroke="currentColor"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="1.5"
+								viewBox="0 0 24 24"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path d="M0 0h24v24H0z" fill="none" stroke="none" />
+								<path d="M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v2.834c0 .537 .213 1.052 .593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-6.117 -6.116a2.025 2.025 0 0 0 -1.431 -.593z" />
+								<path d="M17.573 18.407l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-7.117 -7.116" />
+								<path d="M6 9h-.01" />
+							</svg>
+						</h2>
+						<ul class="flex flex-wrap gap-2">
+							{uniqueCategories.map((category) => (
+								<li>
+									<a
+										class="cactus-link flex items-center justify-center"
+										href={`/categories/${category}/`}
+									>
+										<span aria-hidden="true">#</span>
+										<span class="sr-only">View all posts with the category</span>
+										{category}
+									</a>
+								</li>
+							))}
+						</ul>
+						<span class="mt-4 block sm:text-end">
+							<a class="hover:text-link" href="/categories/">
+								View all <span aria-hidden="true">→</span>
+								<span class="sr-only">blog categories</span>
+							</a>
+						</span>
+					</div>
+				)
+			}
+		</aside>
 	</div>
 </PageLayout>