wonderfulfrog/wonderfulfrog.com
1
0
Fork 0
Code Issues Pull requests Activity Actions

Update to Eleventy v3 #11

Merged
wonderfulfrog merged 56 commits from feat/11ty-v3 into main 2025-01-27 18:23:38 -08:00
Conversation 1 Commits 56 Files changed 282 +260 -306
30 changed files with 260 additions and 306 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 5af5ed46a1 - Show all commits

15
config/collections/index.js
View file

@ -15,6 +15,21 @@ export const postsByTag = (collection) => {
return postsByTag; return postsByTag;
}; };
export const collectionByTag = (collection, collectionName) => {
const items = collection.getFilteredByTag(collectionName);
const itemsByTag = {};
for (const item of items) {
for (const tag of item.data.tags) {
itemsByTag[tag] ??= [];
itemsByTag[tag].push(item);
}
}
return itemsByTag;
};
export const catalogueByType = (collection) => { export const catalogueByType = (collection) => {
const allItems = collection.getFilteredByTag("catalogue"); const allItems = collection.getFilteredByTag("catalogue");

7
config/filters/index.js
View file

@ -78,13 +78,6 @@ export const pluralize = (string, count = 0) => {
return pluralizeBase(string, count); return pluralizeBase(string, count);
}; };
export const filterCatalogueTags = (tags) => {
// In the case of catalogue items, the 0-index is "catalogue"
// and the 1-index is the catalogueType. We don't need to
// show those in the front-end.
return filter(tags, [tags[0], tags[1]]);
};
export const limit = (collection, limit = 5) => collection.slice(0, limit); export const limit = (collection, limit = 5) => collection.slice(0, limit);
export const filterFavourites = (collection) => { export const filterFavourites = (collection) => {

28
eleventy.config.js
View file

@ -3,14 +3,17 @@ import pluginRss from "@11ty/eleventy-plugin-rss";
import pluginNoRobots from "eleventy-plugin-no-robots"; import pluginNoRobots from "eleventy-plugin-no-robots";
import { eleventyImageTransformPlugin } from "@11ty/eleventy-img"; import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
import { catalogueByType, postsByTag } from "./config/collections/index.js"; import {
catalogueByType,
collectionByTag,
postsByTag,
} from "./config/collections/index.js";
import { dir } from "./config/constants.js"; import { dir } from "./config/constants.js";
import { import {
allTagCounts, allTagCounts,
entries, entries,
filter, filter,
filterCatalogueTags,
filterFavourites, filterFavourites,
formatDate, formatDate,
isOld, isOld,
@ -34,29 +37,16 @@ export default function (eleventyConfig) {
eleventyConfig.addPlugin(pluginNoRobots); eleventyConfig.addPlugin(pluginNoRobots);
// --------------------- Custom Collections ----------------------- // --------------------- Custom Collections -----------------------
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("moviesByYear", (collection) => {
const data = collection.getFilteredByTag("movie");
const byYear = transformByDate(data);
return byYear;
});
eleventyConfig.addCollection("catalogueByType", catalogueByType);
eleventyConfig.addCollection("postsByTag", postsByTag); eleventyConfig.addCollection("postsByTag", postsByTag);
eleventyConfig.addCollection("booksByTag", (collection) => {
const data = collectionByTag(collection, "book");
return data;
});
// --------------------- Custom Filters ----------------------- // --------------------- Custom Filters -----------------------
eleventyConfig.addFilter("allTagCounts", allTagCounts); eleventyConfig.addFilter("allTagCounts", allTagCounts);
eleventyConfig.addFilter("entries", entries); eleventyConfig.addFilter("entries", entries);
eleventyConfig.addFilter("filter", filter); eleventyConfig.addFilter("filter", filter);
eleventyConfig.addFilter("filterCatalogueTags", filterCatalogueTags);
eleventyConfig.addFilter("filterFavourites", filterFavourites); eleventyConfig.addFilter("filterFavourites", filterFavourites);
eleventyConfig.addFilter("formatDate", formatDate); eleventyConfig.addFilter("formatDate", formatDate);
eleventyConfig.addFilter("isOld", isOld); eleventyConfig.addFilter("isOld", isOld);

55
src/_includes/layouts/book.html
View file

@ -4,43 +4,46 @@ layout: "layouts/base"
{% from "macros/date.njk" import format %} {% from "macros/date.njk" import format %}
{% from "macros/utils.njk" import stars %} {% from "macros/utils.njk" import stars %}
<a class="button" href="/books"> <header class="flow flow-space-1">
{% include "svgs/arrow-left.svg" %} {{ format(page.date) }}
Back to books</a> <h1>{{ title }}</h1>
<header class="media-meta-grid gap-1"> {% if pullquote %}<p class="text-fadeText flow-space-0.25">{{ pullquote }}</p>{% endif %}
</header>
{% if content %}
<section class="flow">
{{ content | safe }}
</section>
{% endif %}
<hr class="my-2" />
<footer class="media-meta-grid gap-1">
<div class="media-image media-image--tall"> <div class="media-image media-image--tall">
<img src="{{ image }}" alt="" /> <img src="{{ image }}" alt="" />
</div> </div>
<div class="flow flex-col justify-center"> <div class="flow flex-col justify-center">
<h2>{{ title }}</h2> <h2>{{ title }}</h2>
{% if subtitle %}<p class="text-fadeText flow-space-0.5 line-height-m">{{ subtitle }}</p>{% endif %} {% 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 %} {% if rating %}{{ stars(rating) }}{% endif %}
<ul class="list-none p-0 mb-0 media-meta-grid gap-0.5"> <ul class="list-none p-0 mb-0 media-meta-grid gap-0.5">
{% if author %}
<li class="flex-col">
<strong>Author</strong><span>{{ author }}</span>
</li>
{% endif %}
{% if year %} {% if year %}
<li class="flex-col"> <li class="flex-col">
<strong>Released</strong><span>{{ year }}</span> <strong>Published</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> </li>
{% endif %} {% endif %}
</ul> </ul>
</div> </div>
</header> </footer>
{% if content %} <hr class="my-2">
<hr class="my-2" /> <ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
<section class="flow"> {% for tag in tags | filter("book") %}
{{ content | safe }} <li>
</section> <a class="[ button ]" href="/books/tag/{{ tag | slugify }}">
{% endif %} {% include "svgs/frame.svg" %}
{{ format(page.date) }} {{ tag }}</a>
</li>
{% endfor %}
</ul>

53
src/_includes/layouts/catalogue-item.html
View file

@ -1,53 +0,0 @@
---
layout: "layouts/base"
imageAlt: ""
imageCaption: ""
---
{% set filteredTags = tags | filterCatalogueTags %}
{% from "macros/date.njk" import format %}
{% from "macros/utils.njk" import stars %}
<article class="[ catalogue ] [ flow ]">
<header class="[ catalogue-header ] [ flow flow-space-1 ]">
{{ format(page.date) }}
<h1>{{ title }}</h1>
{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
{% if rating %}<div class="[ text-skew ]">{{ stars(rating) }}</div>{% endif %}
{% if tertiary or year %}
<div class="[ cluster text-skew flow-space-1 ]">
{% if tertiary %}<div class="[ line-height-m ]">{{ tertiary | safe }}</div>{% endif %}
{% if year %}
<p class="[ font-size-s ]">
<span class="[ text-fadeText ]">ca.</span> {{ year }}
</p>
{% endif %}
</div>
{% endif %}
{% if filteredTags | length > 0 %}
<ul class="[ cluster p-0 flow-space-2 line-height-m text-fadeText ]"
role="list">
{% for tag in filteredTags %}
<li class="[ flex gap-0.25 items-center ]">
<span class="text-border">{% include "svgs/frame.svg" %}</span>
{{ tag }}
</li>
{% endfor %}
</ul>
{% endif %}
</header>
{% if image %}
<div class="[ my-3 ]">
<img src="{{ image }}" alt="{{ imageAlt }}" title="{{ imageCaption }}" />
</div>
{% endif %}
{{ content | safe }}
{% if url %}
<a href="{{ url }}"
class="[ flex mt-1 items-center gap-0.5 ]"
target="_blank"
rel="external noreferrer noopener">
{% include "svgs/link.svg" %}
{{ linkTitle }}
</a>
{% endif %}
</article>

29
src/_includes/layouts/game.html
View file

@ -4,10 +4,18 @@ layout: "layouts/base"
{% from "macros/date.njk" import format %} {% from "macros/date.njk" import format %}
{% from "macros/utils.njk" import stars %} {% from "macros/utils.njk" import stars %}
<a class="button" href="/games"> <header class="flow flow-space-1">
{% include "svgs/arrow-left.svg" %} {{ format(page.date) }}
Back to games</a> <h1>{{ title }}</h1>
<header class="media-meta-grid gap-1"> <p class="text-fadeText flow-space-0.25">{{ pullquote }}</p>
</header>
{% if content %}
<section class="flow">
{{ content | safe }}
</section>
{% endif %}
<hr class="my-2" />
<footer class="media-meta-grid gap-1">
<div class="media-image"> <div class="media-image">
<img src="{{ image }}" alt="" /> <img src="{{ image }}" alt="" />
</div> </div>
@ -29,18 +37,11 @@ Back to games</a>
<strong>Playtime</strong><span>{{ playtime }}</span> <strong>Playtime</strong><span>{{ playtime }}</span>
</li> </li>
{% endif %} {% endif %}
{% if pullquote %} {% if tags %}
<li class="flex-col meta-grid--full"> <li class="flex-col meta-grid--full">
<strong>Pullquote</strong><span>{{ pullquote }}</span> <strong>Genres</strong><span>{{ tags | filter("game") | join(", ") }}</span>
</li> </li>
{% endif %} {% endif %}
</ul> </ul>
</div> </div>
</header> </footer>
{% if content %}
<hr class="my-2" />
<section class="flow">
{{ content | safe }}
</section>
{% endif %}
{{ format(page.date) }}

77
src/_includes/layouts/movie.html
View file

@ -4,43 +4,10 @@ layout: "layouts/base"
{% from "macros/date.njk" import format %} {% from "macros/date.njk" import format %}
{% from "macros/utils.njk" import stars %} {% from "macros/utils.njk" import stars %}
<a class="button" href="/watching"> <header class="flow flow-space-1">
{% include "svgs/arrow-left.svg" %} {{ format(page.date) }}
Back to watching</a> <h1>{{ title }}</h1>
<header class="media-meta-grid gap-1"> <p class="text-fadeText flow-space-0.25">{{ pullquote }}</p>
<div class="media-image media-image--tall">
<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>
</div>
{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
{% if director %}
<p class="flex gap-0.5">
<span class="text-fadeText">Directed by</span>{{ director }}
</p>
{% endif %}
{% if watchHistory %}<p class="flow-space-0.25">{{ format(watchHistory | last) }}</p>{% endif %}
{% 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 runtime %}
<li class="flex-col">
<strong>Runtime</strong><span>{{ runtime }} mins</span>
</li>
{% endif %}
{% if tags %}
<li class="flex-col meta-grid--full">
<strong>Genres</strong><span>{{ tags | filter("movie") | join(", ") }}</span>
</li>
{% endif %}
</ul>
</div>
</header> </header>
{% if watchHistory.length > 1 %} {% if watchHistory.length > 1 %}
<p> <p>
@ -55,8 +22,42 @@ Back to watching</a>
</p> </p>
{% endif %} {% endif %}
{% if content %} {% if content %}
<hr class="my-2" />
<section class="flow"> <section class="flow">
{{ content | safe }} {{ content | safe }}
</section> </section>
{% endif %} {% endif %}
<hr class="my-2" />
<footer class="media-meta-grid gap-1">
<div class="media-image media-image--tall">
<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>
</div>
{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
{% 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 director %}
<li class="flex-col">
<strong>Director</strong>{{ director }}
</li>
{% endif %}
{% if runtime %}
<li class="flex-col">
<strong>Runtime</strong><span>{{ runtime }} mins</span>
</li>
{% endif %}
{% if tags %}
<li class="flex-col meta-grid--full">
<strong>Genres</strong><span>{{ tags | filter("movie") | join(", ") }}</span>
</li>
{% endif %}
</ul>
</div>
</footer>

42
src/_includes/layouts/show.html
View file

@ -4,10 +4,24 @@ layout: "layouts/base"
{% from "macros/date.njk" import format %} {% from "macros/date.njk" import format %}
{% from "macros/utils.njk" import stars %} {% from "macros/utils.njk" import stars %}
<a class="button" href="/watching"> <header class="flow flow-space-1">
{% include "svgs/arrow-left.svg" %} {{ format(page.date) }}
Back to watching</a> <h1>{{ title }}</h1>
<header class="media-meta-grid gap-1"> <p class="text-fadeText flow-space-0.25">{{ pullquote }}</p>
</header>
{% if content %}
<section class="flow">
{{ content | safe }}
</section>
{% endif %}
{% if favourite or isFavourite %}
<p>
<span class="text-secondary">{% include "svgs/star.svg" %}</span>
This is one of my favourite shows!
</p>
{% endif %}
<hr class="my-2" />
<footer class="media-meta-grid gap-1">
<div class="media-image media-image--tall"> <div class="media-image media-image--tall">
<img src="{{ image }}" alt="" /> <img src="{{ image }}" alt="" />
</div> </div>
@ -41,22 +55,4 @@ Back to watching</a>
{% endif %} {% endif %}
</ul> </ul>
</div> </div>
</header> </footer>
{% if watchHistory.length > 1 %}
<p>
<span class="text-primary">{% include "svgs/circle-info.svg" %}</span>
I've seen this movie <strong>{{ watchHistory.length }}</strong> {{ "time" | pluralize(watchHistory) }}!
</p>
{% endif %}
{% if favourite %}
<p>
<span class="text-secondary">{% include "svgs/star.svg" %}</span>
This is one of my favourite movies!
</p>
{% endif %}
{% if content %}
<hr class="my-2" />
<section class="flow">
{{ content | safe }}
</section>
{% endif %}

1
src/catalogue/comics/comics.11tydata.js
View file

@ -1,5 +1,4 @@
export default { export default {
layout: "layouts/catalogue-item",
tags: "comic", tags: "comic",
permalink: "catalogue/comics/{{ page.fileSlug }}/index.html", permalink: "catalogue/comics/{{ page.fileSlug }}/index.html",
eleventyComputed: { eleventyComputed: {

1
src/catalogue/podcasts/podcasts.11tydata.js
View file

@ -1,5 +1,4 @@
export default { export default {
layout: "layouts/catalogue-item",
tags: "podcast", tags: "podcast",
permalink: "catalogue/podcasts/{{ page.fileSlug }}/index.html", permalink: "catalogue/podcasts/{{ page.fileSlug }}/index.html",
linkTitle: "Listen to the podcast", linkTitle: "Listen to the podcast",

2
src/css/blocks/pill.css
View file

@ -4,6 +4,8 @@
background-color: var(--color-surface); background-color: var(--color-surface);
color: var(--color-fadeText); color: var(--color-fadeText);
font-size: 0.8rem; font-size: 0.8rem;
font-family: var(--font-family-body);
font-weight: var(--font-weight-body-regular);
line-height: 0.8rem; line-height: 0.8rem;
padding-inline: var(--spacing-0\.5); padding-inline: var(--spacing-0\.5);
padding-block: var(--spacing-0\.25); padding-block: var(--spacing-0\.25);

3
src/css/blocks/stars.css
View file

@ -1,11 +1,12 @@
.stars li { .stars li {
line-height: 16px; /* Size of icons */ line-height: 16px; /* Size of icons */
filter: drop-shadow(-1px 1px 0px var(--color-surface));
transition: margin ease-in-out var(--transition-duration); transition: margin ease-in-out var(--transition-duration);
z-index: 1;
} }
.star-filled { .star-filled {
color: var(--color-primary); color: var(--color-primary);
z-index: 1;
} }
.star-empty { .star-empty {

1
src/games/2012-02-26-yoshis-island.md
View file

@ -3,6 +3,7 @@ title: "Super Mario World 2: Yoshi's Island"
platform: Super Nintendo platform: Super Nintendo
image: https://cdn.wonderfulfrog.com/images/Yoshis_Island_box_art.jpg image: https://cdn.wonderfulfrog.com/images/Yoshis_Island_box_art.jpg
tags: ["platformer"] tags: ["platformer"]
isFavourite: true
year: 1995 year: 1995
--- ---

15
src/pages/books/favourites.html Normal file
View file

@ -0,0 +1,15 @@
---
title: Favourite books
permalink: "books/favourites/index.html"
---
{% from "macros/media-grid.njk" import grid %}
{% set data = collections.book | filterFavourites | reverse %}
<a class="button" href="/books">
{% include "svgs/arrow-left.svg" %}
Back to books</a>
<section class="flow">
<h1>Favourite book</h1>
<p>A collection of my favourite books!</p>
{{ grid(data) }}
</section>

28
src/pages/books/index.html
View file

@ -1,21 +1,33 @@
--- ---
title: Books
permalink: "books/index.html" permalink: "books/index.html"
--- ---
{% from "macros/media-grid.njk" import grid %} {% from "macros/media-grid.njk" import grid %}
{% set data = collections.book | reverse %} {% set data = collections.book | reverse | limit(5) %}
{% set yearsData = collections.booksByYear | values | reverse %} {% set faves = collections.book | filterFavourites | reverse | limit(5) %}
{% set tags = collections.book | allTagCounts(["book"]) | limit(5) %}
<section class="flow"> <section class="flow">
<h1>Books</h1> <h1>Books</h1>
<p>A collection of games I've read over the years.</p> <p>A collection of books I've read over the years. I hope one day its an exhaustive list.</p>
<h2>Browse by release year</h2> <h2>
<ul class="list-none flex p-0 gap-1 flex-wrap"> <a href="tags">Tags</a>
{% for year in yearsData %} </h2>
<ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
{% for tag in tags %}
<li> <li>
<a class="button" href="/books/year/{{ year.value }}/">{{ year.value }}</a> <a class="[ button ]" href="/books/tag/{{ tag.tag | slugify }}">
{% include "svgs/frame.svg" %}
{{ tag.tag }}</a>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
<h2>Latest books</h2> <h2>
<a href="recent">Recent books</a>
</h2>
{{ grid(data) }} {{ grid(data) }}
<h2>
<a href="favourites">Favourite books</a>
</h2>
{{ grid(faves) }}
</section> </section>

12
src/pages/books/recent.html Normal file
View file

@ -0,0 +1,12 @@
---
title: Recent books
permalink: "books/recent/index.html"
---
{% from "macros/media-grid.njk" import grid %}
{% set data = collections.book | reverse %}
<section class="flow">
<h1>Recent books</h1>
<p>A collection of books I've read.</p>
{{ grid(data) }}
</section>

15
src/pages/books/tag.html Normal file
View file

@ -0,0 +1,15 @@
---
pagination:
data: collections.booksByTag
size: 1
alias: tag
permalink: "books/tag/{{ tag | slugify }}/index.html"
---
{% from "macros/media-grid.njk" import grid %}
{% set data = collections.booksByTag[tag] %}
<header class="flow flow-space-1">
<h1>Books</h1>
<p class="text-fadeText flow-space-0.25">Tagged with "{{ tag }}"</p>
</header>
{{ grid(data) }}

19
src/pages/books/tags.html Normal file
View file

@ -0,0 +1,19 @@
---
title: Tagged in Books
permalink: "books/tags/index.html"
---
{% from "macros/media-grid.njk" import grid %}
{% set tags = collections.book | allTagCounts(["book"]) %}
<section class="flow">
<h1>Tagged in Books</h1>
<ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
{% for tag in tags %}
<li>
<a class="[ button ]" href="/books/tag/{{ tag.tag | slugify }}">
{% include "svgs/frame.svg" %}
{{ tag.tag }}</a>
</li>
{% endfor %}
</ul>
</section>

21
src/pages/books/year.html
View file

@ -1,21 +0,0 @@
---
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>

25
src/pages/catalogue-type.html
View file

@ -1,25 +0,0 @@
---
pagination:
data: collections.catalogueByType
size: 1
alias: type
filter:
- catalogue
eleventyExcludeFromCollections: true
permalink: /catalogue/{{ type | pluralize | slugify }}/index.html
eleventyComputed:
title: Catalogue - {{ type | pluralize | capitalize }}
description: My thoughts on various {{ type | pluralize }}.
---
{% from "macros/catalogue.njk" import yearList %}
<h1>{{ type | pluralize | capitalize }}</h1>
{% include "partials/catalogue-types.html" %}
{% set itemsByYear = collections.catalogueByType[type] | reverse | organizeByDate %}
{% set years = itemsByYear | keys | sort("desc") %}
<section class="[ flow ]">
{% for year in years %}
{% set itemsInYear = itemsByYear[year] %}
{{ yearList(itemsInYear, year, false) }}
{% endfor %}
</section>

17
src/pages/catalogue.html
View file

@ -1,17 +0,0 @@
---
title: Catalogue
description: A collection of media I've consumed in one way or another.
---
{% from "macros/catalogue.njk" import yearList %}
<h1>Catalogue</h1>
<p>A collection of my thoughts on various forms of media that I consume.</p>
{% include "partials/catalogue-types.html" %}
{% set itemsByYear = collections.catalogue | reverse | organizeByDate %}
{% set years = itemsByYear | keys | sort("desc") %}
<section class="[ flow ]">
{% for year in years %}
{% set itemsInYear = itemsByYear[year] %}
{{ yearList(itemsInYear, year) }}
{% endfor %}
</section>

12
src/pages/games/favourites.html Normal file
View file

@ -0,0 +1,12 @@
---
title: Favourite games
permalink: "games/favourites/index.html"
---
{% from "macros/media-grid.njk" import grid %}
{% set data = collections.game | filterFavourites | reverse %}
<section class="flow">
<h1>Favourite games</h1>
<p>A collection of my favourite games!</p>
{{ grid(data) }}
</section>

27
src/pages/games/index.html
View file

@ -1,21 +1,22 @@
--- ---
title: Games
permalink: "games/index.html" permalink: "games/index.html"
--- ---
{% from "macros/media-grid.njk" import grid %} {% from "macros/media-grid.njk" import grid %}
{% set gamesData = collections.game | reverse %} {% set data = collections.game | reverse | limit(5) %}
{% set yearsData = collections.gamesByYear | values | reverse %} {% set faves = collections.game | filterFavourites | reverse | limit(5) %}
<section class="flow"> <section class="flow">
<h1>Games</h1> <h1>Games</h1>
<p>A collection of games I played over the years.</p> <p>
<h2>Browse by release year</h2> 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.
<ul class="list-none flex p-0 gap-1 flex-wrap"> </p>
{% for year in yearsData %} <h2>
<li> <a href="recent">Latest games</a>
<a class="button" href="/games/year/{{ year.value }}/">{{ year.value }}</a> </h2>
</li> {{ grid(data) }}
{% endfor %} <h2>
</ul> <a href="favourites">Favourite games</a>
<h2>Latest games</h2> </h2>
{{ grid(gamesData) }} {{ grid(faves) }}
</section> </section>

12
src/pages/games/recent.html Normal file
View file

@ -0,0 +1,12 @@
---
title: Recent games
permalink: "games/recent/index.html"
---
{% from "macros/media-grid.njk" import grid %}
{% set data = collections.game | reverse %}
<section class="flow">
<h1>Latest games</h1>
<p>A collection of games I've played.</p>
{{ grid(data) }}
</section>

21
src/pages/games/year.html
View file

@ -1,21 +0,0 @@
---
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 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 played in <strong>{{ year.value }}</strong>.
</p>
{{ grid(gamesData) }}
</section>

4
src/pages/watching/favourites/movies.html
View file

@ -1,12 +1,10 @@
--- ---
title: Favourite movies
permalink: "watching/favourites/movies/index.html" permalink: "watching/favourites/movies/index.html"
--- ---
{% from "macros/media-grid.njk" import grid %} {% from "macros/media-grid.njk" import grid %}
{% set data = collections.movie | filterFavourites | reverse %} {% set data = collections.movie | filterFavourites | reverse %}
<a class="button" href="/watching">
{% include "svgs/arrow-left.svg" %}
Back to watching</a>
<section class="flow"> <section class="flow">
<h1>Favourite movies</h1> <h1>Favourite movies</h1>
<p>A collection of my favourite movies!</p> <p>A collection of my favourite movies!</p>

4
src/pages/watching/favourites/shows.html
View file

@ -1,12 +1,10 @@
--- ---
title: Favourite shows
permalink: "watching/favourites/shows/index.html" permalink: "watching/favourites/shows/index.html"
--- ---
{% from "macros/media-grid.njk" import grid %} {% from "macros/media-grid.njk" import grid %}
{% set data = collections.tv | filterFavourites | reverse %} {% set data = collections.tv | filterFavourites | reverse %}
<a class="button" href="/watching">
{% include "svgs/arrow-left.svg" %}
Back to watching</a>
<section class="flow"> <section class="flow">
<h1>Favourite shows</h1> <h1>Favourite shows</h1>
<p>A collection of my favourite shows!</p> <p>A collection of my favourite shows!</p>

8
src/pages/watching/index.html
View file

@ -1,4 +1,5 @@
--- ---
title: Watching
permalink: "watching/index.html" permalink: "watching/index.html"
--- ---
@ -7,16 +8,15 @@ permalink: "watching/index.html"
{% set shows = collections.tv | reverse | limit(5) %} {% set shows = collections.tv | reverse | limit(5) %}
{% set favouriteMovies = collections.movie | filterFavourites | reverse | limit(5) %} {% set favouriteMovies = collections.movie | filterFavourites | reverse | limit(5) %}
{% set favouriteShows = collections.tv | filterFavourites | reverse | limit(5) %} {% set favouriteShows = collections.tv | filterFavourites | reverse | limit(5) %}
{% set yearsData = collections.moviesByYear | values | reverse %}
<section class="flow"> <section class="flow">
<h1>Watching</h1> <h1>Watching</h1>
<p>A collection of movies and shows I've seen.</p> <p>A collection of movies and shows I've seen. I tend to watch more movies than shows these days.</p>
<h2> <h2>
<a href="recent/movies">Latest movies</a> <a href="recent/movies">Recent movies</a>
</h2> </h2>
{{ grid(movies) }} {{ grid(movies) }}
<h2> <h2>
<a href="recent/shows">Latest shows</a> <a href="recent/shows">Recent shows</a>
</h2> </h2>
{{ grid(shows) }} {{ grid(shows) }}
<h2> <h2>

6
src/pages/watching/recent/movies.html
View file

@ -1,14 +1,12 @@
--- ---
title: Recent movies
permalink: "watching/recent/movies/index.html" permalink: "watching/recent/movies/index.html"
--- ---
{% from "macros/media-grid.njk" import grid %} {% from "macros/media-grid.njk" import grid %}
{% set data = collections.movie | reverse %} {% set data = collections.movie | reverse %}
<a class="button" href="/watching">
{% include "svgs/arrow-left.svg" %}
Back to watching</a>
<section class="flow"> <section class="flow">
<h1>Recently movies</h1> <h1>Recent movies</h1>
<p>A collection of movies I've seen recently.</p> <p>A collection of movies I've seen recently.</p>
{{ grid(data) }} {{ grid(data) }}
</section> </section>

6
src/pages/watching/recent/shows.html
View file

@ -1,14 +1,12 @@
--- ---
title: Recent shows
permalink: "watching/recent/shows/index.html" permalink: "watching/recent/shows/index.html"
--- ---
{% from "macros/media-grid.njk" import grid %} {% from "macros/media-grid.njk" import grid %}
{% set data = collections.tv | reverse %} {% set data = collections.tv | reverse %}
<a class="button" href="/watching">
{% include "svgs/arrow-left.svg" %}
Back to watching</a>
<section class="flow"> <section class="flow">
<h1>Recently shows</h1> <h1>Recent shows</h1>
<p>A collection of shows I've seen recently.</p> <p>A collection of shows I've seen recently.</p>
{{ grid(data) }} {{ grid(data) }}
</section> </section>