feat(blog): 重构文章和笔记展示，优化分类和标签

src/components/blog/Masthead.astro

@@ -1,18 +1,18 @@
 ---
-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";
+import type { PostItem } from "@/types";
 
 interface Props {
-	content: CollectionEntry<"post">;
+	content: PostItem;
 	readingTime: string;
 	ogImage: string;
 }
 
 const {
-	content: { data },
+	content: { data, dateToCmp },
 	readingTime,
 	ogImage,
 } = Astro.props;
@@ -27,13 +27,7 @@ const socialImageURL = new URL(ogImage ? ogImage : "/social-card.png", Astro.url
 {
 	socialImageURL && (
 		<div class="mb-6 aspect-video">
-			<img
-				alt={socialImageURL}
-				class="rounded-lg object-cover"
-				fetchpriority="high"
-				loading="eager"
-				src={socialImageURL}
-			/>
+			<img alt={socialImageURL} class="rounded-lg object-cover" src={socialImageURL} />
 		</div>
 	)
 }
@@ -54,7 +48,7 @@ const socialImageURL = new URL(ogImage ? ogImage : "/social-card.png", Astro.url
 </h1>
 <div class="flex flex-wrap items-center gap-x-3 gap-y-2">
 	<p class="font-semibold">
-		<FormattedDate date={data.date} dateTimeOptions={dateTimeOptions} /> /{" "}
+		<FormattedDate date={dateToCmp} dateTimeOptions={dateTimeOptions} /> /{" "}
 		{readingTime}
 	</p>
 	{

src/components/blog/PostPreview.astro

@@ -1,10 +1,10 @@
 ---
-import type { CollectionEntry } from "astro:content";
 import FormattedDate from "@/components/FormattedDate.astro";
 import type { HTMLTag, Polymorphic } from "astro/types";
+import type { AllItem } from "@/types";
 
 type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
-	post: CollectionEntry<"post">;
+	post: AllItem;
 	withDesc?: boolean;
 };
 
@@ -17,7 +17,11 @@ const { as: Tag = "div", post, withDesc = false } = Astro.props;
 />
 <Tag>
 	{post.data.draft && <span class="text-red-500">(Draft) </span>}
-	<a class="cactus-link" data-astro-prefetch href={`/posts/${post.id}/`}>
+	<a
+		class="hover:text-link"
+		data-astro-prefetch
+		href={`${post.collection === "post" ? "/posts/" : "/notes/"}${post.id}/`}
+	>
 		{post.data.fixedToTop && <span class="text-accent-2 mr-2">*</span>}
 		{post.data.title}
 	</a>

src/components/note/Note.astro

@@ -1,5 +1,5 @@
 ---
-import { type CollectionEntry, render } from "astro:content";
+import { render } from "astro:content";
 import FormattedDate from "@/components/FormattedDate.astro";
 import type { HTMLTag, Polymorphic } from "astro/types";
 import GiscusComment from "@/components/componentsBefore/GiscusComment";
@@ -8,8 +8,9 @@ import ShareButtons from "../ShareButtons.astro";
 import ContentFooter from "../ContentFooter.astro";
 import { cn } from "@/utils/tailwind";
 import Card from "../componentsBefore/Card.astro";
+import type { NoteItem } from "@/types";
 type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
-	note: CollectionEntry<"note">;
+	note: NoteItem;
 	isPreview?: boolean | undefined;
 	index?: number;
 	enableLineClamp?: boolean;
@@ -78,17 +79,17 @@ if (modifiedDate && modifiedDate.toDateString() === date.toDateString()) {
 				enableLineClamp && "line-clamp-4"
 			)}
 		>
-		{
-			!isPreview && note.data.description && note.data.description.trim().length > 0 && (
-				<Card heading="摘要（由llm生成）" altText="摘要" class="my-4 w-full">
-					<div class="text-muted-foreground ml-4">{note.data.description}</div>
-				</Card>
-			)
-		}
+			{
+				!isPreview && note.data.description && note.data.description.trim().length > 0 && (
+					<Card heading="摘要（由llm生成）" altText="摘要" class="my-4 w-full">
+						<div class="text-muted-foreground ml-4">{note.data.description}</div>
+					</Card>
+				)
+			}
 			<Content />
 		</div>
 	</div>
-	
+
 	{!isPreview && <ContentFooter />}
 
 	{!isPreview && <GiscusComment client:load />}
@@ -99,5 +100,4 @@ if (modifiedDate && modifiedDate.toDateString() === date.toDateString()) {
 			</div>
 		)
 	}
