content, css: generateAlbumSidebar: earlier/later releases

Also CSS tweak for release box backgrounds, and fix
generateAlbumSidebar being broken for non-track pages

2 files changed, 55 insertions, 11 deletions

diff --git a/src/content/dependencies/generateAlbumSidebar.js b/src/content/dependencies/generateAlbumSidebar.js
index 19fa7ee7..e10e865d 100644
--- a/src/content/dependencies/generateAlbumSidebar.js
+++ b/src/content/dependencies/generateAlbumSidebar.js
@@ -1,4 +1,5 @@
-import {stitchArrays} from '#sugar';
+import {sortAlbumsTracksChronologically} from '#sort';
+import {stitchArrays, transposeArrays} from '#sugar';
 
 export default {
   contentDependencies: [
@@ -18,7 +19,7 @@ export default {
       groupData.flatMap(group => group.serieses),
   }),
 
-  query(sprawl, album) {
+  query(sprawl, album, track) {
     const query = {};
 
     query.groups =
@@ -36,6 +37,33 @@ export default {
           series.albums.includes(album) &&
           !query.groups.includes(series.group));
 
+    if (track) {
+      const albumTrackMap =
+        new Map(transposeArrays([
+          [track.album, ...track.otherReleases.map(t => t.album)],
+          [track, ...track.otherReleases],
+        ]));
+
+      const allReleaseAlbums =
+        sortAlbumsTracksChronologically(
+          Array.from(albumTrackMap.keys()));
+
+      const currentReleaseIndex =
+        allReleaseAlbums.indexOf(track.album);
+
+      const earlierReleaseAlbums =
+        allReleaseAlbums.slice(0, currentReleaseIndex);
+
+      const laterReleaseAlbums =
+        allReleaseAlbums.slice(currentReleaseIndex + 1);
+
+      query.earlierReleaseTracks =
+        earlierReleaseAlbums.map(album => albumTrackMap.get(album));
+
+      query.laterReleaseTracks =
+        laterReleaseAlbums.map(album => albumTrackMap.get(album));
+    }
+
     return query;
   },
 
@@ -65,10 +93,19 @@ export default {
         .map(series =>
           relation('generateAlbumSidebarSeriesBox', album, series)),
 
-    trackReleaseBoxes:
-      track.otherReleases
-        .map(track =>
-          relation('generateTrackReleaseBox', track)),
+    earlierTrackReleaseBoxes:
+      (track
+        ? query.earlierReleaseTracks
+            .map(track =>
+              relation('generateTrackReleaseBox', track))
+        : null),
+
+    laterTrackReleaseBoxes:
+      (track
+        ? query.laterReleaseTracks
+            .map(track =>
+              relation('generateTrackReleaseBox', track))
+        : null),
   }),
 
   data: (_query, _sprawl, _album, track) => ({
@@ -106,11 +143,14 @@ export default {
         ],
 
         data.isTrackPage &&
-          relations.trackReleaseBoxes,
+          relations.earlierTrackReleaseBoxes,
 
         relations.trackListBox,
 
         data.isTrackPage &&
+          relations.laterTrackReleaseBoxes,
+
+        data.isTrackPage &&
           relations.conjoinedBox.slots({
             attributes: {class: 'conjoined-group-sidebar-box'},
             boxes:
diff --git a/src/static/css/site.css b/src/static/css/site.css
index bf9ec3be..42d4216f 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -550,9 +550,6 @@ summary.underline-white > span:hover a:not(:hover) {
 
 .track-release-sidebar-box {
   --content-padding: 3px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  background: var(--dark-color), var(--bg-black-color);
 }
 
 .track-release-sidebar-box h1 {
@@ -563,12 +560,19 @@ summary.underline-white > span:hover a:not(:hover) {
 }
 
 .track-release-sidebar-box + .track-release-sidebar-box,
-.track-release-sidebar-box + .track-list-sidebar-box {
+.track-release-sidebar-box + .track-list-sidebar-box,
+.track-list-sidebar-box + .track-release-sidebar-box {
   margin-top: 5px !important;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
+.track-release-sidebar-box:has(+ .track-list-sidebar-box),
+.track-list-sidebar-box:has(+ .track-release-sidebar-box) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
 .wiki-search-sidebar-box {
   padding: 1px 0 0 0;