feat: update catalogue layout

src/_includes/macros/catalogue.njk

@@ -0,0 +1,14 @@
+{% macro list(posts) %}
+<ul class="[ catalogue-list ] [ flow list-none m-0 p-0 flow-space-0.5 ]">
+    {% for post in posts %}
+        <li class="[ catalogue-list-item line-height-l ]">
+                <div>
+                    <a href="{{ post.url }}">{{ post.data.title }}</a>
+                </div>
+                <div class="[ font-size-s line-height-s flex items-center ]"><p class="[ bg-surface text-primary p-0.5 radius-0.25 ]">{{ post.data.tags[1] }}</p></div>
+                <div class="[ text-fadeText line-height-m flex items-center ]">{{ post.data.date | formatDate("MM/DD") }}</div>
+        </li>
+    {% endfor %}
+</ul>
+{% endmacro %}
+

src/_includes/macros/posts.njk

@@ -11,4 +11,3 @@
     {% endfor %}
 </ul>
 {% endmacro %}
-

src/catalogue-type.html

@@ -12,6 +12,7 @@ eleventyComputed:
     title: Catalogue - {{ type | pluralize | capitalize }}
 ---
 
+{% from "macros/catalogue.njk" import list %}
 <h1>{{ type | pluralize | capitalize }}</h1>
 {% set catalogueTypes = collections.catalogueByType | keys %}
 <ul class="[ cluster list-none p-0 ]" style="--gap: var(--spacing-0\.5)">
@@ -22,5 +23,12 @@ eleventyComputed:
         </li>
     {% endfor %}
 </ul>
-{% set items = collections.catalogueByType[ type ] | reverse %}
+{% set itemsByYear = collections.catalogueByType[type] | organizeByDate %}
-{% include "partials/catalogue.html" %}
+{% set years = itemsByYear | keys | sort("desc") %}
+<section class="[ flow ]">
+    {% for year in years %}
+        {% set itemsInYear = itemsByYear[year] %}
+        <h2>{{ year }}</h2>
+        <div class="[ items ] [ flex-col gap-0.25 ]">{{ list(itemsInYear) }}</div>
+    {% endfor %}
+</section>

src/catalogue.html

@@ -4,9 +4,9 @@ permalink: /catalogue/index.html
 title: Catalogue
 ---
 
+{% from "macros/catalogue.njk" import list %}
 <h1>Catalogue</h1>
 <p>A collection of my thoughts on various forms of media that I consume.</p>
-{% set items = collections.catalogue %}
 {% set catalogueTypes = collections.catalogueByType | keys %}
 <ul class="[ cluster list-none p-0 ]" style="--gap: 0.5rem">
     {% for type in catalogueTypes %}
@@ -16,4 +16,13 @@ title: Catalogue
         </li>
     {% endfor %}
 </ul>
-{% include "partials/catalogue.html" %}
+{% set itemsByYear = collections.catalogue | organizeByDate %}
+{% set years = itemsByYear | keys | sort("desc") %}
+<section class="[ flow ]">
+    {% for year in years %}
+        {% set itemsInYear = itemsByYear[year] %}
+        <h2>{{ year }}</h2>
+        <div class="[ items ] [ flex-col gap-0.25 ]">{{ list(itemsInYear) }}</div>
+        <div>{{ list(itemsInYear) }}</div>
+    {% endfor %}
+</section>

src/css/blocks/catalogue.css

@@ -1,6 +1,11 @@
-.catalogue-type {
+.catalogue-list-item {
-  font-size: 0.8rem;
+  display: grid;
-  border-radius: 0.5rem;
+  grid-template-columns: 1fr auto auto;
+  gap: var(--spacing-1);
+}
+
+.catalogue-list-item a {
+  display: block;
 }
 
 .catalogue source,