From 626547498145fd2ace763aa78c4d09c72451e1e2 Mon Sep 17 00:00:00 2001
From: Devin Haska <wonderfulfrog@users.noreply.github.com>
Date: Wed, 7 Feb 2024 20:02:59 -0800
Subject: [PATCH] feat: add archive view of posts

---
 config/collections/index.js            |  6 +++---
 config/filters/index.js                | 28 ++++++++++++++++++++++++++
 eleventy.config.js                     |  2 ++
 src/_includes/partials/posts.html      | 23 +++++++++++++++++++++
 src/assets/css/blocks/archive.css      | 10 +++++++++
 src/content/pages/posts.html           |  9 ++-------
 src/content/pages/tag.html             |  1 +
 src/content/posts/hello_world_again.md |  9 +++++++++
 8 files changed, 78 insertions(+), 10 deletions(-)
 create mode 100644 src/_includes/partials/posts.html
 create mode 100644 src/assets/css/blocks/archive.css
 create mode 100644 src/content/posts/hello_world_again.md

diff --git a/config/collections/index.js b/config/collections/index.js
index d1269db..5702324 100644
--- a/config/collections/index.js
+++ b/config/collections/index.js
@@ -32,9 +32,9 @@ const getPostsByCategory = (collection) => {
 
   const postsByCategory = {};
   categories.forEach((category) => {
-    const categoryPosts = posts.filter((post) =>
-      post.data.categories.includes(category),
-    );
+    const categoryPosts = posts.filter((post) => {
+      return post.data.categories.includes(category);
+    });
 
     postsByCategory[category] = categoryPosts;
   });
diff --git a/config/filters/index.js b/config/filters/index.js
index 668d251..cca819c 100644
--- a/config/filters/index.js
+++ b/config/filters/index.js
@@ -1,5 +1,6 @@
 const dayjs = require("dayjs");
 const utc = require("dayjs/plugin/utc");
+const advancedFormat = require("dayjs/plugin/advancedFormat");
 
 const postcss = require("postcss");
 const cssnano = require("cssnano");
@@ -8,6 +9,7 @@ const values = Object.values;
 const entries = Object.entries;
 
 dayjs.extend(utc);
+dayjs.extend(advancedFormat);
 
 const minifyCss = async (css) => {
   const output = await postcss([cssnano]).process(css, { from: undefined });
@@ -17,9 +19,35 @@ const minifyCss = async (css) => {
 
 const formatDate = (date, format) => dayjs.utc(date).format(format);
 
+const organizeByDate = (collection) => {
+  const collectionByDate = {};
+
+  collection.forEach((item) => {
+    const year = formatDate(item.date, "YYYY");
+    const month = formatDate(item.date, "MMMM");
+
+    if (!collectionByDate[year]) {
+      return (collectionByDate[year] = {
+        [month]: [item],
+      });
+    }
+
+    if (!collectionByDate[year][month]) {
+      return (collectionByDate[year][month] = [item]);
+    }
+
+    collectionByDate[year][month].push(item);
+  });
+
+  console.log(collectionByDate);
+
+  return collectionByDate;
+};
+
 module.exports = {
   entries,
   formatDate,
   minifyCss,
+  organizeByDate,
   values,
 };
diff --git a/eleventy.config.js b/eleventy.config.js
index ef8c6de..83d2bca 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -9,6 +9,7 @@ const {
   formatDate,
   minifyCss,
   values,
+  organizeByDate,
 } = require("./config/filters/index.js");
 const markdown = require("./config/plugins/markdown.js");
 const imageShortcode = require("./config/shortcodes/image.js");
@@ -29,6 +30,7 @@ module.exports = (eleventyConfig) => {
   eleventyConfig.addFilter("entries", entries);
   eleventyConfig.addFilter("formatDate", formatDate);
   eleventyConfig.addFilter("minifyCss", minifyCss);
+  eleventyConfig.addFilter("organizeByDate", organizeByDate);
   eleventyConfig.addFilter("values", values);
 
   // 	--------------------- Passthrough File Copy -----------------------
diff --git a/src/_includes/partials/posts.html b/src/_includes/partials/posts.html
new file mode 100644
index 0000000..1d36ac9
--- /dev/null
+++ b/src/_includes/partials/posts.html
@@ -0,0 +1,23 @@
+{% set postsByDate = posts | entries %}
+<section>
+    {% for postsGroupedByYear in postsByDate %}
+        {% set year = postsGroupedByYear | first %}
+        {% set postsGroupedByMonth = postsGroupedByYear | last | entries %}
+        {% for postsInMonth in postsGroupedByMonth %}
+            {% set isFirstMonthOfList = loop.index0 === 0 %}
+            {% set month = postsInMonth | first %}
+            <div class="[ flex ]">
+                {% if isFirstMonthOfList %}<h2>{{ year }}</h2>{% endif %}
+                <h2 class="[ archive-month ]">{{ month }}</h2>
+            </div>
+            {% set allPosts = postsInMonth | last %}
+            {% for post in allPosts %}
+                <div class="[ flex items-center justify-between ]">
+                    <a href="{{ post.url }}">{{ post.data.title }}</a>
+                    <div class="[ archive-divider ] [ mx-0.5 ]"></div>
+                    <div>{{ post.date | formatDate("Do") }}</div>
+                </div>
+            {% endfor %}
+        {% endfor %}
+    {% endfor %}
+</section>
diff --git a/src/assets/css/blocks/archive.css b/src/assets/css/blocks/archive.css
new file mode 100644
index 0000000..dc6d0fb
--- /dev/null
+++ b/src/assets/css/blocks/archive.css
@@ -0,0 +1,10 @@
+.archive-divider {
+  border-color: var(--color-bg-faded);
+  border-width: 1px;
+  border-style: dashed;
+  flex: 1;
+}
+
+.archive-month {
+  margin-left: auto;
+}
diff --git a/src/content/pages/posts.html b/src/content/pages/posts.html
index c504e68..18f69ee 100644
--- a/src/content/pages/posts.html
+++ b/src/content/pages/posts.html
@@ -3,14 +3,9 @@ permalink: /posts/index.html
 layout: "base"
 ---
 
+{% set posts = collections.posts | organizeByDate %}
 <h1>All posts</h1>
 <p>
     View all <a href="/tags">tags</a>
 </p>
-<ul>
-    {% for post in collections.posts %}
-        <li>
-            <a href={{ post.url }}>{{ post.data.title }}</a>
-        </li>
-    {% endfor %}
-</ul>
+{% include "partials/posts.html" %}
diff --git a/src/content/pages/tag.html b/src/content/pages/tag.html
index 36c20c5..a1367dd 100644
--- a/src/content/pages/tag.html
+++ b/src/content/pages/tag.html
@@ -15,3 +15,4 @@ layout: "base"
             <a href="{{ post.url }}">{{ post.data.title }}</a>
         </li>
     {% endfor %}
+</ul>
diff --git a/src/content/posts/hello_world_again.md b/src/content/posts/hello_world_again.md
new file mode 100644
index 0000000..1d9698a
--- /dev/null
+++ b/src/content/posts/hello_world_again.md
@@ -0,0 +1,9 @@
+---
+title: Hello world again
+date: 2017-02-01
+categories:
+- test
+- email
+---
+
+This is a test post.