feat: initial commit

src/pages/media/music/index.html

@@ -0,0 +1,80 @@
+---
+title: Music
+description: This is everything I've been listening to recently — it's collected in a database as I listen to it and displayed here.
+permalink: "/music/index.html"
+schema: music-index
+updated: "now"
+---
+<h2 class="page-title">{{ title }}</h2>
+<p>I've listened to <mark>{{ music.week.artists.size }} artists</mark>, <mark>{{ music.week.albums.size }} albums</mark> and <mark>{{ music.week.totalTracks }} tracks</mark> this week. Most of that has been {{ music.week.genres | mediaLinks: "genre", 5 }}.</p>
+<p><mark>Take a look at what I've listened to</mark> <a href="/music/this-month">this month</a> or <a href="/music/concerts" class="concerts">check out the concerts I've been to</a>.</p>
+{% render "blocks/now-playing.liquid",
+  nowPlaying:nowPlaying.content
+%}
+<hr />
+<h3 id="artists">
+  <a href="/music/this-week/artists">
+    {% tablericon "microphone-2" %} Artists
+  </a>
+</h3>
+{% render "media/grid.liquid",
+  globals:globals,
+  data:music.week.artists,
+  count:8,
+  loading:"eager"
+%}
+{% render "media/music/tables/all-time/artists.liquid",
+  globals:globals,
+  topArtists:topArtists
+%}
+<h3 id="albums">
+  <a href="/music/this-week/albums">
+    {% tablericon "vinyl" %} Albums
+  </a>
+</h3>
+{% render "media/grid.liquid",
+  globals:globals,
+  data:music.week.albums,
+  count:8
+%}
+{% render "media/music/tables/all-time/albums.liquid",
+  globals:globals,
+  topAlbums:topAlbums
+%}
+<h3 id="tracks">
+  <a href="/music/this-week/tracks/">
+    {% tablericon "playlist" %}
+    Tracks
+  </a>
+</h3>
+<div>
+  <input id="tracks-recent" name="track-options" type="radio" aria-hidden="true" checked />
+  <input id="tracks-chart" name="track-options" type="radio" aria-hidden="true" />
+  <label for="tracks-recent" class="button" data-toggle="tracks-recent">Recent</label>
+  <label for="tracks-chart" class="button" data-toggle="tracks-chart">This week</label>
+  <div class="tracks-recent">
+    {% render "media/music/charts/recent.liquid",
+      globals:globals,
+      data:music.recent
+    %}
+  </div>
+  <div class="tracks-chart">
+    {% render "media/music/charts/rank.liquid",
+      data:music.week.tracks,
+      count:10
+    %}
+  </div>
+</div>
+{%- if albumReleases.upcoming.size > 0 -%}
+  <h3 id="album-releases">
+    <a href="/music/album-releases/">
+      {% tablericon "calendar-time" %}
+      Anticipated albums
+    </a>
+  </h3>
+  {% render "media/grid.liquid",
+    globals:globals,
+    data:albumReleases.upcoming,
+    count:8
+  %}
+{%- endif -%}