From 8e41cb5af7a1ea0d58bb26a86379871c3326f2af Mon Sep 17 00:00:00 2001
From: Devin Haska <2636402+wonderfulfrog@users.noreply.github.com>
Date: Fri, 24 Jan 2025 13:39:58 -0800
Subject: [PATCH] feat: update game layout and content

---
 eleventy.config.js                            | 10 ++++++----
 src/_includes/layouts/game.html               | 17 +++++++++++------
 src/games/2012-02-26-yoshis-island.md         |  6 ++++--
 src/games/2015-03-01-majoras-mask-3d.md       |  4 +++-
 .../2015-04-18-mario-and-luigi-dream-team.md  |  5 ++++-
 ...-21-donkey-kong-country-tropical-freeze.md |  6 +++++-
 ...4-26-professor-layton-vs-phoenix-wright.md |  6 +++++-
 src/games/2015-05-15-the-wonderful-101.md     |  6 +++++-
 src/games/2015-12-02-fallout-4.md             |  5 ++++-
 src/games/2016-03-16-persona-3-portable.md    |  6 +++++-
 src/games/2016-08-22-shovel-knight.md         |  5 ++++-
 src/games/2016-08-24-tomb-raider.md           |  7 ++++++-
 .../2016-12-31-assassins-creed-black-flag.md  |  6 +++++-
 src/games/2017-01-02-doom-2016.md             |  6 +++++-
 src/games/2017-01-29-hyper-light-drifter.md   |  8 +++++++-
 src/games/2017-02-26-vanquish.md              |  6 +++++-
 src/games/2017-12-20-persona-5.md             |  6 +++++-
 src/games/2018-04-10-axiom-verge.md           |  9 +++++++--
 ...2022-03-20-animal-crossing-new-horizons.md |  5 ++++-
 src/games/2024-01-07-her-story.md             |  8 ++++++--
 ...024-01-19-middle-earth-shadow-of-mordor.md |  6 +++++-
 src/games/2024-01-27-citizen-sleeper.md       |  9 +++++++--
 src/pages/games/index.html                    | 13 +++++++++++++
 src/pages/games/tag.html                      | 15 +++++++++++++++
 src/pages/games/tags.html                     | 19 +++++++++++++++++++
 25 files changed, 165 insertions(+), 34 deletions(-)
 create mode 100644 src/pages/games/tag.html
 create mode 100644 src/pages/games/tags.html

