From 28baa94b93171e572ed5b8702f7e925577080010 Mon Sep 17 00:00:00 2001
From: Devin Haska <wonderfulfrog@users.noreply.github.com>
Date: Mon, 19 Feb 2024 11:52:18 -0800
Subject: [PATCH] feat: add reusable macros

---
 src/_includes/macros/date.njk |  5 +++++
 src/_includes/macros/tags.njk |  7 +++++++
 src/_layouts/book.html        | 13 ++++---------
 src/_layouts/game.html        | 11 ++---------
 src/_layouts/post.html        |  5 ++---
 5 files changed, 20 insertions(+), 21 deletions(-)
 create mode 100644 src/_includes/macros/date.njk
 create mode 100644 src/_includes/macros/tags.njk

diff --git a/src/_includes/macros/date.njk b/src/_includes/macros/date.njk
new file mode 100644
index 0000000..648197a
--- /dev/null
+++ b/src/_includes/macros/date.njk
@@ -0,0 +1,5 @@
+{% macro format(dateString) %}
+    <time class="[ date ] [ flex items-center gap-0.5 my-1 ]" datetime="{{ date }}">
+        {% include "svgs/calendar.svg" %}{{ dateString | formatDate("MMMM Do YYYY") }}
+    </time>
+{% endmacro %}
diff --git a/src/_includes/macros/tags.njk b/src/_includes/macros/tags.njk
new file mode 100644
index 0000000..1d74679
--- /dev/null
+++ b/src/_includes/macros/tags.njk
@@ -0,0 +1,7 @@
+{% macro list(tags) %}
+            {% if tags | length > 0 %}
+                <ul class="[ flex list-none p-0 gap-0.5 mb-0 ]">
+                    {% for tag in tags %}<li class="[ bg-surface radius-1 px-1 py-0.5 ]">{{ tag }}</li>{% endfor %}
+                </ul>
+            {% endif %}
+{% endmacro %}
diff --git a/src/_layouts/book.html b/src/_layouts/book.html
index c5240a4..0756a4e 100644
--- a/src/_layouts/book.html
+++ b/src/_layouts/book.html
@@ -4,10 +4,8 @@ layout: base
 
 {% set filteredTags = tags | filterCatalogueTags %}
 <article class="[ catalogue ] [ flow ]">
-    <time class="[ date ] [ flex items-center gap-0.5 my-1 ]"
-          datetime="{{ date }}">
-        {% include "svgs/calendar.svg" %}
-    {{ date | formatDate("MMMM Do YYYY") }}</time>
+    {% from "macros/date.njk" import format %}
+    {{ format(date) }}
     <section class="[ catalogue-meta ] [ gap-1 mb-1 ]">
         {% if image %}
             {% image image, "", "" %}
@@ -16,11 +14,8 @@ layout: base
             <h1>{{ title }}</h1>
             {% if subtitle %}<h3 class="[ text-fadeText my-0.5 ]">{{ subtitle }}</h3>{% endif %}
             {% if author %}<span class="[ text-fadeText ]">by</span> {{ author }}{% endif %}
-            {% if filteredTags | length > 0 %}
-                <ul class="[ flex list-none p-0 gap-0.5 ]">
-                    {% for tag in filteredTags %}<li class="[ bg-surface radius-1 px-1 py-0.5 ]">{{ tag }}</li>{% endfor %}
-                </ul>
-            {% endif %}
+            {% import "macros/tags.njk" as tags %}
+            {{ tags.list(filteredTags) }}
         </div>
     </section>
     {{ content | safe }}
diff --git a/src/_layouts/game.html b/src/_layouts/game.html
index 8669080..06bb8b8 100644
--- a/src/_layouts/game.html
+++ b/src/_layouts/game.html
@@ -4,10 +4,8 @@ layout: base
 
 {% set filteredTags = tags | filterCatalogueTags %}
 <article class="[ catalogue ] [ flow ]">
-    <time class="[ date ] [ flex items-center gap-0.5 my-1 ]"
-          datetime="{{ date }}">
-        {% include "svgs/calendar.svg" %}
-    {{ date | formatDate("MMMM Do YYYY") }}</time>
+    {% from "macros/date.njk" import format %}
+    {{ format(date) }}
     <section class="[ catalogue-meta ] [ gap-1 mb-1 ]">
         {% if image %}
             {% image image, "", "" %}
@@ -15,11 +13,6 @@ layout: base
         <div>
             <h1>{{ title }}</h1>
             <h2 class="[ text-fadeText my-0.5 ]">{{ year }}</h2>
-            {% if filteredTags | length > 0 %}
-                <ul class="[ flex list-none p-0 gap-0.5 mb-0 ]">
-                    {% for tag in filteredTags %}<li class="[ bg-surface radius-1 px-1 py-0.5 ]">{{ tag }}</li>{% endfor %}
-                </ul>
-            {% endif %}
         </div>
     </section>
     {{ content | safe }}
diff --git a/src/_layouts/post.html b/src/_layouts/post.html
index 7c31e5b..f49b52d 100644
--- a/src/_layouts/post.html
+++ b/src/_layouts/post.html
@@ -4,9 +4,8 @@ layout: base
 
 <article class="[ flow ]">
     <header class="[ flow ]" style="--flow-space: 1rem">
-        <time class="[ date ][ flex items-center gap-0.5 ]" datetime="{{ date }}">
-            {% include "svgs/calendar.svg" %}
-        {{ date | formatDate("MMMM D, YYYY") }}</time>
+        {% from "macros/date.njk" import format %}
+        {{ format(date) }}
         <h1>{{ title }}</h1>
         <ul class="[ categories ] [ flex gap-1 list-none p-0 ]">
             {% for tag in tags | filter(["post"]) %}