feat: lightweight media pages

src/pages/main/watching/movie.html

@@ -0,0 +1,23 @@
+---
+layout: default
+pagination:
+  data: movies.movies
+  size: 1
+  alias: movie
+permalink: /movies/{{ movie.id }}/
+schema: movie
+---
+{%- capture alt -%}
+  {{ movie.title }} • {{ movie.year }}{% if move.rating %} ({{ movie.rating }}){% endif %}
+{%- endcapture -%}
+<a class="back-link-header link-icon flex-centered" href="/watching">{% tablericon "arrow-left" "Go back" %} Go back</a>
+<article class="watching-focus">
+  <img src="https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fm=webp&q=85&w=768&h=432" alt="{{ alt }}" class="image-banner" loading="eager" decoding="async" width="768" height="432" />
+  <div class="watching-meta">
+    <p class="title"><strong>{{ movie.title }}</strong></p>
+    {% if movie.rating %}<p class="rating">{{ movie.rating }}</p>{% endif %}
+    {% if movie.lastWatched %}<p class="sub-meta">Last watched on: {{ movie.lastWatched | date: "%B %e, %Y" }}</p>{% endif %}
+    <p class="sub-meta"><a href="https://themoviedb.org/movie/{{ movie.id }}">View on TMDB</a></p>
+  </div>
+  {% if movie.description %}<p><em>{{ movie.description }}</em></p>{% endif %}
+</article>