feat: update game layout and content

2025-01-24 13:39:58 -08:00 · 2025-01-24 13:39:58 -08:00 · 8e41cb5af7
commit 8e41cb5af7
parent 636a0f04ea
25 changed files with 165 additions and 34 deletions
--- 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);
--- 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>
--- 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
 ---
--- 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
 ---

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

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

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

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

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

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

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

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

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

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

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

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

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

--- 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
--- 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>
--- a/src/pages/games/tag.html
+++ 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) }}
--- a/src/pages/games/tags.html
+++ 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>