feat: initial commit

src/pages/dynamic/genre.php.liquid

@@ -0,0 +1,42 @@
+---
+permalink: /music/genres/index.php
+type: dynamic
+schema: genre
+---
+<a class="back-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" %} Back to music</a>
+<h2><?= htmlspecialchars($genre["emoji"]) ?> <?= htmlspecialchars($genre["name"]) ?></h2>
+<article class="genre-focus">
+  <?php $artistCount = count($genre["artists"]); ?>
+  <?php if ($artistCount > 0): ?>
+    <p>My top <mark><?= htmlspecialchars($genre["name"]) ?></mark> artists are
+      <?php
+      $artists = array_slice($genre["artists"], 0, 5);
+      $artistLinks = [];
+      foreach ($artists as $artist) {
+        $artistLinks[] = '<a href="' . htmlspecialchars($artist["url"]) . '">' . htmlspecialchars($artist["name"]) . '</a>';
+      }
+      echo implode(', ', $artistLinks);
+      ?>. I've listened to <mark><?= $genre["total_plays"] . ' ' . pluralize($genre["total_plays"], "play") ?></mark> tracks from this genre.</p>
+    <hr />
+  <?php endif; ?>
+  <?php
+    renderAssociatedMedia(
+      [],
+      $genre["books"] ?? [],
+      [],
+      $genre["movies"] ?? [],
+      $genre["posts"] ?? [],
+      []
+    );
+  ?>
+  <?php if (!empty($genre["description"])): ?>
+    <h3>Overview</h3>
+    <div data-toggle-content class="text-toggle-hidden">
+      <?= parseMarkdown($genre["description"]) ?>
+      <p><a href="<?= htmlspecialchars($genre["wiki_link"]) ?>">Continue reading at Wikipedia.</a></p>
+      <p><em>Wikipedia content provided under the terms of the
+          <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons BY-SA license</a></em></p>
+    </div>
+    <button data-toggle-button>Show more</button>
+  <?php endif; ?>
+</article>