config/collections/index.js

@@ -15,24 +15,6 @@ 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");
 

config/filters/index.js

@@ -29,6 +29,22 @@ export const organizeByDate = (collection) => {
   return collectionByDate;
 };
 
+export const transformByDate = (collection) => {
+  const collectionByDate = {};
+
+  collection.forEach((item) => {
+    const year = formatDate(item.date, "YYYY");
+
+    if (!collectionByDate[year]) {
+      return (collectionByDate[year] = { value: year, data: [item] });
+    }
+
+    collectionByDate[year].data.push(item);
+  });
+
+  return collectionByDate;
+};
+
 export const allTagCounts = (collection, ignore = ["post"]) => {
   if (!collection.length) {
     throw new Error("Invalid collection, no items");

eleventy.config.js

@@ -3,11 +3,7 @@ import pluginRss from "@11ty/eleventy-plugin-rss";
 import pluginNoRobots from "eleventy-plugin-no-robots";
 import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
 
-import {
-  catalogueByType,
-  postsByTag,
-  gamesByYear,
-} from "./config/collections/index.js";
+import { catalogueByType, postsByTag } from "./config/collections/index.js";
 
 import { dir } from "./config/constants.js";
 import {
@@ -23,6 +19,7 @@ import {
   organizeByDate,
   pluralize,
   values,
+  transformByDate,
 } from "./config/filters/index.js";
 import markdown from "./config/plugins/markdown.js";
 import liteYoutube from "./config/shortcodes/youtube.js";
@@ -37,7 +34,16 @@ export default function (eleventyConfig) {
   eleventyConfig.addPlugin(pluginNoRobots);
 
   // 	--------------------- Custom Collections -----------------------
-  eleventyConfig.addCollection("gamesByYear", gamesByYear);
+  eleventyConfig.addCollection("gamesByYear", (collection) => {
+    const data = collection.getFilteredByTag("game");
+    const byYear = transformByDate(data);
+    return byYear;
+  });
+  eleventyConfig.addCollection("booksByYear", (collection) => {
+    const data = collection.getFilteredByTag("book");
+    const byYear = transformByDate(data);
+    return byYear;
+  });
   eleventyConfig.addCollection("catalogueByType", catalogueByType);
   eleventyConfig.addCollection("postsByTag", postsByTag);
 

src/_data/navigation.js

@@ -17,7 +17,7 @@ export default {
     },
     {
       text: "Books",
-      url: "/catalogue/books",
+      url: "/books",
       icon: "book",
     },
   ],

src/_includes/layouts/book.html

@@ -0,0 +1,43 @@
+---
+layout: "layouts/base"
+---
+
+{% from "macros/date.njk" import format %}
+{% from "macros/utils.njk" import stars %}
+<a class="button" href="/books">
+    {% include "svgs/arrow-left.svg" %}
+Back to books</a>
+<header class="media-meta-grid gap-1">
+    <div class="media-image">
+        <img src="{{ image }}" alt="" />
+    </div>
+    <div class="flow flex-col justify-center">
+        <h2>{{ title }}</h2>
+        {% if subtitle %}<p class="text-fadeText flow-space-0.5 line-height-m">{{ subtitle }}</p>{% endif %}
+        <p class="flex gap-0.5">
+            <span class="text-fadeText">by</span>{{ author }}
+        </p>
+        {% 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>
+{{ format(page.date) }}

src/_includes/layouts/game.html

@@ -4,6 +4,9 @@ layout: "layouts/base"
 
 {% from "macros/date.njk" import format %}
 {% from "macros/utils.njk" import stars %}
+<a class="button" href="/games">
+    {% include "svgs/arrow-left.svg" %}
+Back to games</a>
 <header class="media-meta-grid gap-1">
     <div class="media-image">
         <img src="{{ image }}" alt="" />
@@ -14,7 +17,6 @@ layout: "layouts/base"
             <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 %}
@@ -38,3 +40,4 @@ layout: "layouts/base"
 <section class="flow">
     {{ content | safe }}
 </section>
+{{ format(page.date) }}

src/_includes/macros/date.njk

@@ -1,5 +1,6 @@
 {% macro format(dateString) %}
-    <time class="[ date ] [ flex items-center gap-0.5 text-fadeText ]" datetime="{{ date }}">
+    <time class="[ date ] [ flex items-center gap-0.5 text-fadeText ]"
+          datetime="{{ dateString }}">
         <span class="[ text-primary line-height-s ]">{% include "svgs/calendar.svg" %}</span>{{ dateString | formatDate("MMMM Do YYYY") }}
     </time>
 {% endmacro %}

src/books/books.11tydata.js

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

src/catalogue/books/books.11tydata.js

@@ -1,10 +0,0 @@
-export default {
-  layout: "layouts/catalogue-item",
-  tags: "book",
-  permalink: "catalogue/books/{{ page.fileSlug }}/index.html",
-  linkTitle: "View book details",
-  eleventyComputed: {
-    tertiary: (data) =>
-      `<p class="[ flow-space-0.5 ]"><span class="[ text-fadeText ]">by</span> ${data.author}</p>`,
-  },
-};

src/css/blocks/media-grid.css

@@ -22,6 +22,7 @@
           width: 100%;
           height: 100%;
           object-fit: cover;
+          transition: transform 0.3s ease;
         }
       }
     }
@@ -60,6 +61,10 @@
       }
 
       a:hover {
+        img {
+          transform: scale(1.05);
+        }
+
         .meta {
           opacity: 1;
 

src/css/global/global-styles.css

@@ -35,7 +35,6 @@ h1 {
   font-weight: var(--font-weight-display-extrabold);
   letter-spacing: -0.05rem;
   line-height: 3rem;
-  transform: var(--text-skew);
 }
 
 h2 {
@@ -153,6 +152,7 @@ figure figcaption {
 picture source,
 picture img {
   border-radius: var(--spacing-0\.5);
+  height: auto;
 }
 
 aside {

src/pages/books/index.html

@@ -0,0 +1,21 @@
+---
+permalink: "books/index.html"
+---
+
+{% from "macros/media-grid.njk" import grid %}
+{% set data = collections.book | reverse %}
+{% set yearsData = collections.booksByYear | values | reverse %}
+<section class="flow">
+    <h1>Books</h1>
+    <p>A collection of games I've read 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="/books/year/{{ year.value }}/">{{ year.value }}</a>
+            </li>
+        {% endfor %}
+    </ul>
+    <h2>Latest books</h2>
+    {{ grid(data) }}
+</section>

src/pages/books/year.html

@@ -0,0 +1,21 @@
+---
+pagination:
+    data: collections.booksByYear
+    size: 1
+    alias: year
+    resolve: values
+permalink: "books/year/{{ year.value }}/index.html"
+---
+
+{% from "macros/media-grid.njk" import grid %}
+{% set booksData = year.data | reverse %}
+<section class="flow">
+    <a class="button" href="/books">
+        {% include "svgs/arrow-left.svg" %}
+    Back to books</a>
+    <h1>Books in {{ year.value }}</h1>
+    <p>
+        A collection of games I've read in <strong>{{ year.value }}</strong>.
+    </p>
+    {{ grid(booksData) }}
+</section>

src/pages/games/year.html

@@ -10,7 +10,9 @@ 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>
+    <a class="button" href="/games">
+        {% include "svgs/arrow-left.svg" %}
+    Back to games</a>
     <h1>Games in {{ year.value }}</h1>
     <p>
         A collection of games I've played in <strong>{{ year.value }}</strong>.