---
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>
<?php
  $html = ob_get_clean();
  $htmlMin = new HtmlMin();
  $htmlMin->doOptimizeAttributes(true);
  $htmlMin->doRemoveComments(true);
  $htmlMin->doSumUpWhitespace(true);
  $htmlMin->doRemoveWhitespaceAroundTags(true);
  $htmlMin->doOptimizeViaHtmlDomParser(true);
  echo $htmlMin->minify($html);
?>