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>

src/includes/static/home/intro.liquid

@@ -0,0 +1,7 @@
+<article class="intro">
+  {{ intro }}
+  {% render "dynamic/media/now-playing.php.liquid",
+    section:"music"
+  %}
+  <hr />
+</article>

src/includes/static/home/recent-activity.liquid

@@ -0,0 +1,56 @@
+{%- for item in items -%}
+<article class="{{ item.type }}">
+  <aside>
+    {%- if item.featured -%}
+      {% tablericon "star" %}
+    {%- endif -%}
+    <time datetime="{{ item.content_date }}">
+      {{ item.content_date | date:"%B %e, %Y" }}
+    </time>
+     • {{ item.label }}
+    {%- if item.notes -%}
+      {% assign notes = item.notes | markdown %}
+      {% render "static/blocks/dialog.liquid",
+        icon:"info-circle",
+        label:"View info about this concert"
+        dynamic:"optimized_concerts",
+        markdown:"concert_notes",
+        id:item.id
+      %}
+    {%- endif -%}
+  </aside>
+  <h3>
+    {%- if item.type == "concerts" -%}
+      {%- capture artistName -%}
+        {%- if item.artist_url -%}
+          <a href="{{ item.artist_url }}">{{ item.title | split: ' at ' | first }}</a>
+        {%- else -%}
+          {{ item.title | split: ' at ' | first }}
+        {%- endif -%}
+      {%- endcapture -%}
+      {%- capture venue -%}
+        {%- if item.venue_lat and item.venue_lon -%}
+          <a href="https://www.openstreetmap.org/?mlat={{ item.venue_lat }}&mlon={{ item.venue_lon }}#map=18/{{ item.venue_lat }}/{{ item.venue_lon }}">{{ item.venue_name }}</a>
+        {%- else -%}
+          {{ item.venue_name }}
+        {%- endif -%}
+      {%- endcapture -%}
+      {{ artistName }}
+      {% if venue %} at {{ venue }}{% endif %}
+    {%- else -%}
+      <a href="{{ item.url | prepend: globals.url }}">{{ item.title }}</a>
+      {%- if item.type == "link" and item.author -%}
+        <span> via </span>
+        {%- if item.author.url -%}
+          <a href="{{ item.author.url }}">{{ item.author.name }}</a>
+        {%- else -%}
+          {{ item.author.name }}
+        {%- endif -%}
+      {%- endif -%}
+    {%- endif -%}
+  </h3>
+  {% render "static/blocks/tags.liquid",
+    tags:item.tags
+  %}
+</article>
+{%- endfor -%}

src/includes/static/layout/footer.liquid

@@ -0,0 +1,13 @@
+<footer>
+  {% render "static/nav/menu.liquid",
+    page:page,
+    nav:nav.footer_icons
+    class:"social"
+  %}
+  {% render "static/nav/menu.liquid",
+    page:page,
+    nav:nav.footer_text
+    class:"sub-pages"
+    separator:true
+  %}
+</footer>

src/includes/static/layout/header.liquid

@@ -0,0 +1,33 @@
+{%- capture headerContent -%}
+  <img
+    srcset="
+      {{ globals.avatar_header }}?class=w100&v={% appVersion %} 100w,
+      {{ globals.avatar_header }}?class=w200&v={% appVersion %} 200w
+    "
+    sizes="(max-width: 450px) 100px, 200px"
+    class="icon" src="{{ globals.avatar_header }}?class=w100&v={% appVersion %}"
+    alt="An avatar representing {{ globals.site_name }}"
+    width="100"
+    height="145"
+  >
+  <span>Cory</span> <span>Dransfeldt</span>
+{%- endcapture -%}
+<section class="main-title">
+  <h1>
+    {%- if page.url == "/" -%}
+      {{ headerContent }}
+    {%- else -%}
+      <a href="/" tabindex="0">{{ headerContent }}</a>
+    {%- endif -%}
+  </h1>
+  {% render "static/nav/menu.liquid",
+    page:page,
+    nav:nav.primary_icons
+    class:"icons"
+  %}
+</section>
+{% render "static/nav/menu.liquid",
+  page:page,
+  nav:nav.primary
+  class:"primary"
+%}

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>

src/includes/static/metadata/base.liquid

