From 4387c9c484e2d193484e0b7e70a3f07994e5eb58 Mon Sep 17 00:00:00 2001
From: KazooTTT <work@kazoottt.top>
Date: Wed, 5 Feb 2025 23:20:24 +0800
Subject: [PATCH] feat: add note modification date display and sorting

---
 src/components/note/Note.astro  | 16 +++++++++++++++-
 src/pages/notes/[...page].astro | 10 +++++++---
 src/utils/date.ts               | 20 ++++++++++++++++++++
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/components/note/Note.astro b/src/components/note/Note.astro
index 0997c83..95a5ec8 100644
--- a/src/components/note/Note.astro
+++ b/src/components/note/Note.astro
@@ -26,6 +26,10 @@ const dateTimeOptions: Intl.DateTimeFormatOptions = note.data.date_created
 		};
 
 const date = note.data.date_created ?? note.data.date;
+let modifiedDate = note.data?.date_modified;
+if (modifiedDate && modifiedDate.getTime() === date.getTime()) {
+	modifiedDate = undefined;
+}
 ---
 
 <article
@@ -49,7 +53,17 @@ const date = note.data.date_created ?? note.data.date;
 			)
 		}
 	</Tag>
-	<FormattedDate dateTimeOptions={dateTimeOptions} date={date} />
+	<div>
+		<FormattedDate dateTimeOptions={dateTimeOptions} date={date} />
+		{
+			modifiedDate && (
+				<span class="bg-quote/5 text-quote rounded-lg px-2 py-1">
+					Updated:
+					<FormattedDate class="ms-1" date={modifiedDate} dateTimeOptions={dateTimeOptions} />
+				</span>
+			)
+		}
+	</div>
 	<div
 		class="prose prose-sm prose-cactus mt-4 max-w-none [&>p:last-of-type]:mb-0"
 		class:list={{ "line-clamp-6": isPreview }}
diff --git a/src/pages/notes/[...page].astro b/src/pages/notes/[...page].astro
index e8175ad..1c1ae75 100644
--- a/src/pages/notes/[...page].astro
+++ b/src/pages/notes/[...page].astro
@@ -3,7 +3,7 @@ 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 { collectionModifiedDateSort } from "@/utils/date";
 import type { GetStaticPaths, Page } from "astro";
 import { Icon } from "astro-icon/components";
 
@@ -11,7 +11,7 @@ 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), {
+	return paginate(allNotes.sort(collectionModifiedDateSort), {
 		pageSize: MAX_NOTES_PER_PAGE,
 		props: { notesCount },
 	});
@@ -44,6 +44,10 @@ const paginationProps = {
 		},
 	}),
 };
+
+function calculateIndex(index: number, page: Page<CollectionEntry<"note">>) {
+	return index + page.start;
+}
 ---
 
 <PageLayout meta={meta}>
@@ -59,7 +63,7 @@ const paginationProps = {
 			{
 				page.data.map((note, index) => (
 					<li class="">
-						<Note note={note} as="h2" isPreview index={index} />
+						<Note note={note} as="h2" isPreview index={calculateIndex(index, page)} />
 					</li>
 				))
 			}
diff --git a/src/utils/date.ts b/src/utils/date.ts
index e757459..e575c76 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -21,3 +21,23 @@ export function collectionDateSort(
 ) {
 	return b.data.date.getTime() - a.data.date.getTime();
 }
+
+const datePriorityForNote = ["date_modified", "date", "data_created"];
+
+export function collectionModifiedDateSort(
+	a: CollectionEntry<"post" | "note">,
+	b: CollectionEntry<"post" | "note">,
+) {
+	let dateA: Date = new Date(),
+		dateB: Date = new Date();
+	datePriorityForNote.forEach((key) => {
+		if (a.data[key as keyof typeof a.data]) {
+			dateA = a.data[key as keyof typeof a.data] as Date;
+		}
+		if (b.data[key as keyof typeof b.data]) {
+			dateB = b.data[key as keyof typeof b.data] as Date;
+		}
+	});
+
+	return dateB.getTime() - dateA.getTime();
+}