feat: show counts

src/components/note/Note.astro

@@ -6,9 +6,10 @@ import GiscusComment from "@/components/componentsBefore/GiscusComment";
 type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
 	note: CollectionEntry<"note">;
 	isPreview?: boolean | undefined;
+	index?: number;
 };
 
-const { as: Tag = "div", note, isPreview = false } = Astro.props;
+const { as: Tag = "div", note, isPreview = false, index } = Astro.props;
 const { Content } = await render(note);
 const dateTimeOptions: Intl.DateTimeFormatOptions = note.data.date_created
 	? {
@@ -37,9 +38,12 @@ const date = note.data.date_created ?? note.data.date;
 	<Tag class="title" class:list={{ "text-base": isPreview }}>
 		{
 			isPreview ? (
-				<a class="cactus-link" href={`/notes/${note.id}/`}>
-					{note.data.title}
-				</a>
+				<>
+					{index + 1}.{" "}
+					<a class="cactus-link" href={`/notes/${note.id}/`}>
+						{note.data.title}
+					</a>
+				</>
 			) : (
 				<>{note.data.title}</>
 			)

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

@@ -10,15 +10,20 @@ import { Icon } from "astro-icon/components";
 export const getStaticPaths = (async ({ paginate }) => {
 	const MAX_NOTES_PER_PAGE = 10;
 	const allNotes = await getCollection("note");
-	return paginate(allNotes.sort(collectionDateSort), { pageSize: MAX_NOTES_PER_PAGE });
+	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 } = Astro.props;
+const { page, notesCount } = Astro.props;
 
 const meta = {
 	description: "Read my collection of notes",
@@ -44,16 +49,17 @@ const paginationProps = {
 <PageLayout meta={meta}>
 	<section>
 		<h1 class="title mb-6 flex items-center gap-3">
-			Notes <a class="text-accent" href="/notes/rss.xml" target="_blank">
+			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>
 		</h1>
 		<ul class="mt-6 space-y-8 text-start">
 			{
-				page.data.map((note) => (
+				page.data.map((note, index) => (
 					<li class="">
-						<Note note={note} as="h2" isPreview />
+						<Note note={note} as="h2" isPreview index={index} />
 					</li>
 				))
 			}

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

@@ -15,9 +15,10 @@ export const getStaticPaths = (async ({ paginate }) => {
 	const allPosts = await getAllPosts();
 	const uniqueTags = getUniqueTags(allPosts).slice(0, MAX_TAGS);
 	const uniqueCategories = getUniqueCategories(allPosts).slice(0, MAX_CATEGORIES);
+	const postsCount = allPosts.length;
 	return paginate(allPosts.sort(collectionDateSort), {
 		pageSize: MAX_POSTS_PER_PAGE,
-		props: { uniqueTags, uniqueCategories },
+		props: { uniqueTags, uniqueCategories, postsCount },
 	});
 }) satisfies GetStaticPaths;
 
@@ -25,9 +26,10 @@ interface Props {
 	page: Page<CollectionEntry<"post">>;
 	uniqueTags: string[];
 	uniqueCategories: string[];
+	postsCount: number;
 }
 
-const { page, uniqueTags, uniqueCategories } = Astro.props;
+const { page, uniqueTags, uniqueCategories, postsCount } = Astro.props;
 
 const meta = {
 	description: "Read my collection of posts and the things that interest me",
@@ -55,7 +57,7 @@ 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">Posts</h1>
+		<h1 class="title">Posts({postsCount})</h1>
 		<a class="text-accent" href="/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" />