content: generateTrackInfoPage: embed year next to other releases

2 files changed, 47 insertions, 8 deletions

diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js
index 2848b15c..099b889b 100644
--- a/src/content/dependencies/generateTrackInfoPage.js
+++ b/src/content/dependencies/generateTrackInfoPage.js
@@ -1,10 +1,11 @@
-import {empty} from '#sugar';
+import {empty, stitchArrays} from '#sugar';
 import {sortAlbumsTracksChronologically, sortFlashesChronologically} from '#wiki-data';
 
 import getChronologyRelations from '../util/getChronologyRelations.js';
 
 export default {
   contentDependencies: [
+    'generateAbsoluteDatetimestamp',
     'generateAdditionalFilesShortcut',
     'generateAdditionalNamesBox',
     'generateAlbumAdditionalFilesList',
@@ -16,6 +17,7 @@ export default {
     'generateContentHeading',
     'generateContributionList',
     'generatePageLayout',
+    'generateRelativeDatetimestamp',
     'generateTrackCoverArtwork',
     'generateTrackList',
     'generateTrackListDividedByGroups',
@@ -140,6 +142,25 @@ export default {
       otherReleases.heading =
         relation('generateContentHeading');
 
+      otherReleases.trackLinks =
+        track.otherReleases
+          .map(track => relation('linkTrack', track));
+
+      otherReleases.albumLinks =
+        track.otherReleases
+          .map(track => relation('linkAlbum', track.album));
+
+      otherReleases.datetimestamps =
+        track.otherReleases.map(track2 =>
+          (track2.date
+            ? (track.date
+                ? relation('generateRelativeDatetimestamp',
+                    track2.date,
+                    track.date)
+                : relation('generateAbsoluteDatetimestamp',
+                    track2.date))
+            : null));
+
       otherReleases.items =
         track.otherReleases.map(track => ({
           trackLink: relation('linkTrack', track),
@@ -356,12 +377,27 @@ export default {
               }),
 
             html.tag('ul',
-              sec.otherReleases.items.map(({trackLink, albumLink}) =>
-                html.tag('li',
-                  language.$('releaseInfo.alsoReleasedAs.item', {
-                    track: trackLink,
-                    album: albumLink,
-                  })))),
+              stitchArrays({
+                trackLink: sec.otherReleases.trackLinks,
+                albumLink: sec.otherReleases.albumLinks,
+                datetimestamp: sec.otherReleases.datetimestamps,
+              }).map(({trackLink, albumLink, datetimestamp}) => {
+                  const parts = ['releaseInfo.alsoReleasedAs.item'];
+                  const options = {track: trackLink, album: albumLink};
+
+                  if (datetimestamp) {
+                    parts.push('withYear');
+                    options.year =
+                      datetimestamp.slots({
+                        style: 'year',
+                        tooltip: true,
+                      });
+                  }
+
+                  return (
+                    html.tag('li',
+                      language.$(...parts, options)));
+                })),
           ],
 
           sec.contributors && [
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 30b04141..44f17036 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -268,7 +268,10 @@ releaseInfo:
 
   alsoReleasedAs:
     _: "Also released as:"
-    item: "{TRACK} (on {ALBUM})"
+
+    item:
+      _: "{TRACK} ({ALBUM})"
+      withYear: "({YEAR}) {TRACK} ({ALBUM})"
 
   tracksReferenced: "Tracks that {TRACK} references:"
   tracksThatReference: "Tracks that reference {TRACK}:"