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

feat: recent tracks

Browse source
This commit is contained in:
Cory Dransfeldt 2024-04-07 11:56:43 -07:00
parent 9ba4931ca3
commit ca94df3b61
No known key found for this signature in database
7 changed files with 92 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/_includes/now.liquid
View file

@ -59,12 +59,16 @@ layout: default
Tracks
</h2>
<div class="now__section--header-buttons client-side">
<button class="small active" data-toggle="tracks-window">This week</button>
<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-window">
<div id="tracks-recent">
{% render "partials/now/tracks-recent.liquid", data:musicCharts.recent %}
</div>
<div class="hidden" id="tracks-window">
{% render "partials/now/track-chart.liquid", data:music.topTracks.data, mostPlayed:music.topTracks.mostPlayed %}
</div>
<div class="hidden" id="tracks-month">

25
src/_includes/partials/now/tracks-recent.liquid Normal file
View file

@ -0,0 +1,25 @@
{% if data.size > 0 %}
{% capture css %}
{% render "../../../assets/styles/components/track-chart.css" %}
{% endcapture %}
<style>{{ css}}</style>
{% endif %}
<div class="track__chart">
{% for item in data limit: 10 %}
{% capture alt %}{{ item.track }} by {{ item.track }}{% endcapture %}
<div class="track__chart--item">
<div class="track__chart--meta">
{% image item.image, alt, '', 'lazy', 80 %}
<div class="track__chart--meta--text">
<div class="track__chart--title">{{ item.track }}</div>
<div class="track__chart--artists">
<a href="{{ item.url }}">{{ item.artist }}</a>
</div>
</div>
</div>
<div class="track__chart--timestamp">
{{ item.timestamp | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}
</div>
</div>
{% endfor %}
</div>