chore: remove code duplication and clean up

src/_includes/base.liquid

@@ -1,68 +1,68 @@
-{%- capture fullUrl -%}{{ meta.url }}{{ page.url }}{%- endcapture -%}
-{%- capture pageTitle -%}
-  {%- if schema == 'blog' -%}
-    {{ title }}
-  {% elsif title %}
-    {{ title }} • {{ meta.siteName }}
-  {% elsif artist.name_string %}
-    Artists • {{ artist.name_string }} • {{ meta.siteName }}
-  {% elsif book.title %}
-    Books • {{ book.title }} • {{ meta.siteName }}
-  {% elsif movie.title %}
-    Movies • {{ movie.title }}{% if movie.rating %} ({{ movie.rating }}){% endif %} • {{ meta.siteName }}
-  {% elsif show.title %}
-    Shows • {{ show.title }} • {{ meta.siteName }}
-  {% elsif genre.name %}
-    Music • {{ genre.name }} • {{ meta.siteName }}
-  {% else %}
-    {{ meta.siteName }}
+{%- assign fullUrl = meta.url | append: page.url -%}
+
+{%- assign pageTitle = meta.siteName -%}
+{%- if schema == 'blog' -%}
+  {%- assign pageTitle = title -%}
+{%- elsif title -%}
+  {%- assign pageTitle = title | append: ' • ' | append: meta.siteName -%}
+{%- elsif artist.name_string -%}
+  {%- assign pageTitle = 'Artists • ' | append: artist.name_string | append: ' • ' | append: meta.siteName -%}
+{%- elsif book.title -%}
+  {%- assign pageTitle = 'Books • ' | append: book.title | append: ' • ' | append: meta.siteName -%}
+{%- elsif movie.title -%}
+  {%- assign pageTitle = 'Movies • ' | append: movie.title -%}
+  {%- if movie.rating -%}
+    {%- assign pageTitle = pageTitle | append: ' (' | append: movie.rating | append: ')' -%}
   {%- endif -%}
-{%- endcapture -%}
-{%- capture pageDescription -%}
-  {%- if schema == 'blog' -%}
-    {{ post_excerpt | markdown | strip_html }}
-  {% elsif artist.description %}
-    {{ artist.description | truncate: 300 }}
-  {% elsif book.description %}
-    {{ book.description }}
-  {% elsif movie.description %}
-    {% if movie.review %}{{ movie.review | truncate: 300 }}{% else %}{{ movie.description }}{% endif %}
-  {% elsif show.description %}
-    {% if show.review %}{{ show.review | truncate: 300 }}{% else %}{{ show.description }}{% endif %}
-  {% elsif genre.description %}
-    {{ genre.description | markdown | strip_html | truncate: 300 }}
-  {% elsif description %}
-    {{ description }}
-  {% else %}
-    {{ meta.siteDescription }}
-  {%- endif -%}
-{%- endcapture -%}
-{%- capture ogImage -%}
-  {%- if schema == 'blog' -%}
-    {{ meta.url }}/assets/img/ogi/{{ title | slugifyString }}-preview.png
-  {%- elsif schema == 'music' -%}
-    {{ music.recent.artists[0].image }}
-  {%- elsif schema == 'artist' -%}
-    {{ artist.image }}
-  {%- elsif schema == 'watching' -%}
+  {%- assign pageTitle = pageTitle | append: ' • ' | append: meta.siteName -%}
+{%- elsif show.title -%}
+  {%- assign pageTitle = 'Shows • ' | append: show.title | append: ' • ' | append: meta.siteName -%}
+{%- elsif genre.name -%}
+  {%- assign pageTitle = 'Music • ' | append: genre.name | append: ' • ' | append: meta.siteName -%}
+{%- endif -%}
+
+{%- assign pageDescription = meta.siteDescription -%}
+{%- if schema == 'blog' -%}
+  {%- assign pageDescription = post_excerpt | markdown | strip_html -%}
+{%- elsif artist.description -%}
+  {%- assign pageDescription = artist.description | truncate: 300 -%}
+{%- elsif book.description -%}
+  {%- assign pageDescription = book.description -%}
+{%- elsif movie.description -%}
+  {%- assign pageDescription = movie.review | default: movie.description | truncate: 300 -%}
+{%- elsif show.description -%}
+  {%- assign pageDescription = show.review | default: show.description | truncate: 300 -%}
+{%- elsif genre.description -%}
+  {%- assign pageDescription = genre.description | markdown | strip_html | truncate: 300 -%}
+{%- elsif description -%}
+  {%- assign pageDescription = description -%}
+{%- endif -%}
+
+{%- assign ogImage = meta.meta_data.opengraph_default -%}
+{%- case schema -%}
+  {%- when 'blog' -%}
+    {%- assign ogImage = meta.url | append: '/assets/img/ogi/' | append: title | slugifyString | append: '-preview.png' -%}
+  {%- when 'music' -%}
+    {%- assign ogImage = music.recent.artists[0].image -%}
+  {%- when 'artist' -%}
+    {%- assign ogImage = artist.image -%}
+  {%- when 'watching' -%}
     {%- assign featuredMovie = movies.recentlyWatched | first -%}
