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");
 

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: "/",

src/_data/navigation.js

@@ -12,7 +12,7 @@ export default {
     },
     {
       text: "Games",
-      url: "/catalogue/games",
+      url: "/games",
       icon: "game-controller",
     },
     {

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>

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

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

src/catalogue/games/games.11tydata.js

@@ -1,8 +0,0 @@
-export default {
-  layout: "layouts/catalogue-item",
-  tags: "game",
-  permalink: "catalogue/games/{{ page.fileSlug }}/index.html",
-  eleventyComputed: {
-    subtitle: (data) => `${data.platform}`,
-  },
-};

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;
+}

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;
+  }
+}

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

src/css/utilities/flex.css

@@ -11,6 +11,10 @@
   align-items: center;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .justify-center {
   justify-content: center;
 }

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;

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

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.

src/games/games.11tydata.js

@@ -0,0 +1,5 @@
+export default {
+  layout: "layouts/game",
+  permalink: "games/{{ page.fileSlug }}/index.html",
+  tags: "game",
+};

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>

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>