-
 </ArticleContainer>

src/content.config.ts

@@ -68,6 +68,7 @@ const note = defineCollection({
 			.optional()
 			.transform((val) => (val ? processDate(val) : undefined)),
 		tags: z.array(z.string()).default([]).transform(removeDupsAndLowerCase),
+		category: z.string().optional().nullable(),
 	}),
 });
 

src/data/post.ts

@@ -1,22 +1,61 @@
+import type { AllItem, NoteItem, PostItem } from "@/types";
 import { collectionDateSort } from "@/utils/date";
 import { type CollectionEntry, getCollection } from "astro:content";
 
+/**
+ * @description: 添加分类作为前缀
+ * @param {CollectionEntry} posts
+ */
+const addCategoryAsPrefix = (posts: CollectionEntry<"post" | "note">[]) => {
+	return posts.map((post) => {
+		return {
+			...post,
+			data: {
+				...post.data,
+				title: post.data?.category
+					? `[${post.data?.category}] ${post.data.title}`
+					: post.data.title,
+			},
+		};
+	});
+};
+
+export const getDateSortByCreateTime = (post: CollectionEntry<"post" | "note">) => {
+	return post.data.date ?? post.data.data_created ?? post.data.date_modified ?? new Date();
+};
+
+export const getDateSortByUpdateTime = (post: CollectionEntry<"post" | "note">) => {
+	return post.data.date_modified ?? post.data.date ?? post.data.data_created ?? new Date();
+};
+
 /** filter out draft posts based on the environment */