-    {{ featuredMovie.backdrop }}
-  {%- elsif schema == 'books' -%}
+    {%- assign ogImage = featuredMovie.backdrop -%}
+  {%- when 'books' -%}
     {%- assign featuredBook = books | bookStatus: 'started' | reverse | first -%}
-    {{ featuredBook.image }}
-  {%- elsif schema == 'book' -%}
-    {{ book.image }}
-  {%- elsif schema == 'movie' -%}
-    {{ movie.backdrop }}
-  {%- elsif schema == 'show' -%}
-    {{ meta.url }}/media/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg
-  {%- elsif schema == 'genre' -%}
+    {%- assign ogImage = featuredBook.image -%}
+  {%- when 'book' -%}
+    {%- assign ogImage = book.image -%}
+  {%- when 'movie' -%}
+    {%- assign ogImage = movie.backdrop -%}
+  {%- when 'show' -%}
+    {%- assign ogImage = meta.url | append: '/media/shows/backdrops/backdrop-' | append: show.tmdb_id | append: '.jpg' -%}
+  {%- when 'genre' -%}
     {%- assign genreArtist = genre.artists | shuffleArray | first -%}
-    {{ genreArtist.image }}
-  {%- else -%}
-    {{ meta.meta_data.opengraph_default }}
-  {%- endif -%}
-{%- endcapture -%}
+    {%- assign ogImage = genreArtist.image -%}
+{%- endcase -%}
+
 <!doctype html>
 <html lang="en">
   <head>
@@ -95,51 +95,36 @@
     <link rel="alternate" href="https://feedpress.me/coryd-artist-charts" title="{{ meta.siteName }}'s artist charts feed" type="application/rss+xml">
     <link rel="alternate" href="https://feedpress.me/coryd-all" title="{{ meta.siteName }}'s activity feed" type="application/rss+xml">
     <link type="text/plain" rel="author" href="/humans.txt" />
