feat: add watching section

eleventy.config.js

@@ -44,6 +44,11 @@ export default function (eleventyConfig) {
     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);
 

src/_data/navigation.js

@@ -20,6 +20,11 @@ export default {
       url: "/books",
       icon: "book",
     },
+    {
+      text: "Watching",
+      url: "/watching",
+      icon: "tv-retro",
+    },
   ],
   bottom: [
     {

src/_includes/layouts/movie.html

@@ -0,0 +1,62 @@
+---
+layout: "layouts/base"
+---
+
+{% from "macros/date.njk" import format %}
+{% from "macros/utils.njk" import stars %}
+<a class="button" href="/watching">
+    {% include "svgs/arrow-left.svg" %}
+Back to watching</a>
+<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>
+        </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 watched %}<p class="flow-space-0.25">{{ format(watched) }}</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 genres %}
+                <li class="flex-col meta-grid--full">
+                    <strong>Genres</strong><span>{{ genres | join(", ") }}</span>
+                </li>
+            {% endif %}
+        </ul>
+    </div>
+</header>
+{% if watch_history.length > 1 %}
+    <p>
+        <span class="text-primary">{% include "svgs/circle-info.svg" %}</span>
+        I've seen this movie <strong>{{ watch_history.length }}</strong> {{ "time" | pluralize(watch_history) }}!
+    </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 %}

src/_includes/svgs/tv-retro.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 2.96338L5.75926 0.349182L4.24074 1.65076L6.25437 4H1V15H15V4H9.74563L11.7593 1.65076L10.2407 0.349182L8 2.96338ZM11 6H3V13H11V6Z" fill="currentColor"/>
+</svg>

src/css/blocks/card.css

@@ -0,0 +1,9 @@
+.card {
+  border: 1px solid var(--color-shadow);
+  border-radius: var(--spacing-0\.5);
+  padding: var(--spacing-1);
+}
+
+.card--secondary {
+  border-color: var(--color-secondary);
+}

src/movies/2022-01-25-coraline.md

@@ -0,0 +1,21 @@
+---
+title: "Coraline"
+year: 2009
+watched: 2022-01-25
+watch_history:
+  - 2022-01-25
+  - 2024-08-17
+image: https://cdn.wonderfulfrog.com/images/movies/coraline-poster.jpg
+letterboxd:
+  - https://letterboxd.com/wonderfulfrog/film/coraline/
+  - https://letterboxd.com/wonderfulfrog/film/coraline/1/
+director: Henry Selick
+runtime: 100
+favourite: true
+rating: 5
+genres:
+  - animation
+  - horror
+  - fantasy
+  - family
+---

src/movies/2024-09-28-megalopolis.md

@@ -0,0 +1,16 @@
+---
+title: "Megalopolis"
+year: 2024
+watched: 2024-09-30
+image: https://cdn.wonderfulfrog.com/images/movies/megalopolis-poster.jpg
+letterboxd: https://letterboxd.com/wonderfulfrog/film/megalopolis-2024/
+director: Francis Ford Coppola
+runtime: 138
+genres:
+  - drama
+  - science fiction
+---
+
+I wholeheartedly did not enjoy this movie, and yet afterward we could not stop talking about it. There were so many moments to remember - and some even got overwritten in my mind and had to be teased out later.
+
+I don't know if I'm experiencing a trainwreck or another cultural touchstone...

src/movies/2024-09-30-sugarcane.md

@@ -0,0 +1,12 @@
+---
+title: "Sugarcane"
+year: 2024
+watched: 2024-09-30
+image: https://cdn.wonderfulfrog.com/images/movies/sugarcane-poster.jpg
+letterboxd: https://letterboxd.com/wonderfulfrog/film/sugarcane/
+director: Emily Kassie, Julian Brave NoiseCat
+runtime: 107
+favourite: true
+genres:
+  - documentary
+---

src/movies/2024-10-30-your-monster.md

@@ -0,0 +1,14 @@
+---
+title: "Your Monster"
+year: 2024
+watched: 2024-10-30
+image: https://cdn.wonderfulfrog.com/images/movies/your-monster-poster.jpg
+letterboxd: https://letterboxd.com/wonderfulfrog/film/your-monster-2024/
+director: Caroline Lindy
+runtime: 104
+genres:
+  - music
+  - comedy
+  - horror
+  - romance
+---

src/movies/2024-10-31-dracula-a-d-1972.md

@@ -0,0 +1,11 @@
+---
+title: "Dracula A.D. 1972"
+year: 1972
+watched: 2023-10-31
+image: https://cdn.wonderfulfrog.com/images/movies/dracula-a-d-1972-poster.jpg
+letterboxd: https://letterboxd.com/wonderfulfrog/film/dracula-ad-1972/
+director: Alan Gibson
+runtime: 96
+genres:
+  - horror
+---