@@ -0,0 +1,15 @@
+<meta name="amazonbot" content="noarchive">
+<meta name="bingbot" content="noarchive">
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="color-scheme" content="light dark" />
+<meta name="theme-color" content="{{ globals.theme_color }}" />
+<meta name="msapplication-TileColor" content="{{ globals.theme_color }}">
+<meta name="fediverse:creator" content="{{ globals.mastodon }}" />
+<meta name="generator" content="{{ eleventy.generator }}" />
+<link href="{{ globals.url }}/og/w50/{% appVersion %}{{ globals.metadata.open_graph_image_transparent }}" rel="icon" sizes="any" />
+<link href="{{ globals.url }}/og/w800/{% appVersion %}{{ globals.metadata.open_graph_image }}" rel="apple-touch-icon" />
+<link rel="alternate" href="{{ globals.url }}/feeds/posts.xml" title="Posts • {{ globals.site_name }}" />
+<link rel="alternate" href="{{ globals.url }}/feeds/links.xml" title="Links • {{ globals.site_name }}" type="application/rss+xml" />
+<link rel="alternate" href="{{ globals.url }}/feeds/movies.xml" title="Movies • {{ globals.site_name }}" type="application/rss+xml" />
+<link rel="alternate" href="{{ globals.url }}/feeds/books.xml" title="Books • {{ globals.site_name }}" type="application/rss+xml" />
+<link rel="blogroll" type="text/xml" href="/blogroll.opml">

src/includes/static/metadata/index.liquid

@@ -0,0 +1,63 @@
+{%- capture appVersionString -%}{% appVersion %}{%- endcapture -%}
+{%- assign source = page -%}
+{%- case schema -%}
+{%- when 'artist', 'genre', 'book', 'movie', 'show', 'tags' -%}
+    {% render "dynamic/fetchers/{{ schema }}.php.liquid" %}
+  {%- when 'blog' -%}
+    {%- assign source = post -%}
+  {%- when 'music-index', 'music-week-artists' -%}
+    {%- assign source = music.week.artists[0] -%}
+  {%- when 'music-week-albums', 'music-week-tracks' -%}
+    {%- assign source = music.week.albums[0] -%}
+  {%- when 'music-month-artists' -%}
+    {%- assign source = music.month.artists[0] -%}
+  {%- when 'music-month-albums' -%}
+    {%- assign source = music.month.albums[0] -%}
+  {%- when 'music-releases' -%}
+    {%- assign source = albumReleases.upcoming[0] -%}
+  {%- when 'books' -%}
+    {%- assign source = books.all | filterBooksByStatus: 'started' | reverse | first -%}
+  {%- when 'reading-year' -%}
+    {%- assign title = 'Books • ' | append: year.value | append: ' • ' | append: globals.site_name -%}
+    {%- assign description = "Here's what I read in " | append: year.value | append: '.' -%}
+    {%- assign bookYear = year.data | filterBooksByStatus: 'finished' | shuffleArray | first -%}
+    {%- assign source = bookYear -%}
+  {%- when 'favorite-movies' -%}
+    {%- assign source = movies.favorites | shuffleArray | first -%}
+  {%- when 'favorite-shows' -%}
+    {%- assign source = tv.favorites | shuffleArray | first -%}
+  {%- when 'watching' -%}
+    {%- assign mergedMovies = movies.recentlyWatched | mergeArray: movies.favorites -%}
+    {%- assign mergedShows = tv.recentlyWatched | mergeArray: tv.favorites -%}
+    {%- assign source = mergedMovies | mergeArray: mergedShows | shuffleArray | first -%}
+  {%- when 'upcoming-shows' -%}
+    {%- assign source = upcomingShows.watching | shuffleArray | first -%}
+{%- endcase %}
+{%- assign meta = source | getMetadata: globals, page, title, description, schema -%}
+{%- assign fullUrl = meta.url -%}
+{%- assign oembedUrl = globals.url | append: "/oembed" | append: page.url -%}
+{%- if type == 'dynamic' -%}
+  {% render "dynamic/metadata/index.php.liquid"
+    fullUrl: fullUrl,
+    oembedUrl: oembedUrl,
+    pageTitle: meta.title,
+    pageDescription: meta.description,
+    ogImage: meta.open_graph_image,
+    globals: globals,
+  %}
+{%- else -%}
+  {% render "static/metadata/static.liquid"
+    fullUrl: fullUrl,
+    oembedUrl: oembedUrl,
+    pageTitle: meta.title,
+    pageDescription: meta.description,
+    ogImage: meta.open_graph_image,
+    globals: globals,
+  %}
+{%- endif %}
+{% render "static/metadata/base.liquid"
+  pageTitle: meta.title,
+  globals: globals,
+  eleventy: eleventy,
+  appVersion: appVersion,
+%}

