feat: initial commit

src/pages/dynamic/artist.php.liquid

@@ -0,0 +1,135 @@
+---
+permalink: /music/artists/index.php
+type: dynamic
+schema: artist
+---
+<a class="back-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" %} Back to music</a>
+<article class="artist-focus">
+  <div class="artist-display">
+    <img
+      class="image-media"
+      srcset="
+        {{ globals.cdn_url }}<?= htmlspecialchars($artist["image"]) ?>?class=w200&type=webp 200w,
+        {{ globals.cdn_url }}<?= htmlspecialchars($artist["image"]) ?>?class=w600&type=webp 400w,
+        {{ globals.cdn_url }}<?= htmlspecialchars($artist["image"]) ?>?class=w800&type=webp 800w
+      "
+      sizes="(max-width: 450px) 200px,
+              (max-width: 850px) 400px,
+              800px"
+      src="{{ globals.cdn_url }}<?= htmlspecialchars($artist["image"]) ?>?class=w200&type=webp"
+      alt="<?= htmlspecialchars($artist["name"]) ?> • <?= htmlspecialchars(parseCountryField($artist["country"])) ?>"
+      decoding="async"
+      width="200"
+      height="200"
+    />
+    <div class="media-meta">
+      <h2><?= htmlspecialchars($artist["name"]) ?></h2>
+      <span class="sub-meta country">{% tablericon "map-pin" %} <?= htmlspecialchars(
+        parseCountryField($artist["country"])
+      ) ?></span>
+      <?php if ($artist["favorite"]): ?>
+        <span class="sub-meta favorite">{% tablericon "heart" %} This is one of my favorite artists!</span>
+      <?php endif; ?>
+      <?php if ($artist["tattoo"]): ?>
+        <span class="sub-meta tattoo">{% tablericon "needle" %} I have a tattoo inspired by this artist!</span>
+      <?php endif; ?>
+      <?php if ($artist["total_plays"] > 0): ?>
+        <span class="sub-meta">
+          <mark>
+            <?= $artist["total_plays"] . ' ' . pluralize($artist["total_plays"], "play") ?>
+          </mark>
+        </span>
+      <?php endif; ?>
+      <span class="sub-meta">
+        <?= htmlspecialchars($artist["emoji"] ?? $artist["genre"]["emoji"]) ?>
+        <a href="<?= htmlspecialchars($artist["genre"]["url"]) ?>">
+          <?= htmlspecialchars($artist["genre"]["name"]) ?>
+        </a>
+      </span>
+    </div>
+  </div>
+  <?php
+    renderAssociatedMedia(
+      $artist["related_artists"] ?? [],
+      $artist["books"] ?? [],
+      $artist["genres"] ?? [],
+      $artist["movies"] ?? [],
+      $artist["posts"] ?? [],
+      $artist["shows"] ?? []
+    );
+  ?>
+  <?php if (!empty($artist["description"])): ?>
+    <h2>Overview</h2>
+    <div data-toggle-content class="text-toggle-hidden">
+      <?= parseMarkdown($artist["description"]) ?>
+    </div>
+    <button data-toggle-button>Show more</button>
+  <?php endif; ?>
+  <?php if (!empty($artist["concerts"])): ?>
+    <p id="concerts" class="concerts">
+      {% tablericon "device-speaker" %}
+      I've seen this artist live!
+    </p>
+    <ul>
+    <?php foreach ($artist["concerts"] as $concert): ?>
+      <?php
+        $venue = "";
+        if (!empty($concert["venue_name"])) {
+          if (!empty($concert["venue_latitude"]) && !empty($concert["venue_longitude"])) {
+            $venue = '<a href="https://www.openstreetmap.org/?mlat=' . htmlspecialchars($concert["venue_latitude"]) . '&mlon=' . htmlspecialchars($concert["venue_longitude"]) . '#map=18/' . htmlspecialchars($concert["venue_latitude"]) . '/' . htmlspecialchars($concert["venue_longitude"]) . '">' . htmlspecialchars($concert["venue_name_short"]) . '</a>';
+          } else {
+            $venue = htmlspecialchars($concert["venue_name_short"]);
+          }
+        }
+        $modalId = "modal-" . htmlspecialchars($concert["id"]);
+      ?>
+      <li class="concerts">
+        On <mark><?php echo date("F j, Y", strtotime($concert["date"])); ?></mark>
+        <?php if (!empty($venue)): ?>
+          at <?php echo $venue; ?>
+        <?php endif; ?>
+        <?php if (!empty($concert["notes"])): ?>
+          <?php $notes = "### Notes\n" . htmlspecialchars($concert["notes"]); ?>
+          <noscript>
+            <input class="modal-input" id="<?php echo $modalId; ?>" type="checkbox" tabindex="0" />
+            <label class="modal-open" for="<?php echo $modalId; ?>">
+              {% tablericon "info-circle" %}
+            </label>
+            <div class="modal-wrapper">
+              <div class="modal-body">
+                <label class="modal-close" for="<?php echo $modalId; ?>">
+                  {% tablericon "circle-x" %}
+                </label>
+                <?php echo parseMarkdown($notes); ?>
+              </div>
+            </div>
+          </noscript>
+          <button class="modal-open client-side" data-modal-trigger="<?php echo $modalId; ?>" data-modal-button>
+            {% tablericon "info-circle" %}
+          </button>
+          <dialog id="dialog-<?php echo $modalId; ?>" class="client-side">
+            <button class="modal-close" data-modal-button>
+              {% tablericon "circle-x" %}
+            </button>
+            <?php echo parseMarkdown($notes); ?>
+          </dialog>
+        <?php endif; ?>
+      </li>
+    <?php endforeach; ?>
+  </ul>
+  <?php endif; ?>
+  <table>
+    <tr>
+      <th>Album</th>
+      <th>Plays</th>
+      <th>Year</th>
+    </tr>
+    <?php foreach ($artist["albums"] as $album): ?>
+      <tr>
+        <td><?= htmlspecialchars($album["name"]) ?></td>
+        <td><?= $album["total_plays"] > 0 ? $album["total_plays"] : "-" ?></td>
+        <td><?= $album["release_year"] ?></td>
+      </tr>
+    <?php endforeach; ?>
+  </table>
+</article>