feat: various style improvements to catalogue

config/filters/index.js

@@ -4,6 +4,7 @@ const advancedFormat = require("dayjs/plugin/advancedFormat");
 
 const postcss = require("postcss");
 const cssnano = require("cssnano");
+const pluralizeBase = require("pluralize");
 
 const keys = Object.keys;
 const values = Object.values;
@@ -36,10 +37,6 @@ const organizeByDate = (collection) => {
   return collectionByDate;
 };
 
-const filterByCategory = (collection, category) => {
-  return collection.filter((item) => item.data.categories.includes(category));
-};
-
 const allTags = (collection, ignore = []) => {
   const tagSet = new Set(collection.flatMap((item) => item.data.tags));
 
@@ -77,15 +74,19 @@ const filter = (collection, filters = []) => {
   return collection.filter((item) => !filters.includes(item));
 };
 
+const pluralize = (string, count = 0) => {
+  return pluralizeBase(string, count);
+};
+
 module.exports = {
+  allTagCounts,
+  allTags,
   entries,
-  filterByCategory,
+  filter,
   formatDate,
   keys,
   minifyCss,
   organizeByDate,
+  pluralize,
   values,
-  allTags,
-  allTagCounts,
-  filter,
 };

eleventy.config.js

@@ -12,6 +12,7 @@ const {
   keys,
   allTagCounts,
   filter,
+  pluralize,
 } = require("./config/filters/index.js");
 const markdown = require("./config/plugins/markdown.js");
 const imageShortcode = require("./config/shortcodes/image.js");
@@ -37,6 +38,7 @@ module.exports = (eleventyConfig) => {
   eleventyConfig.addFilter("minifyCss", minifyCss);
   eleventyConfig.addFilter("organizeByDate", organizeByDate);
   eleventyConfig.addFilter("values", values);
+  eleventyConfig.addFilter("pluralize", pluralize);
 
   // 	--------------------- Passthrough File Copy -----------------------
   ["src/assets/fonts/", "src/assets/images"].forEach((path) =>

package-lock.json

@@ -22,6 +22,7 @@
         "markdown-it-anchor": "^8.6.7",
         "markdown-it-footnote": "^4.0.0",
         "markdown-it-prism": "^2.3.0",
+        "pluralize": "^8.0.0",
         "postcss": "^8.4.33",
         "postcss-import": "^16.0.0",
         "postcss-import-ext-glob": "^2.1.1",
@@ -3498,6 +3499,15 @@
         "semver-compare": "^1.0.0"
       }
     },
+    "node_modules/pluralize": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
+      "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.35",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
@@ -7696,6 +7706,12 @@
         "semver-compare": "^1.0.0"
       }
     },
+    "pluralize": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
+      "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==",
+      "dev": true
+    },
     "postcss": {
       "version": "8.4.35",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",

package.json

@@ -24,6 +24,7 @@
     "markdown-it-anchor": "^8.6.7",
     "markdown-it-footnote": "^4.0.0",
     "markdown-it-prism": "^2.3.0",
+    "pluralize": "^8.0.0",
     "postcss": "^8.4.33",
     "postcss-import": "^16.0.0",
     "postcss-import-ext-glob": "^2.1.1",

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