-      {% if schema == 'blog' %}
-      <script type="application/ld+json">
-        {
-          "@context": "https://schema.org",
-          "@type": "BlogPosting",
-          "mainEntityOfPage": {
-            "@type": "WebPage"
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@graph": [
+          {
+            "@type": "WebSite",
+            "@id": "{{ meta.url }}#website",
+            "url": "{{ meta.url }}",
+            "name": "{{ pageTitle }}",
+            "description": "{{ pageDescription }}",
+            "inLanguage": "{{ meta.locale }}"
           },
-          "isPartOf": {
-            "@id": "{{ meta.url }}#website"
-          },
-          "@id": "{{ fullUrl }}",
-          "headline": "{{ pageTitle }}",
-          "description": "{% if description %}{{ description }}{% else %}{{ meta.siteDescription }}{% endif %}",
-          "image": "{% if image %}{{ image }}{% else %}{{ meta.meta_data.opengraph_default }}{% endif %}",
-          "inLanguage": "{{ meta.locale }}",
-          "publisher": {
-            "@type": "{{ meta.siteType }}",
-            "name": "{{ meta.author }}",
-            "url": "{{ meta.url }}"
-          },
-          "author": {
-            "@type": "Person",
-            "name": "{{ meta.author }}"
-          },
-          "datePublished": "{{ page.date | isoDateOnly: '.' }}"
-        }
-      </script>
-      {% else %}
-      <script type="application/ld+json">
-        {
-          "@context": "https://schema.org",
-          "@graph": [
+          {%- if schema == 'blog' -%}
             {
-              "@type": "WebSite",
-              "@id": "{{ meta.url }}#website",
-              "url": "{{ meta.url }}",
-              "name": "{{ pageTitle }}",
-              "description": "{% if description %}{{ description }}{% else %}{{ meta.siteDescription }}{% endif %}",
-              "inLanguage": "{{ meta.locale }}"
+              "@type": "BlogPosting",
+              "mainEntityOfPage": { "@type": "WebPage" },
+              "isPartOf": { "@id": "{{ meta.url }}#website" },
+              "@id": "{{ fullUrl }}",
+              "headline": "{{ pageTitle }}",
+              "description": "{{ pageDescription }}",
+              "image": "{{ image | default: meta.meta_data.opengraph_default }}",
+              "inLanguage": "{{ meta.locale }}",
+              "publisher": { "@type": "{{ meta.siteType }}", "name": "{{ meta.author }}", "url": "{{ meta.url }}" },
+              "author": { "@type": "Person", "name": "{{ meta.author }}" },
+              "datePublished": "{{ page.date | isoDateOnly: '.' }}"
             }
-          ]
-        }
-      </script>
-      {% endif %}
+          {%- endif -%}
+        ]
+      }
+    </script>
     <noscript>
       <style>.client-side {display:none}</style>
       <p><img width="1" height="1" src="/7afb285ad050d" /></p>
@@ -148,20 +133,12 @@
   <body>
     <script>
       (() => {
-        const currentTheme = sessionStorage?.getItem('theme');
-        const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        const root = document.getElementsByTagName('html')[0];
+        const currentTheme = sessionStorage?.getItem('theme')
+        const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+        const root = document.getElementsByTagName('html')[0]
         if (!currentTheme) sessionStorage?.setItem('theme', (prefersDarkScheme ? 'dark' : 'light'))
-        if (currentTheme === 'dark') {
-          root.classList.add('theme__dark')
-        } else if (currentTheme === 'light') {
-          root.classList.add('theme__light')
-        } else if (prefersDarkScheme) {
-          root.classList.add('theme__dark')
-        } else if (!prefersDarkScheme) {
-          root.classList.add('theme__light')
-        }
-      })();
+        root.classList.add(`theme__${currentTheme || (prefersDarkScheme ? 'dark' : 'light')}`)
+      })()
     </script>
     {{ content }}
   </body>

src/_includes/partials/media/grid.liquid

@@ -1,6 +1,6 @@
-{% assign media = data | normalizeMedia %}
+{% assign media = data.items | default: data | normalizeMedia %}
 <div class="media-grid {% if shape == 'square' %}square{% else %}vertical{% endif %}">
-  {% for item in media limit: count %}
+  {% for item in media limit: count | default: media.size %}
     {% assign alt = item.alt | strip | escape %}
     <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
       <div class="item-wrapper shadow">
@@ -8,21 +8,22 @@
           {% if item.title %}
             <div class="header">{{ item.title }}</div>
           {% endif %}
-          {% if item.subtext %}
-            <div class="subheader">
-              {{ item.subtext }}
-            </div>
+          {% if item.plays %}
+            <div class="subheader">{{ item.plays }} plays</div>
+          {% elsif item.subtext %}
+            <div class="subheader">{{ item.subtext }}</div>
           {% endif %}
         </div>
-        {%- capture loadingStrategy -%}
-          {%- if loading -%}{{ loading }}{%- else -%}lazy{%- endif -%}
-        {%- endcapture -%}
+        {% assign loadingStrategy = loading | default: 'lazy' %}
         {% if shape == 'square' %}
