eleventy.config.js

@@ -44,6 +44,12 @@ export default function (eleventyConfig) {
   eleventyConfig.addCollection("gamesByTag", (collection) =>
     collectionByTag(collection, "game"),
   );
+  eleventyConfig.addCollection("showsByTag", (collection) =>
+    collectionByTag(collection, "tv"),
+  );
+  eleventyConfig.addCollection("moviesByTag", (collection) =>
+    collectionByTag(collection, "movie"),
+  );
 
   // 	--------------------- Custom Filters -----------------------
   eleventyConfig.addFilter("allTagCounts", allTagCounts);

src/pages/books/index.html

@@ -16,7 +16,7 @@ permalink: "books/index.html"
     <ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
         {% for tag in tags %}
             <li>
-                <a class="[ button ]" href="/books/tag/{{ tag.tag | slugify }}">
+                <a class="[ button ]" href="tag/{{ tag.tag | slugify }}">
                     {% include "svgs/frame.svg" %}
                 {{ tag.tag }}</a>
             </li>

src/pages/books/tags.html

@@ -10,7 +10,7 @@ permalink: "books/tags/index.html"
     <ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
         {% for tag in tags %}
             <li>
-                <a class="[ button ]" href="/books/tag/{{ tag.tag | slugify }}">
+                <a class="[ button ]" href="../tag/{{ tag.tag | slugify }}">
                     {% include "svgs/frame.svg" %}
                 {{ tag.tag }}</a>
             </li>

src/pages/games/index.html

@@ -18,7 +18,7 @@ permalink: "games/index.html"
     <ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
         {% for tag in tags %}
             <li>
-                <a class="[ button ]" href="/games/tag/{{ tag.tag | slugify }}">
+                <a class="[ button ]" href="tag/{{ tag.tag | slugify }}">
                     {% include "svgs/frame.svg" %}
                 {{ tag.tag }}</a>
             </li>

src/pages/games/tags.html

@@ -10,7 +10,7 @@ permalink: "games/tags/index.html"
     <ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
         {% for tag in tags %}
             <li>
-                <a class="[ button ]" href="/games/tag/{{ tag.tag | slugify }}">
+                <a class="[ button ]" href="../tag/{{ tag.tag | slugify }}">
                     {% include "svgs/frame.svg" %}
                 {{ tag.tag }}</a>
             </li>

src/pages/watching/index.html

@@ -12,19 +12,19 @@ permalink: "watching/index.html"
     <h1>Watching</h1>
     <p>A collection of movies and shows I've seen. I tend to watch more movies than shows these days.</p>
     <h2>
-        <a href="recent/movies">Recent movies</a>
+        <a href="movies/recent">Recent movies</a>
     </h2>
     {{ grid(movies) }}
     <h2>
-        <a href="recent/shows">Recent shows</a>
+        <a href="shows/recent">Recent shows</a>
     </h2>
     {{ grid(shows) }}
     <h2>
-        <a href="favourites/movies">Favourite movies</a>
+        <a href="movies/favourites">Favourite movies</a>
     </h2>
     {{ grid(favouriteMovies) }}
     <h2>
-        <a href="favourites/shows">Favourite shows</a>
+        <a href="shows/favourites">Favourite shows</a>
     </h2>
     {{ grid(favouriteShows) }}
 </section>

src/pages/watching/movies/favourites.html

@@ -1,6 +1,6 @@
 ---
 title: Favourite movies
-permalink: "watching/favourites/movies/index.html"
+permalink: "watching/movies/favourites/index.html"
 ---
 
 {% from "macros/media-grid.njk" import grid %}

src/pages/watching/movies/recent.html

@@ -0,0 +1,25 @@
+---
+title: Recent movies
+permalink: "watching/movies/recent/index.html"
+---
+
+{% from "macros/media-grid.njk" import grid %}
+{% 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>
+    <ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
+        {% for tag in tags %}
+            <li>
+                <a class="[ button ]" href="../tag/{{ tag.tag | slugify }}">
+                    {% include "svgs/frame.svg" %}
+                {{ tag.tag }}</a>
+            </li>
+        {% endfor %}
+    </ul>
+    {{ grid(data) }}
+</section>

src/pages/watching/movies/tag.html

@@ -0,0 +1,15 @@
+---
+pagination:
+  data: collections.moviesByTag
+  size: 1
+  alias: tag
+permalink: "watching/movies/tag/{{ tag | slugify }}/index.html"
+---
+
+{% from "macros/media-grid.njk" import grid %}
+{% set data = collections.moviesByTag[tag] %}
+<header class="flow flow-space-1">
+    <h1>Movies</h1>
+    <p class="text-fadeText flow-space-0.25">Tagged with "{{ tag }}"</p>
+</header>
+{{ grid(data) }}

src/pages/watching/movies/tags.html

@@ -0,0 +1,19 @@
+---
+title: Tagged in Movies
+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>
+                <a class="[ button ]" href="../tag/{{ tag.tag | slugify }}">
+                    {% include "svgs/frame.svg" %}
+                {{ tag.tag }}</a>
+            </li>
+        {% endfor %}
+    </ul>
+</section>

src/pages/watching/recent/movies.html

@@ -1,12 +0,0 @@
----
-title: Recent movies
-permalink: "watching/recent/movies/index.html"
----
-
-{% from "macros/media-grid.njk" import grid %}
-{% set data = collections.movie | reverse %}
-<section class="flow">
-    <h1>Recent movies</h1>
-    <p>A collection of movies I've seen recently.</p>
-    {{ grid(data) }}
-</section>

src/pages/watching/recent/shows.html

@@ -1,12 +0,0 @@
----
-title: Recent shows
-permalink: "watching/recent/shows/index.html"
----
-
-{% from "macros/media-grid.njk" import grid %}
-{% set data = collections.tv | reverse %}
-<section class="flow">
-    <h1>Recent shows</h1>
-    <p>A collection of shows I've seen recently.</p>
-    {{ grid(data) }}
-</section>

src/pages/watching/shows/favourites.html

@@ -1,6 +1,6 @@
 ---
 title: Favourite shows
-permalink: "watching/favourites/shows/index.html"
+permalink: "watching/shows/favourites/index.html"
 ---
 
 {% from "macros/media-grid.njk" import grid %}

src/pages/watching/shows/recent.html

@@ -0,0 +1,25 @@
+---
+title: Recent shows
+permalink: "watching/shows/recent/index.html"
+---
+
+{% from "macros/media-grid.njk" import grid %}
+{% 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>
+    <ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
+        {% for tag in tags %}
+            <li>
+                <a class="[ button ]" href="../tag/{{ tag.tag | slugify }}">
+                    {% include "svgs/frame.svg" %}
+                {{ tag.tag }}</a>
+            </li>
+        {% endfor %}
+    </ul>
+    {{ grid(data) }}
+</section>

src/pages/watching/shows/tag.html

@@ -0,0 +1,15 @@
+---
+pagination:
+  data: collections.showsByTag
+  size: 1
+  alias: tag
+permalink: "watching/shows/tag/{{ tag | slugify }}/index.html"
+---
+
+{% from "macros/media-grid.njk" import grid %}
+{% set data = collections.showsByTag[tag] %}
+<header class="flow flow-space-1">
+    <h1>Shows</h1>
+    <p class="text-fadeText flow-space-0.25">Tagged with "{{ tag }}"</p>
+</header>
+{{ grid(data) }}

src/pages/watching/shows/tags.html

@@ -0,0 +1,19 @@
+---
+title: Tagged in Shows
+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>
+                <a class="[ button ]" href="../tag/{{ tag.tag | slugify }}">
+                    {% include "svgs/frame.svg" %}
+                {{ tag.tag }}</a>
+            </li>
+        {% endfor %}
+    </ul>
+</section>