feat: add archive view of posts

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;
   });

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,
 };

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 -----------------------

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>

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;
+}

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" %}

src/content/pages/tag.html

@@ -15,3 +15,4 @@ layout: "base"
             <a href="{{ post.url }}">{{ post.data.title }}</a>
         </li>
     {% endfor %}
+</ul>

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.