content, css: generateAlbumCommentaryPage: differing track dates

3 files changed, 18 insertions, 0 deletions

diff --git a/src/content/dependencies/generateAlbumCommentaryPage.js b/src/content/dependencies/generateAlbumCommentaryPage.js
index b78fd24e..91ffeb04 100644
--- a/src/content/dependencies/generateAlbumCommentaryPage.js
+++ b/src/content/dependencies/generateAlbumCommentaryPage.js
@@ -121,6 +121,10 @@ export default {
         .split(' ')
         .length;
 
+    data.trackCommentaryTrackDates =
+      tracksWithCommentary
+        .map(track => track.dateFirstReleased);
+
     data.trackCommentaryDirectories =
       tracksWithCommentary
         .map(track => track.directory);
@@ -228,6 +232,7 @@ export default {
             cover: relations.trackCommentaryCovers,
             entries: relations.trackCommentaryEntries,
             color: data.trackCommentaryColors,
+            trackDate: data.trackCommentaryTrackDates,
           }).map(({
               heading,
               link,
@@ -236,6 +241,7 @@ export default {
               cover,
               entries,
               color,
+              trackDate,
             }) =>
               language.encapsulate(pageCapsule, 'entry', entryCapsule => [
                 language.encapsulate(entryCapsule, 'title.trackCommentary', titleCapsule =>
@@ -261,6 +267,13 @@ export default {
 
               cover?.slots({mode: 'commentary'}),
 
+              trackDate &&
+              trackDate !== data.date &&
+                html.tag('p', {class: 'track-info'},
+                  language.$('releaseInfo.trackReleased', {
+                    date: language.formatDate(trackDate),
+                  })),
+
               entries.map(entry => entry.slot('color', color)),
             ])),
         ],
diff --git a/src/static/css/site.css b/src/static/css/site.css
index c37e912f..11b058d3 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1834,6 +1834,10 @@ html[data-url-key="localized.albumCommentary"] .content-heading-accent {
   display: inline-block;
 }
 
+html[data-url-key="localized.albumCommentary"] p.track-info {
+  margin-left: 20px;
+}
+
 html[data-url-key="localized.groupInfo"] .by a {
   color: var(--page-primary-color);
 }
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index e1e75bb1..d433c76d 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -262,6 +262,7 @@ releaseInfo:
   released: "Released {DATE}."
   albumReleased: "Album released {DATE}."
   artReleased: "Art released {DATE}."
+  trackReleased: "Track released {DATE}."
   addedToWiki: "Added to wiki {DATE}."
 
   duration: "Duration: {DURATION}."