feat: Refactor all page layouts

src/includes/layouts/book.html

@@ -3,16 +3,10 @@ layout: "layouts/base"
 ---
 
 {% from "macros/date.njk" import format %}
-{% from "macros/utils.njk" import stars, spoilerWarning %}
+{% from "macros/utils.njk" import stars, spoilerWarning, pageHeader %}
 {% from "macros/tags.njk" import tagList %}
 <article class="flow">
-    <header class="flow">
+    {{ pageHeader(title, pullquote, page.date) }}
-        <div class="flow flow-space-1">
-            <h1>{{ title }}</h1>
-            {% if pullquote %}<h3 class="text-fadeText">{{ pullquote }}</h3>{% endif %}
-        </div>
-        {{ format(page.date) }}
-    </header>
     {% if hasSpoilers %}
         {{ spoilerWarning() }}
     {% endif %}

src/includes/layouts/game.html

@@ -3,16 +3,10 @@ layout: "layouts/base"
 ---
 
 {% from "macros/date.njk" import format %}
-{% from "macros/utils.njk" import stars, spoilerWarning %}
+{% from "macros/utils.njk" import stars, spoilerWarning, pageHeader %}
 {% from "macros/tags.njk" import tagList %}
 <article class="flow">
-    <header class="flow">
+    {{ pageHeader(title, pullquote, page.date) }}
-        <div class="flow flow-space-1">
-            <h1>{{ title }}</h1>
-            {% if pullquote %}<h3 class="text-fadeText">{{ pullquote }}</h3>{% endif %}
-        </div>
-        {{ format(page.date) }}
-    </header>
     {% if hasSpoilers %}
         {{ spoilerWarning() }}
     {% endif %}

src/includes/layouts/movie.html

@@ -3,16 +3,10 @@ layout: "layouts/base"
 ---
 
 {% from "macros/date.njk" import format %}
-{% from "macros/utils.njk" import stars, spoilerWarning %}
+{% from "macros/utils.njk" import stars, spoilerWarning, pageHeader %}
 {% from "macros/tags.njk" import tagList %}
 <article class="flow">
-    <header class="flow">
+    {{ pageHeader(title, pullquote, page.date) }}
-        <div class="flow flow-space-1">
-            <h1>{{ title }}</h1>
-            {% if pullquote %}<h3 class="text-fadeText">{{ pullquote }}</h3>{% endif %}
-        </div>
-        {{ format(page.date) }}
-    </header>
     {% if hasSpoilers %}
         {{ spoilerWarning() }}
     {% endif %}

src/includes/layouts/page.html

@@ -0,0 +1,13 @@
+---
+layout: "layouts/base"
+---
+
+{% from "macros/date.njk" import format %}
+{% from "macros/tags.njk" import tagList %}
+{% from "macros/utils.njk" import pageHeader %}
+<article class="flow">
+    {{ pageHeader(title, subtitle) }}
+    <section class="flow flow-space-default">
+        {{ content | safe }}
+    </section>
+</article>

src/includes/layouts/post.html

@@ -4,14 +4,9 @@ layout: "layouts/base"
 
 {% from "macros/date.njk" import format %}
 {% from "macros/tags.njk" import tagList %}
+{% from "macros/utils.njk" import pageHeader %}
 <article class="flow">
-    <header class="flow">
+    {{ pageHeader(title, excerpt, page.date) }}
-        <div class="flow flow-space-1">
-            <h1>{{ title }}</h1>
-            <h3 class="text-fadeText">{{ excerpt }}</h3>
-        </div>
-        {{ format(page.date) }}
-    </header>
     <section class="flow flow-space-default">
         {{ content | safe }}
     </section>

src/includes/layouts/show.html

@@ -3,16 +3,10 @@ layout: "layouts/base"
 ---
 
 {% from "macros/date.njk" import format %}
-{% from "macros/utils.njk" import stars, spoilerWarning %}
+{% from "macros/utils.njk" import stars, spoilerWarning, pageHeader %}
 {% from "macros/tags.njk" import tagList %}
 <article class="flow">
