feat: Enhance notes display with multi-column layout and line clamping

src/components/note/Note.astro

@@ -6,13 +6,15 @@ import GiscusComment from "@/components/componentsBefore/GiscusComment";
 import ArticleContainer from "../ArticleContainer.astro";
 import ShareButtons from "../ShareButtons.astro";
 import ContentFooter from "../ContentFooter.astro";
+import { cn } from "@/utils/tailwind";
 type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
 	note: CollectionEntry<"note">;
 	isPreview?: boolean | undefined;
 	index?: number;
+	enableLineClamp?: boolean;
 };
 
-const { as: Tag = "div", note, isPreview = false, index } = Astro.props;
+const { as: Tag = "div", note, isPreview = false, index, enableLineClamp = false } = Astro.props;
 const { Content } = await render(note);
 const dateTimeOptions: Intl.DateTimeFormatOptions = note.data.date_created
 	? {
@@ -36,15 +38,18 @@ if (modifiedDate && modifiedDate.toDateString() === date.toDateString()) {
 ---
 
 <ArticleContainer
-	className={isPreview &&
-		"inline-grid w-full rounded-md bg-[rgb(240,240,240)] px-4 py-3 dark:bg-[rgb(33,35,38)]"}
+	className={cn(
+		"mb-4 break-inside-avoid-column",
+		isPreview &&
+			"inline-grid w-full rounded-md bg-[rgb(240,240,240)] px-4 py-3 dark:bg-[rgb(33,35,38)]"
+	)}
 	dataPagefindBody={isPreview ? false : true}
 >
 	<Tag class="title" class:list={{ "text-base": isPreview }}>
 		{
 			isPreview ? (
 				<>
-					{index ? `${index + 1}.` : ""}
+					{index !== undefined && index !== null ? `${index + 1}.` : ""}
 					<a class="cactus-link" href={`/notes/${note.id}/`}>
 						{note.data.title}
 					</a>
@@ -66,7 +71,12 @@ if (modifiedDate && modifiedDate.toDateString() === date.toDateString()) {
 		}
 	</div>
 	<div class="group w-full overflow-auto">
-		<div class="prose prose-base prose-cactus mt-4 max-w-none [&>p:last-of-type]:mb-0">
+		<div
+			class={cn(
+				"prose prose-base prose-cactus mt-4 max-w-none [&>p:last-of-type]:mb-0",
+				enableLineClamp && "line-clamp-4"
+			)}
+		>
 			<Content />
 		</div>
 	</div>

src/pages/index.astro

@@ -15,7 +15,7 @@ const allPostsByDate = allPosts
 	.slice(0, MAX_POSTS) as CollectionEntry<"post">[];
 
 // Notes
-const MAX_NOTES = 5;
+const MAX_NOTES = 6;
 const allNotes = await getCollection("note");
 const latestNotes = allNotes.sort(collectionDateSort).slice(0, MAX_NOTES);
 ---
@@ -44,10 +44,10 @@ const latestNotes = allNotes.sort(collectionDateSort).slice(0, MAX_NOTES);
 				<h2 class="title text-accent mb-6 text-xl">
 					<a href="/notes/">Notes</a>
 				</h2>
-				<ul class="space-y-4" role="list">
+				<ul class="columns-1 gap-4 md:columns-2" role="list">
 					{latestNotes.map((note) => (
 						<li>
-							<Note note={note} as="h3" isPreview />
+							<Note note={note} as="h3" isPreview enableLineClamp />
 						</li>
 					))}
 				</ul>

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

@@ -59,17 +59,24 @@ function calculateIndex(index: number, page: Page<CollectionEntry<"note">>) {
 				<Icon aria-hidden="true" class="h-6 w-6" focusable="false" name="mdi:rss" />
 			</a>
 			<div class="flex-1"></div>
-			<a href={`/notes/list/${page.currentPage}`} class="cactus-link text-sm">list</a>
+			<a
+				href={`/notes/list/${page.currentPage === 1 ? "" : page.currentPage}`}
+				class="cactus-link text-sm">flow</a
+			>
 		</h1>
-		<ul class="mt-6 space-y-8 text-start">
+		<div class="columns-1 gap-4 md:columns-2">
 			{
 				page.data.map((note, index) => (
-					<li class="">
-						<Note note={note} as="h2" isPreview index={calculateIndex(index, page)} />
-					</li>
+					<Note
+						note={note}
+						as="h2"
+						isPreview
+						index={calculateIndex(index, page)}
+						enableLineClamp={true}
+					/>
 				))
 			}
-		</ul>
+		</div>
 		<Pagination {...paginationProps} />
 	</section>
 </PageLayout>

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

@@ -1,53 +1,33 @@
 ---
-import { getCollection, type CollectionEntry } from "astro:content";
+import { type CollectionEntry, getCollection } from "astro:content";
 import Pagination from "@/components/Paginator.astro";
-import PostPreview from "@/components/blog/PostPreview.astro";
+import Note from "@/components/note/Note.astro";
 import PageLayout from "@/layouts/Base.astro";
-import { collectionDateSort } from "@/utils/date";
+import { collectionModifiedDateSort } from "@/utils/date";
 import type { GetStaticPaths, Page } from "astro";
 import { Icon } from "astro-icon/components";
 
-// 添加新的类型定义
-type NoteEntry = CollectionEntry<"note">;
-
-// 创建一个新的groupNotesByYear函数
-function groupNotesByYear(notes: NoteEntry[]) {
-	return notes.reduce(
-		(acc, note) => {
-			const year = note.data.date.getFullYear().toString();
-			acc[year] = acc[year] || [];
-			acc[year].push(note);
-			return acc;
-		},
-		{} as Record<string, NoteEntry[]>
-	);
-}
-
 export const getStaticPaths = (async ({ paginate }) => {
-	const MAX_POSTS_PER_PAGE = 10;
+	const MAX_NOTES_PER_PAGE = 10;
 	const allNotes = await getCollection("note");
-	const postsCount = allNotes.length;
-	return paginate(allNotes.sort(collectionDateSort), {
-		pageSize: MAX_POSTS_PER_PAGE,
-		props: { postsCount },
+	const notesCount = allNotes.length;
+	return paginate(allNotes.sort(collectionModifiedDateSort), {
+		pageSize: MAX_NOTES_PER_PAGE,
+		props: { notesCount },
 	});
 }) satisfies GetStaticPaths;
 
 interface Props {
 	page: Page<CollectionEntry<"note">>;
 	uniqueTags: string[];
-	uniqueCategories: string[];
-	postsCount: number;
+	notesCount: number;
 }
 
-const { page, postsCount } = Astro.props;
-
-// 添加默认布局状态
-const defaultLayout = "list"; // 或 "grid"
+const { page, notesCount } = Astro.props;
 
 const meta = {
-	description: "Read my collection of posts and the things that interest me",
-	title: "Posts",
+	description: "Read my collection of notes",
+	title: "Notes",
 };
 
 const paginationProps = {
@@ -65,78 +45,38 @@ const paginationProps = {
 	}),
 };
 
-// 使用新的groupNotesByYear函数替换原来的groupPostsByYear
-const groupedByYear = groupNotesByYear(page.data);
-const descYearKeys = Object.keys(groupedByYear).sort((a, b) => +b - +a);
+function calculateIndex(index: number, page: Page<CollectionEntry<"note">>) {
+	return index + page.start;
+}
 ---
 
 <PageLayout meta={meta}>
-	<div class="mb-6 flex items-center gap-3">
-		<h1 class="title">Notes({postsCount})</h1>
-		<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} class="cactus-link">see the preview</a>
-	</div>
-	<div class="grid sm:grid-cols-[3fr_1fr] sm:gap-x-8 sm:gap-y-16">
-		<div>
+	<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">
 			{
-				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
-							id="posts-container"
-							class="mt-5 mb-16 space-y-4 text-start"
-							data-layout={defaultLayout}
-						>
-							{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>
+				page.data.map((note, index) => (
+					<Note
+						note={note}
+						as="h2"
+						isPreview
+						index={calculateIndex(index, page)}
+						enableLineClamp={false}
+					/>
 				))
 			}
-			<Pagination {...paginationProps} />
 		</div>
-	</div>
+		<Pagination {...paginationProps} />
+	</section>
 </PageLayout>
-
-<script>
-	const layoutToggle = document.getElementById("layout-toggle");
-	const postsContainer = document.getElementById("posts-container");
-	const listIcon = document.getElementById("list-icon");
-	const gridIcon = document.getElementById("grid-icon");
-
-	// 从 localStorage 获取保存的布局偏好
-	const savedLayout = localStorage.getItem("notesLayout") || "list";
-	postsContainer?.setAttribute("data-layout", savedLayout);
-
-	// 根据当前布局更新图标显示
-	function updateIcons(layout: string) {
-		if (layout === "grid") {
-			listIcon?.classList.remove("hidden");
-			gridIcon?.classList.add("hidden");
-		} else {
-			listIcon?.classList.add("hidden");
-			gridIcon?.classList.remove("hidden");
-		}
-	}
-
-	updateIcons(savedLayout);
-
-	layoutToggle?.addEventListener("click", () => {
-		const currentLayout = postsContainer?.getAttribute("data-layout");
-		const newLayout = currentLayout === "list" ? "grid" : "list";
-
-		postsContainer?.setAttribute("data-layout", newLayout);
-		localStorage.setItem("notesLayout", newLayout);
-		updateIcons(newLayout);
-	});
-</script>