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

feat: split out period music pages + nav improvements

Browse source
This commit is contained in:
Cory Dransfeldt 2024-06-14 10:10:22 -07:00
parent 9706124c53
commit d8290fe7db
No known key found for this signature in database
26 changed files with 143 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/pages/main/music/index.html
View file

@ -11,62 +11,35 @@ schema: music-index
{% endcapture %}
<script>{{ js }}</script>
<h2 class="page-header">{{ title }}</h2>
<p>This is everything I've been listening to recently — it's collected in a database as I listen to it and displayed here. <a href="https://coryd.dev/posts/2024/improving-my-self-hosted-scrobbling-implementation/">You can read more about the technical details, if you'd like.</a></p>
<p>This is everything I've been listening to recently — it's collected in a database as I listen to it and displayed here. <a href="/posts/2024/improving-my-self-hosted-scrobbling-implementation/">You can read more about the technical details, if you'd like.</a></p>
<p>I mostly listen to {{ genres | sortByPlaysDescending: "total_plays" | genreStrings: "name" | mediaLinks: "genre", 5 }}. This week I've listened to <strong class="highlight-text">{{ music.week.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.week.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.week.totalTracks }} tracks</strong>.</p>
<p><strong class="highlight-text">See more of the</strong> <a href="/music/artists/this-week/">artists</a>, <a href="/music/albums/this-week/">albums</a> or <a href="/music/tracks/this-week/">tracks</a> I've listened to this week.</p>
{% render "partials/widgets/now-playing.liquid" %}
<hr class="large-spacing" />
<div class="section-header-wrapper">
<a class="link-icon flex-centered" href="/music/artists/this-week">
<h2 id="artists" class="section-header no-top-margin flex-centered">
{% tablericon "microphone-2" "Artists" %}
Artists
</h2>
<div class="section-header-buttons no-top-margin 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>
</div>
</div>
<div id="artists-window">
{% render "partials/media/grid.liquid", data:music.week.artists, shape: "square", count: 8, loading: "eager" %}
</div>
<div class="hidden" id="artists-month">
{% render "partials/media/grid.liquid", data:music.month.artists, shape: "square", count: 8 %}
</div>
<div class="hidden" id="artists-three-months">
{% render "partials/media/grid.liquid", data:music.threeMonth.artists, shape: "square", count: 8 %}
</div>
<p><strong class="highlight-text">More:</strong> <a href="/music/artists/this-week/" title="Artists listened to this week">This week</a> / <a href="/music/artists/this-month/" title="Artists listened to this month">This month</a> / <a href="/music/artists/three-months/" title="Artists listened to in the last 3 months">3 months</a></p>
<div class="section-header-wrapper">
</a>
{% render "partials/media/grid.liquid", data:music.week.artists, shape: "square", count: 8, loading: "eager" %}
<a class="link-icon flex-centered" href="/music/albums/this-week">
<h2 id="albums" class="section-header reduced-margin flex-centered">
{% tablericon "vinyl" "Albums" %}
Albums
</h2>
<div class="section-header-buttons reduced-margin 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>
</div>
</div>
<div id="albums-window">
{% render "partials/media/grid.liquid", data:music.week.albums, shape: "square", count: 8 %}
</div>
<div class="hidden" id="albums-month">
{% render "partials/media/grid.liquid", data:music.month.albums, shape: "square", count: 8 %}
</div>
<div class="hidden" id="albums-three-months">
{% render "partials/media/grid.liquid", data:music.threeMonth.albums, shape: "square", count: 8 %}
</div>
<p><strong class="highlight-text">More:</strong> <a href="/music/albums/this-week/" title="Albums listened to this week">This week</a> / <a href="/music/albums/this-month/" title="Albums listened to this month">This month</a> / <a href="/music/albums/three-months/" title="Albums listened to in the last 3 months">3 months</a></p>
</a>
{% render "partials/media/grid.liquid", data:music.week.albums, shape: "square", count: 8 %}
<div class="section-header-wrapper">
<h2 id="tracks" class="section-header reduced-margin flex-centered">
{% tablericon "playlist" "Tracks" %}
Tracks
</h2>
<a class="link-icon flex-centered" href="/music/tracks/this-week">
<h2 id="tracks" class="section-header reduced-margin flex-centered">
{% tablericon "playlist" "Tracks" %}
Tracks
</h2>
</a>
<div class="section-header-buttons reduced-margin 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">
@ -75,13 +48,6 @@ schema: music-index
<div class="hidden" id="tracks-window">
{% render "partials/media/music/chart.liquid", data:music.week.tracks, mostPlayed:music.week.tracks[0].plays, count: 10 %}
</div>
<div class="hidden" id="tracks-month">
{% render "partials/media/music/chart.liquid", data:music.month.tracks, mostPlayed:music.month.tracks[0].plays, count: 10 %}
</div>
<div class="hidden" id="tracks-three-months">
{% render "partials/media/music/chart.liquid", data:music.threeMonth.tracks, mostPlayed:music.threeMonth.tracks[0].plays, count: 10 %}
</div>
<p><strong class="highlight-text">More:</strong> <a href="/music/tracks/this-week/" title="Tracks listened to this week">This week</a> / <a href="/music/tracks/this-month/" title="Tracks listened to this month">This month</a> / <a href="/music/tracks/three-months/" title="Tracks listened to in the last 3 months">3 months</a></p>
{% if albumReleases.size > 0 %}
<h2 id="album-releases" class="section-header flex-centered">
{% tablericon "calendar-time" "Anticipated albums" %}