Group thoughts by year

src/components/ThoughtCard.astro

@@ -31,7 +31,7 @@ const {
       >
         {format(date, "MMMM dd, yyyy")}
       </time>
-      &middot;
+      <!-- &middot; -->
       <ShowViews slug={slug} />
     </div>
     <ThoughtDescription description={title} slug={slug} />

src/content/thoughts/remove-file-from-git-history.mdx → src/content/micro/remove-file-from-git-history.mdx

@@ -1,9 +1,7 @@
 ---
 title: "How to remove file from Git history"
-pubDate: 2024-01-08
+date: 2024-01-08
 published: true
-author: "Bhekani Khumalo"
-tags: ["git"]
 ---
 
 I have googled this enough times for me to keep it in my own notes.

src/pages/thoughts/index.astro

@@ -1,34 +1,58 @@
 ---
-import { getCollection } from "astro:content";
-import AllTags from "../../components/AllTags.astro";
-import LatestThoughtCard from "../../components/LatestThoughtCard.astro";
-import MainContainer from "../../components/MainContainer.astro";
-import ThoughtCard from "../../components/ThoughtCard.astro";
-import BaseLayout from "../../layouts/BaseLayout.astro";
+import { getCollection, type CollectionEntry } from "astro:content"
+import AllTags from "../../components/AllTags.astro"
+import MainContainer from "../../components/MainContainer.astro"
+import ThoughtCard from "../../components/ThoughtCard.astro"
+import BaseLayout from "../../layouts/BaseLayout.astro"
 
-const allThoughts = await getCollection("thoughts");
+const allThoughts = await getCollection("thoughts")
 const sortedThoughts = allThoughts.sort(
-  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
-);
-const firstThought = sortedThoughts.shift();
-const pageTitle = "Thoughts";
+  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
+)
+// const firstThought = sortedThoughts.shift()
+
+const yearToThoughts = sortedThoughts.reduce<
+  Record<number, CollectionEntry<"thoughts">[]>
+>((acc, thought) => {
+  const year = new Date(thought.data.pubDate).getFullYear()
+  if (!acc[year]) {
+    acc[year] = []
+  }
+  acc[year].push(thought)
+  return acc
+}, {})
+const pageTitle = "Thoughts"
 ---
 
 <BaseLayout pageTitle={pageTitle}>
   <MainContainer>
     <div class="w-full flex justify-center mb-8 font-bold">
       <a
-        class="px-3 p-2 text-[hsl(var(--foreground))] border-b-[1px] border-l-[1px] border-r-[1px] border-[hsl(var(--muted))]"
+        class="px-3 p-2 text- border-b-[1px] border-l-[1px] border-r-[1px] border-[hsl(var(--muted))]"
         href="/rss.xml"
       >
         Subscribe to RSS
       </a>
     </div>
 
     <AllTags title="Filter by tag" />
-    {firstThought && <LatestThoughtCard thought={firstThought} />}
-    <div class="grid gap-4">
-      {sortedThoughts.map((thought) => <ThoughtCard thought={thought} />)}
-    </div>
+    <!-- {firstThought && <LatestThoughtCard thought={firstThought} />} -->
+
+    {
+      Object.entries(yearToThoughts)
+        .sort((a, b) => Number(b[0]) - Number(a[0]))
+        .map(([year, thoughts]) => (
+          <>
+            <h2 class="text-2xl mb-4 border-b-2 mt-8 pb-2">
+              {year} ({thoughts.length})
+            </h2>
+            <div class="grid gap-4">
+              {thoughts.map((thought) => (
+                <ThoughtCard thought={thought} />
+              ))}
+            </div>
+          </>
+        ))
+    }
   </MainContainer>
 </BaseLayout>