-          <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=85"{% if alt %} alt="{{ alt }}"{% endif %} loading="{{ loadingStrategy }}" decoding="async" width="240" height="240" />
+          <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=85" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" width="240" height="240" />
         {% else %}
-          <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=200&h=307&fm=webp&q=85"{% if alt %} alt="{{ alt }}"{% endif %} loading="{{ loadingStrategy }}" decoding="async" width="200" height="307" />
+          <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=200&h=307&fm=webp&q=85" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" width="200" height="307" />
         {% endif %}
       </div>
     </a>
   {% endfor %}
-</div>
+</div>
+{% unless count %}
+  {% render "partials/widgets/paginator.liquid", pagination:data %}
+{% endunless %}

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

@@ -0,0 +1,22 @@
+<div class="music-chart">
+  {% assign items = data.items | default: data %}
+  {% for item in items limit: count | default: items.size %}
+    {%- assign playTotal = playTotal | default: mostPlayed -%}
+    {%- 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>
+{% unless count %}
+  {% render "partials/widgets/paginator.liquid", pagination:data %}
+{% endunless %}

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

@@ -1,19 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-<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=85"{% 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/music/recent.liquid

@@ -1,4 +1,3 @@
-{% if data.size > 0 %}
 <div class="music-chart">
   {% for item in data limit: 10 %}
   {% capture alt %}{{ item.title | escape }} by {{ item.artist }}{% endcapture %}
@@ -17,5 +16,4 @@
       </div>
     </div>
   {% endfor %}
-</div>
-{% endif %}
+</div>

src/_includes/partials/media/music/releases.liquid

@@ -1,21 +1,19 @@
-{% if albumReleases.size > 0 %}
-  <h2 id="album-releases" class="section-header flex-centered">
-    {% tablericon "calendar-time" "Anticipated albums" %}
-    Anticipated albums
-  </h2>
-  <ul class="link-list">
-    {% for album in albumReleases %}
-      <li>
-        <strong>{{ album.date }}: </strong>
-        <a href="{{ album.url}}" title="{{ album.title | escape}} by {{ album.artist | escape}}">
-          {{ album.title }}
-        </a>
-        <span> by </span>
-        <a href="{{ album.artist_url }}">
-          {{ album.artist }}
-        </a>
-        <span> • <a href="https://coryd.dev/music/genres/{{ album.genre | slugify | downcase }}">{{ album.genre }}</a></span>
-      </li>
-    {% endfor %}
-  </ul>
-{% endif %}
+<h2 id="album-releases" class="section-header flex-centered">
+  {% tablericon "calendar-time" "Anticipated albums" %}
+  Anticipated albums
+</h2>
+<ul class="link-list">
+  {% for album in albumReleases %}
+    <li>
+      <strong>{{ album.date }}: </strong>
+      <a href="{{ album.url}}" title="{{ album.title | escape}} by {{ album.artist | escape}}">
+        {{ album.title }}
+      </a>
+      <span> by </span>
+      <a href="{{ album.artist_url }}">
+        {{ album.artist }}
+      </a>
+      <span> • <a href="https://coryd.dev/music/genres/{{ album.genre | slugify | downcase }}">{{ album.genre }}</a></span>
+    </li>
+  {% endfor %}
+</ul>

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

@@ -1,19 +0,0 @@
-{% if data.size > 0 %}
-<div class="music-chart">
-  {% for item in data limit: 10 %}
-  {%- assign percentage = item.plays | calculatePlayPercentage: mostPlayed -%}
-  <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>
-{% endif %}

src/_includes/partials/media/progress-bar.liquid

@@ -1,5 +1,5 @@
 {% if percentage %}
-<div class="progress-bar__wrapper">
+<div class="progress-bar-wrapper">
   <div style="width:{{ percentage }}" class="progress-bar"></div>
 </div>
 {% endif %}

src/_includes/partials/media/watching/backdrop-grid-paginated.liquid

@@ -1,27 +0,0 @@
-<div class="watching grid">
-  {% for item in data.items %}
-    {% capture alt %}{{ item.title | escape }} ({{ item.year }}){% endcapture %}
-    <a href="{{ item.url }}">
-      <div class="watching item shadow">
-        <div class="meta-text">
-          {% if item.type == 'movie' %}
-            <div class="header">{{ item.title }}</div>
-            <div class="subheader flex-centered gap-xs">
-              {{ item.year }}
-              {% if rating and item.rating %}
-                <span class="rating"> ({{ item.rating }})</span>
-              {% endif %}
-            </div>
-          {% else %}
-            <div class="header">{{ item.name }}</div>
-          {% endif %}
-        </div>
-        {%- capture loadingStrategy -%}
-          {%- if loading -%}{{ loading }}{%- else -%}lazy{%- endif -%}
-        {%- endcapture -%}
-        <img src="https://coryd.dev/.netlify/images/?url={{ item.backdrop }}&fit=cover&w=256&h=144&fm=webp&q=85" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" width="256" height="144" />
-      </div>
-    </a>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:data %}

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

