From fab17802822a73b3b0b676b315623ed29956071c Mon Sep 17 00:00:00 2001
From: Devin Haska <2636402+wonderfulfrog@users.noreply.github.com>
Date: Thu, 14 Nov 2024 22:32:19 -0800
Subject: [PATCH] feat: move games into their own section

---
 config/collections/index.js                   | 20 +++++
 eleventy.config.js                            | 12 ++-
 src/_data/navigation.js                       |  2 +-
 src/_includes/layouts/game.html               | 40 +++++++++
 src/_includes/macros/media-grid.njk           | 14 +++
 src/_includes/macros/utils.njk                | 15 ++--
 src/catalogue/games/games.11tydata.js         |  8 --
 src/css/blocks/media-display.css              | 17 ++++
 src/css/blocks/media-grid.css                 | 85 +++++++++++++++++++
 src/css/global/global-styles.css              |  4 -
 src/css/utilities/flex.css                    |  4 +
 src/css/utilities/wrapper.css                 |  1 +
 .../games/2012-02-26-yoshis-island.md         |  0
 .../games/2015-03-01-majoras-mask-3d.md       |  0
 .../2015-04-18-mario-and-luigi-dream-team.md  |  0
 ...-21-donkey-kong-country-tropical-freeze.md |  0
 ...4-26-professor-layton-vs-phoenix-wright.md |  0
 .../games/2015-05-15-the-wonderful-101.md     |  0
 .../games/2015-12-02-fallout-4.md             |  0
 .../games/2016-03-16-persona-3-portable.md    |  0
 .../games/2016-08-22-shovel-knight.md         |  0
 .../games/2016-08-24-tomb-raider.md           |  0
 .../2016-12-31-assassins-creed-black-flag.md  |  0
 .../games/2017-01-02-doom-2016.md             |  0
 .../games/2017-01-29-hyper-light-drifter.md   |  0
 .../games/2017-02-26-vanquish.md              |  0
 .../games/2017-12-20-persona-5.md             |  0
 .../games/2018-04-10-axiom-verge.md           |  0
 ...2022-03-20-animal-crossing-new-horizons.md |  9 ++
 .../games/2024-01-07-her-story.md             |  0
 ...024-01-19-middle-earth-shadow-of-mordor.md |  0
 .../games/2024-01-27-citizen-sleeper.md       |  2 +
 src/games/games.11tydata.js                   |  5 ++
 src/pages/games/index.html                    | 21 +++++
 src/pages/games/year.html                     | 19 +++++
 35 files changed, 257 insertions(+), 21 deletions(-)
 create mode 100644 src/_includes/layouts/game.html
 create mode 100644 src/_includes/macros/media-grid.njk
 delete mode 100644 src/catalogue/games/games.11tydata.js
 create mode 100644 src/css/blocks/media-display.css
 create mode 100644 src/css/blocks/media-grid.css
 rename src/{catalogue => }/games/2012-02-26-yoshis-island.md (100%)
 rename src/{catalogue => }/games/2015-03-01-majoras-mask-3d.md (100%)
 rename src/{catalogue => }/games/2015-04-18-mario-and-luigi-dream-team.md (100%)
 rename src/{catalogue => }/games/2015-04-21-donkey-kong-country-tropical-freeze.md (100%)
 rename src/{catalogue => }/games/2015-04-26-professor-layton-vs-phoenix-wright.md (100%)
 rename src/{catalogue => }/games/2015-05-15-the-wonderful-101.md (100%)
 rename src/{catalogue => }/games/2015-12-02-fallout-4.md (100%)
 rename src/{catalogue => }/games/2016-03-16-persona-3-portable.md (100%)
 rename src/{catalogue => }/games/2016-08-22-shovel-knight.md (100%)
 rename src/{catalogue => }/games/2016-08-24-tomb-raider.md (100%)
 rename src/{catalogue => }/games/2016-12-31-assassins-creed-black-flag.md (100%)
 rename src/{catalogue => }/games/2017-01-02-doom-2016.md (100%)
 rename src/{catalogue => }/games/2017-01-29-hyper-light-drifter.md (100%)
 rename src/{catalogue => }/games/2017-02-26-vanquish.md (100%)
 rename src/{catalogue => }/games/2017-12-20-persona-5.md (100%)
 rename src/{catalogue => }/games/2018-04-10-axiom-verge.md (100%)
 create mode 100644 src/games/2022-03-20-animal-crossing-new-horizons.md
 rename src/{catalogue => }/games/2024-01-07-her-story.md (100%)
 rename src/{catalogue => }/games/2024-01-19-middle-earth-shadow-of-mordor.md (100%)
 rename src/{catalogue => }/games/2024-01-27-citizen-sleeper.md (94%)
 create mode 100644 src/games/games.11tydata.js
 create mode 100644 src/pages/games/index.html
 create mode 100644 src/pages/games/year.html

