group posts by year works, now handle route params and PostCardSmall

docs/todo3.md

@@ -317,4 +317,6 @@ PostCardSmall
 extract types from constants
 update yarn scripts for eslint, prettier, types
 404 page design
+PostCard updatedDate
+post collection date md filename and publishDate?
 ```

src/components/CategoriesAndTags.astro

@@ -8,10 +8,10 @@ import FilterList from '@/components/FilterList.astro';
 import Tag from '@/components/Tag.astro';
 import { cn } from '@/utils/styles';
 
-import type { FilterLink, PostCollection } from '@/types/post';
+import type { FilterLink, Post } from '@/types/post';
 
 export interface Props extends astroHTML.JSX.AnchorHTMLAttributes {
-  posts: PostCollection[];
+  posts: Post[];
 }
 
 const { posts, class: className, ...props } = Astro.props;

src/modules/common.ts

@@ -26,7 +26,10 @@ export const getAllEntries = async <T extends CollectionKey>(
   return sortedEntries;
 };
 
-/*-------------------------------- sort by publishDate ------------------------------*/
+/*-------------------------------- sort by updatedDate or publishDate ------------------------------*/
+
+export const getEntryLastDate = <T extends CollectionKey>(entry: CollectionEntry<T>): Date =>
+  entry.data.updatedDate ?? entry.data.publishDate;
 
 export const sortEntriesByDateDesc = <T extends CollectionKey>(entries: CollectionEntry<T>[]) =>
-  entries.slice().sort((a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf());
+  entries.slice().sort((a, b) => getEntryLastDate(b).valueOf() - getEntryLastDate(a).valueOf());

src/modules/post/common.ts

@@ -3,6 +3,7 @@ import { COLLECTIONS } from '@/constants/collections';
 
 import type { Post, PostCollection } from '@/types/post';
 
+/** Sorted posts. */
 export const getAllPosts = (): Promise<PostCollection[]> => getAllEntries(COLLECTIONS.POST);
 
 export const getPostsWithReadingTimeFromPosts = async (
@@ -20,3 +21,7 @@ export const getPostsWithReadingTimeFromPosts = async (
   const postsWithReadingTime = posts.map((post, index) => ({ ...post, ...readingTimes[index] }));
   return postsWithReadingTime;
 };
+
+/** Prefer over getAllPosts() */
+export const getAllPostsWithReadingTime = async (): Promise<Post[]> =>
+  getPostsWithReadingTimeFromPosts(await getAllPosts());

src/modules/post/group-by-year.ts

@@ -0,0 +1,26 @@
+import { getEntryLastDate } from '@/modules/common';
+
+import type { Post, PostsByYear } from '@/types/post';
+
+export const groupPostsByYear = (sortedPosts: Post[]): PostsByYear => {
+  const postsByYear: PostsByYear = {
+    years: [],
+    posts: {},
+  };
+
+  const groupedPosts = sortedPosts.reduce((result, post) => {
+    const postDate = getEntryLastDate(post);
+    const year = postDate.getFullYear().toString();
+
+    if (!result.posts[year]) {
+      result.years.push(year);
+      result.posts[year] = [];
+    }
+
+    result.posts[year].push(post);
+
+    return result;
+  }, postsByYear);
+
+  return groupedPosts;
+};

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

@@ -1,5 +1,5 @@
 ---
-import { getAllPosts, getPostsWithReadingTimeFromPosts } from '@/modules/post/common';
+import { getAllPostsWithReadingTime } from '@/modules/post/common';
 import List from '@/layouts/List.astro';
 import PostList from '@/components/PostList.astro';
 import { CONFIG } from '@/config';
@@ -11,9 +11,7 @@ import type { GetStaticPathsOptions } from 'astro';
 
 // [page].astro and getStaticPaths because of pagination
 export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
-  const sortedPosts = await getAllPosts();
-
-  const posts: Post[] = await getPostsWithReadingTimeFromPosts(sortedPosts);
+  const posts: Post[] = await getAllPostsWithReadingTime();
 
   const pagination = paginate(posts, { pageSize: CONFIG.PAGE_SIZE }); // must take entire config here, interesting
   pagination.push({ params: { page: '1' }, props: pagination[0].props });

src/pages/blog/[slug].astro

@@ -1,7 +1,7 @@
 ---
 import { Image } from 'astro:assets';
 
-import { getAllPosts, getPostsWithReadingTimeFromPosts } from '@/modules/post/common';
+import { getAllPostsWithReadingTime } from '@/modules/post/common';
 import { getRandomPosts } from '@/modules/post/random';
 import { getHeadingsForTableOfContents } from '@/modules/post/table-of-contents';
 import { default as PostLayout } from '@/layouts/Post.astro';
@@ -16,8 +16,7 @@ import type { Metadata } from '@/types/common';
 import type { Post } from '@/types/post';
 
 export async function getStaticPaths() {
-  const sortedPosts = await getAllPosts();
-  const posts: Post[] = await getPostsWithReadingTimeFromPosts(sortedPosts);
+  const posts: Post[] = await getAllPostsWithReadingTime();
 
   const paths = posts.map((post) => {
     const { slug } = post;

src/pages/blog/categories-and-tags/[...page].astro

@@ -0,0 +1,52 @@
+---
+import { getAllPostsWithReadingTime } from '@/modules/post/common';
+import { groupPostsByYear } from '@/modules/post/group-by-year';
+import List from '@/layouts/List.astro';
+import CategoriesAndTags from '@/components/CategoriesAndTags.astro';
+import { CONFIG } from '@/config';
+import { getPageMetadata } from '@/utils/metadata';
+import { pickPaginationPropsFromPage } from '@/utils/pagination';
+
+import type { Post } from '@/types/post';
+import type { GetStaticPathsOptions } from 'astro';
+
+export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
+  const posts: Post[] = await getAllPostsWithReadingTime();
+
+  // filter by tag and category here
+  // must have grouped here for pagination // no need
+
+  const pagination = paginate(posts, { pageSize: CONFIG.PAGE_SIZE });
+  pagination.push({ params: { page: '1' }, props: pagination[0].props });
+  return pagination;
+}
+
+const { page } = Astro.props;
+const { data: posts } = page;
+
+// for categories and tags
+const allPosts = await getAllPostsWithReadingTime();
+
+const postsByYear = groupPostsByYear(posts);
+
+const paginationProps = pickPaginationPropsFromPage(page);
+
+const metadata = getPageMetadata('lists/blog/categories-and-tags');
+const layoutProps = { metadata, paginationProps };
+---
+
+<List {...layoutProps}>
+  <CategoriesAndTags posts={allPosts} />
+  {
+    postsByYear.years.map((year) => (
+      <>
+        <h2 class="title text-lg">{year}</h2>
+        <ul class="mb-8 mt-6 space-y-8">
+          {postsByYear.posts[year].map((post) => (
+            <li class="">{post.data.title}</li>
+          ))}
+        </ul>
+      </>
+    ))
+  }
+</List>

src/pages/blog/categories/[category]/[...page].astro

@@ -1,6 +1,6 @@
 ---
 import { getUniqueCategories } from '@/modules/post/category';
-import { getAllPosts, getPostsWithReadingTimeFromPosts } from '@/modules/post/common';
+import { getAllPostsWithReadingTime } from '@/modules/post/common';
 import List from '@/layouts/List.astro';
 import Link from '@/components/Link.astro';
 import PostList from '@/components/PostList.astro';
@@ -14,8 +14,7 @@ import type { Post } from '@/types/post';
 import type { GetStaticPathsOptions } from 'astro';
 
 export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
-  const sortedPosts = await getAllPosts();
-  const posts: Post[] = await getPostsWithReadingTimeFromPosts(sortedPosts);
+  const posts: Post[] = await getAllPostsWithReadingTime();
 
   const uniqueCategories = getUniqueCategories(posts);
 

src/pages/blog/tags/[tag]/[...page].astro

@@ -1,5 +1,5 @@
 ---
-import { getAllPosts, getPostsWithReadingTimeFromPosts } from '@/modules/post/common';
+import { getAllPostsWithReadingTime } from '@/modules/post/common';
 import { getUniqueTags } from '@/modules/post/tag';
 import List from '@/layouts/List.astro';
 import Link from '@/components/Link.astro';
@@ -13,8 +13,7 @@ import type { Post } from '@/types/post';
 import type { GetStaticPathsOptions } from 'astro';
 
 export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
-  const sortedPosts = await getAllPosts();
-  const posts: Post[] = await getPostsWithReadingTimeFromPosts(sortedPosts);
+  const posts: Post[] = await getAllPostsWithReadingTime();
 
   const uniqueTags = getUniqueTags(posts);
 

src/schemas/project.ts

@@ -11,6 +11,7 @@ export const projectSchema = ({ image }: SchemaContext) =>
     title: z.string().default(TITLE),
     description: z.string().default(DESCRIPTION),
     publishDate: z.coerce.date(),
+    updatedDate: z.coerce.date().optional(),
     heroImage: image().default(HERO_IMAGE),
     heroAlt: z.string().default(HERO_ALT),
     draft: z.boolean().default(DRAFT),

src/types/post.ts

@@ -8,6 +8,11 @@ export type Post = PostCollection & {
   readingTime: number;
 };
 
+export interface PostsByYear {
+  years: string[];
+  posts: Record<string, Post[]>;
+}
+
 export type FilterType = 'tag' | 'category';
 
 /** For both tags and categories. */