-export async function getAllPosts(): Promise<CollectionEntry<"post">[]> {
-	return await getCollection("post", ({ data }) => {
+export async function getAllPosts(): Promise<PostItem[]> {
+	const posts = await getCollection("post", ({ data }) => {
 		return import.meta.env.PROD ? !data.draft : true;
 	});
+	return (addCategoryAsPrefix(posts) as CollectionEntry<"post">[]).map((item) => {
+		return {
+			...item,
+			dateToCmp: getDateSortByCreateTime(item),
+		};
+	});
 }
 
-export async function getAllFixedToTopPosts(): Promise<CollectionEntry<"post">[]> {
-	return await getCollection("post", ({ data }) => {
-		return import.meta.env.PROD ? data.fixedToTop : false;
+export async function getAllFixedToTopPosts() {
+	const posts = await getAllPosts();
+	return posts.filter((post) => post.data.fixedToTop);
+}
+
+export async function getAllNotes(): Promise<NoteItem[]> {
+	const notes = await getCollection("note");
+	return (addCategoryAsPrefix(notes) as NoteItem[]).map((item) => {
+		return { ...item, dateToCmp: getDateSortByCreateTime(item) };
 	});
 }
 
 export async function getAllCollectionPosts() {
 	const posts = await getAllPosts();
-	const notes = await getCollection("note");
+	const notes = await getAllNotes();
 	const allPosts = [...posts, ...notes];
 	const allPostsSortedByDate = allPosts.sort(collectionDateSort);
 	return allPostsSortedByDate;
@@ -25,9 +64,9 @@ export async function getAllCollectionPosts() {
 /** groups posts by year (based on option siteConfig.sortPostsByUpdatedDate), using the year as the key
  *  Note: This function doesn't filter draft posts, pass it the result of getAllPosts above to do so.
  */
-export function groupPostsByYear(posts: CollectionEntry<"post">[]) {
-	return posts.reduce<Record<string, CollectionEntry<"post">[]>>((acc, post) => {
-		const year = post.data.date.getFullYear();
+export function groupPostsByYear(posts: AllItem[]) {
+	return posts.reduce<Record<string, AllItem[]>>((acc, post) => {
+		const year = getDateSortByCreateTime(post).getFullYear();
 		if (!acc[year]) {
 			acc[year] = [];
 		}
@@ -39,21 +78,21 @@ export function groupPostsByYear(posts: CollectionEntry<"post">[]) {
 /** returns all tags created from posts (inc duplicate tags)
  *  Note: This function doesn't filter draft posts, pass it the result of getAllPosts above to do so.
  *  */
-export function getAllTags(posts: CollectionEntry<"post">[]) {
+export function getAllTags(posts: AllItem[]) {
 	return posts.flatMap((post) => [...post.data.tags]);
 }
 
 /** returns all unique tags created from posts
  *  Note: This function doesn't filter draft posts, pass it the result of getAllPosts above to do so.
  *  */
-export function getUniqueTags(posts: CollectionEntry<"post">[]) {
+export function getUniqueTags(posts: AllItem[]) {
 	return [...new Set(getAllTags(posts))];
 }
 
 /** returns a count of each unique tag - [[tagName, count], ...]
  *  Note: This function doesn't filter draft posts, pass it the result of getAllPosts above to do so.
  *  */
-export function getUniqueTagsWithCount(posts: CollectionEntry<"post">[]): [string, number][] {
+export function getUniqueTagsWithCount(posts: AllItem[]): [string, number][] {
 	return [
 		...getAllTags(posts).reduce(
 			(acc, t) => acc.set(t, (acc.get(t) ?? 0) + 1),
@@ -63,19 +102,17 @@ export function getUniqueTagsWithCount(posts: CollectionEntry<"post">[]): [strin
 }
 
 /** 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[] {
+export function getAllCategories(posts: AllItem[]): 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[] {
+export function getUniqueCategories(posts: AllItem[]): 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]> {
+export function getUniqueCategoriesWithCount(posts: AllItem[]): Array<[string, number]> {
 	return [
 		...getAllCategories(posts).reduce(
 			(acc, t) => acc.set(t, (acc.get(t) || 0) + 1),

src/layouts/BlogPost.astro

@@ -1,5 +1,5 @@
 ---
-import { type CollectionEntry, render } from "astro:content";
+import { render } from "astro:content";
 
 import Masthead from "@/components/blog/Masthead.astro";
 import TOC from "@/components/blog/TOC.astro";
@@ -9,23 +9,16 @@ import BaseLayout from "./Base.astro";
 import ArticleContainer from "@/components/ArticleContainer.astro";
 import ShareButtons from "@/components/ShareButtons.astro";
 import ContentFooter from "@/components/ContentFooter.astro";
+import type { PostItem } from "@/types";
 
 interface Props {
-	post: CollectionEntry<"post">;
+	post: PostItem;
 }
 
 const { post } = Astro.props;
-const {
-	banner: ogImage,
-	title,
-	description,
-	date_modified: updatedDate,
-	date: publishDate,
-	tags,
-	category,
-} = post.data;
+const { banner: ogImage, title, description, tags, category } = post.data;
 const socialImage = ogImage ?? `/og-image/${post.id}.png`;
-const articleDate = updatedDate?.toISOString() ?? publishDate.toISOString();
+const articleDate = post.dateToCmp.toISOString();
 const { headings, remarkPluginFrontmatter } = await render(post);
 const readingTime: string = remarkPluginFrontmatter.readingTime;
 ---
@@ -67,7 +60,6 @@ const readingTime: string = remarkPluginFrontmatter.readingTime;
 			<Masthead content={post} readingTime={readingTime} ogImage={socialImage} />
 		</div>
 		<div class="flex flex-col gap-10 lg:flex-row lg:items-start">
-			{!!headings.length && <TOC headings={headings} classname="lg:w-64 lg:flex-shrink-0" />}
 			<div
 				class="prose prose-base prose-headings:font-semibold prose-headings:text-accent-2 prose-headings:before:absolute prose-headings:before:-ms-4 prose-headings:before:text-gray-600 prose-headings:hover:before:text-accent sm:prose-headings:before:content-['#'] sm:prose-th:before:content-none w-full lg:!max-w-none"
 			>

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

@@ -0,0 +1,109 @@
+---
+import Pagination from "@/components/Paginator.astro";
+import PostPreview from "@/components/blog/PostPreview.astro";
+import {
+	getAllCollectionPosts,
+	getUniqueCategories,
+	getUniqueTags,
+	groupPostsByYear,
+} from "@/data/post";
+import PageLayout from "@/layouts/Base.astro";
+import { collectionDateSort, getLatestUpdatedPost } from "@/utils/date";
+import type { GetStaticPaths, Page } from "astro";
+import { MAX_TAGS, MAX_CATEGORIES, MAX_POSTS_PER_PAGE, MAX_LATEST_POSTS } from "@/utils/constant";
+import type { AllItem } from "@/types";
+
+export const getStaticPaths = (async ({ paginate }) => {
+	const allPosts = await getAllCollectionPosts();
+	const uniqueTags = getUniqueTags(allPosts).slice(0, MAX_TAGS);
+	const uniqueCategories = getUniqueCategories(allPosts).slice(0, MAX_CATEGORIES);
+	const latestUpdatedPost = allPosts.sort(getLatestUpdatedPost).slice(0, MAX_LATEST_POSTS);
+	const postsCount = allPosts.length;
+	return paginate(allPosts.sort(collectionDateSort), {
+		pageSize: MAX_POSTS_PER_PAGE,
+		props: { uniqueTags, uniqueCategories, postsCount, latestUpdatedPost },
+	});
+}) satisfies GetStaticPaths;
+
+interface Props {
+	page: Page<AllItem>;
+	uniqueTags: string[];
+	uniqueCategories: string[];
+	postsCount: number;
+	latestUpdatedPost: AllItem[];
+}
+
+const { page, postsCount, latestUpdatedPost } = Astro.props;
+
+const meta = {
+	description: "Read my collection of posts and the things that interest me",
+	title: "Posts",
+};
+
+const paginationProps = {
+	...(page.url.prev && {
+		prevUrl: {
+			text: "← Previous Page",
+			url: page.url.prev,
+		},
+	}),
+	...(page.url.next && {
+		nextUrl: {
+			text: "Next Page →",
+			url: page.url.next,
+		},
+	}),
+};
+
+const groupedByYear = groupPostsByYear(page.data);
+const descYearKeys = Object.keys(groupedByYear).sort((a, b) => +b - +a);
+---
+
+<PageLayout meta={meta}>
+	<div class="mb-6 flex items-center gap-3">
+		<h1 class="title">Archive({postsCount})</h1>
+	</div>
+	<div class="grid sm:grid-cols-[3fr_1fr] sm:gap-x-8 sm:gap-y-16">
+		<div>
+			{
+				descYearKeys.map((yearKey) => (
+					<section aria-labelledby={`year-${yearKey}`}>
+						<h2 id={`year-${yearKey}`} class="title text-lg">
+							<span class="sr-only">Posts in</span>
+							{yearKey}
+						</h2>
+						<ul class="mt-5 mb-16 space-y-4 text-start">
+							{groupedByYear[yearKey]?.map((p) => (
+								<li class="grid gap-2 sm:grid-cols-[auto_1fr] sm:[&_q]:col-start-2">
+									<PostPreview post={p} />
+								</li>
+							))}
+						</ul>
+					</section>
+				))
+			}
+			<Pagination {...paginationProps} />
+		</div>
+		<aside class="flex flex-col gap-8">
+			{
+				(
+					<div>
+						<h2 class="title mb-4 flex items-center gap-2 text-lg">
+							<a class="">最近更新</a>
+						</h2>
+						<ul class="flex flex-wrap gap-2">
+							{latestUpdatedPost.map((post) => (
+								<li>
+									<a href={`/${post.collection}/${post.id}/`} class="hover:text-link">
+										<span>{post.data.date_modified.toLocaleDateString()}</span>
+										{post.data.title}
+									</a>
+								</li>
+							))}
+						</ul>
+					</div>
+				)
+			}
+		</aside>
+	</div>
+</PageLayout>

src/pages/categories/index.astro

@@ -18,7 +18,7 @@ const meta = {
 			allCategories.map(([item, val]) => (
 				<li class="flex items-center gap-x-2">
 					<a
-						class="cactus-link inline-block"
+						class="hover:text-link inline-block"
 						data-astro-prefetch
 						href={`/categories/${item}/`}
 						title={`View posts with the category: ${item}`}

src/pages/index.astro

@@ -1,28 +1,23 @@
 ---
-import { type CollectionEntry, getCollection } from "astro:content";
 import SocialList from "@/components/SocialList.astro";
 import PostPreview from "@/components/blog/PostPreview.astro";
 import Note from "@/components/note/Note.astro";
-import { getAllFixedToTopPosts, getAllPosts } from "@/data/post";
+import { getAllFixedToTopPosts, getAllNotes, getAllPosts } from "@/data/post";
 import PageLayout from "@/layouts/Base.astro";
 import { collectionDateSort } from "@/utils/date";
 
 // Posts
 const MAX_POSTS = 10;
 const allPosts = await getAllPosts();
-const allPostsByDate = allPosts
-	.sort(collectionDateSort)
-	.slice(0, MAX_POSTS) as CollectionEntry<"post">[];
+const allPostsByDate = allPosts.sort(collectionDateSort).slice(0, MAX_POSTS);
 
 // Fixed to top Posts
 const allFixedToTopPosts = await getAllFixedToTopPosts();
-const allFixedToTopPostsByDate = allFixedToTopPosts
-	.sort(collectionDateSort)
-	.slice(0, MAX_POSTS) as CollectionEntry<"post">[];
-	
+const allFixedToTopPostsByDate = allFixedToTopPosts.sort(collectionDateSort).slice(0, MAX_POSTS);
+
 // Notes
 const MAX_NOTES = 6;
-const allNotes = await getCollection("note");
+const allNotes = await getAllNotes();
 const latestNotes = allNotes.sort(collectionDateSort).slice(0, MAX_NOTES);
 ---
 
@@ -36,15 +31,15 @@ const latestNotes = allNotes.sort(collectionDateSort).slice(0, MAX_NOTES);
 	{
 		allFixedToTopPostsByDate.length > 0 && (
 			<section class="mt-16">
-				<h2 class="title text-accent mb-6 text-xl"><a href="/posts/">置顶文章</a></h2>
+				<h2 class="title text-accent mb-6 text-xl">
+					<a href="/posts/">置顶文章</a>
+				</h2>
 				<ul class="space-y-4" role="list">
-					{
-				allFixedToTopPostsByDate.map((p) => (
-					<li class="grid gap-2 sm:grid-cols-[auto_1fr]">
-						<PostPreview post={p} />
-					</li>
-				))
-			}
+					{allFixedToTopPostsByDate.map((p) => (
+						<li class="grid gap-2 sm:grid-cols-[auto_1fr]">
+							<PostPreview post={p} />
+						</li>
+					))}
 				</ul>
 			</section>
 		)

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

@@ -1,15 +1,16 @@
 ---
-import { type CollectionEntry, getCollection } from "astro:content";
 import Pagination from "@/components/Paginator.astro";
 import Note from "@/components/note/Note.astro";
 import PageLayout from "@/layouts/Base.astro";
 import { collectionDateSort } from "@/utils/date";
 import type { GetStaticPaths, Page } from "astro";
 import { Icon } from "astro-icon/components";
+import { getAllNotes } from "@/data/post";
+import type { NoteItem } from "@/types";
 
 export const getStaticPaths = (async ({ paginate }) => {
 	const MAX_NOTES_PER_PAGE = 10;
-	const allNotes = await getCollection("note");
+	const allNotes = await getAllNotes();
 	const notesCount = allNotes.length;
 	return paginate(allNotes.sort(collectionDateSort), {
 		pageSize: MAX_NOTES_PER_PAGE,
@@ -18,7 +19,7 @@ export const getStaticPaths = (async ({ paginate }) => {
 }) satisfies GetStaticPaths;
 
 interface Props {
-	page: Page<CollectionEntry<"note">>;
+	page: Page<NoteItem>;
 	uniqueTags: string[];
 	notesCount: number;
 }
@@ -45,7 +46,7 @@ const paginationProps = {
 	}),
 };
 
-function calculateIndex(index: number, page: Page<CollectionEntry<"note">>) {
+function calculateIndex(index: number, page: Page<NoteItem>) {
 	return index + page.start;
 }
 ---
@@ -60,11 +61,11 @@ function calculateIndex(index: number, page: Page<CollectionEntry<"note">>) {
 			</a>
 			<div class="flex-1"></div>
 			<a
-				href={`/notes/list/${page.currentPage === 1 ? "" : page.currentPage}`}
-				class="cactus-link text-sm">flow</a
+				href={`/notes/${page.currentPage === 1 ? "" : page.currentPage}`}
+				class="cactus-link text-sm">preview</a
 			>
 		</h1>
-		<div class="columns-1 gap-4 md:columns-2">
+		<div class="columns-1">
 			{
 				page.data.map((note, index) => (
 					<Note
@@ -72,7 +73,7 @@ function calculateIndex(index: number, page: Page<CollectionEntry<"note">>) {
 						as="h2"
 						isPreview
 						index={calculateIndex(index, page)}
-						enableLineClamp={true}
+						enableLineClamp={false}
 					/>
 				))
 			}

src/pages/notes/[...slug].astro

@@ -1,14 +1,13 @@
 ---
-import { getCollection } from "astro:content";
-
 import Note from "@/components/note/Note.astro";
 import PageLayout from "@/layouts/Base.astro";
 import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
 import { siteConfig } from "@/site.config";
+import { getAllNotes } from "@/data/post";
 
 // if you're using an adaptor in SSR mode, getStaticPaths wont work -> https://docs.astro.build/en/guides/routing/#modifying-the-slug-example-for-ssr
 export const getStaticPaths = (async () => {
-	const allNotes = await getCollection("note");
+	const allNotes = await getAllNotes();
 	return allNotes.map((note) => ({
 		params: { slug: note.id },
 		props: { note },
@@ -22,7 +21,7 @@ const { note } = Astro.props;
 const meta = {
 	description:
 		note.data.description ||
-		`Read about my note posted on ${siteConfig.title} (${siteConfig.description}) at ${note.data.date.toLocaleDateString()} by ${siteConfig.author}`,
+		`Read about my note posted on ${siteConfig.title} (${siteConfig.description}) at ${note.dateToCmp.toLocaleDateString()} by ${siteConfig.author}`,
 	title: note.data.title,
 	tags: note.data.tags.join(", "),
 };

src/pages/notes/list/[...page].astro

@@ -1,82 +0,0 @@
----
-import { type CollectionEntry, getCollection } from "astro:content";
-import Pagination from "@/components/Paginator.astro";
-import Note from "@/components/note/Note.astro";
-import PageLayout from "@/layouts/Base.astro";
-import { collectionDateSort } from "@/utils/date";
-import type { GetStaticPaths, Page } from "astro";
-import { Icon } from "astro-icon/components";
-
-export const getStaticPaths = (async ({ paginate }) => {
-	const MAX_NOTES_PER_PAGE = 10;
-	const allNotes = await getCollection("note");
-	const notesCount = allNotes.length;
-	return paginate(allNotes.sort(collectionDateSort), {
-		pageSize: MAX_NOTES_PER_PAGE,
-		props: { notesCount },
-	});
-}) satisfies GetStaticPaths;
-
-interface Props {
-	page: Page<CollectionEntry<"note">>;
-	uniqueTags: string[];
-	notesCount: number;
-}
-
-const { page, notesCount } = Astro.props;
-
-const meta = {
-	description: "Read my collection of notes",
-	title: "Notes",
-};
-
-const paginationProps = {
-	...(page.url.prev && {
-		prevUrl: {
-			text: "← Previous Page",
-			url: page.url.prev,
-		},
-	}),
-	...(page.url.next && {
-		nextUrl: {
-			text: "Next Page →",
-			url: page.url.next,
-		},
-	}),
-};
-
-function calculateIndex(index: number, page: Page<CollectionEntry<"note">>) {
-	return index + page.start;
-}
----
-
-<PageLayout meta={meta}>
-	<section>
-		<h1 class="title mb-6 flex items-center gap-3">
-			Notes({notesCount})
-			<a class="text-accent" href="/notes/rss.xml" target="_blank">
-				<span class="sr-only">RSS feed</span>
-				<Icon aria-hidden="true" class="h-6 w-6" focusable="false" name="mdi:rss" />
-			</a>
-			<div class="flex-1"></div>
-			<a
-				href={`/notes/${page.currentPage === 1 ? "" : page.currentPage}`}
-				class="cactus-link text-sm">preview</a
-			>
-		</h1>
-		<div class="columns-1">
-			{
-				page.data.map((note, index) => (
-					<Note
-						note={note}
-						as="h2"
-						isPreview
-						index={calculateIndex(index, page)}
-						enableLineClamp={false}
-					/>
-				))
-			}
-		</div>
-		<Pagination {...paginationProps} />
-	</section>
-</PageLayout>

src/pages/notes/rss.xml.ts

@@ -1,12 +1,12 @@
+import { getAllNotes } from "@/data/post";
 import { siteConfig } from "@/site.config";
 import { collectionDateSort } from "@/utils/date";
 import rss from "@astrojs/rss";
-import { getCollection } from "astro:content";
 import MarkdownIt from "markdown-it";
 import sanitizeHtml from "sanitize-html";
 
 export const GET = async () => {
-	const notes = await getCollection("note");
+	const notes = await getAllNotes();
 	const sortedNotes = notes.sort(collectionDateSort);
 	const parser = new MarkdownIt();
 
@@ -25,7 +25,7 @@ export const GET = async () => {
 			return {
 				title: post.data.title,
 				description: (post.data.description ?? "") + "\t" + tagStr,
-				pubDate: post.data.date,
+				pubDate: post.dateToCmp,
 				link: `notes/${post.id}/`,
 				content: post.body
 					? sanitizeHtml(

src/pages/og-image/[...slug].png.ts

@@ -15,7 +15,7 @@ const ogOptions: SatoriOptions = {
 			name: "ZCOOLXiaoWei",
 			style: "normal",
 			weight: 400,
-		}
+		},
 	],
 	height: 630,
 	width: 1200,
@@ -76,7 +76,7 @@ export async function getStaticPaths() {
 		.map((post) => ({
 			params: { slug: post.id },
 			props: {
-				pubDate: post.data.date ?? post.data.date_modified ,
+				pubDate: post.dateToCmp,
 				title: post.data.title,
 			},
 		}));

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

@@ -7,11 +7,10 @@ import PageLayout from "@/layouts/Base.astro";
 import { collectionDateSort } from "@/utils/date";
 import type { GetStaticPaths, Page } from "astro";
 import { Icon } from "astro-icon/components";
+import { MAX_TAGS, MAX_CATEGORIES, MAX_POSTS_PER_PAGE } from "@/utils/constant";
+import type { PostItem } from "@/types";
 
 export const getStaticPaths = (async ({ paginate }) => {
-	const MAX_POSTS_PER_PAGE = 20;
-	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);
@@ -23,7 +22,7 @@ export const getStaticPaths = (async ({ paginate }) => {
 }) satisfies GetStaticPaths;
 
 interface Props {
-	page: Page<CollectionEntry<"post">>;
+	page: Page<PostItem>;
 	uniqueTags: string[];
 	uniqueCategories: string[];
 	postsCount: number;
@@ -90,7 +89,7 @@ const descYearKeys = Object.keys(groupedByYear).sort((a, b) => +b - +a);
 				!!uniqueTags.length && (
 					<div>
 						<h2 class="title mb-4 flex items-center gap-2 text-lg">
-							<a href="/tags/" class="hover:text-link cactus-link">
+							<a href="/tags/" class="hover:text-link">
 								Tags
 							</a>
 							<svg
@@ -113,7 +112,10 @@ const descYearKeys = Object.keys(groupedByYear).sort((a, b) => +b - +a);
 						<ul class="flex flex-wrap gap-2">
 							{uniqueTags.map((tag) => (
 								<li>
-									<a class="cactus-link flex items-center justify-center" href={`/tags/${tag}/`}>
+									<a
+										class="hover:text-link flex items-center justify-center"
+										href={`/tags/${tag}/`}
+									>
 										<span aria-hidden="true">#</span>
 										<span class="sr-only">View all posts with the tag</span>
 										{tag}
@@ -129,7 +131,7 @@ const descYearKeys = Object.keys(groupedByYear).sort((a, b) => +b - +a);
 				!!uniqueCategories.length && (
 					<div>
 						<h2 class="title mb-4 flex items-center gap-2 text-lg">
-							<a href="/categories/" class="hover:text-link cactus-link">
+							<a href="/categories/" class="hover:text-link">
 								Categories
 							</a>
 							<svg
@@ -153,7 +155,7 @@ const descYearKeys = Object.keys(groupedByYear).sort((a, b) => +b - +a);
 							{uniqueCategories.map((category) => (
 								<li>
 									<a
-										class="cactus-link flex items-center justify-center"
+										class="hover:text-link flex items-center justify-center"
 										href={`/categories/${category}/`}
 									>
 										<span aria-hidden="true">#</span>

src/pages/rss.xml.ts

@@ -23,9 +23,9 @@ export const GET = async () => {
 				return `${acc}#${tag} `;
 			}, "");
 			return {
-				title: post.data.category ? `[${post.data.category}] ${post.data.title}` : post.data.title,
+				title: post.data.title,
 				description: (post.data.description ?? "") + "\t" + tagStr,
-				pubDate: post.data.date,
+				pubDate: post.dateToCmp,
 				link: `posts/${post.id}/`,
 				content: post.body
 					? sanitizeHtml(

src/site.config.ts

@@ -49,6 +49,10 @@ export const menuLinks: { path: string; title: string }[] = [
 		path: "/notes/",
 		title: "Notes",
 	},
+	{
+		path: "/archive/",
+		title: "Archive",
+	},
 	{
 		path: "/friends/",
 		title: "Friends",

src/types.ts

@@ -1,3 +1,5 @@
+import type { CollectionEntry } from "astro:content";
+
 export interface SiteConfig {
 	author: string;
 	date: {
@@ -88,3 +90,13 @@ export interface Summary {
 }
 
 export type AdmonitionType = "tip" | "note" | "important" | "caution" | "warning" | "quote";
+
+export type PostItem = CollectionEntry<"post"> & {
+	dateToCmp: Date;
+};
+
+export type NoteItem = CollectionEntry<"note"> & {
+	dateToCmp: Date;
+};
+
+export type AllItem = PostItem | NoteItem;

src/utils/constant.ts

@@ -0,0 +1,4 @@
+export const MAX_POSTS_PER_PAGE = 20;
+export const MAX_TAGS = 7;
+export const MAX_CATEGORIES = 7;
+export const MAX_LATEST_POSTS = 10;

src/utils/date.ts

@@ -1,5 +1,6 @@
-import type { CollectionEntry } from "astro:content";
+import { getDateSortByUpdateTime } from "@/data/post";
 import { siteConfig } from "@/site.config";
+import type { AllItem } from "@/types";
 
 export function getFormattedDate(
 	date: Date | undefined,
@@ -15,16 +16,10 @@ export function getFormattedDate(
 	}).format(date);
 }
 
-export function collectionDateSort(
-	a: CollectionEntry<"post" | "note">,
-	b: CollectionEntry<"post" | "note">,
-) {
-	const getDate = (entry: CollectionEntry<"post" | "note">): Date => {
-		if (entry.data.date) return entry.data.date;
-		if (entry.data.data_created) return entry.data.data_created;
-		if (entry.data.date_modified) return entry.data.date_modified;
-		return new Date();
-	};
-
-	return getDate(b).getTime() - getDate(a).getTime();
+export function collectionDateSort(a: AllItem, b: AllItem) {
+	return b.dateToCmp.getTime() - a.dateToCmp.getTime();
+}
+
+export function getLatestUpdatedPost(a: AllItem, b: AllItem) {
+	return getDateSortByUpdateTime(b).getTime() - getDateSortByUpdateTime(a).getTime();
 }