feat: add watching section

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>