chore: dry up media templates

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/widgets/paginator.liquid

@@ -20,7 +20,7 @@
     </select>
     <noscript>
       <div class="text-centered">
-        <span aria-current="page">{{ pagination.pageNumber | plus: 1 }}</span> of {{ pagination.links.size }}
+        <span aria-current="page">{{ pagination.pageNumber }}</span> of {{ pagination.links.size }}
       </div>
     </noscript>
   </select-pagination>