feat(*): refactor dynamic vs. static structure and distinctions; make additional elements dynamic

src/includes/static/media/grid.liquid

@@ -0,0 +1,47 @@
+<div class="media-grid {{ shape | default: square }}">
+  {%- assign loadingStrategy = loading | default:"lazy" -%}
+  {%- for item in data limit:count -%}
+    {%- assign alt = item.grid.alt | replaceQuotes -%}
+    {%- assign imageUrl = item.grid.image -%}
+    <a class="{{ item.type }}" href="{{ item.grid.url }}" title="{{ alt }}">
+      <div class="media-grid-item">
+        {%- if item.grid.title or item.grid.subtext -%}
+        <div class="meta-text media-highlight {{ item.type }}">
+            {% if item.grid.title %}
+            <div class="header">{{ item.grid.title }}</div>
+            {% endif %}
+            {% if item.grid.subtext %}
+            <div class="subheader">{{ item.grid.subtext }}</div>
+            {% endif %}
+          </mark>
+        </div>
+        {%- endif -%}
+        {%- assign imageClass = "square" -%}
+        {%- assign width = 150 -%}
+        {%- assign height = 150 -%}
+        {%- case shape -%}
+          {%- when "vertical" -%}
+            {%- assign imageClass = "vertical" -%}
+            {%- assign width = 120 -%}
+            {%- assign height = 184 -%}
+        {%- endcase -%}
+        <img
+          srcset="
+            {{ imageUrl }}?class={{ imageClass }}sm&type=webp {{ width }}w,
+            {{ imageUrl }}?class={{ imageClass }}md&type=webp {{ width | times:2 }}w
+          "
+          sizes="(max-width: 450px) {{ width }}px, {{ width | times:2 }}px"
+          src="{{ imageUrl }}?class={{ imageClass }}sm&type=webp"
+          alt="{{ alt }}"
+          loading="{{ loadingStrategy }}"
+          decoding="async"
+          width="{{ width }}"
+          height="{{ height }}"
+        >
+      </div>
+    </a>
+  {%- endfor -%}
+</div>
+{% render "static/nav/paginator.liquid",
+  pagination:pagination
+%}

src/includes/static/media/music/charts/item.liquid

@@ -0,0 +1,13 @@
+<div class="chart-item">
+  <div class="chart-item-info">
+    <a class="title" href="{{ item.chart.url }}">{{ item.chart.title }}</a>
+    {%- assign playsLabel = item.chart.plays | pluralize:"play" -%}
+    <span class="subheader">{{ item.chart.artist }}</span>
+    <span class="subheader">{{ item.chart.plays }} {{ playsLabel }}</span>
+  </div>
+  <div class="chart-item-progress">
+    {% render "static/media/progress-bar.liquid",
+      percentage:item.chart.percentage
+    %}
+  </div>
+</div>

src/includes/static/media/music/charts/rank.liquid

@@ -0,0 +1,24 @@
+<div class="music-chart">
+  <ol type="1">
+    {%- if count -%}
+      {%- for item in data limit:count -%}
+        <li value="{{ item.chart.rank }}">
+          {% render "static/media/music/charts/item.liquid",
+            item:item
+          %}
+        </li>
+      {%- endfor -%}
+    {%- else -%}
+      {%- for item in pagination.items -%}
+        <li value="{{ item.chart.rank }}">
+          {% render "static/media/music/charts/item.liquid",
+            item:item
+          %}
+        </li>
+      {%- endfor -%}
+    {%- endif -%}
+  </ol>
+</div>
+{% render "static/nav/paginator.liquid",
+  pagination:pagination
+%}

src/includes/static/media/music/tables/all-time/albums.liquid

@@ -0,0 +1,21 @@
+<table class="music-ranking">
+  <tr>
+    <th>Albums (all time)</th>
+    <th>Artist</th>
+    <th>Plays</th>
+    <th>Year</th>
+  </tr>
+  {% for album in topAlbums %}
+  <tr>
+    <td>
+      <div>
+        <img src="{{ album.table.image }}?class=w100" alt="{{ album.table.alt }}" width="50">
+        {{ album.table.title }}
+      </div>
+    </td>
+    <td><a href="{{ album.table.url }}">{{ album.table.artist }}</a></td>
+    <td>{{ album.table.plays }}</td>
+    <td>{{ album.table.year }}</td>
+  </tr>
+  {% endfor %}
+</table>

src/includes/static/media/music/tables/all-time/artists.liquid

@@ -0,0 +1,19 @@
+<table class="music-ranking">
+  <tr>
+    <th>Artists (all time)</th>
+    <th>Genre</th>
+    <th>Plays</th>
+  </tr>
+  {% for artist in topArtists %}
+  <tr>
+    <td>
+      <div>
+        <img src="{{ artist.table.image }}?class=w100" alt="{{ artist.table.alt }}" width="50">
+        <a href="{{ artist.table.url }}">{{ artist.table.title }}</a>
+      </div>
+    </td>
+    <td>{{ artist.table.emoji }} <a href="{{ artist.table.genre_url }}">{{ artist.table.genre }}</a></td>
+    <td>{{ artist.table.plays }}</td>
+  </tr>
+  {% endfor %}
+</table>

src/includes/static/media/progress-bar.liquid

@@ -0,0 +1,3 @@
+{%- if percentage -%}
+<progress value="{{ percentage }}" max="100">{{ percentage }}%</progress>
+{%- endif -%}

src/includes/static/media/watching/hero.liquid

@@ -0,0 +1,18 @@
+<a href="{{ movie.url }}">
+  <div class="watching hero">
+    <div class="meta-text media-highlight">
+      <div class="header">{{ movie.title }}</div>
+      <div class="subheader">
+        {%- if movie.rating -%}
+          <span class="rating">{{ movie.rating }} </span>
+        {%- endif -%}
+        ({{ movie.year }})
+      </div>
+    </div>
+    {% render "static/blocks/hero.liquid",
+      globals:globals,
+      image:movie.backdrop,
+      alt:movie.title
+    %}
+  </div>
+</a>