diff options
| -rw-r--r-- | src/content/dependencies/generateAlbumCommentaryPage.js | 48 | ||||
| -rw-r--r-- | src/static/site5.css | 3 | ||||
| -rw-r--r-- | src/strings-default.yaml | 7 |
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: |