src/movies/2024-10-31-dracula.md

@@ -0,0 +1,11 @@
+---
+title: "Dracula"
+year: 1931
+watched: 2023-10-31
+image: https://cdn.wonderfulfrog.com/images/movies/dracula-poster.jpg
+letterboxd: https://letterboxd.com/wonderfulfrog/film/dracula/
+director: Tod Browning
+runtime: 74
+genres:
+  - horror
+---

src/movies/2024-11-08-woman-of-the-hour.md

@@ -0,0 +1,15 @@
+---
+title: "Woman of the Hour"
+year: 2023
+watched: 2024-11-09
+image: https://cdn.wonderfulfrog.com/images/movies/woman-of-the-hour-poster.jpg
+letterboxd: https://letterboxd.com/wonderfulfrog/film/woman-of-the-hour/
+director: Anna Kendrick
+runtime: 94
+genres:
+  - drama
+  - thriller
+  - crime
+---
+
+Do we really need to keep making movies that center around serial killers? Objectively a good movie, but I'm getting tired of media being created to effectively celebrate the accomplishments of murderers.

src/movies/2024-11-09-tetris.md

@@ -0,0 +1,15 @@
+---
+title: "Tetris"
+year: 2023
+watched: 2024-11-09
+image: https://cdn.wonderfulfrog.com/images/movies/tetris-poster.jpg
+letterboxd: https://letterboxd.com/wonderfulfrog/film/tetris/
+director: Jon S. Baird
+runtime: 118
+genres:
+  - thriller
+  - history
+  - drama
+---
+
+It is now my head canon that securing the publishing rights to Tetris involved a desperate car chase through the streets of Moscow. There’s no going back now.

src/movies/2024-11-20-flow.md

@@ -0,0 +1,15 @@
+---
+title: "Flow"
+year: 2024
+watched: 2024-11-20
+image: https://cdn.wonderfulfrog.com/images/movies/flow-poster.jpg
+letterboxd: https://letterboxd.com/wonderfulfrog/film/flow-2024/
+director: Gints Zilbalodis
+runtime: 85
+favourite: true
+rating: 4
+genres:
+  - adventure
+  - fantasy
+  - animation
+---

src/movies/movies.11tydata.js

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

src/pages/books/index.html

@@ -8,7 +8,7 @@ permalink: "books/index.html"
 <section class="flow">
     <h1>Books</h1>
     <p>A collection of games I've read over the years.</p>
-    <h2>Browse by year</h2>
+    <h2>Browse by release year</h2>
     <ul class="list-none flex p-0 gap-1 flex-wrap">
         {% for year in yearsData %}
             <li>

src/pages/games/index.html

@@ -7,8 +7,8 @@ permalink: "games/index.html"
 {% 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>
+    <p>A collection of games I played over the years.</p>
+    <h2>Browse by release year</h2>
     <ul class="list-none flex p-0 gap-1 flex-wrap">
         {% for year in yearsData %}
             <li>

src/pages/games/year.html

@@ -15,7 +15,7 @@ permalink: "games/year/{{ year.value }}/index.html"
     Back to games</a>
     <h1>Games in {{ year.value }}</h1>
     <p>
-        A collection of games I've played in <strong>{{ year.value }}</strong>.
+        A collection of games I played in <strong>{{ year.value }}</strong>.
     </p>
     {{ grid(gamesData) }}
 </section>

src/pages/watching/favourites.html

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

src/pages/watching/index.html

@@ -0,0 +1,28 @@
+---
+permalink: "watching/index.html"
+---
+
+{% from "macros/media-grid.njk" import grid %}
+{% set data = collections.movie | reverse | limit(5) %}
+{% set favourites = collections.movie | filterFavourites | reverse | limit(5) %}
+{% set yearsData = collections.moviesByYear | values | reverse %}
+<section class="flow">
+    <h1>Watching</h1>
+    <p>A collection of movies I've seen over the years.</p>
+    <h2>Browse by year watched</h2>
+    <ul class="list-none flex p-0 gap-1 flex-wrap">
+        {% for year in yearsData %}
+            <li>
+                <a class="button" href="/movies/year/{{ year.value }}/">{{ year.value }}</a>
+            </li>
+        {% endfor %}
+    </ul>
+    <h2>
+        <a href="recent/">Latest movies</a>
+    </h2>
+    {{ grid(data) }}
+    <h2>
+        <a href="favourites/">Favourite movies</a>
+    </h2>
+    {{ grid(favourites) }}
+</section>

src/pages/watching/recent.html

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

src/pages/watching/year.html

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