From 0b9253fb02fc4e11887437db9ac8990bee6b978a Mon Sep 17 00:00:00 2001
From: Devin Haska <wonderfulfrog@users.noreply.github.com>
Date: Thu, 22 Feb 2024 10:07:35 -0800
Subject: [PATCH] fix: update tag lists to use cluster layout

---
 src/_includes/macros/tags.njk            | 4 ++--
 src/_layouts/book.html                   | 2 --
 src/_layouts/game.html                   | 2 --
 src/_layouts/post.html                   | 2 +-
 src/content/catalogue/catalogueType.html | 2 +-
 src/content/pages/catalogue.html         | 2 +-
 src/content/pages/tags.html              | 2 +-
 7 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/_includes/macros/tags.njk b/src/_includes/macros/tags.njk
index 1d74679..4aa16eb 100644
--- a/src/_includes/macros/tags.njk
+++ b/src/_includes/macros/tags.njk
@@ -1,6 +1,6 @@
-{% macro list(tags) %}
+{% macro pills(tags) %}
             {% if tags | length > 0 %}
-                <ul class="[ flex list-none p-0 gap-0.5 mb-0 ]">
+                <ul class="[ cluster list-none p-0 mb-0 ]" style="--gap: 0.5rem">
                     {% for tag in tags %}<li class="[ bg-surface radius-1 px-1 py-0.5 ]">{{ tag }}</li>{% endfor %}
                 </ul>
             {% endif %}
diff --git a/src/_layouts/book.html b/src/_layouts/book.html
index 2299b11..b08cf13 100644
--- a/src/_layouts/book.html
+++ b/src/_layouts/book.html
@@ -17,8 +17,6 @@ layout: base
                 <span class="[ text-fadeText ]">by</span> {{ author }}
             </p>
         {% endif %}
-        {% import "macros/tags.njk" as tags %}
-        {{ tags.list(filteredTags) }}
     </section>
     <hr class="[ my-3 ]" />
     {{ content | safe }}
diff --git a/src/_layouts/game.html b/src/_layouts/game.html
index f5d4470..cf2e280 100644
--- a/src/_layouts/game.html
+++ b/src/_layouts/game.html
@@ -12,8 +12,6 @@ layout: base
         {% endif %}
         <h1>{{ title }}</h1>
         <h2 class="[ text-fadeText my-0.5 ]">{{ year }}</h2>
-        {% import "macros/tags.njk" as tags %}
-        {{ tags.list(filteredTags) }}
     </section>
     <hr class="[ my-3 ]" />
     {{ content | safe }}
diff --git a/src/_layouts/post.html b/src/_layouts/post.html
index f49b52d..1c9dbb8 100644
--- a/src/_layouts/post.html
+++ b/src/_layouts/post.html
@@ -7,7 +7,7 @@ layout: base
         {% from "macros/date.njk" import format %}
         {{ format(date) }}
         <h1>{{ title }}</h1>
-        <ul class="[ categories ] [ flex gap-1 list-none p-0 ]">
+        <ul class="[ categories ] [ cluster list-none p-0 ]">
             {% for tag in tags | filter(["post"]) %}
                 <li>
                     <a class="[ flex ]" href="/tags/{{ tag | slugify }}">{{ tag }}</a>
diff --git a/src/content/catalogue/catalogueType.html b/src/content/catalogue/catalogueType.html
index 0a4e789..f1ba78c 100644
--- a/src/content/catalogue/catalogueType.html
+++ b/src/content/catalogue/catalogueType.html
@@ -14,7 +14,7 @@ eleventyComputed:
 
 <h1>{{ type | pluralize | capitalize }}</h1>
 {% set catalogueTypes = collections.catalogueByType | keys %}
-<ul class="[ flex list-none gap-0.5 p-0 ]">
+<ul class="[ cluster list-none p-0 ]" style="--gap: var(--spacing-0\.5)">
     {% for type in catalogueTypes %}
         <li>
             <a class="[ pill ] [ flex px-1 py-0.5 gap-0.5 ]"
diff --git a/src/content/pages/catalogue.html b/src/content/pages/catalogue.html
index 99e6801..fe0da8b 100644
--- a/src/content/pages/catalogue.html
+++ b/src/content/pages/catalogue.html
@@ -8,7 +8,7 @@ title: Catalogue
 <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="[ flex list-none gap-0.5 p-0 ]">
+<ul class="[ cluster list-none p-0 ]" style="--gap: 0.5rem">
     {% for type in catalogueTypes %}
         <li>
             <a class="[ pill ] [ flex px-1 py-0.5 gap-0.5 ]"
diff --git a/src/content/pages/tags.html b/src/content/pages/tags.html
index 0561993..c76a662 100644
--- a/src/content/pages/tags.html
+++ b/src/content/pages/tags.html
@@ -7,7 +7,7 @@ title: All tags
 {% set tags = collections.post | allTagCounts %}
 <section class="[ flow ]">
     <h1>{{ title }}</h1>
-    <ol class="[ flex flex-wrap gap-0.5 list-none p-0 mb-0 ]">
+    <ol class="[ cluster list-none p-0 ]" style="--gap: var(--spacing-0\.5)">
         {% for tag in tags %}
             <li>
                 <a href="/tags/{{ tag.tag | slugify }}"