-    <header class="flow">
+    {{ pageHeader(title, pullquote, page.date) }}
-        <div class="flow flow-space-1">
-            <h1>{{ title }}</h1>
-            {% if pullquote %}<h3 class="text-fadeText">{{ pullquote }}</h3>{% endif %}
-        </div>
-        {{ format(page.date) }}
-    </header>
     {% if hasSpoilers %}
         {{ spoilerWarning() }}
     {% endif %}

src/includes/macros/utils.njk

@@ -1,3 +1,5 @@
+{% from "macros/date.njk" import format %}
+
 {% macro stars(number) %}
     {% set filledStars = number %}
     {% set emptyStars = 5 - number %}
@@ -19,3 +21,13 @@
         The following may contain spoilers!
     </section>
 {% endmacro %}
+
+{% macro pageHeader(title, subtitle, date) %}
+    <header class="flow">
+        <div class="flow flow-space-3">
+            <h1>{{ title }}</h1>
+            {% if subtitle %}<h3 class="text-fadeText">{{ subtitle }}</h3>{% endif %}
+        </div>
+        {% if date %}{{ format(date) }}{% endif %}
+    </header>
+{% endmacro %}

src/pages/404.html

@@ -1,11 +1,11 @@
 ---
 permalink: /404.html
-title: 404 - Can't Find That Frog
+title: 404 - Can't Find That Frog 🐸
+subtitle: Where froggo art thou?
 youtube: true
 ---
 
 <section class="flow">
-    <h1>404 🍞</h1>
     <p>Couldn't find what you're looking for. But would you like some bread for your journey home? 🥖</p>
     {% youtube "GQw-aEk05qY", "Call 1800 Tobë ( Bread Ad )" %}
     <p>

src/pages/about.md

@@ -1,10 +1,9 @@
 ---
-title: About
+title: About me
+subtitle: It's all about me!
 description: All about me!
 ---
 
