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

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

@@ -0,0 +1,63 @@
+{% assign media = artists | concat:books | concat:genres | concat:movies | concat:posts | concat:shows %}
+{% if media.size > 0 %}
+  <div class="associated-media">
+    {% assign sections =
+      "artists:headphones:music:Related artist(s):true," | append:
+      "books:books:books:Related book(s):true," | append:
+      "genres:headphones:music:Related genre(s):false," | append:
+      "movies:movie:movies:Related movie(s):true," | append:
+      "posts:article:article:Related post(s):false," | append:
+      "shows:device-tv-old:tv:Related show(s):true"
+    | split:"," %}
+    {% for section in sections %}
+      {% assign parts = section | split:":" %}
+      {% assign key = parts[0] %}
+      {% assign icon = parts[1] %}
+      {% assign css_class = parts[2] %}
+      {% assign label = parts[3] %}
+      {% assign hasGrid = parts[4] == "true" %}
+      {% assign items = nil %}
+      {% case key %}
+        {% when "artists" %} {% assign items = artists %}
+        {% when "books" %} {% assign items = books %}
+        {% when "genres" %} {% assign items = genres %}
+        {% when "movies" %} {% assign items = movies %}
+        {% when "posts" %} {% assign items = posts %}
+        {% when "shows" %} {% assign items = shows %}
+      {% endcase %}
+      {% if items and items.size > 0 %}
+        <h3 id="{{ key }}" class="{{ css_class }}">
+          {% tablericon icon %}
+          {{ label }}
+        </h3>
+        {% if hasGrid %}
+          {% assign shape = "square" %}
+          {% if key == "books" or key == "movies" or key == "shows" %}
+            {% assign shape = "vertical" %}
+          {% endif %}
+          {% render "static/media/grid.liquid",
+           data:items,
+           shape:shape
+          %}
+        {% else %}
+          <ul>
+            {% for item in items %}
+              <li class="{{ css_class }}">
+                <a href="{{ item.url }}">{{ item.title | default:item.name }}</a>
+                {% if key == "artists" and item.total_plays > 0 %}
+                  ({{ item.total_plays }} {{ item.total_plays | pluralize:"play" }})
+                {% elsif key == "books" %}
+                  by {{ item.author }}
+                {% elsif key == "movies" or key == "shows" %}
+                  ({{ item.year }})
+                {% elsif key == "posts" %}
+                  ({{ item.date | date:"%B %e, %Y" }})
+                {% endif %}
+              </li>
+            {% endfor %}
+          </ul>
+        {% endif %}
+      {% endif %}
+    {% endfor %}
+  </div>
+{% endif %}

src/includes/static/blocks/banners/calendar.liquid

@@ -0,0 +1,3 @@
+<div class="banner calendar">
+  <p>{% tablericon "calendar" %} <a href="{{ url }}">{{ text }}</a>.</p>
+</div>

src/includes/static/blocks/banners/forgejo.liquid

@@ -0,0 +1,3 @@
+<div class="banner forgejo">
+  <p>{% tablericon "git-merge" %} Take a look at <a href="{{ url }}">the repository for this project</a> on my <a href="https://forgejo.org">Forgejo</a> instance.</p>
+</div>

src/includes/static/blocks/banners/github.liquid

@@ -0,0 +1,3 @@
+<div class="banner github">
+  <p>{% tablericon "brand-github" %} Take a look at <a href="{{ url }}">the GitHub repository for this project</a>. (Give it a star if you feel like it.)</p>
+</div>

src/includes/static/blocks/banners/npm.liquid

@@ -0,0 +1,3 @@
+<div class="banner npm">
+  <p>{% tablericon "brand-npm" %} <a href="{{ url }}">You can take a look at this package on NPM</a> or install it by running <code>{{ command }}</code>.</p>
+</div>

src/includes/static/blocks/banners/old-post.liquid

@@ -0,0 +1,5 @@
+{%- if isOldPost -%}
+  <div class="banner old-post">
+    <p>{% tablericon "clock-x" %} This post is over 3 years old. I've probably changed my mind since it was written and it <em>could</em> be out of date.</p>
+  </div>
+{%- endif -%}

src/includes/static/blocks/banners/rss.liquid

@@ -0,0 +1,3 @@
+<div class="banner rss">
+  <p>{% tablericon "rss" %} <a href="{{ url }}">{{ text }}</a>.</p>
+</div>

