diff options
| -rw-r--r-- | SPRINT.md | 6 | ||||
| -rw-r--r-- | src/pages/tags/[tag]/index.astro (renamed from src/pages/tags/[tag]/[...page].astro) | 82 |
2 files changed, 42 insertions, 46 deletions
@@ -7,11 +7,11 @@ Goal: Initialize project tooling for Claude Code ## In Progress ## Backlog (Prioritized) -- [ ] **[FEATURE-004]** Add page number pagination on tag pages - - Show numbered page links (e.g. "1, 2, 3, ..., 11") on tag listing pages like `/tags/microblog/` - - Let users see total page count and jump to specific pages ## Completed This Sprint +- [x] **[FEATURE-004]** Add year grouping to tag pages, remove pagination + - Completed: 2026-01-30 + - Notes: Removed pagination, single page per tag. Tags with >20 posts show year-grouped sections matching main posts page style (commit e000a4d) - [x] **[FEATURE-003]** Add next/previous post navigation on blog post pages - Completed: 2026-01-30 - Notes: Category-scoped navigation (regular/microblog/archived) with i18n support (commit 468d7c4) diff --git a/src/pages/tags/[tag]/[...page].astro b/src/pages/tags/[tag]/index.astro index 8ae9716..2f7fa47 100644 --- a/src/pages/tags/[tag]/[...page].astro +++ b/src/pages/tags/[tag]/index.astro @@ -1,36 +1,26 @@ --- import { render } from "astro:content"; -import type { GetStaticPaths, InferGetStaticPropsType } from "astro"; +import type { GetStaticPaths } from "astro"; import { Icon } from "astro-icon/components"; import PostPreview from "@/components/blog/PostPreview.astro"; -import Pagination from "@/components/Paginator.astro"; -import { getAllPosts, getTagMeta, getUniqueTags } from "@/data/post"; +import { getAllPosts, getTagMeta, getUniqueTags, groupPostsByYear } from "@/data/post"; import PageLayout from "@/layouts/Base.astro"; import { collectionDateSort } from "@/utils/date"; -export const getStaticPaths = (async ({ paginate }) => { - const allPosts = await getAllPosts(true); // Include archived posts (now includes pleroma too) - - // Get unique tags from all posts +export const getStaticPaths = (async () => { + const allPosts = await getAllPosts(true); const allTags = getUniqueTags(allPosts); - return allTags.flatMap((tag) => { - // Filter posts by tag - const postsWithTag = allPosts.filter((post) => post.data.tags.includes(tag)); - - // Sort chronologically - const sortedPosts = postsWithTag.sort(collectionDateSort); + return allTags.map((tag) => { + const postsWithTag = allPosts + .filter((post) => post.data.tags.includes(tag)) + .sort(collectionDateSort); - return paginate(sortedPosts, { - pageSize: 10, - params: { tag }, - }); + return { params: { tag }, props: { posts: postsWithTag } }; }); }) satisfies GetStaticPaths; -type Props = InferGetStaticPropsType<typeof getStaticPaths>; - -const { page } = Astro.props as Props; +const { posts } = Astro.props; const { tag } = Astro.params; const tagMeta = await getTagMeta(tag); @@ -44,20 +34,9 @@ const meta = { title: tagMeta?.data.title ?? `${tagDisplay} posts`, }; -const paginationProps = { - ...(page.url.prev && { - prevUrl: { - text: "← Previous posts", - url: page.url.prev, - }, - }), - ...(page.url.next && { - nextUrl: { - text: "Next posts →", - url: page.url.next, - }, - }), -}; +const groupedByYear = groupPostsByYear(posts); +const descYearKeys = Object.keys(groupedByYear).sort((a, b) => +b - +a); +const useYearGrouping = posts.length > 20; --- <PageLayout meta={meta}> @@ -86,14 +65,31 @@ const paginationProps = { {tagMeta?.data.description && <p>{tagMeta.data.description}</p>} {TagContent && <TagContent />} </div> - <ul class="space-y-6"> - { - page.data.map((post) => ( - <li class="grid gap-2 sm:grid-cols-[auto_1fr]"> - <PostPreview as="h2" post={post} /> - </li> + { + useYearGrouping ? ( + 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 class="mt-5 mb-16 space-y-6 text-start"> + {groupedByYear[yearKey]?.map((post) => ( + <li class="grid gap-2 sm:grid-cols-[auto_1fr] sm:[&_q]:col-start-2"> + <PostPreview as="h2" post={post} /> + </li> + ))} + </ul> + </section> )) - } - </ul> - <Pagination {...paginationProps} /> + ) : ( + <ul class="space-y-6"> + {posts.map((post) => ( + <li class="grid gap-2 sm:grid-cols-[auto_1fr]"> + <PostPreview as="h2" post={post} /> + </li> + ))} + </ul> + ) + } </PageLayout> |