feat: add reusable macros

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

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

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 ]"
+    {% from "macros/date.njk" import format %}
-          datetime="{{ date }}">
+    {{ format(date) }}
-        {% include "svgs/calendar.svg" %}
-    {{ date | formatDate("MMMM Do YYYY") }}</time>
     <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 %}
+            {% import "macros/tags.njk" as tags %}
-                <ul class="[ flex list-none p-0 gap-0.5 ]">
+            {{ tags.list(filteredTags) }}
-                    {% for tag in filteredTags %}<li class="[ bg-surface radius-1 px-1 py-0.5 ]">{{ tag }}</li>{% endfor %}
-                </ul>
-            {% endif %}
         </div>
     </section>
     {{ content | safe }}

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 ]"
+    {% from "macros/date.njk" import format %}
-          datetime="{{ date }}">
+    {{ format(date) }}
-        {% include "svgs/calendar.svg" %}
-    {{ date | formatDate("MMMM Do YYYY") }}</time>
     <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 }}

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 }}">
+        {% from "macros/date.njk" import format %}
-            {% include "svgs/calendar.svg" %}
+        {{ format(date) }}
-        {{ date | formatDate("MMMM D, YYYY") }}</time>
         <h1>{{ title }}</h1>
         <ul class="[ categories ] [ flex gap-1 list-none p-0 ]">
             {% for tag in tags | filter(["post"]) %}