chore: dry up media templates

src/_includes/partials/media/books/year.liquid

@@ -0,0 +1,17 @@
+---
+layout: default
+---
+{%- assign bookData = books | bookStatus: 'finished' | bookFinishedYear: year | bookSortDescending -%}
+{%- capture currentYear -%}{% currentYear %}{%- endcapture -%}
+{%- assign yearString = year | append: '' -%}
+{%- assign currentYearString = currentYear | append: '' -%}
+<p><a class="link-icon flex-centered" href="/books">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
+<h2 class="page-header">{{ title }}</h2>
+{{ content }}
+{% if yearString == currentYearString %}
+<p>I've finished <strong class="highlight-text">{{ bookData.size }} books</strong> this year.</p>
+{% else %}
+<p>I finished <strong class="highlight-text">{{ bookData.size }} books</strong> in {{ year }}</p>
+{% endif %}
+<hr class="large-spacing" />
+{% render "partials/media/grid.liquid", data:bookData, shape: "vertical", count: 200, loading: "eager" %}

src/_includes/partials/media/music/period/chart.liquid

@@ -0,0 +1,19 @@
+<hr class="large-spacing" />
+<div class="music-chart">
+  {% for item in data.items %}
+  {%- assign percentage = item.plays | calculatePlayPercentage:playTotal -%}
+  <div class="item">
+    <div class="presentation">
+      <div class="count">{{ item.rank | formatNumber }}.</div>
+      <div class="info">
+        <div class="title">
+          <a href="{{ item.url }}">{{ item.title }}</a>
+        </div>
+        <div class="subtext">{{ item.artist }} • {{ item.plays }} plays</div>
+      </div>
+    </div>
+    {% render "partials/media/progress-bar.liquid", percentage:percentage %}
+  </div>
+  {% endfor %}
+</div>
+{% render "partials/widgets/paginator.liquid", pagination:data %}

src/_includes/partials/media/music/period/grid.liquid

@@ -0,0 +1,16 @@
+<hr class="large-spacing" />
+<div class="media-grid square">
+  {% for item in data.items %}
+  {% assign alt = item.alt | strip | escape %}
+  <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
+    <div class="item-wrapper shadow">
+      <div class="meta-text">
+          <div class="header">{{ item.title }}</div>
+          <div class="subheader">{{ item.plays }} plays</div>
+      </div>
+      <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
+    </div>
+  </a>
+  {% endfor %}
+</div>
+{% render "partials/widgets/paginator.liquid", pagination:data %}

src/_includes/partials/media/watching/favorites-grid.liquid

@@ -0,0 +1,23 @@
+{% if favorites.size > 0 %}
+  <div class="watching grid">
+    {% for favorite in favorites limit: count %}
+      {% capture alt %}{{ favorite.title | escape }} ({{ favorite.year }}){% endcapture %}
+      <a href="{{ favorite.url }}">
+        <div class="watching item shadow">
+          <div class="meta-text">
+            {% if favorite.type == 'movie' %}
+              <div class="header">{{ favorite.title }}</div>
+              <div class="subheader">{{ favorite.year }}</div>
+            {% else %}
+              <div class="header">{{ favorite.name }}</div>
+            {% endif %}
+          </div>
+          {%- capture loadingStrategy -%}
+            {%- if loading -%}{{ loading }}{%- else -%}lazy{%- endif -%}
+          {%- endcapture -%}
+          <img src="https://coryd.dev/.netlify/images/?url={{ favorite.backdrop }}&fit=cover&w=256&h=144&fm=webp&q=80" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" width="256" height="144" />
+        </div>
+      </a>
+    {% endfor %}
+  </div>
+{% endif %}

src/_includes/partials/media/watching/hero.liquid

@@ -0,0 +1,10 @@
+{% capture alt %}{{ movie.title | escape }} ({{ movie.year }}){% endcapture %}
+<a href="{{ movie.url }}">
+  <div class="watching hero shadow">
+    <div class="meta-text">
+      <div class="header">{{ movie.title }} ({{ movie.year }})</div>
+      <div class="subheader">Last watched @ {{ movie.dateAdded | date: "%B %e, %Y" }}</div>
+    </div>
+    <img src="https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fit=cover&w=1200&h=675&fm=webp&q=80" alt="{{ alt }}" loading="eager" decoding="async" width="1200" height="765" />
+  </div>
+</a>