chore: dry up templates

config/filters/general.js

@@ -15,4 +15,8 @@ export default {
       ellipsis: "...",
     }),
   shuffleArray,
+  pluralize: (count, string) => {
+    if (count === 1) return string;
+    return `${string}s`;
+  },
 };

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "1.8.2",
+      "version": "1.8.3",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.5.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "engines": {

src/includes/partials/blocks/associated-media.liquid

@@ -1,81 +1,56 @@
-{% if artists or books or genres or movies or posts or shows %}<div class="associated-media">{% endif %}
+{% assign media = artists | concat: books | concat: genres | concat: movies | concat: posts | concat: shows %}
-  {% comment %} render related artists {% endcomment %}
+
-  {%- if artists -%}
+{% if media.size > 0 %}
-    <p id="artists" class="music">
+  <div class="associated-media">
-      {% tablericon "headphones" %}
+    {% assign sections =
-      Related artist(s)
+      "artists:headphones:music:Related artist(s)," | append:
-    </p>
+      "books:books:books:Related book(s)," | append:
-    <ul>
+      "genres:headphones:music:Related genre(s)," | append:
-      {% for artist in artists %}
+      "movies:movie:movies:Related movie(s)," | append:
-        {%- capture playLabel -%}
+      "posts:article:article:Related post(s)," | append:
-          {%- if artist.total_plays == 1 -%}
+      "shows:device-tv-old:tv:Related show(s)"
-            play
+    | split: "," %}
-          {%- else -%}
+
-            plays
+    {% for section in sections %}
-          {%- endif -%}
+      {% assign parts = section | split: ":" %}
-        {%- endcapture -%}
+      {% assign key = parts[0] %}
-        <li><a href="{{ artist.url }}">{{ artist.name }}</a>{%- if artist.total_plays > 0 -%}: <strong class="highlight-text">{{ artist.total_plays }} {{ playLabel }}</strong>{%- endif -%}</li>
+      {% assign icon = parts[1] %}
-      {% endfor %}
+      {% assign css_class = parts[2] %}
-    </ul>
+      {% assign label = parts[3] %}
-  {%- endif -%}
+
-  {% comment %} render related books {% endcomment %}
+      {% case key %}
-  {%- if books -%}
+        {% when "artists" %} {% assign items = artists %}
-    <p id="books" class="books">
+        {% when "books" %} {% assign items = books %}
-      {% tablericon "books" %}
+        {% when "genres" %} {% assign items = genres %}
-      Related book(s)
+        {% when "movies" %} {% assign items = movies %}
-    </p>
+        {% when "posts" %} {% assign items = posts %}
-    <ul>
+        {% when "shows" %} {% assign items = shows %}
-      {% for book in books %}
+      {% endcase %}
-        <li><a href="{{ book.url }}">{{ book.title }}</a> by {{ book.author }}</li>
+
-      {% endfor %}
+      {% if items and items.size > 0 %}
-    </ul>
+        <p id="{{ key }}" class="{{ css_class }}">
-  {%- endif -%}
+          {% tablericon icon %}
-  {% comment %} render related genres {% endcomment %}
+          {{ label }}
-  {%- if genres -%}
+        </p>
-    <p id="genres" class="music">
+        <ul>
-      {% tablericon "headphones" %}
+          {% for item in items %}
-      Related genre(s)
+            <li>
-    </p>
+              <a href="{{ item.url }}">{{ item.title | default: item.name }}</a>
-    <ul>
+              {% if key == "artists" and item.total_plays > 0 %}
-      {% for genre in genres %}
+                : <strong class="highlight-text">
-        <li><a href="{{ genre.url }}">{{ genre.name }}</a></li>
+                  {{ item.total_plays }} {{ item.total_plays | pluralize: "play" }}
-      {% endfor %}
+                </strong>
-    </ul>
+              {% elsif key == "books" %}
-  {%- endif -%}
+                by {{ item.author }}
-  {% comment %} render related movies {% endcomment %}
+              {% elsif key == "movies" or key == "shows" %}
-  {%- if movies -%}
+                ({{ item.year }})
-    <p id="movies" class="movies">
+              {% elsif key == "posts" %}
-      {% tablericon "movie" %}
+                ({{ item.date | date: "%B %e, %Y" }})
-      Related movie(s)
+              {% endif %}
-    </p>
+            </li>
-    <ul>
+          {% endfor %}
-      {% for movie in movies %}
+        </ul>
-        <li><a href="{{ movie.url }}">{{ movie.title }}</a> ({{ movie.year }})</li>
+      {% endif %}
-      {% endfor %}
+    {% endfor %}
-    </ul>
+  </div>
-  {%- endif -%}
+{% endif %}
-  {% comment %} render related posts {% endcomment %}
-  {%- if posts -%}
-    <p id="posts" class="article">
-      {% tablericon "article" %}
-      Related post(s)
-    </p>
-    <ul>
-      {% for post in posts %}
-        <li><a href="{{ post.url }}">{{ post.title }}</a> ({{ post.date | date: "%B %e, %Y" }})</li>
-      {% endfor %}
-    </ul>
-  {%- endif -%}
-  {% comment %} render related shows {% endcomment %}
-  {%- if shows -%}
-    <p id="tv" class="tv">
-      {% tablericon "device-tv-old" %}
-      Related show(s)
-    </p>
-    <ul>
-      {% for show in shows %}
-        <li><a href="{{ show.url }}">{{ show.title }}</a> ({{ show.year }})</li>
-      {% endfor %}
-    </ul>
-  {%- endif -%}
-{% if artists or books or genres or movies or posts or shows %}</div>{% endif %}

src/includes/partials/blocks/index.liquid

@@ -1,17 +1,18 @@
 {%- for block in blocks -%}
-  {%- if block.type == 'youtube_player' -%}
+  {%- case block.type -%}
-    {% render "partials/blocks/youtube-player.liquid", url:block.url %}
+    {%- when 'youtube_player' -%}
-  {%- elsif block.type == 'github_banner' -%}
+      {% render "partials/blocks/youtube-player.liquid", url: block.url %}
-    {% render "partials/blocks/banners/github.liquid", url:block.url %}
+    {%- when 'github_banner' -%}
-  {%- elsif block.type == 'npm_banner' -%}
+      {% render "partials/blocks/banners/github.liquid", url: block.url %}
-    {% render "partials/blocks/banners/npm.liquid", url:block.url, command:block.command %}
+    {%- when 'npm_banner' -%}
-  {%- elsif block.type == 'rss_banner' -%}
+      {% render "partials/blocks/banners/npm.liquid", url: block.url, command: block.command %}
-    {% render "partials/blocks/banners/rss.liquid", url:block.url, text:block.text %}
+    {%- when 'rss_banner' -%}
-  {%- elsif block.type == 'hero' -%}
+      {% render "partials/blocks/banners/rss.liquid", url: block.url, text: block.text %}
-    {% render "partials/blocks/hero.liquid", globals:globals, image:block.image, alt:block.alt %}
+    {%- when 'hero' -%}
-  {%- elsif block.type == 'markdown' -%}
+      {% render "partials/blocks/hero.liquid", globals: globals, image: block.image, alt: block.alt %}
-    {{ block.text | markdown }}
+    {%- when 'markdown' -%}
-  {%- elsif block.type == 'divider' -%}
+      {{ block.text | markdown }}
-    {{ block.markup | markdown }}
+    {%- when 'divider' -%}
-  {%- endif -%}
+      {{ block.markup | markdown }}
+  {%- endcase -%}
 {%- endfor -%}

src/includes/partials/blocks/mastodon-post.liquid

@@ -15,9 +15,7 @@
 </template>
 <span class="client-side">
   <mastodon-post>
-    <a href="{{ post }}">
+    <a href="{{ post }}">Discuss on Mastodon</a>
-      Discuss on Mastodon
-    </a>
   </mastodon-post>
 </span>
 {%- endif -%}

src/includes/partials/footer.liquid

@@ -4,13 +4,13 @@
   {%- endif -%}
   <nav aria-label="Social icons" class="social">
     {%- for link in nav.footer_icons -%}
-      {% render "partials/nav/link.liquid", page:page, title:link.title, url:link.permalink, icon:link.icon %}
+      {% render "partials/nav/link.liquid", page:page, link:link %}
     {%- endfor -%}
   </nav>
   <nav aria-label="Secondary site navigation" class="sub-pages">
     {%- for link in nav.footer_text -%}
-      {% render "partials/nav/link.liquid", page:page, title:link.title, url:link.permalink, icon:link.icon %}
+      {% render "partials/nav/link.liquid", page:page, link:link %}
-      {% if not forloop.last %}<span>/</span>{% endif %}
+      {% unless forloop.last %}<span>/</span>{% endunless %}
     {%- endfor -%}
   </nav>
 </footer>

src/includes/partials/media/grid.liquid

@@ -1,62 +1,50 @@
 {%- assign pageCount = pagination.pages.size | default: 0 -%}
 {%- assign hidePagination = pageCount <= 1 -%}
-<div class="media-grid {% if shape == 'poster' -%}poster{%- elsif shape == 'square' -%}square{%- elsif shape == 'vertical' -%}vertical{%- endif -%}">
+<div class="media-grid {{ shape }}">
+  {%- assign loadingStrategy = loading | default: 'lazy' -%}
   {%- for item in data limit: count -%}
     {%- assign alt = item.grid.alt | replaceQuotes -%}
+    {%- assign imageUrl = item.grid.image | default: item.grid.backdrop -%}
     <a href="{{ item.grid.url }}" title="{{ alt }}">
       <div class="item">
         <div class="meta-text">
           <div class="header">{{ item.grid.title }}</div>
           <div class="subheader">{{ item.grid.subtext }}</div>
         </div>
-        {%- assign loadingStrategy = loading | default: 'lazy' -%}
+        {%- assign imageClass = '' -%}
-        {%- if shape == 'poster' -%}
+        {%- assign width = 0 -%}
-          <img
+        {%- assign height = 0 -%}
-            srcset="
+        {%- case shape -%}
-              {{ globals.cdn_url }}{{ item.grid.backdrop }}?class=bannersm&type=webp 256w,
+          {%- when 'poster' -%}
-              {{ globals.cdn_url }}{{ item.grid.backdrop }}?class=bannermd&type=webp 512w
+            {%- assign imageClass = 'banner' -%}
-            "
+            {%- assign width = 256 -%}
-            sizes="(max-width: 450px) 256px, 512px"
+            {%- assign height = 170 -%}
-            src="{{ globals.cdn_url }}{{ item.grid.backdrop }}?class=bannersm&type=webp"
+          {%- when 'square' -%}
-            alt="{{ alt }}"
+            {%- assign imageClass = 'square' -%}
-            loading="{{ loadingStrategy }}"
+            {%- assign width = 200 -%}
-            decoding="async"
+            {%- assign height = 200 -%}
-            width="256"
+          {%- when 'vertical' -%}
-            height="170"
+            {%- assign imageClass = 'vertical' -%}
-          />
+            {%- assign width = 200 -%}
-        {%- elsif shape == 'square' -%}
+            {%- assign height = 307 -%}
-          <img
+        {%- endcase -%}
-            srcset="
-              {{ globals.cdn_url }}{{ item.grid.image }}?class=squaresm&type=webp 200w,
-              {{ globals.cdn_url }}{{ item.grid.image }}?class=squaremd&type=webp 400w
-            "
-            sizes="(max-width: 450px) 200px, 400px"
-            src="{{ globals.cdn_url }}{{ item.grid.image }}?class=squaresm&type=webp"
-            alt="{{ alt }}"
-            loading="{{ loadingStrategy }}"
-            decoding="async"
-            width="200"
-            height="200"
-          />
-        {%- elsif shape == 'vertical' -%}
         <img
           srcset="
-            {{ globals.cdn_url }}{{ item.grid.image }}?class=verticalsm&type=webp 200w,
+            {{ globals.cdn_url }}{{ imageUrl }}?class={{ imageClass }}sm&type=webp {{ width }}w,
-            {{ globals.cdn_url }}{{ item.grid.image }}?class=verticalmd&type=webp 400w
+            {{ globals.cdn_url }}{{ imageUrl }}?class={{ imageClass }}md&type=webp {{ width | times: 2 }}w
           "
-          sizes="(max-width: 450px) 200px, 400px"
+          sizes="(max-width: 450px) {{ width }}px, {{ width | times: 2 }}px"
-          src="{{ globals.cdn_url }}{{ item.grid.image }}?class=verticalsm&type=webp"
+          src="{{ globals.cdn_url }}{{ imageUrl }}?class={{ imageClass }}sm&type=webp"
           alt="{{ alt }}"
           loading="{{ loadingStrategy }}"
           decoding="async"
-          width="200"
+          width="{{ width }}"
-          height="307"
+          height="{{ height }}"
         />
-        {%- endif -%}
       </div>
     </a>
   {%- endfor -%}
 </div>
 {%- unless hidePagination -%}
-  {% render "partials/nav/paginator.liquid", pagination:pagination %}
+  {% render "partials/nav/paginator.liquid", pagination: pagination %}
 {%- endunless -%}

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

@@ -6,13 +6,7 @@
         <div class="item">
           <div class="info">
             <a class="title" href="{{ item.chart.url }}">{{ item.chart.title }}</a>
-            {%- capture playsLabel -%}
+            {%- assign playsLabel = item.chart.plays | pluralize:"play" -%}
-              {%- if item.chart.plays > 1 -%}
-                plays
-              {%- else -%}
-                play
-              {%- endif -%}
-            {%- endcapture -%}
             <span class="subtext">{{ item.chart.artist }}</span>
             <span class="subtext">{{ item.chart.plays }} {{ playsLabel }}</span>
           </div>

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

@@ -9,22 +9,6 @@
         ({{ movie.year }})
       </div>
     </div>
-    <img
+    {% render "partials/blocks/hero.liquid", globals:globals, image:movie.backdrop, alt:movie.title %}
-      srcset="
-        {{ globals.cdn_url }}{{ movie.backdrop }}?class=bannersm 256w,
-        {{ globals.cdn_url }}{{ movie.backdrop }}?class=bannermd 512w,
-        {{ globals.cdn_url }}{{ movie.backdrop }}?class=bannerbase 1024w,
-        {{ globals.cdn_url }}{{ movie.backdrop }}?class=bannerlg 2048w
-      "
-      sizes="(max-width: 450px) 256px,
-        (max-width: 850px) 512px,
-        (max-width: 1000px) 1024px,
-        2048px"
-      src="{{ globals.cdn_url }}{{ movie.backdrop }}?class=bannerlg"
-      loading="eager"
-      decoding="async"
-      width="1080"
-      height="720"
-    />
   </div>
 </a>

src/includes/partials/metadata.liquid

@@ -6,27 +6,26 @@
   {%- when 'blog' -%}
     {%- assign pageTitle = post.title -%}
     {%- assign pageDescription = post.description | markdown | strip_html | default: globals.site_description -%}
-  {%- when 'music-index' -%}
+  {%- when 'books' or 'books-year' -%}
-    {%- assign pageTitle = 'Music / ' | append: globals.site_name -%}
+    {%- assign featuredBook = books.all | filterBooksByStatus: 'started' | reverse | first -%}
-  {%- when 'music-period' -%}
+    {%- assign ogImage = globals.cdn_url | append: featuredBook.grid.image -%}
-    {%- assign pageTitle = 'Music / ' | append: page.title | append: ' / ' | append: globals.site_name -%}
+  {%- when 'books-year' -%}
+    {%- assign pageTitle = year.value | append: ' / Books / ' | append: globals.site_name -%}
   {%- when 'music' -%}
     {%- assign ogImage = globals.cdn_url | append: page.image -%}
   {%- when 'music-index' -%}
+    {%- assign pageTitle = 'Music / ' | append: globals.site_name -%}
     {%- assign ogImage = globals.cdn_url | append: music.week.artists[0].grid.image -%}
+  {%- when 'music-period' -%}
+    {%- assign pageTitle = 'Music / ' | append: page.title | append: ' / ' | append: globals.site_name -%}
+  {%- when 'page' -%}
+    {%- assign pageTitle = page.title | append: ' / ' | append: globals.site_name -%}
   {%- when 'watching' or 'favorite-movies' -%}
     {%- assign featuredMovie = movies.recentlyWatched | first -%}
     {%- assign ogImage = globals.cdn_url | append: featuredMovie.grid.backdrop -%}
   {%- when 'watching-shows' or 'favorite-shows' -%}
     {%- assign featuredShow = tv.recentlyWatched | first -%}
     {%- assign ogImage = globals.cdn_url | append: featuredShow.grid.backdrop -%}
-  {%- when 'books' or 'books-year' -%}
-    {%- assign featuredBook = books.all | filterBooksByStatus: 'started' | reverse | first -%}
-    {%- assign ogImage = globals.cdn_url | append: featuredBook.grid.image -%}
-  {%- when 'books-year' -%}
-    {%- assign pageTitle = year.value | append: ' / Books / ' | append: globals.site_name -%}
-  {%- when 'page' -%}
-    {%- assign pageTitle = page.title | append: ' / ' | append: globals.site_name -%}
   {%- else -%}
     {%- assign pageTitle = globals.site_name -%}
 {%- endcase -%}

src/includes/partials/nav/link.liquid

@@ -1,21 +1,26 @@
-{%- assign categoryUrl = url | downcase -%}
+{%- assign categoryUrl = link.permalink | downcase -%}
 {%- assign isHttp = categoryUrl contains "http" -%}
 {%- if categoryUrl | isLinkActive: page.url -%}
-  <span class="active {{ class }}" aria-current="page">
+  <span class="active {{ link.class }}" aria-current="page">
-    {%- if icon -%}
+    {%- if link.icon -%}
-      {% tablericon icon %}
+      {% tablericon link.icon %}
-      <span>{{ title }}</span>
+      <span>{{ link.title }}</span>
     {%- else -%}
-      {{ title }}
+      {{ link.title }}
     {%- endif -%}
   </span>
 {%- else -%}
-  <a class="{% if icon %}{{ icon | downcase }} icon {% endif %}{{ class }}" href="{{ categoryUrl }}" {% if isHttp -%} rel="me" {%- endif %} aria-label="{{ title }}">
+  <a
-    {%- if icon -%}
+    class="{% if link.icon %}{{ link.icon | downcase }} icon {% endif %}{{ link.class }}"
-      {% tablericon icon %}
+    href="{{ categoryUrl }}"
-      <span>{{ title }}</span>
+    {% if isHttp -%} rel="me" {%- endif %}
+    aria-label="{{ link.title }}"
+  >
+    {%- if link.icon -%}
+      {% tablericon link.icon %}
+      <span>{{ link.title }}</span>
     {%- else -%}
-      {{ title }}
+      {{ link.title }}
     {%- endif -%}
   </a>
 {%- endif -%}

src/includes/partials/nav/menu.liquid

@@ -6,7 +6,7 @@
   </label>
   <ul class="menu-primary" aria-label="Primary site navigation" id="primary-navigation">
     {%- for link in nav.primary -%}
-      <li>{% render "partials/nav/link.liquid", page:page, title:link.title, url:link.permalink, icon:link.icon %}</li>
+      <li>{% render "partials/nav/link.liquid", page:page, link:link %}</li>
     {%- endfor -%}
   </ul>
   {% render "partials/nav/theme-toggle.liquid" %}

src/pages/posts/post.html

@@ -42,11 +42,14 @@ schema: blog
     {{ post.content | markdown }}
     {% render "partials/blocks/index.liquid", blocks:post.blocks %}
     {% render "partials/blocks/mastodon-post.liquid", post:post.mastodon_url %}
-    {% render "partials/blocks/associated-media.liquid", artists:post.artists %}
+    {% render "partials/blocks/associated-media.liquid",
-    {% render "partials/blocks/associated-media.liquid", books:post.books %}
+      artists: post.artists,
-    {% render "partials/blocks/associated-media.liquid", genres:post.genres %}
+      books: post.books,
-    {% render "partials/blocks/associated-media.liquid", movie:post.movies %}
+      genres: post.genres,
-    {% render "partials/blocks/associated-media.liquid", shows:post.shows %}
+      movies: post.movies,
+      posts: post.posts,
+      shows: post.shows
+    %}
     {% render "partials/blocks/banners/coffee.liquid" %}
   </div>
 </article>