mirror of
https://github.com/KazooTTT/kazoottt-blog-v2.git
synced 2025-06-24 11:11:29 +08:00
feat: show counts
This commit is contained in:
@ -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}</>
|
||||||
)
|
)
|
||||||
|
@ -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>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
|
@ -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" />
|
||||||
|
Reference in New Issue
Block a user