feat: reorg layouts and pages

src/_includes/macros/date.njk

@@ -1,5 +1,5 @@
 {% macro format(dateString) %}
-    <time class="[ date ] [ flex items-center gap-0.5 my-1 ]" datetime="{{ date }}">
+    <time class="[ date ] [ flex items-center gap-0.5 ]" datetime="{{ date }}">
         {% include "svgs/calendar.svg" %}{{ dateString | formatDate("MMMM Do YYYY") }}
     </time>
 {% endmacro %}

src/_layouts/book.html

@@ -1,23 +1,7 @@
 ---
-layout: base
+layout: "catalogue-item"
+eleventyComputed:
+    tertiary: "<p> <span class=\"[ text-fadeText ]\">by</span> {{ author }}</p>"
 ---
 
-{% set filteredTags = tags | filterCatalogueTags %}
+{{ content | safe }}
-<article class="[ catalogue ] [ flow ]">
-    {% from "macros/date.njk" import format %}
-    {{ format(date) }}
-    <section class="[ catalogue-meta ] [ flow ]">
-        {% if image %}
-            {% image image, "", "" %}
-        {% endif %}
-        <h1>{{ title }}</h1>
-        {% if subtitle %}<h3 class="[ text-fadeText my-0.5 ]">{{ subtitle }}</h3>{% endif %}
-        {% if author %}
-            <p>
-                <span class="[ text-fadeText ]">by</span> {{ author }}
-            </p>
-        {% endif %}
-    </section>
-    <hr class="[ my-3 ]" />
-    {{ content | safe }}
-</article>

src/_layouts/catalogue-item.html

@@ -0,0 +1,30 @@
+---
+layout: base
+imageAlt: ""
+imageCaption: ""
+---
+
+{% set filteredTags = tags | filterCatalogueTags %}
+<article class="[ catalogue ] [ flow ]">
+    <div style="--flow-space: 2em">
+        {% block image %}
+            {% if image %}
+                {% image image, imageAlt, imageCaption %}
+            {% endif %}
+        {% endblock %}
+    </div>
+    <section class="[ catalogue-meta ] [ flow ]">
+        {% block title %}<h1>{{ title }}</h1>{% endblock %}
+        {% block subtitle %}<h2 class="[ text-fadeText ]" style="--flow-space: 0.25em">{{ subtitle }}</h2>{% endblock %}
+        {{ tertiary | safe }}
+        {% if filteredTags | length > 0 %}
+            <ul class="[ categories list-none p-0 ] [ cluster justify-center ]">
+                {% for tag in filteredTags %}<li class="[ flex gap-0.25 ]">{{ tag }}</li>{% endfor %}
+            </ul>
+        {% endif %}
+    </section>
+    <hr class="[ my-1 ]" />
+    {% from "macros/date.njk" import format %}
+    {{ format(date) }}
+    {% block content %}{{ content | safe }}{% endblock %}
+</article>

src/_layouts/catalogue.html

@@ -1,16 +1,19 @@
 ---
 layout: base
+permalink: /catalogue/index.html
+title: Catalogue
 ---
 
-<article class="[ catalogue ] [ flow ]">
+<h1>Catalogue</h1>
-    <section class="[ catalogue-meta ] [ gap-1 mb-1 ]">
+<p>A collection of my thoughts on various forms of media that I consume.</p>
-        {% if image %}
+{% set items = collections.catalogue %}
-            {% image image, "", "" %}
+{% set catalogueTypes = collections.catalogueByType | keys %}
-        {% endif %}
+<ul class="[ cluster list-none p-0 ]" style="--gap: 0.5rem">
-        <div>
+    {% for type in catalogueTypes %}
-            <h1>{{ title }}</h1>
+        <li>
-            <h2 class="[ text-fadeText ]">{{ subtitle }}</h2>
+            <a class="[ pill ] [ flex px-1 py-0.5 gap-0.5 ]"
-        </div>
+               href="/catalogue/{{ type | pluralize }}">{{ type | pluralize }}<span class="[ pill-count ]">{{ collections.catalogueByType[ type ] | length }}</span></a>
-    </section>
+        </li>
-    {{ content | safe }}
+    {% endfor %}
-</article>
+</ul>
+{% include "partials/catalogue.html" %}

src/_layouts/comic.html

@@ -0,0 +1,7 @@
+---
+layout: "catalogue-item"
+eleventyComputed:
+    subtitle: "{{ author }} ({{ year }})"
+---
+
+{{ content | safe }}

src/_layouts/game.html

@@ -1,18 +1,7 @@
 ---
-layout: base
+layout: "catalogue-item"
+eleventyComputed:
+    subtitle: "{{ year }}"
 ---
 
-{% set filteredTags = tags | filterCatalogueTags %}
+{{ content | safe }}
-<article class="[ catalogue ] [ flow ]">
-    {% from "macros/date.njk" import format %}
-    {{ format(date) }}
-    <section class="[ catalogue-meta ] [ flow ]">
-        {% if image %}
-            {% image image, "", "" %}
-        {% endif %}
-        <h1>{{ title }}</h1>
-        <h2 class="[ text-fadeText my-0.5 ]">{{ year }}</h2>
-    </section>
-    <hr class="[ my-3 ]" />
-    {{ content | safe }}
-</article>

src/_layouts/podcast.html

@@ -1,23 +1,11 @@
 ---