@@ -1,26 +1,30 @@
 <div class="watching grid">
-  {% for media in mediaItems limit: count %}
-    {% capture alt %}{{ media.title | escape }} ({{ media.year }}){% endcapture %}
-    <a href="{{ media.url }}">
+  {% assign items = data.items | default: mediaItems %}
+  {% for item in items limit: count %}
+    {% capture alt %}{{ item.title | escape }} ({{ item.year }}){% endcapture %}
+    <a href="{{ item.url }}">
       <div class="watching item shadow">
         <div class="meta-text">
-          {% if media.type == 'movie' %}
-            <div class="header">{{ media.title }}</div>
+          {% if item.type == 'movie' %}
+            <div class="header">{{ item.title }}</div>
             <div class="subheader flex-centered gap-xs">
-              {{ media.year }}
-              {% if rating and media.rating %}
-                <span class="rating"> ({{ media.rating }})</span>
+              {{ item.year }}
+              {% if rating and item.rating %}
+                <span class="rating"> ({{ item.rating }})</span>
               {% endif %}
             </div>
           {% else %}
-            <div class="header">{{ media.name }}</div>
+            <div class="header">{{ item.name }}</div>
           {% endif %}
         </div>
         {%- capture loadingStrategy -%}
           {%- if loading -%}{{ loading }}{%- else -%}lazy{%- endif -%}
         {%- endcapture -%}
-        <img src="https://coryd.dev/.netlify/images/?url={{ media.backdrop }}&fit=cover&w=256&h=144&fm=webp&q=85" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" width="256" height="144" />
+        <img src="https://coryd.dev/.netlify/images/?url={{ item.backdrop }}&fit=cover&w=256&h=144&fm=webp&q=85" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" width="256" height="144" />
       </div>
     </a>
   {% endfor %}
-</div>
+</div>
+{% unless count %}
+  {% render "partials/widgets/paginator.liquid", pagination:data %}
+{% endunless %}

src/_includes/partials/nav/link.liquid

@@ -1,4 +1,4 @@
-{%- capture categoryUrl %}/{{ link | downcase }}/{% endcapture -%}
+{%- assign categoryUrl = "/" | append: link | downcase -%}
 {% if categoryUrl | isLinkActive: page.url %}
   <span class="active {{ class }}" aria-current="page">
     {% if icon %}
@@ -9,14 +9,12 @@
     {% endif %}
   </span>
 {% else %}
-  {% if icon %}
-    <a class="{{ icon | downcase }} icon {{ class }}" href="/{{ link | downcase }}">
+  <a class="{% if icon %}{{ icon | downcase }} icon {% endif %}{{ class }}" href="{{ categoryUrl }}">
+    {% if icon %}
       {% tablericon icon link %}
       <span>{{ link }}</span>
-    </a>
-  {% else %}
-    <a href="/{{ link | downcase }}">
+    {% else %}
       {{ link }}
-    </a>
-  {% endif %}
+    {% endif %}
+  </a>
 {% endif %}