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

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(