feat: split out period music pages + nav improvements

src/pages/main/books/book.html

@@ -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

src/pages/main/music/albums/3-months.html

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

src/pages/main/music/albums/this-month.html

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

src/pages/main/music/albums/this-week.html

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

src/pages/main/music/artists/3-months.html

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

src/pages/main/music/artists/artist.html

@@ -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

src/pages/main/music/artists/this-month.html

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

src/pages/main/music/artists/this-week.html

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

src/pages/main/music/genre.html

@@ -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>

src/pages/main/music/index.html

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

src/pages/main/music/periods/this-month.html

@@ -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 %}

src/pages/main/music/periods/three-months.html

@@ -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 %}

src/pages/main/music/tracks/3-months.html

@@ -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 %}

src/pages/main/music/tracks/this-month.html

@@ -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 %}

src/pages/main/music/tracks/this-week.html

@@ -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 %}

src/pages/main/watching/favorites/movies.html

@@ -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>

src/pages/main/watching/favorites/shows.html

@@ -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>

src/pages/main/watching/movie.html

@@ -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="

src/pages/main/watching/recent/movies.html

@@ -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>

src/pages/main/watching/recent/shows.html

@@ -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>

src/pages/main/watching/show.html

@@ -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="