src/includes/static/blocks/banners/warning.liquid

@@ -0,0 +1,3 @@
+<div class="banner warning">
+  <p>{% tablericon "alert-triangle" %} {{ text }}</p>
+</div>

src/includes/static/blocks/dialog.liquid

@@ -0,0 +1,23 @@
+{%- capture labelContent -%}
+  {%- if icon -%}
+    {% tablericon icon %}
+  {%- elsif label -%}
+    {{ label }}
+  {%- endif -%}
+{%- endcapture -%}
+{% assign dialogId = id | default:"dialog-controls" %}
+<button class="dialog-open client-side" aria-label="{{ label }}" data-dialog-trigger="{{ dialogId }}" data-dialog-button>
+  {{ labelContent }}
+</button>
+<dialog
+  id="dialog-{{ dialogId }}"
+  class="client-side"
+  {% if dynamic %}data-dynamic="{{ dynamic }}"{% endif %}
+  {% if markdown %}data-markdown="{{ markdown }}"{% endif %}>
+  <button class="dialog-close" aria-label="Close dialog" data-dialog-button>
+    {% tablericon "circle-x" %}
+  </button>
+  {%- unless dynamic -%}
+  {{ content }}
+  {%- endunless -%}
+</dialog>

src/includes/static/blocks/hero.liquid

@@ -0,0 +1,17 @@
+<img
+  srcset="
+    {{ image }}?class=bannersm&type=webp 256w,
+    {{ image }}?class=bannermd&type=webp 512w,
+    {{ image }}?class=bannerbase&type=webp 1024w
+  "
+  sizes="(max-width: 450px) 256px,
+    (max-width: 850px) 512px,
+    1024px"
+  src="{{ image }}?class=bannersm&type=webp"
+  alt="{{ alt | replaceQuotes }}"
+  class="image-banner"
+  loading="lazy"
+  decoding="async"
+  width="720"
+  height="480"
+>

src/includes/static/blocks/index.liquid

@@ -0,0 +1,41 @@
+{%- for block in blocks -%}
+  {%- case block.type -%}
+    {%- when "calendar_banner" -%}
+      {% render "static/blocks/banners/calendar.liquid",
+        url:block.url,
+        text:block.text
+      %}
+    {%- when "divider" -%}
+      {{ block.markup | markdown }}
+    {%- when "forgejo_banner" -%}
+      {% render "static/blocks/banners/forgejo.liquid",
+        url:block.url
+      %}
+    {%- when "github_banner" -%}
+      {% render "static/blocks/banners/github.liquid",
+        url:block.url
+      %}
+    {%- when "hero" -%}
+      {% render "static/blocks/hero.liquid",
+        globals:globals,
+        image:block.image,
+        alt:block.alt
+      %}
+    {%- when "markdown" -%}
+      {{ block.text | markdown }}
+    {%- when "npm_banner" -%}
+      {% render "static/blocks/banners/npm.liquid",
+        url:block.url,
+        command:block.command
+      %}
+    {%- when "rss_banner" -%}
+      {% render "static/blocks/banners/rss.liquid",
+        url:block.url,
+        text:block.text
+      %}
+    {%- when "youtube_player" -%}
+      {% render "static/blocks/youtube-player.liquid",
+        url:block.url
+      %}
+  {%- endcase -%}
+{%- endfor -%}

src/includes/static/blocks/tags.liquid

@@ -0,0 +1,7 @@
+{% if tags %}
+  <div class="tags">
+    {%- for tag in tags -%}
+      <a href="/tags/{{ tag | downcase | url_encode }}">#{{ tag | downcase }}</a>
+    {%- endfor -%}
+  </div>
+{% endif %}

src/includes/static/blocks/top-tags.liquid

@@ -0,0 +1 @@
+<p><mark>{{ label }}</mark>{%- for tag in tags %} <a href="/tags/{{ tag.tag | url_encode }}">#{{ tag.tag }}</a>{%- endfor -%}</p>

src/includes/static/blocks/youtube-player.liquid

@@ -0,0 +1,2 @@
+<script type="module" src="/assets/scripts/components/youtube-video-element.js?v={% appVersion %}" defer></script>
+<youtube-video controls src="{{ url }}"></youtube-video>