content, css: generateAlbumCommentaryPage: album listening links, etc

3 files changed, 45 insertions, 13 deletions

diff --git a/src/content/dependencies/generateAlbumCommentaryPage.js b/src/content/dependencies/generateAlbumCommentaryPage.js
index 3e97c379..442d72a7 100644
--- a/src/content/dependencies/generateAlbumCommentaryPage.js
+++ b/src/content/dependencies/generateAlbumCommentaryPage.js
@@ -1,4 +1,4 @@
-import {stitchArrays} from '#sugar';
+import {empty, stitchArrays} from '#sugar';
 
 export default {
   contentDependencies: [
@@ -33,6 +33,15 @@ export default {
       relation('generateAlbumNavAccent', album, null);
 
     if (album.commentary) {
+      relations.albumCommentaryHeading =
+        relation('generateContentHeading');
+
+      relations.albumCommentaryLink =
+        relation('linkAlbum', album);
+
+      relations.albumCommentaryListeningLinks =
+        album.urls.map(url => relation('linkExternal', url));
+
       if (album.hasCoverArt) {
         relations.albumCommentaryCover =
           relation('generateAlbumCoverArtwork', album);
@@ -148,9 +157,27 @@ export default {
             })),
 
           relations.albumCommentaryContent && [
-            html.tag('h3',
-              {class: ['content-heading']},
-              language.$('albumCommentaryPage.entry.title.albumCommentary')),
+            relations.albumCommentaryHeading.slots({
+              tag: 'h3',
+              color: data.color,
+
+              title:
+                language.$('albumCommentaryPage.entry.title.albumCommentary', {
+                  album: relations.albumCommentaryLink,
+                }),
+
+              accent:
+                !empty(relations.albumCommentaryListeningLinks) &&
+                  language.$('albumCommentaryPage.entry.title.albumCommentary.accent', {
+                    listeningLinks:
+                      language.formatUnitList(
+                        relations.albumCommentaryListeningLinks
+                          .map(link => link.slots({
+                            mode: 'album',
+                            tab: 'separate',
+                          }))),
+                  }),
+            }),
 
             relations.albumCommentaryCover
               ?.slots({mode: 'commentary'}),
@@ -187,12 +214,13 @@ export default {
                   }),
 
                 accent:
-                  language.$('albumCommentaryPage.entry.title.trackCommentary.accent', {
-                    listeningLinks:
-                      language.formatUnitList(
-                        listeningLinks.map(link =>
-                          link.slot('tab', 'separate'))),
-                  }),
+                  !empty(listeningLinks) &&
+                    language.$('albumCommentaryPage.entry.title.trackCommentary.accent', {
+                      listeningLinks:
+                        language.formatUnitList(
+                          listeningLinks.map(link =>
+                            link.slot('tab', 'separate'))),
+                    }),
               }),
 
               cover?.slots({mode: 'commentary'}),
diff --git a/src/static/site5.css b/src/static/site5.css
index ba44ec37..3aa11f92 100644
--- a/src/static/site5.css
+++ b/src/static/site5.css
@@ -1292,7 +1292,8 @@ html[data-url-key="localized.home"] .carousel-container {
 
 .content-heading .content-heading-accent {
   font-weight: normal;
-  font-size: 1rem;
+  font-style: oblique;
+  font-size: 0.9rem;
   margin-left: 0.25em;
 }
 
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 30261e80..46a592df 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -753,10 +753,13 @@ albumCommentaryPage:
 
   entry:
     title:
-      albumCommentary: "Album commentary"
+      albumCommentary:
+        _: "{ALBUM}"
+        accent: "Listen on: {LISTENING_LINKS}"
+
       trackCommentary:
         _: "{TRACK}"
-        accent: "({LISTENING_LINKS})"
+        accent: "Listen on: {LISTENING_LINKS}"
 
 #
 # artistInfoPage: