feat: show counts

This commit is contained in:
KazooTTT
2025-02-05 23:02:29 +08:00
parent af1372b1b8
commit 8e3e1d5834
3 changed files with 24 additions and 12 deletions

View File

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

View File

@ -10,15 +10,20 @@ import { Icon } from "astro-icon/components";
export const getStaticPaths = (async ({ paginate }) => { export const getStaticPaths = (async ({ paginate }) => {
const MAX_NOTES_PER_PAGE = 10; const MAX_NOTES_PER_PAGE = 10;
const allNotes = await getCollection("note"); 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; }) satisfies GetStaticPaths;
interface Props { interface Props {
page: Page<CollectionEntry<"note">>; page: Page<CollectionEntry<"note">>;
uniqueTags: string[]; uniqueTags: string[];
notesCount: number;
} }
const { page } = Astro.props; const { page, notesCount } = Astro.props;
const meta = { const meta = {
description: "Read my collection of notes", description: "Read my collection of notes",
@ -44,16 +49,17 @@ const paginationProps = {
<PageLayout meta={meta}> <PageLayout meta={meta}>
<section> <section>
<h1 class="title mb-6 flex items-center gap-3"> <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> <span class="sr-only">RSS feed</span>
<Icon aria-hidden="true" class="h-6 w-6" focusable="false" name="mdi:rss" /> <Icon aria-hidden="true" class="h-6 w-6" focusable="false" name="mdi:rss" />
</a> </a>
</h1> </h1>
<ul class="mt-6 space-y-8 text-start"> <ul class="mt-6 space-y-8 text-start">
{ {
page.data.map((note) => ( page.data.map((note, index) => (
<li class=""> <li class="">
<Note note={note} as="h2" isPreview /> <Note note={note} as="h2" isPreview index={index} />
</li> </li>
)) ))
} }

View File

@ -15,9 +15,10 @@ export const getStaticPaths = (async ({ paginate }) => {
const allPosts = await getAllPosts(); const allPosts = await getAllPosts();
const uniqueTags = getUniqueTags(allPosts).slice(0, MAX_TAGS); const uniqueTags = getUniqueTags(allPosts).slice(0, MAX_TAGS);
const uniqueCategories = getUniqueCategories(allPosts).slice(0, MAX_CATEGORIES); const uniqueCategories = getUniqueCategories(allPosts).slice(0, MAX_CATEGORIES);
const postsCount = allPosts.length;
return paginate(allPosts.sort(collectionDateSort), { return paginate(allPosts.sort(collectionDateSort), {
pageSize: MAX_POSTS_PER_PAGE, pageSize: MAX_POSTS_PER_PAGE,
props: { uniqueTags, uniqueCategories }, props: { uniqueTags, uniqueCategories, postsCount },
}); });
}) satisfies GetStaticPaths; }) satisfies GetStaticPaths;
@ -25,9 +26,10 @@ interface Props {
page: Page<CollectionEntry<"post">>; page: Page<CollectionEntry<"post">>;
uniqueTags: string[]; uniqueTags: string[];
uniqueCategories: string[]; uniqueCategories: string[];
postsCount: number;
} }
const { page, uniqueTags, uniqueCategories } = Astro.props; const { page, uniqueTags, uniqueCategories, postsCount } = Astro.props;
const meta = { const meta = {
description: "Read my collection of posts and the things that interest me", 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}> <PageLayout meta={meta}>
<div class="mb-6 flex items-center gap-3"> <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"> <a class="text-accent" href="/rss.xml" target="_blank">
<span class="sr-only">RSS feed</span> <span class="sr-only">RSS feed</span>
<Icon aria-hidden="true" class="h-6 w-6" focusable="false" name="mdi:rss" /> <Icon aria-hidden="true" class="h-6 w-6" focusable="false" name="mdi:rss" />