diff --git a/config/collections/index.js b/config/collections/index.js
index 892159b..2f0e115 100644
--- a/config/collections/index.js
+++ b/config/collections/index.js
@@ -1,3 +1,5 @@
+import dayjs from "dayjs";
+
 export const postsByTag = (collection) => {
   const posts = collection.getFilteredByTag("post");
 
@@ -13,6 +15,24 @@ export const postsByTag = (collection) => {
   return postsByTag;
 };
 
+export const gamesByYear = (collection) => {
+  const allGames = collection.getFilteredByTag("game");
+  const gamesByYear = {};
+
+  allGames.forEach((game) => {
+    const date = new dayjs(game.date);
+    const year = date.year();
+
+    if (!gamesByYear[year]) {
+      gamesByYear[year] = { value: year, data: [game] };
+    } else {
+      gamesByYear[year].data.push(game);
+    }
+  });
+
+  return gamesByYear;
+};
+
 export const catalogueByType = (collection) => {
   const allItems = collection.getFilteredByTag("catalogue");
 
diff --git a/eleventy.config.js b/eleventy.config.js
index b7c885e..11ff310 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -1,8 +1,13 @@
+import util from "util";
 import pluginRss from "@11ty/eleventy-plugin-rss";
 import pluginNoRobots from "eleventy-plugin-no-robots";
 import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
 
-import { catalogueByType, postsByTag } from "./config/collections/index.js";
+import {
+  catalogueByType,
+  postsByTag,
+  gamesByYear,
+} from "./config/collections/index.js";
 
 import { dir } from "./config/constants.js";
 import {
@@ -32,6 +37,7 @@ export default function (eleventyConfig) {
   eleventyConfig.addPlugin(pluginNoRobots);
 
   // 	--------------------- Custom Collections -----------------------
+  eleventyConfig.addCollection("gamesByYear", gamesByYear);
   eleventyConfig.addCollection("catalogueByType", catalogueByType);
   eleventyConfig.addCollection("postsByTag", postsByTag);
 
@@ -81,6 +87,10 @@ export default function (eleventyConfig) {
   // 	--------------------- Shortcodes -----------------------
   eleventyConfig.addShortcode("youtube", liteYoutube);
 
+  eleventyConfig.addFilter("console", function (value) {
+    return util.inspect(value);
+  });
+
   return {
     // Optional (default is set): If your site deploys to a subdirectory, change `pathPrefix`, for example with with GitHub pages
     pathPrefix: "/",
diff --git a/src/_data/navigation.js b/src/_data/navigation.js
index 8cc8f19..f8a5b29 100644
--- a/src/_data/navigation.js
+++ b/src/_data/navigation.js
@@ -12,7 +12,7 @@ export default {
     },
     {
       text: "Games",
-      url: "/catalogue/games",
+      url: "/games",
       icon: "game-controller",
     },
     {
diff --git a/src/_includes/layouts/game.html b/src/_includes/layouts/game.html
new file mode 100644
index 0000000..ab2106f
--- /dev/null
+++ b/src/_includes/layouts/game.html
@@ -0,0 +1,40 @@
+---
+layout: "layouts/base"
+---
+
+{% from "macros/date.njk" import format %}
+{% from "macros/utils.njk" import stars %}
+<header class="media-meta-grid gap-1">
+    <div class="media-image">
+        <img src="{{ image }}" alt="" />
+    </div>
+    <div class="flow flex-col justify-center">
+        <div class="flex items-center gap-0.5 flex-wrap">
+            <h2>{{ title }}</h2>
+            <span class="pill">{{ platform }}</span>
+        </div>
+        {% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
+        {{ format(page.date) }}
+        {% if rating %}{{ stars(rating) }}{% endif %}
+        <ul class="list-none p-0 mb-0 media-meta-grid gap-0.5">
+            {% if year %}
+                <li class="flex-col">
+                    <strong>Released</strong><span>{{ year }}</span>
+                </li>
+            {% endif %}
+            {% if playtime %}
+                <li class="flex-col">
+                    <strong>Playtime</strong><span>{{ playtime }}</span>
+                </li>
+            {% endif %}
+            {% if pullquote %}
+                <li class="flex-col meta-grid--full">
+                    <strong>Pullquote</strong><span>{{ pullquote }}</span>
+                </li>
+            {% endif %}
+        </ul>
+    </div>
+</header>
+<section class="flow">
+    {{ content | safe }}
+</section>
diff --git a/src/_includes/macros/media-grid.njk b/src/_includes/macros/media-grid.njk
new file mode 100644
index 0000000..ffc5816
--- /dev/null
+++ b/src/_includes/macros/media-grid.njk
@@ -0,0 +1,14 @@
+{% macro grid(data, shape = "vertical") %}
+    <ul class="media-grid {{ shape }} list-none p-0">
+        {% for item in data %}
+            <li class="radius-0.5">
+                <a href="{{ item.url }}">
+                    {% if item.data.image %}<img src="{{ item.data.image }}" alt="" />{% endif %}
+                    <div class="meta font-size-s line-height-s flex items-end px-0.5 pb-0.5">
+                        <span class="meta-text">{{ item.data.title }}</span>
+                    </div>
+                </a>
+            </li>
+        {% endfor %}
+    </ul>
+{% endmacro %}
diff --git a/src/_includes/macros/utils.njk b/src/_includes/macros/utils.njk
index 4a40aee..8caa05a 100644
--- a/src/_includes/macros/utils.njk
+++ b/src/_includes/macros/utils.njk
@@ -1,12 +1,13 @@
 {% macro stars(number) %}
     {% set filledStars = number %}
     {% set emptyStars = 5 - number %}
-    <ul class="[ stars ] [ flex list-none p-0 m-0 text-primary ]" aria-description="{{ number }} out of 5 stars">
-    {% for i in range(0, filledStars) %}
-        <li class="[ star-filled ]">{% include "svgs/star.svg" %}</li>
-    {% endfor %}
-    {% for i in range(0, emptyStars) %}
-        <li class="[ star-empty ]">{% include "svgs/star-empty.svg" %}</li>
-    {% endfor %}
+    <ul class="[ stars ] [ flex list-none p-0 mb-0 text-primary ]"
+        aria-description="{{ number }} out of 5 stars">
+        {% for i in range(0, filledStars) %}
+            <li class="[ star-filled ]">{% include "svgs/star.svg" %}</li>
+        {% endfor %}
+        {% for i in range(0, emptyStars) %}
+            <li class="[ star-empty ]">{% include "svgs/star-empty.svg" %}</li>
+        {% endfor %}
     </ul>
 {% endmacro %}
diff --git a/src/catalogue/games/games.11tydata.js b/src/catalogue/games/games.11tydata.js
deleted file mode 100644
index 3801d33..0000000
--- a/src/catalogue/games/games.11tydata.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export default {
-  layout: "layouts/catalogue-item",
-  tags: "game",
-  permalink: "catalogue/games/{{ page.fileSlug }}/index.html",
-  eleventyComputed: {
-    subtitle: (data) => `${data.platform}`,
-  },
-};
diff --git a/src/css/blocks/media-display.css b/src/css/blocks/media-display.css
new file mode 100644
index 0000000..f9a4265
--- /dev/null
+++ b/src/css/blocks/media-display.css
@@ -0,0 +1,17 @@
+.media-image {
+  img {
+    aspect-ratio: 0.8;
+    border: 1px solid var(--color-shadow);
+    height: auto;
+    object-fit: cover;
+  }
+}
+
+.media-meta-grid {
+  display: grid;
+  grid-template-columns: 225px 1fr;
+}
+
+.meta-grid--full {
+  grid-column: 1/3;
+}
diff --git a/src/css/blocks/media-grid.css b/src/css/blocks/media-grid.css
new file mode 100644
index 0000000..10dcb04
--- /dev/null
+++ b/src/css/blocks/media-grid.css
@@ -0,0 +1,85 @@
+.media-grid {
+  --column-count: 5;
+  --aspect-ratio: 0.8;
+
+  display: grid;
+  grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
+
+  li {
+    border: 1px solid var(--color-shadow);
+    overflow: hidden;
+    position: relative;
+
+    a {
+      color: var(--color-white);
+
+      picture {
+        height: 100%;
+
+        img {
+          aspect-ratio: var(--aspect-ratio);
+          border-radius: 0;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+    }
+  }
+
+  .meta {
+    background: linear-gradient(transparent, var(--color-shadow) 90%);
+    bottom: 0;
+    height: 100%;
+    position: absolute;
+    transition: opacity 0.3s ease;
+    width: 100%;
+
+    .meta-text {
+      text-shadow: 1px 1px 2px var(--color-black);
+      transition: transform 0.3s var(--transition-bounce);
+    }
+  }
+}
+
+.media-grid--square {
+  --aspect-ratio: 1;
+}
+
+@media (hover: hover) {
+  .media-grid {
+    li {
+      a {
+        .meta {
+          opacity: 0;
+
+          .meta-text {
+            transform: translateY(var(--spacing-1));
+          }
+        }
+      }
+
+      a:hover {
+        .meta {
+          opacity: 1;
+
+          .meta-text {
+            transform: translateY(0);
+          }
+        }
+      }
+    }
+  }
+}
+
+@container (max-width: 32rem) {
+  .media-grid {
+    --column-count: 3;
+  }
+}
+
+@container (max-width: 24rem) {
+  .media-grid {
+    --column-count: 2;
+  }
+}
diff --git a/src/css/global/global-styles.css b/src/css/global/global-styles.css
index de422ba..6488d7c 100644
--- a/src/css/global/global-styles.css
+++ b/src/css/global/global-styles.css
@@ -115,10 +115,6 @@ abbr {
   text-decoration-color: var(--color-primary);
 }
 
-img[width][height] {
-  height: auto;
-}
-
 hr {
   border-style: solid;
   color: var(--color-surface);
diff --git a/src/css/utilities/flex.css b/src/css/utilities/flex.css
index 7e3bdb4..45932a0 100644
--- a/src/css/utilities/flex.css
+++ b/src/css/utilities/flex.css
@@ -11,6 +11,10 @@
   align-items: center;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .justify-center {
   justify-content: center;
 }
diff --git a/src/css/utilities/wrapper.css b/src/css/utilities/wrapper.css
index 6f81449..25426e7 100644
--- a/src/css/utilities/wrapper.css
+++ b/src/css/utilities/wrapper.css
@@ -5,6 +5,7 @@
  * https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility/
  */
 .wrapper {
+  container-type: inline-size;
   width: 90vw;
   width: clamp(16rem, 90vw, 65ch);
   margin-left: auto;
diff --git a/src/catalogue/games/2012-02-26-yoshis-island.md b/src/games/2012-02-26-yoshis-island.md
similarity index 100%
rename from src/catalogue/games/2012-02-26-yoshis-island.md
rename to src/games/2012-02-26-yoshis-island.md
diff --git a/src/catalogue/games/2015-03-01-majoras-mask-3d.md b/src/games/2015-03-01-majoras-mask-3d.md
similarity index 100%
rename from src/catalogue/games/2015-03-01-majoras-mask-3d.md
rename to src/games/2015-03-01-majoras-mask-3d.md
diff --git a/src/catalogue/games/2015-04-18-mario-and-luigi-dream-team.md b/src/games/2015-04-18-mario-and-luigi-dream-team.md
similarity index 100%
rename from src/catalogue/games/2015-04-18-mario-and-luigi-dream-team.md
rename to src/games/2015-04-18-mario-and-luigi-dream-team.md
diff --git a/src/catalogue/games/2015-04-21-donkey-kong-country-tropical-freeze.md b/src/games/2015-04-21-donkey-kong-country-tropical-freeze.md
similarity index 100%
rename from src/catalogue/games/2015-04-21-donkey-kong-country-tropical-freeze.md
rename to src/games/2015-04-21-donkey-kong-country-tropical-freeze.md
diff --git a/src/catalogue/games/2015-04-26-professor-layton-vs-phoenix-wright.md b/src/games/2015-04-26-professor-layton-vs-phoenix-wright.md
similarity index 100%
rename from src/catalogue/games/2015-04-26-professor-layton-vs-phoenix-wright.md
rename to src/games/2015-04-26-professor-layton-vs-phoenix-wright.md
diff --git a/src/catalogue/games/2015-05-15-the-wonderful-101.md b/src/games/2015-05-15-the-wonderful-101.md
similarity index 100%
rename from src/catalogue/games/2015-05-15-the-wonderful-101.md
rename to src/games/2015-05-15-the-wonderful-101.md
diff --git a/src/catalogue/games/2015-12-02-fallout-4.md b/src/games/2015-12-02-fallout-4.md
similarity index 100%
rename from src/catalogue/games/2015-12-02-fallout-4.md
rename to src/games/2015-12-02-fallout-4.md
diff --git a/src/catalogue/games/2016-03-16-persona-3-portable.md b/src/games/2016-03-16-persona-3-portable.md
similarity index 100%
rename from src/catalogue/games/2016-03-16-persona-3-portable.md
rename to src/games/2016-03-16-persona-3-portable.md
diff --git a/src/catalogue/games/2016-08-22-shovel-knight.md b/src/games/2016-08-22-shovel-knight.md
similarity index 100%
rename from src/catalogue/games/2016-08-22-shovel-knight.md
rename to src/games/2016-08-22-shovel-knight.md
diff --git a/src/catalogue/games/2016-08-24-tomb-raider.md b/src/games/2016-08-24-tomb-raider.md
similarity index 100%
rename from src/catalogue/games/2016-08-24-tomb-raider.md
rename to src/games/2016-08-24-tomb-raider.md
diff --git a/src/catalogue/games/2016-12-31-assassins-creed-black-flag.md b/src/games/2016-12-31-assassins-creed-black-flag.md
similarity index 100%
rename from src/catalogue/games/2016-12-31-assassins-creed-black-flag.md
rename to src/games/2016-12-31-assassins-creed-black-flag.md
diff --git a/src/catalogue/games/2017-01-02-doom-2016.md b/src/games/2017-01-02-doom-2016.md
similarity index 100%
rename from src/catalogue/games/2017-01-02-doom-2016.md
rename to src/games/2017-01-02-doom-2016.md
diff --git a/src/catalogue/games/2017-01-29-hyper-light-drifter.md b/src/games/2017-01-29-hyper-light-drifter.md
similarity index 100%
rename from src/catalogue/games/2017-01-29-hyper-light-drifter.md
rename to src/games/2017-01-29-hyper-light-drifter.md
diff --git a/src/catalogue/games/2017-02-26-vanquish.md b/src/games/2017-02-26-vanquish.md
similarity index 100%
rename from src/catalogue/games/2017-02-26-vanquish.md
rename to src/games/2017-02-26-vanquish.md
diff --git a/src/catalogue/games/2017-12-20-persona-5.md b/src/games/2017-12-20-persona-5.md
similarity index 100%
rename from src/catalogue/games/2017-12-20-persona-5.md
rename to src/games/2017-12-20-persona-5.md
diff --git a/src/catalogue/games/2018-04-10-axiom-verge.md b/src/games/2018-04-10-axiom-verge.md
similarity index 100%
rename from src/catalogue/games/2018-04-10-axiom-verge.md
rename to src/games/2018-04-10-axiom-verge.md
diff --git a/src/games/2022-03-20-animal-crossing-new-horizons.md b/src/games/2022-03-20-animal-crossing-new-horizons.md
new file mode 100644
index 0000000..f540ce7
--- /dev/null
+++ b/src/games/2022-03-20-animal-crossing-new-horizons.md
@@ -0,0 +1,9 @@
+---
+title: "Animal Crossings: New Horizons"
+platform: Switch
+image: https://cdn.wonderfulfrog.com/images/acnh.jpg
+tags: ["single player"]
+year: 2020
+playtime: 400+ hours
+pullquote: Idyllic escape from the world
+---
diff --git a/src/catalogue/games/2024-01-07-her-story.md b/src/games/2024-01-07-her-story.md
similarity index 100%
rename from src/catalogue/games/2024-01-07-her-story.md
rename to src/games/2024-01-07-her-story.md
diff --git a/src/catalogue/games/2024-01-19-middle-earth-shadow-of-mordor.md b/src/games/2024-01-19-middle-earth-shadow-of-mordor.md
similarity index 100%
rename from src/catalogue/games/2024-01-19-middle-earth-shadow-of-mordor.md
rename to src/games/2024-01-19-middle-earth-shadow-of-mordor.md
diff --git a/src/catalogue/games/2024-01-27-citizen-sleeper.md b/src/games/2024-01-27-citizen-sleeper.md
similarity index 94%
rename from src/catalogue/games/2024-01-27-citizen-sleeper.md
rename to src/games/2024-01-27-citizen-sleeper.md
index 3a66948..a37bd6f 100644
--- a/src/catalogue/games/2024-01-27-citizen-sleeper.md
+++ b/src/games/2024-01-27-citizen-sleeper.md
@@ -5,6 +5,8 @@ image: https://cdn.wonderfulfrog.com/images/Citizen_Sleeper_cover_art.jpg
 tags: ["narrative", "visual novel", "indie", "rpg", "single player"]
 year: 2022
 rating: 4
+playtime: 7 hours
+pullquote: Immersive dice simulator
 ---
 
 I loved the dice system that powered the entire game. It made it feel like you have control over the situation (you can choose where to put your dice rolls), but at the same time none at all (the result is still a dice roll). I especially liked that every choice never felt like a great option. Every choice will inadvertently affect someone or something else negatively. There was never a clear-cut best choice.
diff --git a/src/games/games.11tydata.js b/src/games/games.11tydata.js
new file mode 100644
index 0000000..f460867
--- /dev/null
+++ b/src/games/games.11tydata.js
@@ -0,0 +1,5 @@
+export default {
+  layout: "layouts/game",
+  permalink: "games/{{ page.fileSlug }}/index.html",
+  tags: "game",
+};
diff --git a/src/pages/games/index.html b/src/pages/games/index.html
new file mode 100644
index 0000000..a5a2486
--- /dev/null
+++ b/src/pages/games/index.html
@@ -0,0 +1,21 @@
+---
+permalink: "games/index.html"
+---
+
+{% from "macros/media-grid.njk" import grid %}
+{% set gamesData = collections.game | reverse %}
+{% set yearsData = collections.gamesByYear | values | reverse %}
+<section class="flow">
+    <h1>Games</h1>
+    <p>A collection of games I've played over the years.</p>
+    <h2>Browse by year</h2>
+    <ul class="list-none flex p-0 gap-1 flex-wrap">
+        {% for year in yearsData %}
+            <li>
+                <a class="button" href="/games/year/{{ year.value }}/">{{ year.value }}</a>
+            </li>
+        {% endfor %}
+    </ul>
+    <h2>Latest games</h2>
+    {{ grid(gamesData) }}
+</section>
diff --git a/src/pages/games/year.html b/src/pages/games/year.html
new file mode 100644
index 0000000..e8ac336
--- /dev/null
+++ b/src/pages/games/year.html
@@ -0,0 +1,19 @@
+---
+pagination:
+    data: collections.gamesByYear
+    size: 1
+    alias: year
+    resolve: values
+permalink: "games/year/{{ year.value }}/index.html"
+---
+
+{% from "macros/media-grid.njk" import grid %}
+{% set gamesData = year.data | reverse %}
+<section class="flow">
+    <a href="/games">Back to games</a>
+    <h1>Games in {{ year.value }}</h1>
+    <p>
+        A collection of games I've played in <strong>{{ year.value }}</strong>.
+    </p>
+    {{ grid(gamesData) }}
+</section>