feat: add archives page with configurable menu

src/components/Header.astro

@@ -4,7 +4,7 @@ import Hr from "./Hr.astro";
 import LinkButton from "./LinkButton.astro";
 
 export interface Props {
-  activeNav?: "posts" | "tags" | "about" | "search";
+  activeNav?: "posts" | "archives" | "tags" | "about" | "search";
 }
 
 const { activeNav } = Astro.props;
@@ -70,6 +70,41 @@ const { activeNav } = Astro.props;
               About
             </a>
           </li>
+          {
+            SITE.showArchives && (
+              <li>
+                <LinkButton
+                  href="/archives/"
+                  className={`focus-outline flex justify-center p-3 sm:p-1`}
+                  ariaLabel="archives"
+                  title="Archives"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class:list={[
+                      "icon icon-tabler icons-tabler-outline !hidden sm:!inline-block",
+                      activeNav === "archives" && "!stroke-skin-accent",
+                    ]}
+                  >
+                    <>
+                      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                      <path d="M3 4m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
+                      <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
+                      <path d="M10 12l4 0" />
+                    </>
+                  </svg>
+                  <span
+                    class:list={[
+                      "sm:sr-only",
+                      activeNav === "archives" && "active",
+                    ]}
+                  >
+                    Archives
+                  </span>
+                </LinkButton>
+              </li>
+            )
+          }
           <li>
             <LinkButton
               href="/search/"
@@ -155,7 +190,7 @@ const { activeNav } = Astro.props;
   nav ul li:nth-last-child(2) {
     @apply col-span-1;
   }
