feat: dedicated music page
This commit is contained in:
parent
3d08ecfa7a
commit
a43598263b
38 changed files with 475 additions and 103 deletions
|
|
@ -71,11 +71,6 @@
|
|||
/assets/img/feed-icon.png /assets/icons/apple-touch-icon.png 200!
|
||||
|
||||
# general
|
||||
/posts/0/ /posts/ 200!
|
||||
/links/0/ /links/ 200!
|
||||
/watching/movies-to-watch/ /watching/movies-to-watch/0/ 200!
|
||||
/watching/shows-to-watch/ /watching/shows-to-watch/0/ 200!
|
||||
/books/want-to-read/ /books/want-to-read/0/ 200!
|
||||
/articles/ / 301!
|
||||
/tags /search 301!
|
||||
/mastodon https://social.lol/@cory 301!
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ export const allContent = (collection) => {
|
|||
|
||||
addContent(posts, '📝', item => item.data.title, item => item.data.date)
|
||||
addContent(links, '🔗', item => item.data.title, item => item.data.date)
|
||||
addContent(books.filter(book => book.status === 'finished'), '📖', item => item.title, item => item.date)
|
||||
addContent(books.filter(book => book.status === 'finished'), '📖', item => `${item.title}${item.rating ? ' (' + item.rating + ')' : ''}`, item => item.date)
|
||||
addContent(movies, '🎥', item => `${item.title}${item.rating ? ' (' + item.rating + ')' : ''}`, item => item.lastWatched)
|
||||
addContent(weeklyArtistChart, '🎧', item => item.title, item => item.date)
|
||||
|
||||
|
|
|
|||
|
|
@ -222,6 +222,14 @@ export default {
|
|||
return normalized
|
||||
}),
|
||||
calculatePlayPercentage: (plays, mostPlayed) => `${plays/mostPlayed * 100}%`,
|
||||
genresToString: (genres, count = 10) => {
|
||||
const genreData = genres.slice(0, count)
|
||||
if (genreData.length === 0) return ''
|
||||
if (genreData.length === 1) return genreData[0].genre
|
||||
const allButLast = genreData.slice(0, -1).map(g => g.genre).join(', ')
|
||||
const last = genreData[genreData.length - 1].genre
|
||||
return `${allButLast} and ${last}`
|
||||
},
|
||||
bookStatus: (books, status) => books.filter(book => book.status === status),
|
||||
bookSortDescending: (books) => books.sort((a, b) => {
|
||||
const dateA = DateTime.fromISO(a.date)
|
||||
|
|
|
|||
|
|
@ -71,7 +71,8 @@ const aggregateData = (data, groupByField, groupByType, sort = true) => {
|
|||
url: item['albums']?.mbid ? `https://musicbrainz.org/release/${item['albums'].mbid}` : `https://musicbrainz.org/search?query=${encodeURIComponent(item['album_name'])}&type=release`,
|
||||
image: item['albums']?.image || '',
|
||||
timestamp: item['listened_at'],
|
||||
type: groupByType
|
||||
type: groupByType,
|
||||
genre: item['artists']?.genre || 'Unknown'
|
||||
}
|
||||
} else {
|
||||
aggregation[key] = {
|
||||
|
|
@ -80,7 +81,8 @@ const aggregateData = (data, groupByField, groupByType, sort = true) => {
|
|||
mbid: item[groupByType]?.mbid || '',
|
||||
url: item[groupByType]?.mbid ? `https://musicbrainz.org/${groupByType === 'albums' ? 'release' : 'artist'}/${item[groupByType].mbid}` : `https://musicbrainz.org/search?query=${encodeURIComponent(item[groupByField])}&type=${groupByType === 'albums' ? 'release' : 'artist'}`,
|
||||
image: item[groupByType]?.image || '',
|
||||
type: groupByType
|
||||
type: groupByType,
|
||||
genre: item['artists']?.genre || 'Unknown'
|
||||
}
|
||||
}
|
||||
if (
|
||||
|
|
@ -94,6 +96,18 @@ const aggregateData = (data, groupByField, groupByType, sort = true) => {
|
|||
return aggregatedData.filter(item => item.plays > 0)
|
||||
}
|
||||
|
||||
const aggregateGenres = (data) => {
|
||||
const genreAggregation = {}
|
||||
data.forEach(item => {
|
||||
const genre = item.artists.genre
|
||||
if (!genreAggregation[genre]) {
|
||||
genreAggregation[genre] = { genre, plays: 0 }
|
||||
}
|
||||
genreAggregation[genre].plays++
|
||||
})
|
||||
return Object.values(genreAggregation).sort((a, b) => b.plays - a.plays)
|
||||
}
|
||||
|
||||
export default async function() {
|
||||
const periods = {
|
||||
week: DateTime.now().minus({ days: 7 }).startOf('day'), // last week
|
||||
|
|
@ -108,7 +122,7 @@ export default async function() {
|
|||
album_name,
|
||||
album_key,
|
||||
listened_at,
|
||||
artists (mbid, image),
|
||||
artists (mbid, image, genre),
|
||||
albums (mbid, image)
|
||||
`
|
||||
|
||||
|
|
@ -117,7 +131,8 @@ export default async function() {
|
|||
results[period] = {
|
||||
artists: aggregateData(periodData, 'artist_name', 'artists'),
|
||||
albums: aggregateData(periodData, 'album_name', 'albums'),
|
||||
tracks: aggregateData(periodData, 'track_name', 'track')
|
||||
tracks: aggregateData(periodData, 'track_name', 'track'),
|
||||
genres: aggregateGenres(periodData)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -126,7 +141,8 @@ export default async function() {
|
|||
results['allTime'] = {
|
||||
artists: aggregateData(allTimeData, 'artist_name', 'artists'),
|
||||
albums: aggregateData(allTimeData, 'album_name', 'albums'),
|
||||
tracks: aggregateData(allTimeData, 'track_name', 'track')
|
||||
tracks: aggregateData(allTimeData, 'track_name', 'track'),
|
||||
genres: aggregateGenres(allTimeData)
|
||||
}
|
||||
|
||||
const recentData = await fetchDataForPeriod(DateTime.now().minus({ days: 7 }), selectFields, 'listens')
|
||||
|
|
@ -136,6 +152,7 @@ export default async function() {
|
|||
albums: aggregateData(recentData, 'album_name', 'albums'),
|
||||
tracks: aggregateData(recentData, 'track_name', 'track'),
|
||||
tracksChronological: aggregateData(recentData, 'track_name', 'track', false),
|
||||
genres: aggregateGenres(recentData)
|
||||
}
|
||||
results['nowPlaying'] = results['recent']['tracksChronological'][0]
|
||||
|
||||
|
|
|
|||
|
|
@ -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" %}
|
||||
|
|
|
|||
|
|
@ -165,6 +165,10 @@ h6 { font-size: var(--font-size-xs) }
|
|||
.section-header {
|
||||
margin: var(--sizing-3xl) 0 var(--sizing-lg);
|
||||
|
||||
&.reduced-margin {
|
||||
margin: var(--sizing-md) 0 var(--sizing-lg);
|
||||
}
|
||||
|
||||
&.posts {
|
||||
margin: 0 0 var(--sizing-lg);
|
||||
}
|
||||
|
|
@ -175,13 +179,17 @@ h6 { font-size: var(--font-size-xs) }
|
|||
}
|
||||
|
||||
.section-header-buttons {
|
||||
margin: 0 0 var(--sizing-lg);
|
||||
margin: var(--sizing-3xl) 0 var(--sizing-lg);
|
||||
|
||||
&.reduced-margin {
|
||||
margin: var(--sizing-md) 0 var(--sizing-lg);
|
||||
}
|
||||
|
||||
& > button {
|
||||
margin-bottom: var(--sizing-sm);
|
||||
margin-bottom: var(--sizing-sm) !important;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -322,6 +330,7 @@ nav .active svg {
|
|||
.brand-npm svg { stroke: var(--brand-npm) !important; }
|
||||
.brand-mastodon svg { stroke: var(--brand-mastodon) !important; }
|
||||
.brain svg { stroke: var(--brand-listenbrainz) !important; }
|
||||
.headphones svg { stroke: var(--brand-music) !important; }
|
||||
.device-tv svg { stroke: var(--brand-tv) !important; }
|
||||
.news svg { stroke: var(--brand-instapaper) !important; }
|
||||
.books svg { stroke: var(--brand-books) !important; }
|
||||
|
|
@ -616,14 +625,6 @@ li {
|
|||
flex-direction: row;
|
||||
}
|
||||
|
||||
.section-header-buttons {
|
||||
margin: var(--sizing-3xl) 0 var(--sizing-lg);
|
||||
|
||||
& > button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
& h2 {
|
||||
margin: 0 0 var(--sizing-xs);
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
.media-grid {
|
||||
display: grid;
|
||||
gap: var(--sizing-sm);
|
||||
margin-bottom: var(--sizing-base);
|
||||
|
||||
&.square {
|
||||
grid-template-columns: var(--grid-square);
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@
|
|||
--brand-npm: #cc3534;
|
||||
--brand-mastodon: #6364ff;
|
||||
--brand-listenbrainz: #e97941;
|
||||
--brand-music: #00bcd4;
|
||||
--brand-tv: #d63031;
|
||||
--brand-instapaper: var(--text-color);
|
||||
--brand-books: #10b582;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ layout: default
|
|||
pagination:
|
||||
data: collections.links
|
||||
size: 30
|
||||
permalink: "/links/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
|
||||
---
|
||||
{% if pagination.pageNumber == 0 %}
|
||||
<h2 class="page-header">Links</h2>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ pagination:
|
|||
data: collections.booksToRead
|
||||
alias: books
|
||||
size: 30
|
||||
permalink: "/books/want-to-read/{{ pagination.pageNumber }}/index.html"
|
||||
permalink: "/books/want-to-read/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
|
||||
---
|
||||
{% if pagination.pageNumber == 0 %}
|
||||
<h2 class="page-header">Want to read</h2>
|
||||
27
src/pages/main/music/albums/3-months.html
Normal file
27
src/pages/main/music/albums/3-months.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
title: Albums • 3 months
|
||||
layout: default
|
||||
pagination:
|
||||
data: music.threeMonth.albums
|
||||
size: 24
|
||||
permalink: "/music/albums/three-months/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
|
||||
---
|
||||
<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
|
||||
<h2 class="page-header">{{ title }}</h2>
|
||||
<p>I've listened to <strong class="highlight-text">{{ music.threeMonth.albums.size }} albums</strong> over the last 3 months and most of what I've listened to has been <strong class="highlight-text">{{ music.threeMonth.genres | genresToString: 5 }}</strong>.</p>
|
||||
<hr class="large-spacing" />
|
||||
<div class="media-grid square">
|
||||
{% for item in pagination.items %}
|
||||
{% assign alt = item.alt | strip | escape %}
|
||||
<a href="{{ item.url | stripUtm }}" title="{{ alt }}">
|
||||
<div class="item-wrapper shadow">
|
||||
<div class="meta-text">
|
||||
<div class="header">{{ item.title }}</div>
|
||||
<div class="subheader">{{ item.plays }} plays</div>
|
||||
</div>
|
||||
<img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% render "partials/widgets/paginator.liquid", pagination:pagination %}
|
||||
27
src/pages/main/music/albums/all-time.html
Normal file
27
src/pages/main/music/albums/all-time.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
title: Albums • all time
|
||||
layout: default
|
||||
pagination:
|
||||
data: music.allTime.albums
|
||||
size: 24
|
||||
permalink: "/music/albums/all-time/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
|
||||
---
|
||||
<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
|
||||
<h2 class="page-header">{{ title }}</h2>
|
||||
<p>I've listened to <strong class="highlight-text">{{ music.allTime.albums.size }} albums</strong> and most of what I listen to is <strong class="highlight-text">{{ music.allTime.genres | genresToString: 5 }}</strong>.</p>
|
||||
<hr class="large-spacing" />
|
||||
<div class="media-grid square">
|
||||
{% for item in pagination.items %}
|
||||
{% assign alt = item.alt | strip | escape %}
|
||||
<a href="{{ item.url | stripUtm }}" title="{{ alt }}">
|
||||
<div class="item-wrapper shadow">
|
||||
<div class="meta-text">
|
||||
<div class="header">{{ item.title }}</div>
|
||||
<div class="subheader">{{ item.plays }} plays</div>
|
||||
</div>
|
||||
<img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% render "partials/widgets/paginator.liquid", pagination:pagination %}
|
||||
27
src/pages/main/music/albums/this-month.html
Normal file
27
src/pages/main/music/albums/this-month.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
title: Albums • This month
|
||||
layout: default
|
||||
pagination:
|
||||
data: music.month.albums
|
||||
size: 24
|
||||
permalink: "/music/albums/this-month/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
|
||||
---
|
||||
<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
|
||||
<h2 class="page-header">{{ title }}</h2>
|
||||
<p>I've listened to <strong class="highlight-text">{{ music.month.albums.size }} albums</strong> this month and most of what I've listened to has been <strong class="highlight-text">{{ music.month.genres | genresToString: 5 }}</strong>.</p>
|
||||
<hr class="large-spacing" />
|
||||
<div class="media-grid square">
|
||||
{% for item in pagination.items %}
|
||||
{% assign alt = item.alt | strip | escape %}
|
||||
<a href="{{ item.url | stripUtm }}" title="{{ alt }}">
|
||||
<div class="item-wrapper shadow">
|
||||
<div class="meta-text">
|
||||
<div class="header">{{ item.title }}</div>
|
||||
<div class="subheader">{{ item.plays }} plays</div>
|
||||
</div>
|
||||
<img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% render "partials/widgets/paginator.liquid", pagination:pagination %}
|
||||
27
src/pages/main/music/albums/this-week.html
Normal file
27
src/pages/main/music/albums/this-week.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
title: Albums • This week
|
||||
layout: default
|
||||
pagination:
|
||||
data: music.week.albums
|
||||
size: 24
|
||||
permalink: "/music/albums/this-week/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
|
||||
---
|
||||
<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
|
||||
<h2 class="page-header">{{ title }}</h2>
|
||||
<p>I've listened to <strong class="highlight-text">{{ music.week.albums.size }} albums</strong> this week and most of what I've listened to has been <strong class="highlight-text">{{ music.week.genres | genresToString: 5 }}</strong>.</p>
|
||||
<hr class="large-spacing" />
|
||||
<div class="media-grid square">
|
||||
{% for item in pagination.items %}
|
||||
{% assign alt = item.alt | strip | escape %}
|
||||
<a href="{{ item.url | stripUtm }}" title="{{ alt }}">
|
||||
<div class="item-wrapper shadow">
|
||||
<div class="meta-text">
|
||||
<div class="header">{{ item.title }}</div>
|
||||
<div class="subheader">{{ item.plays }} plays</div>
|
||||
</div>
|
||||
<img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% render "partials/widgets/paginator.liquid", pagination:pagination %}
|
||||
27
src/pages/main/music/artists/3-months.html
Normal file
27
src/pages/main/music/artists/3-months.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
title: Artists • 3 months
|
||||
layout: default
|
||||
pagination:
|
||||
data: music.threeMonth.artists
|
||||
size: 24
|
||||
permalink: "/music/artists/three-months/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
|
||||
---
|
||||
<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
|
||||
<h2 class="page-header">{{ title }}</h2>
|
||||
<p>I've listened to <strong class="highlight-text">{{ music.threeMonth.artists.size }} artists</strong> over the last 3 months and most of what I've listened to has been <strong class="highlight-text">{{ music.threeMonth.genres | genresToString: 5 }}</strong>.</p>
|
||||
<hr class="large-spacing" />
|
||||
<div class="media-grid square">
|
||||
{% for item in pagination.items %}
|
||||
{% assign alt = item.alt | strip | escape %}
|
||||
<a href="{{ item.url | stripUtm }}" title="{{ alt }}">
|
||||
<div class="item-wrapper shadow">
|
||||
<div class="meta-text">
|
||||
<div class="header">{{ item.title }}</div>
|
||||
<div class="subheader">{{ item.plays }} plays</div>
|
||||
</div>
|
||||
<img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% render "partials/widgets/paginator.liquid", pagination:pagination %}
|
||||
27
src/pages/main/music/artists/all-time.html
Normal file
27
src/pages/main/music/artists/all-time.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
title: Artists • all time
|
||||
layout: default
|
||||
pagination:
|
||||
data: music.allTime.artists
|
||||
size: 24
|
||||
permalink: "/music/artists/all-time/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
|
||||
---
|
||||
<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
|
||||
<h2 class="page-header">{{ title }}</h2>
|
||||
<p>I've listened to <strong class="highlight-text">{{ music.allTime.artists.size }} artists</strong> and most of what I listen to is <strong class="highlight-text">{{ music.allTime.genres | genresToString: 5 }}</strong>.</p>
|
||||
<hr class="large-spacing" />
|
||||
<div class="media-grid square">
|
||||
{% for item in pagination.items %}
|
||||
{% assign alt = item.alt | strip | escape %}
|
||||
<a href="{{ item.url | stripUtm }}" title="{{ alt }}">
|
||||
<div class="item-wrapper shadow">
|
||||
<div class="meta-text">
|
||||
<div class="header">{{ item.title }}</div>
|
||||
<div class="subheader">{{ item.plays }} plays</div>
|
||||
</div>
|
||||
<img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% render "partials/widgets/paginator.liquid", pagination:pagination %}
|
||||
27
src/pages/main/music/artists/this-month.html
Normal file
27
src/pages/main/music/artists/this-month.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
title: Artists • This month
|
||||
layout: default
|
||||
pagination:
|
||||
data: music.month.artists
|
||||
size: 24
|
||||
permalink: "/music/artists/this-month/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
|
||||
---
|
||||
<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
|
||||
<h2 class="page-header">{{ title }}</h2>
|
||||
<p>I've listened to <strong class="highlight-text">{{ music.month.artists.size }} artists</strong> this month and most of what I've listened to has been <strong class="highlight-text">{{ music.month.genres | genresToString: 5 }}</strong>.</p>
|
||||
<hr class="large-spacing" />
|
||||
<div class="media-grid square">
|
||||
{% for item in pagination.items %}
|
||||
{% assign alt = item.alt | strip | escape %}
|
||||
<a href="{{ item.url | stripUtm }}" title="{{ alt }}">
|
||||
<div class="item-wrapper shadow">
|
||||
<div class="meta-text">
|
||||
<div class="header">{{ item.title }}</div>
|
||||
<div class="subheader">{{ item.plays }} plays</div>
|
||||
</div>
|
||||
<img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% render "partials/widgets/paginator.liquid", pagination:pagination %}
|
||||
27
src/pages/main/music/artists/this-week.html
Normal file
27
src/pages/main/music/artists/this-week.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
title: Artists • This week
|
||||
layout: default
|
||||
pagination:
|
||||
data: music.week.artists
|
||||
size: 24
|
||||
permalink: "/music/artists/this-week/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
|
||||
---
|
||||
<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
|
||||
<h2 class="page-header">{{ title }}</h2>
|
||||
<p>I've listened to <strong class="highlight-text">{{ music.week.artists.size }} artists</strong> this week and most of what I've listened to has been <strong class="highlight-text">{{ music.week.genres | genresToString: 5 }}</strong>.</p>
|
||||
<hr class="large-spacing" />
|
||||
<div class="media-grid square">
|
||||
{% for item in pagination.items %}
|
||||
{% assign alt = item.alt | strip | escape %}
|
||||
<a href="{{ item.url | stripUtm }}" title="{{ alt }}">
|
||||
<div class="item-wrapper shadow">
|
||||
<div class="meta-text">
|
||||
<div class="header">{{ item.title }}</div>
|
||||
<div class="subheader">{{ item.plays }} plays</div>
|
||||
</div>
|
||||
<img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% render "partials/widgets/paginator.liquid", pagination:pagination %}
|
||||
88
src/pages/main/music/index.html
Normal file
88
src/pages/main/music/index.html
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
---
|
||||
title: Music
|
||||
layout: default
|
||||
permalink: "/music/index.html"
|
||||
---
|
||||
{% capture js %}
|
||||
{% render "../../../assets/scripts/media-toggles.js" %}
|
||||
{% 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>I mostly listen to <strong class="highlight-text">{{ music.allTime.genres | genresToString: 5 }}</strong>. 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.tracks.size }} tracks</strong>.</p>
|
||||
<div class="section-header-wrapper">
|
||||
<h2 id="artists" class="section-header reduced-margin flex-centered">
|
||||
{% tablericon "microphone-2" "Artists" %}
|
||||
Artists
|
||||
</h2>
|
||||
<div class="section-header-buttons reduced-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>
|
||||
<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>
|
||||
<p><strong class="highlight-text">More:</strong> <a href="/music/artists/this-week/">This week</a> • <a href="/music/artists/this-month/">This month</a> • <a href="/music/artists/three-months/">3 months</a> • <a href="/music/artists/all-time/">All time</a></p>
|
||||
<div class="section-header-wrapper">
|
||||
<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>
|
||||
<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>
|
||||
<p><strong class="highlight-text">More:</strong> <a href="/music/albums/this-week/">This week</a> • <a href="/music/albums/this-month/">This month</a> • <a href="/music/albums/three-months/">3 months</a> • <a href="/music/albums/all-time/">All time</a></p>
|
||||
<div class="section-header-wrapper">
|
||||
<h2 id="tracks" class="section-header reduced-margin flex-centered">
|
||||
{% tablericon "playlist" "Tracks" %}
|
||||
Tracks
|
||||
</h2>
|
||||
<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">
|
||||
{% 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 %}
|
||||
<p class="text-small text-centered"><em>This page was last updated on {{ "now" | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}. It typically updates about once an hour.</em></p>
|
||||
30
src/pages/main/music/tracks/3-months.html
Normal file
30
src/pages/main/music/tracks/3-months.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
title: Tracks • 3 months
|
||||
layout: default
|
||||
pagination:
|
||||
data: music.threeMonth.tracks
|
||||
size: 50
|
||||
permalink: "/music/tracks/three-months/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
|
||||
---
|
||||
<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
|
||||
<h2 class="page-header">{{ title }}</h2>
|
||||
<p>I've listened to <strong class="highlight-text">{{ music.threeMonth.tracks.size }} tracks</strong> over the last 3 months and most of what I've listened to has been <strong class="highlight-text">{{ music.threeMonth.genres | genresToString: 5 }}</strong>.</p>
|
||||
<hr class="large-spacing" />
|
||||
<div class="music-chart">
|
||||
{% for item in pagination.items %}
|
||||
{%- assign percentage = item.plays | calculatePlayPercentage: music.threeMonth.tracks[0].plays -%}
|
||||
<div class="item">
|
||||
<div class="presentation">
|
||||
<div class="count">{{ forloop.index }}.</div>
|
||||
<div class="info">
|
||||
<div class="title">
|
||||
<a href="{{ item.url }}">{{ item.title }}</a>
|
||||
</div>
|
||||
<div class="subtext">{{ item.artist }} • {{ item.plays }} plays</div>
|
||||
</div>
|
||||
</div>
|
||||
{% render "partials/now/progress-bar.liquid", percentage:percentage %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% render "partials/widgets/paginator.liquid", pagination:pagination %}
|
||||
30
src/pages/main/music/tracks/all-time.html
Normal file
30
src/pages/main/music/tracks/all-time.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
title: Artists • all time
|
||||
layout: default
|
||||
pagination:
|
||||
data: music.allTime.tracks
|
||||
size: 50
|
||||
permalink: "/music/tracks/all-time/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
|
||||
---
|
||||
<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
|
||||
<h2 class="page-header">{{ title }}</h2>
|
||||
<p>I've listened to <strong class="highlight-text">{{ music.allTime.tracks.size }} tracks</strong> and most of what I've listened to has been <strong class="highlight-text">{{ music.allTime.genres | genresToString: 5 }}</strong>.</p>
|
||||
<hr class="large-spacing" />
|
||||
<div class="music-chart">
|
||||
{% for item in pagination.items %}
|
||||
{%- assign percentage = item.plays | calculatePlayPercentage: music.allTime.tracks[0].plays -%}
|
||||
<div class="item">
|
||||
<div class="presentation">
|
||||
<div class="count">{{ forloop.index }}.</div>
|
||||
<div class="info">
|
||||
<div class="title">
|
||||
<a href="{{ item.url }}">{{ item.title }}</a>
|
||||
</div>
|
||||
<div class="subtext">{{ item.artist }} • {{ item.plays }} plays</div>
|
||||
</div>
|
||||
</div>
|
||||
{% render "partials/now/progress-bar.liquid", percentage:percentage %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% render "partials/widgets/paginator.liquid", pagination:pagination %}
|
||||
30
src/pages/main/music/tracks/this-month.html
Normal file
30
src/pages/main/music/tracks/this-month.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
title: Tracks • This month
|
||||
layout: default
|
||||
pagination:
|
||||
data: music.month.tracks
|
||||
size: 50
|
||||
permalink: "/music/tracks/this-month/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
|
||||
---
|
||||
<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
|
||||
<h2 class="page-header">{{ title }}</h2>
|
||||
<p>I've listened to <strong class="highlight-text">{{ music.month.tracks.size }} tracks</strong> this month and most of what I've listened to has been <strong class="highlight-text">{{ music.month.genres | genresToString: 5 }}</strong>.</p>
|
||||
<hr class="large-spacing" />
|
||||
<div class="music-chart">
|
||||
{% for item in pagination.items %}
|
||||
{%- assign percentage = item.plays | calculatePlayPercentage: music.month.tracks[0].plays -%}
|
||||
<div class="item">
|
||||
<div class="presentation">
|
||||
<div class="count">{{ forloop.index }}.</div>
|
||||
<div class="info">
|
||||
<div class="title">
|
||||
<a href="{{ item.url }}">{{ item.title }}</a>
|
||||
</div>
|
||||
<div class="subtext">{{ item.artist }} • {{ item.plays }} plays</div>
|
||||
</div>
|
||||
</div>
|
||||
{% render "partials/now/progress-bar.liquid", percentage:percentage %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% render "partials/widgets/paginator.liquid", pagination:pagination %}
|
||||
30
src/pages/main/music/tracks/this-week.html
Normal file
30
src/pages/main/music/tracks/this-week.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
title: Tracks • This week
|
||||
layout: default
|
||||
pagination:
|
||||
data: music.week.tracks
|
||||
size: 50
|
||||
permalink: "/music/tracks/this-week/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
|
||||
---
|
||||
<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
|
||||
<h2 class="page-header">{{ title }}</h2>
|
||||
<p>I've listened to <strong class="highlight-text">{{ music.week.tracks.size }} tracks</strong> this week and most of what I've listened to has been <strong class="highlight-text">{{ music.week.genres | genresToString: 5 }}</strong>.</p>
|
||||
<hr class="large-spacing" />
|
||||
<div class="music-chart">
|
||||
{% for item in pagination.items %}
|
||||
{%- assign percentage = item.plays | calculatePlayPercentage: music.week.tracks[0].plays -%}
|
||||
<div class="item">
|
||||
<div class="presentation">
|
||||
<div class="count">{{ forloop.index }}.</div>
|
||||
<div class="info">
|
||||
<div class="title">
|
||||
<a href="{{ item.url }}">{{ item.title }}</a>
|
||||
</div>
|
||||
<div class="subtext">{{ item.artist }} • {{ item.plays }} plays</div>
|
||||
</div>
|
||||
</div>
|
||||
{% render "partials/now/progress-bar.liquid", percentage:percentage %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% render "partials/widgets/paginator.liquid", pagination:pagination %}
|
||||
|
|
@ -5,7 +5,7 @@ pagination:
|
|||
data: movies.toWatch
|
||||
alias: movies
|
||||
size: 30
|
||||
permalink: "/watching/movies-to-watch/{{ pagination.pageNumber }}/index.html"
|
||||
permalink: "/watching/movies-to-watch/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
|
||||
---
|
||||
<p><a class="link-icon flex-centered" href="/watching">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
|
||||
{% if pagination.pageNumber == 0 %}
|
||||
|
|
@ -5,7 +5,7 @@ pagination:
|
|||
data: tv.toWatch
|
||||
alias: shows
|
||||
size: 30
|
||||
permalink: "/watching/shows-to-watch/{{ pagination.pageNumber }}/index.html"
|
||||
permalink: "/watching/shows-to-watch/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
|
||||
---
|
||||
<p><a class="link-icon flex-centered" href="/watching">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
|
||||
{% if pagination.pageNumber == 0 %}
|
||||
|
|
@ -6,6 +6,7 @@ pagination:
|
|||
size: 8
|
||||
reverse: true
|
||||
alias: posts
|
||||
permalink: "/posts/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
|
||||
---
|
||||
<div class="posts-wrapper">
|
||||
{% for post in pagination.items %}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ pagination:
|
|||
data: collections
|
||||
size: 1
|
||||
alias: tag
|
||||
permalink: /tags/{{ tag }}/
|
||||
permalink: "/tags/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
|
||||
eleventyComputed:
|
||||
title: '{{ tag }}'
|
||||
---
|
||||
|
|
|
|||
Reference in a new issue