src/includes/static/metadata/static.liquid

@@ -0,0 +1,9 @@
+<title>{{ pageTitle }}</title>
+<meta name="description" content="{{ pageDescription | markdown | strip_html | htmlTruncate | escape }}" />
+<meta property="og:title" content="{{ pageTitle }}" />
+<meta property="og:description" content="{{ pageDescription | markdown | strip_html | htmlTruncate | escape }}" />
+<meta property="og:type" content="{{ page.metadata.type | default: 'article' }}" />
+<meta property="og:url" content="{{ fullUrl }}" />
+<meta property="og:image" content="{{ ogImage }}" />
+<link rel="alternate" type="application/json+oembed" href="{{ oembedUrl }}" title="{{ pageTitle }}" />
+<link rel="canonical" href="{{ fullUrl }}" />

src/includes/static/nav/link.liquid

@@ -0,0 +1,35 @@
+{%- assign categoryUrl = link.permalink | downcase -%}
+{%- assign isHttp = categoryUrl contains "http" -%}
+{%- assign url = page.activeUrl | default: page.url -%}
+{%- if categoryUrl | isLinkActive:url -%}
+{%- capture linkClass -%}
+  {%- if link.section -%}button{%- endif -%}
+  {%- if link.icon -%}icon{%- endif -%}
+{%- endcapture -%}
+  <span
+    class="active {{ linkClass }}"
+    aria-current="page"
+  >
+    {%- if link.icon -%}
+      {% tablericon link.icon %}
+      <span>{{ link.title }}</span>
+    {%- else -%}
+      {{ link.title }}
+    {%- endif -%}
+  </span>
+{%- else -%}
+  <a
+    class="{% if link.section %}{{ link.section | downcase }} button {% endif %}{% if link.icon %}{{ link.icon | downcase }} icon {% endif %}"
+    href="{{ categoryUrl }}"
+    {% if isHttp -%} rel="me" {%- endif %}
+    title="{{ link.title }}"
+    aria-label="{{ link.title }}"
+  >
+    {%- if link.icon -%}
+      {% tablericon link.icon %}
+      <span>{{ link.title }}</span>
+    {%- else -%}
+      {{ link.title }}
+    {%- endif -%}
+  </a>
+{%- endif -%}

src/includes/static/nav/menu.liquid

@@ -0,0 +1,11 @@
+<nav class="{{ class }}">
+  {%- for link in nav -%}
+    {% render "static/nav/link.liquid",
+      page:page,
+      link:link
+    %}
+    {%- if separator -%}
+      {% unless forloop.last %}<span>•</span>{% endunless %}
+    {%- endif -%}
+  {%- endfor -%}
+</nav>

src/includes/static/nav/paginator.liquid

@@ -0,0 +1,35 @@
+{%- assign pageCount = pagination.pages.size | default:0 -%}
+{%- assign hidePagination = pageCount <= 1 -%}
+{%- unless hidePagination -%}
+<script type="module" src="/assets/scripts/components/select-pagination.js?v={% appVersion %}"></script>
+<nav aria-label="Pagination" class="pagination">
+  {%- assign prevHref = pagination.href.previous -%}
+  {%- assign nextHref = pagination.href.next -%}
+  {% if prevHref %}
+  <a href="{{ prevHref }}" aria-label="Previous page">
+    {% tablericon "arrow-left" %}
+  </a>
+  {% else %}
+  <span>{% tablericon "arrow-left" %}</span>
+  {% endif %}
+  <select-pagination>
+    <select class="client-side" aria-label="Page selection">
+      {%- for pageEntry in pagination.pages -%}
+        <option value="{{ forloop.index | minus:1 }}">
+          {{ forloop.index }} of {{ pagination.links.size }}
+        </option>
+      {%- endfor -%}
+    </select>
+    <noscript>
+      <p><span aria-current="page">{{ pagination.pageNumber | plus:1 }}</span> of {{ pagination.links.size }}</p>
+    </noscript>
+  </select-pagination>
+  {% if nextHref %}
+  <a href="{{ nextHref }}" aria-label="Next page">
+    {% tablericon "arrow-right" %}
+  </a>
+  {% else %}
+  <span>{% tablericon "arrow-right" %}</span>
+  {% endif %}
+</nav>
+{%- endunless -%}