-  nav a.active {
+  nav .active {
     @apply underline decoration-wavy decoration-2 underline-offset-4;
   }
   nav a.active svg {

src/config.ts

@@ -11,6 +11,7 @@ export const SITE: Site = {
   postPerIndex: 4,
   postPerPage: 3,
   scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
+  showArchives: true,
   editPost: {
     url: "https://github.com/satnaing/astro-paper/edit/main/src/content/blog",
     text: "Suggest Changes",

src/content/blog/how-to-configure-astropaper-theme.md

@@ -1,7 +1,7 @@
 ---
 author: Sat Naing
 pubDatetime: 2022-09-23T04:58:53Z
-modDatetime: 2024-01-15T13:05:56.066Z
+modDatetime: 2024-10-14T09:27:28.605Z
 title: How to configure AstroPaper theme
 slug: how-to-configure-astropaper-theme
 featured: true
@@ -33,6 +33,7 @@ export const SITE = {
   lightAndDarkMode: true,
   postPerPage: 3,
   scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
+  showArchives: true,
   editPost: {
     url: "https://github.com/satnaing/astro-paper/edit/main/src/content/blog",
     text: "Suggest Changes",
@@ -54,6 +55,7 @@ Here are SITE configuration options
 | `postPerIndex`        | The number of posts to be displayed at the home page under `Recent` section.                                                                                                                                                                                                                                                                       |
 | `postPerPage`         | You can specify how many posts will be displayed in each posts page. (eg: if you set SITE.postPerPage to 3, each page will only show 3 posts per page)                                                                                                                                                                                             |
 | `scheduledPostMargin` | In Production mode, posts with a future `pubDatetime` will not be visible. However, if a post's `pubDatetime` is within the next 15 minutes, it will be visible. You can set `scheduledPostMargin` if you don't like the default 15 minutes margin.                                                                                                |
+| `showArchives`        | Determines whether to display the `Archives` menu (positioned between the `About` and `Search` menus) and its corresponding page on the site. This option is set to `true` by default.                                                                                                                                                             |
 | `editPost`            | This option allows users to suggest changes to a blog post by providing an edit link under blog post titles. This feature can be disabled by removing it from the `SITE` config. You can also set `appendFilePath` to `true` to automatically append the file path of the post to the url, directing users to the specific post they wish to edit. |
 
 ## Configuring locale

src/pages/archives/index.astro

@@ -0,0 +1,74 @@
+---
+import { getCollection } from "astro:content";
+import Card from "@components/Card";
+import Footer from "@components/Footer.astro";
+import Header from "@components/Header.astro";
+import { SITE } from "@config";
+import Layout from "@layouts/Layout.astro";
+import Main from "@layouts/Main.astro";
+import getPostsByGroupCondition from "@utils/getPostsByGroupCondition";
+
+// Redirect to 404 page if `showArchives` config is false
+if (!SITE.showArchives) {
+  return Astro.redirect("/404");
+}
+
+const posts = await getCollection("blog", ({ data }) => !data.draft);
+
+const MonthMap: Record<string, string> = {
+  "1": "January",
+  "2": "February",
+  "3": "March",
+  "4": "April",
+  "5": "May",
+  "6": "June",
+  "7": "July",
+  "8": "August",
+  "9": "September",
+  "10": "October",
+  "11": "November",
+  "12": "December",
+};
+---
+
+<Layout title={`Archives | ${SITE.title}`}>
+  <Header activeNav="archives" />
+  <Main pageTitle="Archives" pageDesc="All the articles I've archived.">
+    {
+      Object.entries(
+        getPostsByGroupCondition(posts, post =>
+          post.data.pubDatetime.getFullYear()
+        )
+      )
+        .sort(([yearA], [yearB]) => Number(yearB) - Number(yearA))
+        .map(([year, yearGroup]) => (
+          <div>
+            <span class="text-2xl font-bold">{year}</span>
+            <sup class="text-sm">{yearGroup.length}</sup>
+            {Object.entries(
+              getPostsByGroupCondition(
+                yearGroup,
+                post => post.data.pubDatetime.getMonth() + 1
+              )
+            )
+              .sort(([monthA], [monthB]) => Number(monthB) - Number(monthA))
+              .map(([month, monthGroup]) => (
+                <div class="flex flex-col sm:flex-row">
+                  <div class="mt-6 min-w-36 text-lg sm:my-6">
+                    <span class="font-bold">{MonthMap[month]}</span>
+                    <sup class="text-xs">{monthGroup.length}</sup>
+                  </div>
+                  <ul>
+                    {monthGroup.map(({ data, slug }) => (
+                      <Card href={`/posts/${slug}`} frontmatter={data} />
+                    ))}
+                  </ul>
+                </div>
+              ))}
+          </div>
+        ))
+    }
+  </Main>
+
+  <Footer />
+</Layout>

src/types.ts

@@ -11,6 +11,7 @@ export type Site = {
   postPerIndex: number;
   postPerPage: number;
   scheduledPostMargin: number;
+  showArchives?: boolean;
   editPost?: {
     url?: URL["href"];
     text?: string;

src/utils/getPostsByGroupCondition.ts

@@ -0,0 +1,25 @@
+import type { CollectionEntry } from "astro:content";
+
+type GroupKey = string | number | symbol;
+
+interface GroupFunction<T> {
+  (item: T, index?: number): GroupKey;
+}
+
+const getPostsByGroupCondition = (
+  posts: CollectionEntry<"blog">[],
+  groupFunction: GroupFunction<CollectionEntry<"blog">>
+) => {
+  const result: Record<GroupKey, CollectionEntry<"blog">[]> = {};
+  for (let i = 0; i < posts.length; i++) {
+    const item = posts[i];
+    const groupKey = groupFunction(item, i);
+    if (!result[groupKey]) {
+      result[groupKey] = [];
+    }
+    result[groupKey].push(item);
+  }
+  return result;
+};
+
+export default getPostsByGroupCondition;

tailwind.config.cjs

@@ -54,6 +54,11 @@ module.exports = {
         },
         transparent: "transparent",
       },
+      stroke: {
+        skin: {
+          accent: withOpacity("--color-accent")
+        }
+      },
       fontFamily: {
         mono: ["IBM Plex Mono", "monospace"],
       },