feat: various style improvements to catalogue

src/_includes/partials/archive.html

@@ -3,7 +3,7 @@
 <section class="[ archive ]">
     {% for year in years %}
         {% set itemsInYear = itemsByYear[year] %}
-        <div class="[ flex mt-1.5 mb-0.5 ]">
+        <div class="[ flex mt-2 mb-0.5 ]">
             <h2>{{ year }}</h2>
         </div>
         <div class="[ items ] [ flex-col gap-0.25 ]">

src/_includes/partials/catalogue.html

@@ -3,16 +3,16 @@
 <section class="[ archive ]">
     {% for year in years %}
         {% set itemsInYear = itemsByYear[year] %}
-        <div class="[ flex mt-1.5 mb-0.5 ]">
+        <div class="[ flex mt-2 mb-0.5 ]">
             <h2>{{ year }}</h2>
         </div>
         <div class="[ items ] [ flex-col gap-0.25 ]">
             {% for item in itemsInYear %}
                 {% set type = item.data.tags[1] %}
-                <div class="[ flex items-center justify-between ]">
+                <div class="[ flex items-center justify-between gap-0.5 ]">
                     <a href="{{ item.url }}">{{ item.data.title }}</a>
-                    <hr class="[ archive-divider ] [ mx-0.5 ]" />
-                    <p class="[ px-0.5 ]">{{ type }}</p>
+                    <hr class="[ archive-divider ]" />
+                    <p class="[ catalogue-type ] [ px-0.5 bg-surface text-primary ]">{{ type }}</p>
                     <p class="[ archive-date ]">{{ item.date | formatDate("MM/DD") }}</p>
                 </div>
             {% endfor %}

src/assets/css/blocks/catalogue.css

@@ -1,3 +1,8 @@
 .catalogue .meta img {
   inline-size: 10rem;
 }
+
+.catalogue-type {
+  font-size: 0.8rem;
+  border-radius: 0.5rem;
+}

src/content/catalogue/books/books.json

@@ -1,5 +1,5 @@
 {
   "layout": "catalogue",
   "tags": "book",
-  "permalink": "books/{{ page.fileSlug }}/index.html"
+  "permalink": "catalogue/books/{{ page.fileSlug }}/index.html"
 }

src/content/catalogue/catalogueType.html

@@ -0,0 +1,26 @@
+---
+layout: base
+pagination:
+    data: collections.catalogueByType
+    size: 1
+    alias: type
+    filter:
+        - catalogue
+eleventyExcludeFromCollections: true
+permalink: /catalogue/{{ type | pluralize | slugify }}/index.html
+eleventyComputed:
+    title: Catalogue - {{ type | pluralize | capitalize }}
+---
+
+<h1>{{ type | pluralize | capitalize }}</h1>
+{% set catalogueTypes = collections.catalogueByType | keys %}
+<ul class="[ flex list-none gap-0.5 p-0 ]">
+    {% for type in catalogueTypes %}
+        <li>
+            <a class="[ pill ] [ flex px-1 py-0.5 gap-0.5 ]"
+               href="/catalogue/{{ type | pluralize }}">{{ type | pluralize }}<span class="[ pill-count ]">{{ collections.catalogueByType[ type ] | length }}</span></a>
+        </li>
+    {% endfor %}
+</ul>
+{% set items = collections.catalogueByType[ type ] %}
+{% include "partials/catalogue.html" %}

src/content/catalogue/comics/comics.json

@@ -1,5 +1,5 @@
 {
   "layout": "catalogue",
   "tags": "comic",
-  "permalink": "comics/{{ page.fileSlug }}/index.html"
+  "permalink": "catalogue/comics/{{ page.fileSlug }}/index.html"
 }

src/content/catalogue/games/games.json

@@ -1,5 +1,5 @@
 {
   "layout": "catalogue",
   "tags": "game",
-  "permalink": "games/{{ page.fileSlug }}/index.html"
+  "permalink": "catalogue/games/{{ page.fileSlug }}/index.html"
 }

src/content/catalogue/podcasts/podcasts.json

@@ -1,5 +1,5 @@
 {
   "layout": "catalogue",
   "tags": "podcast",
-  "permalink": "podcasts/{{ page.fileSlug }}/index.html"
+  "permalink": "catalogue/podcasts/{{ page.fileSlug }}/index.html"
 }

src/content/pages/catalogue.html

@@ -6,4 +6,13 @@ title: Catalogue
 
 <h1>Catalogue</h1>
 {% set items = collections.catalogue | reverse %}
+{% set catalogueTypes = collections.catalogueByType | keys %}
+<ul class="[ flex list-none gap-0.5 p-0 ]">
+    {% for type in catalogueTypes %}
+        <li>
+            <a class="[ pill ] [ flex px-1 py-0.5 gap-0.5 ]"
+               href="/catalogue/{{ type | pluralize }}">{{ type | pluralize }}<span class="[ pill-count ]">{{ collections.catalogueByType[ type ] | length }}</span></a>
+        </li>
+    {% endfor %}
+</ul>
 {% include "partials/catalogue.html" %}