diff --git a/eleventy.config.js b/eleventy.config.js
index e4a9c44..ef714b8 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -38,10 +38,12 @@ export default function (eleventyConfig) {
 
   // 	--------------------- Custom Collections -----------------------
   eleventyConfig.addCollection("postsByTag", postsByTag);
-  eleventyConfig.addCollection("booksByTag", (collection) => {
-    const data = collectionByTag(collection, "book");
-    return data;
-  });
+  eleventyConfig.addCollection("booksByTag", (collection) =>
+    collectionByTag(collection, "book"),
+  );
+  eleventyConfig.addCollection("gamesByTag", (collection) =>
+    collectionByTag(collection, "game"),
+  );
 
   // 	--------------------- Custom Filters -----------------------
   eleventyConfig.addFilter("allTagCounts", allTagCounts);
diff --git a/src/_includes/layouts/game.html b/src/_includes/layouts/game.html
index f97eb81..f2ce8b0 100644
--- a/src/_includes/layouts/game.html
+++ b/src/_includes/layouts/game.html
@@ -16,7 +16,7 @@ layout: "layouts/base"
 {% endif %}
 <hr class="my-2" />
 <footer class="media-meta-grid gap-1">
-    <div class="media-image">
+    <div class="media-image media-image--tall">
         <img src="{{ image }}" alt="" />
     </div>
     <div class="flow flex-col justify-center">
@@ -37,11 +37,16 @@ layout: "layouts/base"
                     <strong>Playtime</strong><span>{{ playtime }}</span>
                 </li>
             {% endif %}
-            {% if tags %}
-                <li class="flex-col meta-grid--full">
-                    <strong>Genres</strong><span>{{ tags | filter("game") | join(", ") }}</span>
-                </li>
-            {% endif %}
         </ul>
     </div>
 </footer>
+<hr class="my-2">
+<ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
+    {% for tag in tags | filter("game") %}
+        <li>
+            <a class="[ button ]" href="/books/tag/{{ tag | slugify }}">
+                {% include "svgs/frame.svg" %}
+            {{ tag }}</a>
+        </li>
+    {% endfor %}
+</ul>
diff --git a/src/games/2012-02-26-yoshis-island.md b/src/games/2012-02-26-yoshis-island.md
index e059eb8..4f1258a 100644
--- a/src/games/2012-02-26-yoshis-island.md
+++ b/src/games/2012-02-26-yoshis-island.md
@@ -1,8 +1,10 @@
 ---
 title: "Super Mario World 2: Yoshi's Island"
 platform: Super Nintendo
-image: https://cdn.wonderfulfrog.com/images/Yoshis_Island_box_art.jpg
-tags: ["platformer"]
+image: https://cdn.wonderfulfrog.com/images/games/yoshis-island-cover.jpg
+tags:
+  - single-player
+  - platformer
 isFavourite: true
 year: 1995
 ---
diff --git a/src/games/2015-03-01-majoras-mask-3d.md b/src/games/2015-03-01-majoras-mask-3d.md
index e824c48..ed8de9a 100644
--- a/src/games/2015-03-01-majoras-mask-3d.md
+++ b/src/games/2015-03-01-majoras-mask-3d.md
@@ -2,7 +2,9 @@
 title: "Majora's Mask 3D"
 platform: Nintendo 3DS
 image: https://cdn.wonderfulfrog.com/images/Majoras_Mask_3D_cover.png
-tags: ["adventure", "single player"]
+tags:
+  - single-player
+  - adventure
 year: 2015
 ---
 
diff --git a/src/games/2015-04-18-mario-and-luigi-dream-team.md b/src/games/2015-04-18-mario-and-luigi-dream-team.md
index d4f8fb7..e4be181 100644
--- a/src/games/2015-04-18-mario-and-luigi-dream-team.md
+++ b/src/games/2015-04-18-mario-and-luigi-dream-team.md
@@ -2,7 +2,10 @@
 title: "Mario & Luigi: Dream Team"
 platform: Nintendo 3DS
 image: https://cdn.wonderfulfrog.com/images/MarioLuigiDreamTeam.jpg
-tags: ["rpg", "turn based", "single player"]
+tags:
+  - single-player
+  - rpg
+  - turn-based
 year: 2013
 ---
 
diff --git a/src/games/2015-04-21-donkey-kong-country-tropical-freeze.md b/src/games/2015-04-21-donkey-kong-country-tropical-freeze.md
index 5f494e0..43622b7 100644
--- a/src/games/2015-04-21-donkey-kong-country-tropical-freeze.md
+++ b/src/games/2015-04-21-donkey-kong-country-tropical-freeze.md
@@ -2,7 +2,11 @@
 title: "Donkey Kong Country: Tropical Freeze"
 platform: Nintendo Wii U
 image: https://cdn.wonderfulfrog.com/images/DKC5_box_art.jpg
-tags: ["platformer", "challenging", "single player", "multiplayer"]
+tags:
+  - single-player
+  - co-op
+  - platformer
+  - challenging
 year: 2014
 ---
 
diff --git a/src/games/2015-04-26-professor-layton-vs-phoenix-wright.md b/src/games/2015-04-26-professor-layton-vs-phoenix-wright.md
index 45239a5..dad7288 100644
--- a/src/games/2015-04-26-professor-layton-vs-phoenix-wright.md
+++ b/src/games/2015-04-26-professor-layton-vs-phoenix-wright.md
@@ -2,7 +2,11 @@
 title: "Professor Layton vs. Phoenix Wright: Ace Attorney"
 platform: Nintendo 3DS
 image: https://cdn.wonderfulfrog.com/images/Laytonvsaceattorneycover.jpg
-tags: ["puzzle", "narrative", "visual novel", "single player"]
+tags:
+  - single-player
+  - narrative
+  - puzzle
+  - visual-novel
 year: 2014
 ---
 
diff --git a/src/games/2015-05-15-the-wonderful-101.md b/src/games/2015-05-15-the-wonderful-101.md
index 32d5945..861e1e7 100644
--- a/src/games/2015-05-15-the-wonderful-101.md
+++ b/src/games/2015-05-15-the-wonderful-101.md
@@ -2,7 +2,11 @@
 title: "The Wonderful 101"
 platform: Nintendo Wii U
 image: https://cdn.wonderfulfrog.com/images/Wonderful_101_box_artwork.jpg
-tags: ["action", "beat em up", "single player"]
+tags:
+  - single-player
+  - action
+  - beat-em-up
+  - platinum
 year: 2013
 ---
 
diff --git a/src/games/2015-12-02-fallout-4.md b/src/games/2015-12-02-fallout-4.md
index 225c2c5..6913efb 100644
--- a/src/games/2015-12-02-fallout-4.md
+++ b/src/games/2015-12-02-fallout-4.md
@@ -2,7 +2,10 @@
 title: Fallout 4
 platform: PC
 image: https://cdn.wonderfulfrog.com/images/Fallout_4_cover_art.jpg
-tags: ["rpg", "action", "single player"]
+tags:
+  - single-player
+  - action
+  - rpg
 year: 2015
 ---
 
diff --git a/src/games/2016-03-16-persona-3-portable.md b/src/games/2016-03-16-persona-3-portable.md
index b1495ce..c035aec 100644
--- a/src/games/2016-03-16-persona-3-portable.md
+++ b/src/games/2016-03-16-persona-3-portable.md
@@ -2,7 +2,11 @@
 title: "Persona 3 Portable"
 platform: PlayStation Portable
 image: https://cdn.wonderfulfrog.com/images/p3p.jpg
-tags: ["rpg", "turn based", "persona", "single player"]
+tags:
+  - single-player
+  - rpg
+  - turn-based
+  - persona
 youtube: true
 year: 2009
 ---
diff --git a/src/games/2016-08-22-shovel-knight.md b/src/games/2016-08-22-shovel-knight.md
index 5ca7be8..b9dc752 100644
--- a/src/games/2016-08-22-shovel-knight.md
+++ b/src/games/2016-08-22-shovel-knight.md
@@ -2,7 +2,10 @@
 title: Shovel Knight
 platform: Nintendo Wii U
 image: https://cdn.wonderfulfrog.com/images/Shovel_knight_cover.jpg
-tags: ["platformer", "retro", "single player"]
+tags:
+  - single-player
+  - platformer
+  - retro
 year: 2014
 ---
 
diff --git a/src/games/2016-08-24-tomb-raider.md b/src/games/2016-08-24-tomb-raider.md
index f2699b2..a132879 100644
--- a/src/games/2016-08-24-tomb-raider.md
+++ b/src/games/2016-08-24-tomb-raider.md
@@ -2,7 +2,12 @@
 title: Tomb Raider
 platform: PC
 image: https://cdn.wonderfulfrog.com/images/TombRaider2013.jpg
-tags: ["action", "adventure", "puzzle", "reboot", "single player"]
+tags:
+  - single-player
+  - action
+  - adventure
+  - puzzle
+  - reboot
 year: 2013
 ---
 
diff --git a/src/games/2016-12-31-assassins-creed-black-flag.md b/src/games/2016-12-31-assassins-creed-black-flag.md
index 34f842d..3eb80b2 100644
--- a/src/games/2016-12-31-assassins-creed-black-flag.md
+++ b/src/games/2016-12-31-assassins-creed-black-flag.md
@@ -2,7 +2,11 @@
 title: "Assassin's Creed IV: Black Flag"
 platform: PlayStation 3
 image: https://cdn.wonderfulfrog.com/images/Assassins_Creed_IV_-_Black_Flag_cover.jpg
-tags: ["action", "adventure", "single player"]
+tags:
+  - single-player
+  - action
+  - open-world
+  - adventure
 year: 2013
 ---
 
diff --git a/src/games/2017-01-02-doom-2016.md b/src/games/2017-01-02-doom-2016.md
index 5718177..7500066 100644
--- a/src/games/2017-01-02-doom-2016.md
+++ b/src/games/2017-01-02-doom-2016.md
@@ -2,7 +2,11 @@
 title: DOOM
 platform: PC
 image: https://cdn.wonderfulfrog.com/images/Doom_Cover.jpg
-tags: ["action", "fps", "retro shooter", "single player"]
+tags:
+  - single-player
+  - fps
+  - action
+  - retro-shooter
 year: 2016
 ---
 
diff --git a/src/games/2017-01-29-hyper-light-drifter.md b/src/games/2017-01-29-hyper-light-drifter.md
index d00c254..72c05d0 100644
--- a/src/games/2017-01-29-hyper-light-drifter.md
+++ b/src/games/2017-01-29-hyper-light-drifter.md
@@ -3,7 +3,13 @@ title: Hyper Light Drifter
 platform: PC
 image: https://cdn.wonderfulfrog.com/images/HyperLightDrifterBoxArt.png
 tags:
-  ["action", "hack and slash", "retro", "indie", "open world", "single player"]
+  - single-player
+  - action
+  - retro
+  - indie
+  - hack-n-slash
+  - open-world
+  - retro
 year: 2016
 ---
 
diff --git a/src/games/2017-02-26-vanquish.md b/src/games/2017-02-26-vanquish.md
index 33ebcb3..32dcef0 100644
--- a/src/games/2017-02-26-vanquish.md
+++ b/src/games/2017-02-26-vanquish.md
@@ -2,7 +2,11 @@
 title: Vanquish
 platform: PlayStation 3
 image: https://cdn.wonderfulfrog.com/images/PG_Vanquish_box_artwork.png
-tags: ["action", "platinum", "shooter", "single player"]
+tags:
+  - single-player
+  - action
+  - shooter
+  - platinum
 year: 2010
 ---
 
diff --git a/src/games/2017-12-20-persona-5.md b/src/games/2017-12-20-persona-5.md
index 75187ca..3fe19c5 100644
--- a/src/games/2017-12-20-persona-5.md
+++ b/src/games/2017-12-20-persona-5.md
@@ -2,6 +2,10 @@
 title: Persona 5
 platform: PlayStation 4
 image: https://cdn.wonderfulfrog.com/images/Persona_5_cover_art.jpg
-tags: ["rpg", "turn based", "single player", "persona"]
+tags:
+  - single-player
+  - rpg
+  - turn-based
+  - persona
 year: 2016
 ---
diff --git a/src/games/2018-04-10-axiom-verge.md b/src/games/2018-04-10-axiom-verge.md
index a7acb9c..cdcc874 100644
--- a/src/games/2018-04-10-axiom-verge.md
+++ b/src/games/2018-04-10-axiom-verge.md
@@ -1,7 +1,12 @@
 ---
 title: Axiom Verge
 platform: Nintendo Switch
-image: https://cdn.wonderfulfrog.com/images/Axiom_Verge_Title.png
-tags: ["action", "metroidvania", "indie", "single player"]
+image: https://cdn.wonderfulfrog.com/images/games/axiom-verge-cover.jpg
+tags:
+  - single-player
+  - action
+  - indie
+  - metroidvania
+  - retro
 year: 2015
 ---
diff --git a/src/games/2022-03-20-animal-crossing-new-horizons.md b/src/games/2022-03-20-animal-crossing-new-horizons.md
index f540ce7..8d90979 100644
--- a/src/games/2022-03-20-animal-crossing-new-horizons.md
+++ b/src/games/2022-03-20-animal-crossing-new-horizons.md
@@ -2,7 +2,10 @@
 title: "Animal Crossings: New Horizons"
 platform: Switch
 image: https://cdn.wonderfulfrog.com/images/acnh.jpg
-tags: ["single player"]
+tags:
+  - single-player
+  - multiplayer
+  - life-sim
 year: 2020
 playtime: 400+ hours
 pullquote: Idyllic escape from the world
diff --git a/src/games/2024-01-07-her-story.md b/src/games/2024-01-07-her-story.md
index e1d5040..6d51354 100644
--- a/src/games/2024-01-07-her-story.md
+++ b/src/games/2024-01-07-her-story.md
@@ -1,8 +1,12 @@
 ---
 title: Her Story
 platform: PC
-image: https://cdn.wonderfulfrog.com/images/Her_Story_store_art.jpg
-tags: ["pc", "narrative", "simulator", "indie", "single player"]
+image: https://cdn.wonderfulfrog.com/images/games/her-story-cover.jpg
+tags:
+  - single-player
+  - indie
+  - simulation
+  - narrative
 year: 2015
 ---
 
diff --git a/src/games/2024-01-19-middle-earth-shadow-of-mordor.md b/src/games/2024-01-19-middle-earth-shadow-of-mordor.md
index 1d747d5..42ba5a0 100644
--- a/src/games/2024-01-19-middle-earth-shadow-of-mordor.md
+++ b/src/games/2024-01-19-middle-earth-shadow-of-mordor.md
@@ -3,7 +3,11 @@ title: "Middle-earth: Shadow of Mordor"
 platform: PC
 image: https://cdn.wonderfulfrog.com/images/Shadow_of_Mordor_cover_art.jpg
 tags:
-  ["action", "nemesis system", "hack and slash", "single player", "open world"]
+  - single-player
+  - action
+  - hack-n-slash
+  - open-world
+  - nemesis-system
 year: 2014
 ---
 
diff --git a/src/games/2024-01-27-citizen-sleeper.md b/src/games/2024-01-27-citizen-sleeper.md
index a37bd6f..2dc47a7 100644
--- a/src/games/2024-01-27-citizen-sleeper.md
+++ b/src/games/2024-01-27-citizen-sleeper.md
@@ -1,8 +1,13 @@
 ---
 title: Citizen Sleeper
 platform: PC
-image: https://cdn.wonderfulfrog.com/images/Citizen_Sleeper_cover_art.jpg
-tags: ["narrative", "visual novel", "indie", "rpg", "single player"]
+image: https://cdn.wonderfulfrog.com/images/games/citizen-sleeper-cover.jpg
+tags:
+  - single-player
+  - narrative
+  - visual-novel
+  - indie
+  - rpg
 year: 2022
 rating: 4
 playtime: 7 hours
diff --git a/src/pages/games/index.html b/src/pages/games/index.html
index 1054624..7b8e84a 100644
--- a/src/pages/games/index.html
+++ b/src/pages/games/index.html
@@ -6,11 +6,24 @@ permalink: "games/index.html"
 {% from "macros/media-grid.njk" import grid %}
 {% set data = collections.game | reverse | limit(5) %}
 {% 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>
+    <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="/games/tag/{{ tag.tag | slugify }}">
+                    {% include "svgs/frame.svg" %}
+                {{ tag.tag }}</a>
+            </li>
+        {% endfor %}
+    </ul>
     <h2>
         <a href="recent">Latest games</a>
     </h2>
diff --git a/src/pages/games/tag.html b/src/pages/games/tag.html
new file mode 100644
index 0000000..94f7ca5
--- /dev/null
+++ b/src/pages/games/tag.html
@@ -0,0 +1,15 @@
+---
+pagination:
+  data: collections.gamesByTag
+  size: 1
+  alias: tag
+permalink: "games/tag/{{ tag | slugify }}/index.html"
+---
+
+{% from "macros/media-grid.njk" import grid %}
+{% set data = collections.gamesByTag[tag] %}
+<header class="flow flow-space-1">
+    <h1>Games</h1>
+    <p class="text-fadeText flow-space-0.25">Tagged with "{{ tag }}"</p>
+</header>
+{{ grid(data) }}
diff --git a/src/pages/games/tags.html b/src/pages/games/tags.html
new file mode 100644
index 0000000..aae0c43
--- /dev/null
+++ b/src/pages/games/tags.html
@@ -0,0 +1,19 @@
+---
+title: Tagged in Games
+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>
+                <a class="[ button ]" href="/games/tag/{{ tag.tag | slugify }}">
+                    {% include "svgs/frame.svg" %}
+                {{ tag.tag }}</a>
+            </li>
+        {% endfor %}
+    </ul>
+</section>