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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
config/filters/index.js
View file

@ -23,10 +23,7 @@ export default {
shuffleArray,
// navigation
isLinkActive: (category, page) => {
const normalizedPage = page.includes('.html') ? page.replace('.html', '/') : page
return !!normalizedPage && normalizedPage.includes(category) && !/\d+/.test(normalizedPage);
},
isLinkActive: (category, page) => page.includes(category) && page.split('/').filter(a => a !== '').length <= 1,
// posts
filterByPostType: (posts, postType) => {

33
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "coryd.dev",
"version": "19.2.8",
"version": "19.3.8",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "coryd.dev",
"version": "19.2.8",
"version": "19.3.8",
"license": "MIT",
"dependencies": {
"@cdransf/api-text": "^1.4.0",
@ -20,7 +20,7 @@
"@11ty/eleventy-fetch": "^4.0.1",
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
"@11tyrocks/eleventy-plugin-lightningcss": "^1.4.0",
"@cdransf/eleventy-plugin-tabler-icons": "^1.5.0",
"@cdransf/eleventy-plugin-tabler-icons": "^1.6.0",
"@supabase/supabase-js": "^2.43.4",
"dotenv-flow": "^4.1.0",
"html-minifier-terser": "^7.2.0",
@ -269,9 +269,9 @@
"license": "MIT"
},
"node_modules/@cdransf/eleventy-plugin-tabler-icons": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@cdransf/eleventy-plugin-tabler-icons/-/eleventy-plugin-tabler-icons-1.5.0.tgz",
"integrity": "sha512-KS7B7lSmD9kLsvkmwAn0qGqazcIsoaB6hUlPgIeSUdjY5VtG6geKOmyvEzaiByrS0bN+/2MNSeqTm9Wl3RxCSw==",
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@cdransf/eleventy-plugin-tabler-icons/-/eleventy-plugin-tabler-icons-1.6.0.tgz",
"integrity": "sha512-/6+hMjlOn65NJBKyjMTV8QRYhOehziP6Ki1L6omjeRNmMyM/oayp4Cbt2ISZUA/HkQMJazPawPnW5HHcJJ+zFQ==",
"dev": true,
"license": "MIT"
},
@ -566,9 +566,9 @@
"license": "MIT"
},
"node_modules/acorn": {
"version": "8.11.3",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
"integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
"version": "8.12.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz",
"integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==",
"dev": true,
"license": "MIT",
"bin": {
@ -579,11 +579,14 @@
}
},
"node_modules/acorn-walk": {
"version": "8.3.2",
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.2.tgz",
"integrity": "sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==",
"version": "8.3.3",
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.3.tgz",
"integrity": "sha512-MxXdReSRhGO7VlFe1bRG/oI7/mdLV9B9JJT0N8vZOhF7gFRR5l3M8W9G8JxmKV+JC5mGqJ0QvqfSOLsCPa4nUw==",
"dev": true,
"license": "MIT",
"dependencies": {
"acorn": "^8.11.0"
},
"engines": {
"node": ">=0.4.0"
}
@ -822,9 +825,9 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001633",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001633.tgz",
"integrity": "sha512-6sT0yf/z5jqf8tISAgpJDrmwOpLsrpnyCdD/lOZKvKkkJK4Dn0X5i7KF7THEZhOq+30bmhwBlNEaqPUiHiKtZg==",
"version": "1.0.30001634",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001634.tgz",
"integrity": "sha512-fbBYXQ9q3+yp1q1gBk86tOFs4pyn/yxFm5ZNP18OXJDfA3txImOY9PhfxVggZ4vRHDqoU8NrKU81eN0OtzOgRA==",
"dev": true,
"funding": [
{

4
package.json
View file

@ -1,6 +1,6 @@
{
"name": "coryd.dev",
"version": "19.2.8",
"version": "19.3.8",
"description": "The source for my personal site. Built using 11ty.",
"type": "module",
"scripts": {
@ -30,7 +30,7 @@
"@11ty/eleventy-fetch": "^4.0.1",
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
"@11tyrocks/eleventy-plugin-lightningcss": "^1.4.0",
"@cdransf/eleventy-plugin-tabler-icons": "^1.5.0",
"@cdransf/eleventy-plugin-tabler-icons": "^1.6.0",
"@supabase/supabase-js": "^2.43.4",
"dotenv-flow": "^4.1.0",
"html-minifier-terser": "^7.2.0",

4
src/_includes/base.liquid
View file

@ -9,6 +9,8 @@
{%- assign pageTitle = 'Artists / ' | append: artist.name_string | append: ' / ' | append: meta.siteName -%}
{%- elsif schema == 'music-index' -%}
{%- assign pageTitle = 'Music / ' | append: meta.siteName -%}
{%- elsif schema == 'music-period' -%}
{%- assign pageTitle = 'Music / ' | append: page.title | append: meta.siteName -%}
{%- elsif genre.name -%}
{%- assign pageTitle = 'Music / ' | append: genre.name | append: ' / ' | append: meta.siteName -%}
{%- elsif book.title -%}
@ -43,7 +45,7 @@
{%- assign ogImage = meta.meta_data.opengraph_default -%}
{%- case schema -%}
{%- when 'music' -%}
{%- assign ogImage = 'https://cdn.coryd.dev' | append: music.week.artists[0].image -%}
{%- assign ogImage = 'https://cdn.coryd.dev' | append: page.image -%}
{%- when 'music-index' -%}
{%- assign ogImage = 'https://cdn.coryd.dev' | append: music.week.artists[0].image -%}
{%- when 'artist' -%}

2
src/_includes/partials/media/books/year.liquid
View file

@ -5,7 +5,7 @@ layout: default
{%- capture currentYear -%}{% currentYear %}{%- endcapture -%}
{%- assign yearString = year | append: '' -%}
{%- assign currentYearString = currentYear | append: '' -%}
<a class="back-link-header link-icon flex-centered" href="/books" title="Go back to the books index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
<a class="back-link-header link-icon flex-centered" href="/books" title="Go back to the books index page">{% tablericon "arrow-left" "Go back to the books index page" %} Back to books</a>
<h2 class="page-header">{{ title }}</h2>
{{ content }}
{% if yearString == currentYearString %}

2
src/pages/main/books/book.html
View file

@ -11,7 +11,7 @@ schema: book
{%- capture alt -%}
{{ book.title }}{% if book.authors %}By {{ book.authors }}{% endif %}
{%- endcapture -%}
<a class="back-link-header link-icon flex-centered" href="/books" title="Go back to the books index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
<a class="back-link-header link-icon flex-centered" href="/books" title="Go back to the books index page">{% tablericon "arrow-left" "Go back to the books index page" %} Back to books</a>
<article class="book-focus">
<div class="book-display">
<img

5
src/pages/main/music/albums/3-months.html
View file

@ -6,13 +6,14 @@ pagination:
data: music.threeMonth.albums
size: 24
permalink: "/music/albums/three-months/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
image: music.threeMonth.artists[0].image
schema: music
---
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
{% if pagination.pageNumber == 0 %}
<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 {{ music.threeMonth.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
<p><strong class="highlight-text">See my</strong> <a href="/music/artists/three-months/">artists</a> or <a href="/music/tracks/three-months/">tracks</a> for this period.</p>
<p><strong class="highlight-text">See the</strong> <a href="/music/artists/three-months/">artists</a> or <a href="/music/tracks/three-months/">tracks</a> I've listened to over the last 3 months.</p>
<hr class="large-spacing" />
{% endif %}
{% render "partials/media/grid.liquid" data:pagination, shape: "square" %}

5
src/pages/main/music/albums/this-month.html
View file

@ -6,13 +6,14 @@ pagination:
data: music.month.albums
size: 24
permalink: "/music/albums/this-month/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
image: music.month.artists[0].image
schema: music
---
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
{% if pagination.pageNumber == 0 %}
<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 {{ music.month.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
<p><strong class="highlight-text">See my</strong> <a href="/music/artists/this-month/">artists</a> or <a href="/music/tracks/this-month/">tracks</a> for this period.</p>
<p><strong class="highlight-text">See the</strong> <a href="/music/artists/this-month/">artists</a> or <a href="/music/tracks/this-month/">tracks</a> I've listened to this month.</p>
<hr class="large-spacing" />
{% endif %}
{% render "partials/media/grid.liquid" data:pagination, shape: "square" %}

5
src/pages/main/music/albums/this-week.html
View file

@ -6,13 +6,14 @@ pagination:
data: music.week.albums
size: 24
permalink: "/music/albums/this-week/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
image: music.week.artists[0].image
schema: music
---
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
{% if pagination.pageNumber == 0 %}
<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 {{ music.week.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
<p><strong class="highlight-text">See my</strong> <a href="/music/artists/this-week/">artists</a> or <a href="/music/tracks/this-week/">tracks</a> for this period.</p>
<p><strong class="highlight-text">See the</strong> <a href="/music/artists/this-week/">artists</a> or <a href="/music/tracks/this-week/">tracks</a> I've listened to this week.</p>
<hr class="large-spacing" />
{% endif %}
{% render "partials/media/grid.liquid" data:pagination, shape: "square" %}

5
src/pages/main/music/artists/3-months.html
View file

@ -6,13 +6,14 @@ pagination:
data: music.threeMonth.artists
size: 24
permalink: "/music/artists/three-months/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
image: music.threeMonth.artists[0].image
schema: music
---
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
{% if pagination.pageNumber == 0 %}
<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 {{ music.threeMonth.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
<p><strong class="highlight-text">See my</strong> <a href="/music/albums/three-months/">albums</a> or <a href="/music/tracks/three-months/">tracks</a> for this period.</p>
<p><strong class="highlight-text">See the</strong> <a href="/music/albums/three-months/">albums</a> or <a href="/music/tracks/three-months/">tracks</a> I've listened to over the last 3 months.</p>
<hr class="large-spacing" />
{% endif %}
{% render "partials/media/grid.liquid" data:pagination, shape: "square" %}

2
src/pages/main/music/artists/artist.html
View file

@ -16,7 +16,7 @@ schema: artist
{% endcapture %}
<script>{{ js }}</script>
<noscript><style>[data-toggle-content].text-toggle-hidden {height: unset !important;overflow: unset !important;margin-bottom: unset !important;}[data-toggle-content].text-toggle-hidden::after {display: none !important;}</style></noscript>
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
<article class="artist-focus">
<div class="artist-display">
<img

5
src/pages/main/music/artists/this-month.html
View file

@ -6,13 +6,14 @@ pagination:
data: music.month.artists
size: 24
permalink: "/music/artists/this-month/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
image: music.month.artists[0].image
schema: music
---
<a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
{% if pagination.pageNumber == 0 %}
<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 {{ music.month.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
<p><strong class="highlight-text">See my</strong> <a href="/music/albums/this-month/">albums</a> or <a href="/music/tracks/this-month/">tracks</a> for this period.</p>
<p><strong class="highlight-text">See the</strong> <a href="/music/albums/this-month/">albums</a> or <a href="/music/tracks/this-month/">tracks</a> I've listened to this month.</p>
<hr class="large-spacing" />
{% endif %}
{% render "partials/media/grid.liquid" data:pagination, shape: "square" %}

5
src/pages/main/music/artists/this-week.html
View file

@ -6,13 +6,14 @@ pagination:
data: music.week.artists
size: 24
permalink: "/music/artists/this-week/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
image: music.week.artists[0].image
schema: music
---
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
{% if pagination.pageNumber == 0 %}
<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 {{ music.week.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
<p><strong class="highlight-text">See my</strong> <a href="/music/albums/this-week/">albums</a> or <a href="/music/tracks/this-week/">tracks</a> for this period.</p>
<p><strong class="highlight-text">See the</strong> <a href="/music/albums/this-week/">albums</a> or <a href="/music/tracks/this-week/">tracks</a> I've listened to this week.</p>
<hr class="large-spacing" />
{% endif %}
{% render "partials/media/grid.liquid" data:pagination, shape: "square" %}

2
src/pages/main/music/genre.html
View file

@ -21,7 +21,7 @@ schema: genre
{% endcapture %}
<script>{{ js }}</script>
<noscript><style>[data-toggle-content].text-toggle-hidden {height: unset !important;overflow: unset !important;margin-bottom: unset !important;}[data-toggle-content].text-toggle-hidden::after {display: none !important;}</style></noscript>
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
<h2 class="page-header">{{ genre.name }}</h2>
<article class="genre-focus">
<p>My top <strong class="highlight-text">{{ genre.name }}</strong> artists {{ connectingWord }} {{ genre.artists | sortByPlaysDescending: "total_plays" | mediaLinks: "artist", 5 }}. I've listened to <strong class="highlight-text">{{ genre.total_plays | formatNumber }}</strong> tracks form this genre.</p>

54
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">
<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" %}

34
src/pages/main/music/periods/this-month.html Normal file
View file

@ -0,0 +1,34 @@
---
title: This month
description: This is everything I've been listening to this month — it's collected in a database as I listen to it and displayed here.
layout: default
permalink: "/music/this-month/index.html"
updated: "now"
image: music.month.artists[0].image
schema: music-period
---
<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 {{ music.month.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
<p><strong class="highlight-text">See more of the</strong> <a href="/music/artists/this-month/">artists</a>, <a href="/music/albums/this-month/">albums</a> or <a href="/music/tracks/this-month/">tracks</a> I've listened to this month.</p>
<hr class="large-spacing" />
<a class="link-icon flex-centered" href="/music/artists/this-month">
<h2 id="artists" class="section-header no-top-margin flex-centered">
{% tablericon "microphone-2" "Artists" %}
Artists
</h2>
</a>
{% render "partials/media/grid.liquid", data:music.month.artists, shape: "square", count: 8, loading: "eager" %}
<a class="link-icon flex-centered" href="/music/albums/this-month">
<h2 id="albums" class="section-header reduced-margin flex-centered">
{% tablericon "vinyl" "Albums" %}
Albums
</h2>
</a>
{% render "partials/media/grid.liquid", data:music.month.albums, shape: "square", count: 8 %}
<a class="link-icon flex-centered" href="/music/tracks/this-month">
<h2 id="tracks" class="section-header reduced-margin flex-centered">
{% tablericon "playlist" "Tracks" %}
Tracks
</h2>
</a>
{% render "partials/media/music/chart.liquid", data:music.month.tracks, mostPlayed:music.month.tracks[0].plays, count: 10 %}

34
src/pages/main/music/periods/three-months.html Normal file
View file

@ -0,0 +1,34 @@
---
title: 3 months
description: This is everything I've been listening to over the last 3 months — it's collected in a database as I listen to it and displayed here.
layout: default
permalink: "/music/three-months/index.html"
updated: "now"
image: music.threeMonth.artists[0].image
schema: music-period
---
<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 {{ music.threeMonth.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
<p><strong class="highlight-text">See more of the</strong> <a href="/music/artists/three-months/">artists</a>, <a href="/music/albums/three-months/">albums</a> or <a href="/music/tracks/three-months/">tracks</a> I've listened to over the last 3 months.</p>
<hr class="large-spacing" />
<a class="link-icon flex-centered" href="/music/artists/three-months">
<h2 id="artists" class="section-header no-top-margin flex-centered">
{% tablericon "microphone-2" "Artists" %}
Artists
</h2>
</a>
{% render "partials/media/grid.liquid", data:music.threeMonth.artists, shape: "square", count: 8, loading: "eager" %}
<a class="link-icon flex-centered" href="/music/albums/three-months">
<h2 id="albums" class="section-header reduced-margin flex-centered">
{% tablericon "vinyl" "Albums" %}
Albums
</h2>
</a>
{% render "partials/media/grid.liquid", data:music.threeMonth.albums, shape: "square", count: 8 %}
<a class="link-icon flex-centered" href="/music/tracks/three-months">
<h2 id="tracks" class="section-header reduced-margin flex-centered">
{% tablericon "playlist" "Tracks" %}
Tracks
</h2>
</a>
{% render "partials/media/music/chart.liquid", data:music.threeMonth.tracks, mostPlayed:music.threeMonth.tracks[0].plays, count: 10 %}

5
src/pages/main/music/tracks/3-months.html
View file

@ -6,13 +6,14 @@ pagination:
data: music.threeMonth.tracks
size: 50
permalink: "/music/tracks/three-months/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
image: music.threeMonth.artists[0].image
schema: music
---
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
{% if pagination.pageNumber == 0 %}
<h2 class="page-header">{{ title }}</h2>
<p>I've listened to <strong class="highlight-text">{{ music.threeMonth.totalTracks }} tracks</strong> over the last 3 months and most of what I've listened to has been {{ music.threeMonth.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
<p><strong class="highlight-text">See my</strong> <a href="/music/artists/three-months/">artists</a> or <a href="/music/albums/three-months/">albums</a> for this period.</p>
<p><strong class="highlight-text">See the</strong> <a href="/music/artists/three-months/">artists</a> or <a href="/music/albums/three-months/">albums</a> I've listened to over the last 3 months.</p>
<hr class="large-spacing" />
{% endif %}
{% render "partials/media/music/chart.liquid" data:pagination, playTotal: music.threeMonth.tracks[0].plays %}

5
src/pages/main/music/tracks/this-month.html
View file

@ -6,13 +6,14 @@ pagination:
data: music.month.tracks
size: 50
permalink: "/music/tracks/this-month/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
image: music.month.artists[0].image
schema: music
---
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
{% if pagination.pageNumber == 0 %}
<h2 class="page-header">{{ title }}</h2>
<p>I've listened to <strong class="highlight-text">{{ music.month.totalTracks }} tracks</strong> this month and most of what I've listened to has been {{ music.month.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
<p><strong class="highlight-text">See my</strong> <a href="/music/artists/this-month/">artists</a> or <a href="/music/albums/this-month/">albums</a> for this period.</p>
<p><strong class="highlight-text">See the</strong> <a href="/music/artists/this-month/">artists</a> or <a href="/music/albums/this-month/">albums</a> this month.</p>
<hr class="large-spacing" />
{% endif %}
{% render "partials/media/music/chart.liquid" data:pagination, playTotal: music.month.tracks[0].plays %}

5
src/pages/main/music/tracks/this-week.html
View file

@ -6,13 +6,14 @@ pagination:
data: music.week.tracks
size: 50
permalink: "/music/tracks/this-week/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
image: music.week.artists[0].image
schema: music
---
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
{% if pagination.pageNumber == 0 %}
<h2 class="page-header">{{ title }}</h2>
<p>I've listened to <strong class="highlight-text">{{ music.week.totalTracks }} tracks</strong> this week and most of what I've listened to has been {{ music.week.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
<p><strong class="highlight-text">See my</strong> <a href="/music/artists/this-week/">artists</a> or <a href="/music/albums/this-week/">albums</a> for this period.</p>
<p><strong class="highlight-text">See the</strong> <a href="/music/artists/this-week/">artists</a> or <a href="/music/albums/this-week/">albums</a> I've listened to this week.</p>
<hr class="large-spacing" />
{% endif %}
{% render "partials/media/music/chart.liquid" data:pagination, playTotal: music.week.tracks[0].plays %}

2
src/pages/main/watching/favorites/movies.html
View file

@ -8,7 +8,7 @@ pagination:
permalink: "/watching/favorite-movies/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
schema: watching
---
<a class="back-link-header link-icon flex-centered" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
<a class="back-link-header link-icon flex-centered" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back to the watching index page" %} Back to watching</a>
{% if pagination.pageNumber == 0 %}
<h2 class="watching page-header">{{ title }}</h2>
<p>These are my favorite movies. There are many like them, but these are mine.</p>

2
src/pages/main/watching/favorites/shows.html
View file

@ -8,7 +8,7 @@ pagination:
permalink: "/watching/favorite-shows/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
schema: watching
---
<a class="back-link-header link-icon flex-centered" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
<a class="back-link-header link-icon flex-centered" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back to the watching index page" %} Back to watching</a>
{% if pagination.pageNumber == 0 %}
<h2 class="watching page-header">{{ title }}</h2>
<p>These are my favorite shows. There are many like them, but these are mine.</p>

2
src/pages/main/watching/movie.html
View file

@ -10,7 +10,7 @@ schema: movie
{%- capture alt -%}
{{ movie.title }} / {{ movie.year }}{% if move.rating %} ({{ movie.rating }}){% endif %}
{%- endcapture -%}
<a class="back-link-header link-icon flex-centered" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
<a class="back-link-header link-icon flex-centered" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back to the watching index page" %} Back to watching</a>
<article class="watching-focus">
<img
srcset="

2
src/pages/main/watching/recent/movies.html
View file

@ -8,7 +8,7 @@ pagination:
permalink: "/watching/recent/movies/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
schema: watching
---
<a class="back-link-header link-icon flex-centered" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
<a class="back-link-header link-icon flex-centered" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back to the watching index page" %} Back to watching</a>
{% if pagination.pageNumber == 0 %}
<h2 class="watching page-header">{{ title }}</h2>
<p>These are the movies I've watched recently. There are many like them, but these are mine. (Or well, all the movies I've watched — they're ordered latest watched, descending, hence the recent part).</p>

2
src/pages/main/watching/recent/shows.html
View file

@ -8,7 +8,7 @@ pagination:
permalink: "/watching/recent/shows/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
schema: watching
---
<a class="back-link-header link-icon flex-centered" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
<a class="back-link-header link-icon flex-centered" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back to the watching index page" %} Back to watching</a>
{% if pagination.pageNumber == 0 %}
<h2 class="watching page-header">{{ title }}</h2>
<p>These are the shows I've watched recently. There are many like them, but these are mine. (Or well, all the movies I've watched — they're ordered latest watched, descending, hence the recent part).</p>

2
src/pages/main/watching/show.html
View file

@ -11,7 +11,7 @@ schema: show
{{ show.title }} / {{ show.year }}
{%- endcapture -%}
{% assign lastWatched = show | getLastWatched %}
<a class="back-link-header link-icon flex-centered" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
<a class="back-link-header link-icon flex-centered" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back to the watching index page" %} Back to watching</a>
<article class="watching-focus">
<img
srcset="