content, css: generateTrackArtistCommentarySection

Actually coded yesterday!!!1

5 files changed, 206 insertions, 24 deletions

diff --git a/src/content/dependencies/generateAdditionalNamesBox.js b/src/content/dependencies/generateAdditionalNamesBox.js
index 4f92580d..b7392dfd 100644
--- a/src/content/dependencies/generateAdditionalNamesBox.js
+++ b/src/content/dependencies/generateAdditionalNamesBox.js
@@ -10,6 +10,7 @@ export default {
 
   generate: (relations, {html, language}) =>
     html.tag('div', {id: 'additional-names-box'},
+      {class: 'drop'},
       {[html.onlyIfContent]: true},
 
       [
diff --git a/src/content/dependencies/generateTrackArtistCommentarySection.js b/src/content/dependencies/generateTrackArtistCommentarySection.js
new file mode 100644
index 00000000..399c804a
--- /dev/null
+++ b/src/content/dependencies/generateTrackArtistCommentarySection.js
@@ -0,0 +1,157 @@
+import {empty, stitchArrays} from '#sugar';
+
+export default {
+  contentDependencies: [
+    'generateCommentaryEntry',
+    'generateContentHeading',
+    'linkAlbum',
+    'linkTrack',
+  ],
+
+  extraDependencies: ['html', 'language'],
+
+  query: (track) => ({
+    otherRereleasesWithCommentary:
+      track.otherReleases
+        .filter(track => !track.isOriginalRelease)
+        .filter(track => !empty(track.commentary)),
+  }),
+
+  relations: (relation, query, track) => ({
+    contentHeading:
+      relation('generateContentHeading'),
+
+    originalReleaseTrackLink:
+      (track.isRerelease
+        ? relation('linkTrack', track.originalReleaseTrack)
+        : null),
+
+    originalReleaseArtistCommentaryEntries:
+      (track.isRerelease
+        ? track.originalReleaseTrack.commentary
+            .map(entry => relation('generateCommentaryEntry', entry))
+        : null),
+
+    thisReleaseAlbumLink:
+      relation('linkAlbum', track.album),
+
+    artistCommentaryEntries:
+      track.commentary
+        .map(entry => relation('generateCommentaryEntry', entry)),
+
+    otherReleaseTrackLinks:
+      query.otherRereleasesWithCommentary
+        .map(track => relation('linkTrack', track)),
+  }),
+
+  data: (query, track) => ({
+    name:
+      track.name,
+
+    isRerelease:
+      track.isRerelease,
+
+    originalReleaseName:
+      (track.isRerelease
+        ? track.originalReleaseTrack.name
+        : null),
+
+    originalReleaseAlbumName:
+      (track.isRerelease
+        ? track.originalReleaseTrack.album.name
+        : null),
+
+    originalReleaseAlbumColor:
+      (track.isRerelease
+        ? track.originalReleaseTrack.album.color
+        : null),
+
+    otherReleaseAlbumNames:
+      query.otherRereleasesWithCommentary
+        .map(track => track.album.name),
+
+    otherReleaseAlbumColors:
+      query.otherRereleasesWithCommentary
+        .map(track => track.album.color),
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    language.encapsulate('misc.artistCommentary', capsule =>
+      html.tags([
+        relations.contentHeading.clone()
+          .slots({
+            attributes: {id: 'artist-commentary'},
+            title: language.$('misc.artistCommentary'),
+          }),
+
+        data.isRerelease &&
+          html.tags([
+            html.tag('p', {class: ['drop', 'commentary-drop']},
+              {[html.onlyIfSiblings]: true},
+
+              language.encapsulate(capsule, 'info.fromMainRelease', workingCapsule => {
+                const workingOptions = {};
+
+                workingOptions.album =
+                  relations.originalReleaseTrackLink.slots({
+                    content:
+                      data.originalReleaseAlbumName,
+
+                    color:
+                      data.originalReleaseAlbumColor,
+                  });
+
+                if (data.name !== data.originalReleaseName) {
+                  workingCapsule += '.namedDifferently';
+                  workingOptions.name =
+                    html.tag('i', data.originalReleaseName);
+                }
+
+                return language.$(workingCapsule, workingOptions);
+              })),
+
+            relations.originalReleaseArtistCommentaryEntries,
+          ]),
+
+        html.tags([
+          data.isRerelease &&
+          !html.isBlank(relations.originalReleaseArtistCommentaryEntries) &&
+            html.tag('p', {class: ['drop', 'commentary-drop']},
+              {[html.onlyIfSiblings]: true},
+
+              language.$(capsule, 'info.releaseSpecific', {
+                album:
+                  relations.thisReleaseAlbumLink,
+              })),
+
+          relations.artistCommentaryEntries,
+        ]),
+
+        html.tag('p', {class: ['drop', 'commentary-drop']},
+          {[html.onlyIfContent]: true},
+
+          language.encapsulate(capsule, 'info.seeRereleases', workingCapsule => {
+            const workingOptions = {};
+
+            workingOptions[language.onlyIfOptions] = ['albums'];
+
+            workingOptions.albums =
+              language.formatUnitList(
+                stitchArrays({
+                  trackLink: relations.otherReleaseTrackLinks,
+                  albumName: data.otherReleaseAlbumNames,
+                  albumColor: data.otherReleaseAlbumColors,
+                }).map(({trackLink, albumName, albumColor}) =>
+                    trackLink.slots({
+                      content: language.sanitize(albumName),
+                      color: albumColor,
+                    })));
+
+            if (!html.isBlank(relations.artistCommentaryEntries)) {
+              workingCapsule += '.withMainCommentary';
+            }
+
+            return language.$(workingCapsule, workingOptions);
+          })),
+      ])),
+};
diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js
index f37758fb..bab9122f 100644
--- a/src/content/dependencies/generateTrackInfoPage.js
+++ b/src/content/dependencies/generateTrackInfoPage.js
@@ -10,6 +10,7 @@ export default {
     'generateContentHeading',
     'generateContributionList',
     'generatePageLayout',
+    'generateTrackArtistCommentarySection',
     'generateTrackCoverArtwork',
     'generateTrackInfoPageFeaturedByFlashesList',
     'generateTrackInfoPageOtherReleasesList',
@@ -116,9 +117,8 @@ export default {
         track.album,
         track.additionalFiles),
 
-    artistCommentaryEntries:
-      track.commentary
-        .map(entry => relation('generateCommentaryEntry', entry)),
+    artistCommentarySection:
+      relation('generateTrackArtistCommentarySection', track),
 
     creditSourceEntries:
       track.creditSources
@@ -191,7 +191,7 @@ export default {
                         language.$(capsule, 'link')),
                   })),
 
-              !html.isBlank(relations.artistCommentaryEntries) &&
+              !html.isBlank(relations.artistCommentarySection) &&
                 language.encapsulate(capsule, 'readCommentary', capsule =>
                   language.$(capsule, {
                     link:
@@ -364,15 +364,7 @@ export default {
             relations.additionalFilesList,
           ]),
 
-          html.tags([
-            relations.contentHeading.clone()
-              .slots({
-                attributes: {id: 'artist-commentary'},
-                title: language.$('misc.artistCommentary'),
-              }),
-
-            relations.artistCommentaryEntries,
-          ]),
+          relations.artistCommentarySection,
 
           html.tags([
             relations.contentHeading.clone()
diff --git a/src/static/css/site.css b/src/static/css/site.css
index d20e5695..adf0b4b8 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1962,19 +1962,9 @@ h1 a[href="#additional-names-box"]:hover {
   --custom-scroll-offset: calc(0.5em - 2px);
 
   margin: 1em 0 1em -10px;
-  padding: 15px 20px 10px 20px;
-  width: max-content;
   max-width: min(60vw, 600px);
 
-  border: 1px dotted var(--primary-color);
-  border-radius: 6px;
-
-  background:
-    linear-gradient(var(--bg-color), var(--bg-color)),
-    linear-gradient(#000000bb, #000000bb),
-    var(--primary-color);
-
-  box-shadow: 0 -2px 6px -1px var(--dim-color) inset;
+  padding: 15px 20px 10px 20px;
 
   display: none;
 }
@@ -2156,6 +2146,32 @@ html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt:las
   border-top-left-radius: 3px;
 }
 
+/* "Drops" */
+
+.drop {
+  padding: 15px 20px;
+  width: max-content;
+  max-width: min(60vw, 600px);
+
+  border: 1px dotted var(--primary-color);
+  border-radius: 6px;
+
+  background:
+    linear-gradient(var(--bg-color), var(--bg-color)),
+    linear-gradient(#000000bb, #000000bb),
+    var(--primary-color);
+
+  box-shadow: 0 -2px 6px -1px var(--dim-color) inset;
+}
+
+.commentary-drop {
+  margin-top: 25px;
+  margin-bottom: 15px;
+  margin-left: 20px;
+  padding: 10px 20px;
+  max-width: min(60vw, 300px);
+}
+
 /* Images */
 
 .image-container {
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 2ed0c680..716769a2 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -512,6 +512,22 @@ misc:
 
       seeOriginalRelease: "See {ORIGINAL}!"
 
+    info:
+      fromMainRelease: >-
+        This commentary is properly placed on this track's main release, {ALBUM}.
+
+      fromMainRelease.namedDifferently: >-
+        This commentary is properly placed on this track's main release, {ALBUM}, where it's named {NAME}.
+
+      releaseSpecific: >-
+        This commentary is specific to this release, {ALBUM}.
+
+      seeRereleases: >-
+        For release-specific commentary, check out: {ALBUMS}.
+
+      seeRereleases.withMainCommentary: >-
+        For release-specific commentary, see also: {ALBUMS}.
+
   artistCredit:
     withNormalArtists: >-
       {NORMAL}