cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: dedicated music page

Browse source
This commit is contained in:
Cory Dransfeldt 2024-05-18 08:02:57 -07:00
parent 3d08ecfa7a
commit a43598263b
No known key found for this signature in database
38 changed files with 475 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

77
src/_includes/now.liquid
View file

@ -1,84 +1,7 @@
---
layout: default
---
{% capture js %}
{% render "../assets/scripts/media-toggles.js" %}
{% endcapture %}
<script>{{ js }}</script>
{{ content }}
<div class="section-header-wrapper">
<h2 id="artists" class="section-header flex-centered">
{% tablericon "microphone-2" "Artists" %}
Artists
</h2>
<div class="section-header-buttons client-side">
<button class="small active" data-toggle="artists-window">This week</button>
<button class="small secondary" data-toggle="artists-month">This month</button>
<button class="small secondary" data-toggle="artists-three-months">3 months</button>
<button class="small secondary" data-toggle="artists-all-time">All time</button>
</div>
</div>
<div id="artists-window">
{% render "partials/now/media-grid.liquid", data:music.week.artists, shape: "square", count: 8, loading: "eager" %}
</div>
<div class="hidden" id="artists-month">
{% render "partials/now/media-grid.liquid", data:music.month.artists, shape: "square", count: 8 %}
</div>
<div class="hidden" id="artists-three-months">
{% render "partials/now/media-grid.liquid", data:music.threeMonth.artists, shape: "square", count: 8 %}
</div>
<div class="hidden" id="artists-all-time">
{% render "partials/now/media-grid.liquid", data:music.allTime.artists, shape: "square", count: 8 %}
</div>
<div class="section-header-wrapper">
<h2 id="albums" class="section-header flex-centered">
{% tablericon "vinyl" "Albums" %}
Albums
</h2>
<div class="section-header-buttons client-side">
<button class="small active" data-toggle="albums-window">This week</button>
<button class="small secondary" data-toggle="albums-month">This month</button>
<button class="small secondary" data-toggle="albums-three-months">3 months</button>
<button class="small secondary" data-toggle="albums-all-time">All time</button>
</div>
</div>
<div id="albums-window">
{% render "partials/now/media-grid.liquid", data:music.week.albums, shape: "square", count: 8 %}
</div>
<div class="hidden" id="albums-month">
{% render "partials/now/media-grid.liquid", data:music.month.albums, shape: "square", count: 8 %}
</div>
<div class="hidden" id="albums-three-months">
{% render "partials/now/media-grid.liquid", data:music.threeMonth.albums, shape: "square", count: 8 %}
</div>
<div class="hidden" id="albums-all-time">
{% render "partials/now/media-grid.liquid", data:music.allTime.albums, shape: "square", count: 8 %}
</div>
<div class="section-header-wrapper">
<h2 id="tracks" class="section-header flex-centered">
{% tablericon "playlist" "Tracks" %}
Tracks
</h2>
<div class="section-header-buttons client-side">
<button class="small active" data-toggle="tracks-recent">Recent</button>
<button class="small secondary" data-toggle="tracks-window">This week</button>
<button class="small secondary" data-toggle="tracks-month">This month</button>
<button class="small secondary" data-toggle="tracks-three-months">3 months</button>
</div>
</div>
<div id="tracks-recent">
{% render "partials/now/tracks-recent.liquid", data:music.recent.tracksChronological %}
</div>
<div class="hidden" id="tracks-window">
{% render "partials/now/track-chart.liquid", data:music.week.tracks, mostPlayed:music.week.tracks[0].plays %}
</div>
<div class="hidden" id="tracks-month">
{% render "partials/now/track-chart.liquid", data:music.month.tracks, mostPlayed:music.month.tracks[0].plays %}
</div>
<div class="hidden" id="tracks-three-months">
{% render "partials/now/track-chart.liquid", data:music.threeMonth.tracks, mostPlayed:music.threeMonth.tracks[0].plays %}
</div>
{% render "partials/now/album-releases.liquid", albumReleases:albumReleases %}
<a class="link-icon flex-centered" href="/books">
<h2 id="books" class="section-header flex-centered">
{% tablericon "books" "Books" %}