-# About me
-
 **See also**: [Stuff I use](/uses), my [contact info](/contact), or [what's happening now](/now).
 
 Hello! Ahoj! Welcome to my site!

src/pages/blogroll.html

@@ -1,11 +1,10 @@
 ---
 title: Blogroll
+subtitle: A collection of my favourite sites, in no particular order.
 description: A collection of my favourite sites.
 ---
 
 <section class="flow">
-    <h1>Blogroll</h1>
-    <p>A collection of my favourite sites, in no particular order.</p>
     <p>
         If you're looking for more cool sites, visit <a href="https://blogroll.org"
     target="_blank"

src/pages/books/favourites.html

@@ -1,12 +1,11 @@
 ---
 title: Favourite books
+subtitle: A collection of my favourite books!
 permalink: "books/favourites/index.html"
 ---
 
 {% from "macros/media-grid.njk" import grid %}
 {% set data = collections.book | filterFavourites | reverse %}
 <section class="flow">
-    <h1>Favourite books</h1>
-    <p>A collection of my favourite books!</p>
     {{ grid(data) }}
 </section>

src/pages/books/index.html

@@ -1,5 +1,6 @@
 ---
 title: Books
+subtitle: A collection of books I've read over the years.
 permalink: "books/index.html"
 ---
 
@@ -8,8 +9,7 @@ permalink: "books/index.html"
 {% set faves = collections.book | filterFavourites | reverse | limit(5) %}
 {% set tags = collections.book | allTagCounts(["book"]) | limit(5) %}
 <section class="flow">
-    <h1>Books</h1>
+    <p>I hope one day its an exhaustive list.</p>
-    <p>A collection of books I've read over the years. I hope one day its an exhaustive list.</p>
     <h2>
         <a href="tags">Tags</a>
     </h2>

src/pages/books/recent.html

@@ -1,5 +1,6 @@
 ---
 title: Recent books
+subtitle: A collection of books I've read recently.
 permalink: "books/recent/index.html"
 ---
 
@@ -7,8 +8,6 @@ permalink: "books/recent/index.html"
 {% set data = collections.book | reverse %}
 {% set tags = collections.book | allTagCounts(["book"]) | limit(5) %}
 <section class="flow">
-    <h1>Recent books</h1>
-    <p>A collection of books I've read.</p>
     <h2>
         <a href="../tags">Tags</a>
     </h2>

src/pages/books/tag.html

@@ -4,12 +4,13 @@ pagination:
   size: 1
   alias: tag
 permalink: "books/tag/{{ tag | slugify }}/index.html"
+eleventyComputed:
+    title: "Books: Tag: \"{{ tag }}\""
+    subtitle: "All books tagged with \"{{ tag }}\""
 ---
 
 {% from "macros/media-grid.njk" import grid %}
 {% set data = collections.booksByTag[tag] | reverse %}
-<header class="flow flow-space-4">
+<section class="flow">
-    <h1>Books</h1>
-    <p class="text-fadeText flow-space-1">Tagged with "{{ tag }}"</p>
-</header>
     {{ grid(data) }}
+</section>

src/pages/books/tags.html

@@ -6,7 +6,6 @@ permalink: "books/tags/index.html"
 {% from "macros/media-grid.njk" import grid %}
 {% set tags = collections.book | allTagCounts(["book"]) %}
 <section class="flow">
-    <h1>Tagged in Books</h1>
     <ul class="categories cluster list-none p-0 line-height-m">
         {% for tag in tags %}
             <li>

src/pages/changelog.md

@@ -1,13 +1,10 @@
 ---
 title: Changelog
+subtitle: All the changes that are fit to read!
 eleventyComputed:
   description: All of the latest changes on {{ meta.siteName }}.
 ---
 
-# Changelog
-
-All the changes that are fit to read!
-
 If preferred, the [commit log is available here][commits].
 
 ## May 31st, 2025

src/pages/colophon.md

@@ -1,10 +1,9 @@
 ---
 title: Colophon
+subtitle: A fancy word for describing how this site was built.
 description: A little bit of everything about this site.
 ---
 
-# Colophon
-
 A little bit of everything regarding how this site was built and its origins.
 
 ## Technology

src/pages/contact.html

@@ -1,13 +1,10 @@
 ---
 title: Contact
+subtitle: Various ways to get in touch with me on the internet.
 description: Various ways to get in touch.
 permalink: "/contact/index.html"
 ---
 
-<header class="flow flow-space-4">
-    <h1>Contact</h1>
-    <p class="text-fadeText flow-space-1">Various ways to get in touch with me on the internet.</p>
-</header>
 <section class="flow">
     <p>Below are my primary methods of contact. They are the ones I monitor most and likely to respond!</p>
     <div class="table-wrapper">

src/pages/feeds.html

@@ -1,9 +1,9 @@
 ---
 title: Feeds
+subtitle: Feed yourself a veritable bevy of feeds.
 description: Feed yourself a veritable bevy of feeds.
 ---
 
-<h1>Feeds</h1>
 <p>Here is my collection of feeds for your perusal. They come in RSS varieties.</p>
 <ul class="flow list-none pl-0">
     <li>

src/pages/games/favourites.html

@@ -1,12 +1,11 @@
 ---
 title: Favourite games
+subtitle: A collection of my favourite games!
 permalink: "games/favourites/index.html"
 ---
 
 {% from "macros/media-grid.njk" import grid %}
 {% set data = collections.game | filterFavourites | reverse %}
 <section class="flow">
-    <h1>Favourite games</h1>
-    <p>A collection of my favourite games!</p>
     {{ grid(data) }}
 </section>

src/pages/games/index.html

@@ -1,5 +1,6 @@
 ---
 title: Games
+subtitle: I happen to quite like video games.
 permalink: "games/index.html"
 ---
 
@@ -8,7 +9,6 @@ permalink: "games/index.html"
 {% set faves = collections.game | filterFavourites | reverse | limit(5) %}
 {% set tags = collections.game | allTagCounts(["game"]) | limit(5) %}
 <section class="flow">
-    <h1>Games</h1>
     <p>
         A collection of games I played over the years. Ideally this would include every game I've every played, but realistically it's an approximation. I try to include my own thoughts with each.
     </p>

src/pages/games/recent.html

@@ -1,5 +1,6 @@
 ---
 title: Recent games
+subtitle: A collection of games that I've played recently.
 permalink: "games/recent/index.html"
 ---
 
@@ -7,8 +8,6 @@ permalink: "games/recent/index.html"
 {% set data = collections.game | reverse %}
 {% set tags = collections.game | allTagCounts(["game"]) | limit(5) %}
 <section class="flow">
-    <h1>Recent games</h1>
-    <p>A collection of games I've played.</p>
     <h2>
         <a href="../tags">Tags</a>
     </h2>

src/pages/games/tag.html

@@ -4,12 +4,13 @@ pagination:
   size: 1
   alias: tag
 permalink: "games/tag/{{ tag | slugify }}/index.html"
+eleventyComputed:
+    title: "Games: Tag: \"{{ tag }}\""
+    subtitle: "All games tagged with \"{{ tag }}\""
 ---
 
 {% from "macros/media-grid.njk" import grid %}
 {% set data = collections.gamesByTag[tag] %}
-<header class="flow flow-space-4">
+<section class="flow">
-    <h1>Games</h1>
-    <p class="text-fadeText flow-space-1">Tagged with "{{ tag }}"</p>
-</header>
     {{ grid(data) }}
+</section>

src/pages/games/tags.html

@@ -6,7 +6,6 @@ permalink: "games/tags/index.html"
 {% from "macros/media-grid.njk" import grid %}
 {% set tags = collections.game | allTagCounts(["game"]) %}
 <section class="flow">
-    <h1>Tagged in Games</h1>
     <ul class="categories cluster list-none p-0 line-height-m">
         {% for tag in tags %}
             <li>

src/pages/now.html

@@ -1,11 +1,10 @@
 ---
 title: /now
+subtitle: Right now! What's happening right now?
 description: What's going on now and all the latest with myself.
 ---
 
-{% set recentTrack = lastfm.recentTracks[0] %}
+<p>Everything on here is automatically generated from various data sources.</p>
-<h1>/now</h1>
-<p>What am I doing right now? Everything on here is automatically generated from various data sources.</p>
 {% if listenbrainz.length > 0 %}
 <section class="flow">
     <h2>🎶 <a href="https://listenbrainz.org/user/wonderfulfrog/" target="_blank">Listening</a></h2>

src/pages/pages.json

@@ -1,5 +1,5 @@
 {
-  "layout": "layouts/base",
+  "layout": "layouts/page",
   "permalink": "{{ page.fileSlug }}/index.html",
   "tags": ["page"]
 }

src/pages/past-designs.md

@@ -1,10 +1,9 @@
 ---
 title: Past Designs
+subtitle: Who doesn't love a trip down memory lane?
 description: The living chronicle of my site's design.
 ---
 
-# Past Designs
-
 I love to tinker, and my website design is no exception. Trying my best to chronicle the visual changes it has taken over the years. I may update this page from time to time to include even older designs!
 
 ## 3.0 ([March 2024](/posts/version-3/))

src/pages/posts.html

@@ -1,10 +1,9 @@
 ---
-title: Posts
+title: All posts
 description: Read all of my posts.
 ---
 
 {% from "macros/posts.njk" import yearList %}
-<h1>All posts</h1>
 <p>
     Browse all of my posts, or narrow things down <a href="/tags">via tags</a>.
 </p>

src/pages/styleguide.html

@@ -1,5 +1,6 @@
 ---
 title: Styleguide
+subtitle: A demo of the site's theme.
 description: A demo of the site's theme.
 ---
 
@@ -24,14 +25,14 @@ description: A demo of the site's theme.
 </p>
 <hr />
 <div class="flex">
-    <div class="size-2" style="background-color: var(--color-primary)"></div>
+    <div class="size-6" style="background-color: var(--color-primary)"></div>
-    <div class="size-2" style="background-color: var(--color-secondary)"></div>
+    <div class="size-6" style="background-color: var(--color-secondary)"></div>
-    <div class="size-2" style="background-color: var(--color-background)"></div>
+    <div class="size-6" style="background-color: var(--color-background)"></div>
-    <div class="size-2" style="background-color: var(--color-surface)"></div>
+    <div class="size-6" style="background-color: var(--color-surface)"></div>
-    <div class="size-2" style="background-color: var(--color-border)"></div>
+    <div class="size-6" style="background-color: var(--color-border)"></div>
-    <div class="size-2" style="background-color: var(--color-text)"></div>
+    <div class="size-6" style="background-color: var(--color-text)"></div>
-    <div class="size-2" style="background-color: var(--color-fadeText)"></div>
+    <div class="size-6" style="background-color: var(--color-fadeText)"></div>
-    <div class="size-2" style="background-color: var(--color-shadow)"></div>
+    <div class="size-6" style="background-color: var(--color-shadow)"></div>
 </div>
 <hr />
 <div class="flex gap-1">

src/pages/tag.html

@@ -7,11 +7,11 @@ pagination:
         - post
 permalink: /tags/{{ tag | slugify }}/index.html
 eleventyComputed:
+    title: "Tag: \"{{ tag }}\""
     description: Browse all posts tagged with "{{ tag }}".
 ---
 
 {% from "macros/posts.njk" import yearList %}
-<h1>Tag: {{ tag }}</h1>
 <p>
     All posts tagged with "{{ tag }}", or go back to <a href="/tags">all tags</a>.
 </p>

src/pages/tags.html

@@ -5,7 +5,6 @@ description: Browse posts by all tags.
 
 {% set tags = collections.post | allTagCounts %}
 <section class="flow">
-    <h1>{{ title }}</h1>
     <ol class="cluster p-0 gap-0.5" role="list">
         {% for tag in tags %}
             <li>

src/pages/uses.md

@@ -1,14 +1,11 @@
 ---
 title: /uses
+subtitle: A list of my favourite software, tools, gear, configurations, and everything else between.
 description: A list of my favourite things and why I like 'em.
 ---
 
-# Uses
-
 Last updated on **May 31st, 2025**.
 
-A list of my favourite software, tools, gear, configurations, and everything else between.
-
 More lists like this are available at [uses.tech](https://uses.tech/).
 
 There are no affiliate links.

src/pages/watching/index.html

@@ -1,5 +1,6 @@
 ---
 title: Watching
+subtitle: A collection of movies and shows I've seen.
 permalink: "watching/index.html"
 ---
 
@@ -9,8 +10,7 @@ permalink: "watching/index.html"
 {% set favouriteMovies = collections.movie | filterFavourites | reverse | limit(5) %}
 {% set favouriteShows = collections.tv | filterFavourites | reverse | limit(5) %}
 <section class="flow">
-    <h1>Watching</h1>
+    <p>I tend to watch more movies than shows these days.</p>
-    <p>A collection of movies and shows I've seen. I tend to watch more movies than shows these days.</p>
     <h2>
         <a href="movies/recent">Recent movies</a>
     </h2>

src/pages/watching/movies/favourites.html

@@ -1,12 +1,11 @@
 ---
 title: Favourite movies
+subtitle: A collection of my favourite movies!
 permalink: "watching/movies/favourites/index.html"
 ---
 
 {% from "macros/media-grid.njk" import grid %}
 {% set data = collections.movie | filterFavourites | reverse %}
 <section class="flow">
-    <h1>Favourite movies</h1>
-    <p>A collection of my favourite movies!</p>
     {{ grid(data) }}
 </section>

src/pages/watching/movies/recent.html

@@ -1,5 +1,6 @@
 ---
 title: Recent movies
+subtitle: A collection of movies I've seen recently.
 permalink: "watching/movies/recent/index.html"
 ---
 
@@ -7,8 +8,6 @@ permalink: "watching/movies/recent/index.html"
 {% set data = collections.movie | reverse %}
 {% set tags = collections.movie | allTagCounts(["movie"]) | limit(5) %}
 <section class="flow">
-    <h1>Recent movies</h1>
-    <p>A collection of movies I've seen recently.</p>
     <h2>
         <a href="../tags">Tags</a>
     </h2>

src/pages/watching/movies/tag.html

@@ -4,12 +4,13 @@ pagination:
   size: 1
   alias: tag
 permalink: "watching/movies/tag/{{ tag | slugify }}/index.html"
+eleventyComputed:
+    title: "Movies: Tag: \"{{ tag }}\""
+    subtitle: "All movies tagged with \"{{ tag }}\""
 ---
 
 {% from "macros/media-grid.njk" import grid %}
 {% set data = collections.moviesByTag[tag] | reverse %}
-<header class="flow flow-space-4">
+<section class="flow">
-    <h1>Movies</h1>
-    <p class="text-fadeText flow-space-1">Tagged with "{{ tag }}"</p>
-</header>
     {{ grid(data) }}
+</section>

src/pages/watching/movies/tags.html

@@ -6,7 +6,6 @@ permalink: "watching/movies/tags/index.html"
 {% from "macros/media-grid.njk" import grid %}
 {% set tags = collections.movie | allTagCounts(["movie"]) %}
 <section class="flow">
-    <h1>Tagged in Movies</h1>
     <ul class="categories cluster list-none p-0 line-height-m">
         {% for tag in tags %}
             <li>

src/pages/watching/shows/favourites.html

@@ -1,12 +1,11 @@
 ---
 title: Favourite shows
+subtitle: A collection of my favourite shows!
 permalink: "watching/shows/favourites/index.html"
 ---
 
 {% from "macros/media-grid.njk" import grid %}
 {% set data = collections.tv | filterFavourites | reverse %}
 <section class="flow">
-    <h1>Favourite shows</h1>
-    <p>A collection of my favourite shows!</p>
     {{ grid(data) }}
 </section>

src/pages/watching/shows/recent.html

@@ -1,5 +1,6 @@
 ---
 title: Recent shows
+subtitle: A collection of shows I've seen recently.
 permalink: "watching/shows/recent/index.html"
 ---
 
@@ -7,8 +8,6 @@ permalink: "watching/shows/recent/index.html"
 {% set data = collections.tv | reverse %}
 {% set tags = collections.tv | allTagCounts(["tv"]) | limit(5) %}
 <section class="flow">
-    <h1>Recent shows</h1>
-    <p>A collection of shows I've seen recently.</p>
     <h2>
         <a href="../tags">Tags</a>
     </h2>

src/pages/watching/shows/tag.html

@@ -4,12 +4,13 @@ pagination:
   size: 1
   alias: tag
 permalink: "watching/shows/tag/{{ tag | slugify }}/index.html"
+eleventyComputed:
+    title: "Shows: Tag: \"{{ tag }}\""
+    subtitle: "All shows tagged with \"{{ tag }}\""
 ---
 
 {% from "macros/media-grid.njk" import grid %}
 {% set data = collections.showsByTag[tag] | reverse %}
-<header class="flow flow-space-4">
+<section class="flow">
-    <h1>Shows</h1>
-    <p class="text-fadeText flow-space-1">Tagged with "{{ tag }}"</p>
-</header>
     {{ grid(data) }}
+</section>

src/pages/watching/shows/tags.html

@@ -6,7 +6,6 @@ permalink: "watching/shows/tags/index.html"
 {% from "macros/media-grid.njk" import grid %}
 {% set tags = collections.tv | allTagCounts(["tv"]) %}
 <section class="flow">
-    <h1>Tagged in Shows</h1>
     <ul class="categories cluster list-none p-0 line-height-m">
         {% for tag in tags %}
             <li>

src/pages/webrings.html

@@ -3,7 +3,6 @@ title: Webrings
 description: What's a webring?
 ---
 
-<h1>Webrings</h1>
 <p>
     You're probably wondering what the <em>heck</em> is a webring? It's a collection of sites banding under a common theme or idea, and it's circular (like a ring). You can read more on <a href="https://en.wikipedia.org/wiki/Webring" target="_blank">Wikipedia</a>!
 </p>