-layout: base
+layout: "catalogue-item"
 ---
 
-<article class="[ catalogue ] [ flow ]">
+{{ content | safe }}
-    {% from "macros/date.njk" import format %}
+<a href="{{ url }}"
-    {{ format(date) }}
-    <section class="[ catalogue-meta ] [ flow ]">
-        {% if image %}
-            {% image image, "", "" %}
-        {% endif %}
-        <h1>{{ title }}</h1>
-        {% if subtitle %}<h2 class="[ text-fadeText ]">{{ subtitle }}</h2>{% endif %}
-    </section>
-    <hr class="[ my-3 ]" />
-    {{ content | safe }}
-    <a href="{{ url }}"
    class="[ flex mt-1 items-center gap-0.5 ]"
    target="_blank"
    rel="external noreferrer noopener">
     {% include "svgs/link.svg" %}
-    Listen to the podcast</a>
+Listen to the podcast</a>
-</article>

src/_layouts/post.html

@@ -9,8 +9,8 @@ layout: base
         <h1>{{ title }}</h1>
         <ul class="[ categories ] [ cluster list-none p-0 ]">
             {% for tag in tags | filter(["post"]) %}
-                <li>
+                <li class="[ flex gap-0.25 ]">
-                    <a class="[ flex ]" href="/tags/{{ tag | slugify }}">{{ tag }}</a>
+                    <a href="/tags/{{ tag | slugify }}">{{ tag }}</a>
                 </li>
             {% endfor %}
         </ul>

src/content/catalogue/books/victoria-ortiz-dissenter-on-the-bench.md

@@ -1,5 +1,6 @@
 ---
 title: Dissenter on the Bench
+subtitle: Ruth Bader Ginsburg's Life & Work
 author: Victoria Ortiz
 isbn: 978054497364
 rating: 4

src/content/catalogue/catalogue.json

@@ -1,3 +1,5 @@
 {
-  "tags": "catalogue"
+  "layout": "catalogue",
+  "tags": "catalogue",
+  "permalink": "catalogue/index.html"
 }

src/content/catalogue/comics/comics.json

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

src/content/catalogue/comics/monstress-image-1.md

@@ -1,7 +1,7 @@
 ---
 title: "Monstress: Awakening"
 publisher: Image Comics
-subtitle: Majorie Liu, Sana Takeda
+author: Majorie Liu, Sana Takeda
 volume: 1
 year: 2017
 image: https://cdn.wonderfulfrog.com/monstress-vol-1.jpeg

src/content/catalogue/comics/monstress-the-blood-image-comics-2.md

@@ -1,7 +1,7 @@
 ---
 title: "Monstress: The Blood"
 publisher: Image Comics
-subtitle: Majorie Lui, Sana Takeda
+author: Majorie Lui, Sana Takeda
 volume: 2
 year: 2017
 image: https://cdn.wonderfulfrog.com/monstress-vol-2-tp_77ea1f170a.jpg

src/content/catalogue/comics/the-monster-sisters-orca-books.md

@@ -1,7 +1,7 @@
 ---
 title: "The Monster Sisters"
 publisher: "Orca Books"
-subtitle: "Gareth Gaudin"
+author: "Gareth Gaudin"
 year: 2021
 isbn: 9781459822290
 rating: 4

src/content/catalogue/games/her-story.md

@@ -1,6 +1,6 @@
 ---
 title: Her Story
-subtitle: PC
+platform: PC
 date: 2024-01-07
 image: https://cdn.wonderfulfrog.com/Her_Story_store_art.jpg
 tags: ["pc", "narrative", "simulator"]

src/content/pages/books.html

@@ -1,6 +0,0 @@
----
-layout: base
-permalink: /books/index.html
----
-
-Books will eventually go here.

src/content/pages/catalogue.html

@@ -1,19 +0,0 @@
----
-layout: base
-permalink: /catalogue/index.html
-title: Catalogue
----
-
-<h1>Catalogue</h1>
-<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="[ 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 ]"
-               href="/catalogue/{{ type | pluralize }}">{{ type | pluralize }}<span class="[ pill-count ]">{{ collections.catalogueByType[ type ] | length }}</span></a>
-        </li>
-    {% endfor %}
-</ul>
-{% include "partials/catalogue.html" %}

src/css/blocks/catalogue.css

@@ -3,11 +3,11 @@
   border-radius: 0.5rem;
 }
 
+.catalogue source,
+.catalogue img {
+  max-width: 300px;
+}
+
 .catalogue-meta {
   text-align: center;
 }
-
-.catalogue source,
-.catalogue img {
-  max-width: 50%;
-}

src/css/blocks/categories.css

@@ -1,23 +1,16 @@
-.categories {
-  color: var(--text-color);
-}
-
 .categories li {
-  --text-color: var(--color-fadeText);
+  color: var(--color-fadeText);
 }
 
-.categories > li > a {
+.categories li > a {
-  color: var(--text-color);
+  text-decoration-color: var(--color-fadeText);
-  text-decoration-color: var(--text-color);
 }
 
-.categories li:has(a:hover) {
+.categories li > a:hover {
-  --text-color: var(--color-primary);
+  text-decoration-color: inherit;
 }
 
-.categories > li > a::before {
+.categories li::before {
   content: "#";
-  color: var(--text-color);
   user-select: none;
-  transition: color var(--transition-duration);
 }