feat: add support for shows in /watching

config/filters/index.js

@@ -88,7 +88,9 @@ export const filterCatalogueTags = (tags) => {
 export const limit = (collection, limit = 5) => collection.slice(0, limit);
 
 export const filterFavourites = (collection) => {
-  return collection.filter((item) => item.data.favourite);
+  return collection.filter(
+    (item) => item.data.favourite || item.data.isFavourite,
+  );
 };
 
 export const isOld = (dateArg) => {

src/_includes/layouts/show.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 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("tv") | join(", ") }}</span>
+                </li>
+            {% endif %}
+        </ul>
+    </div>
+</header>
+{% 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 %}

src/pages/watching/favourites/movies.html

@@ -1,5 +1,5 @@
 ---
-permalink: "watching/favourites/index.html"
+permalink: "watching/favourites/movies/index.html"
 ---
 
 {% from "macros/media-grid.njk" import grid %}

src/pages/watching/favourites/shows.html

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

src/pages/watching/index.html

@@ -3,26 +3,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 movies = collections.movie | reverse | limit(5) %}
+{% set shows = collections.tv | reverse | limit(5) %}
+{% set favouriteMovies = collections.movie | filterFavourites | reverse | limit(5) %}
+{% set favouriteShows = collections.tv | 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>
+    <p>A collection of movies and shows I've seen.</p>
     <h2>
-        <a href="recent/">Latest movies</a>
+        <a href="recent/movies">Latest movies</a>
     </h2>
-    {{ grid(data) }}
+    {{ grid(movies) }}
     <h2>
-        <a href="favourites/">Favourite movies</a>
+        <a href="recent/shows">Latest shows</a>
     </h2>
-    {{ grid(favourites) }}
+    {{ grid(shows) }}
+    <h2>
+        <a href="favourites/movies">Favourite movies</a>
+    </h2>
+    {{ grid(favouriteMovies) }}
+    <h2>
+        <a href="favourites/shows">Favourite shows</a>
+    </h2>
+    {{ grid(favouriteShows) }}
 </section>

src/pages/watching/recent/movies.html

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

src/pages/watching/recent/shows.html

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

src/pages/watching/year.html

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

src/shows/2025-01-20-solo-leveling.md

@@ -0,0 +1,22 @@
+---
+date: 2025-01-20
+title: Solo Leveling
+releaseYear: 2024
+tags:
+  - anime
+  - drama
+  - action
+image: https://cdn.wonderfulfrog.com/images/tv/solo-leveling-poster.jpg
+pullquote: Going from the weakest to the strongest, by grinding mobs.
+watchHistory:
+rating: 5
+isFavourite: true
+hasSpoilers: false
+thetvdb: https://thetvdb.com/series/solo-leveling
+---
+
+It feels like I haven’t enjoyed an anime since around 2018 (besides occasionally following _One Piece_). This is the first in a long time where I felt invested and interested!
+
+I find the story engaging and paced well, each episode is progressing the overarching plot but with smaller stories in each episode.
+
+My only gripe would be that the violence and gore can be excessive. I know this is a common trope in anime - but even with that in mind it tends toward gratuitous at times.

src/shows/shows.11tydata.js

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