diff --git a/src/content/dependencies/generateAlbumTrackList.js b/src/content/dependencies/generateAlbumTrackList.js index a3435beac..9743c750d 100644 --- a/src/content/dependencies/generateAlbumTrackList.js +++ b/src/content/dependencies/generateAlbumTrackList.js @@ -35,7 +35,12 @@ function getDisplayMode(album) { } export default { - contentDependencies: ['generateAlbumTrackListItem', 'generateContentHeading'], + contentDependencies: [ + 'generateAlbumTrackListItem', + 'generateContentHeading', + 'transformContent', + ], + extraDependencies: ['html', 'language'], query(album) { @@ -53,6 +58,10 @@ export default { album.trackSections.map(() => relation('generateContentHeading')); + relations.trackSectionDescriptions = + album.trackSections.map(section => + relation('transformContent', section.description)); + relations.trackSectionItems = album.trackSections.map(section => section.tracks.map(track => @@ -132,6 +141,7 @@ export default { return html.tag('dl', {class: 'album-group-list'}, stitchArrays({ heading: relations.trackSectionHeadings, + description: relations.trackSectionDescriptions, items: relations.trackSectionItems, name: data.trackSectionNames, @@ -140,6 +150,7 @@ export default { startIndex: data.trackSectionStartIndices, }).map(({ heading, + description, items, name, @@ -172,12 +183,17 @@ export default { }), })), - html.tag('dd', + html.tag('dd', [ + html.tag('blockquote', + {[html.onlyIfContent]: true}, + description), + html.tag(listTag, data.hasTrackNumbers && {start: startIndex + 1}, - slotItems(items))), + slotItems(items)), + ]), ])); case 'tracks': diff --git a/src/data/things/album.js b/src/data/things/album.js index 9c4416b65..ee99c8144 100644 --- a/src/data/things/album.js +++ b/src/data/things/album.js @@ -31,6 +31,7 @@ import { commentary, color, commentatorArtists, + contentString, contribsPresent, contributionList, dimensions, @@ -524,6 +525,8 @@ export class TrackSection extends Thing { isDefaultTrackSection: flag(false), + description: contentString(), + album: [ withAlbum(), exposeDependency({dependency: '#album'}), @@ -637,6 +640,8 @@ export class TrackSection extends Thing { property: 'dateOriginallyReleased', transform: parseDate, }, + + 'Description': {property: 'description'}, }, }; diff --git a/src/static/css/site.css b/src/static/css/site.css index 8d3ab0aec..927491100 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -1528,6 +1528,20 @@ ul > li.has-details { margin-left: 0; } +.album-group-list blockquote { + max-width: 540px; + margin-bottom: 9px; + margin-top: 3px; +} + +.album-group-list blockquote p:first-child { + margin-top: 0; +} + +.album-group-list blockquote p:last-child { + margin-bottom: 0; +} + .group-chronology-link { font-style: oblique; } diff --git a/tap-snapshots/test/snapshot/generateAlbumTrackList.js.test.cjs b/tap-snapshots/test/snapshot/generateAlbumTrackList.js.test.cjs index 10ab17c46..40a8017dc 100644 --- a/tap-snapshots/test/snapshot/generateAlbumTrackList.js.test.cjs +++ b/tap-snapshots/test/snapshot/generateAlbumTrackList.js.test.cjs @@ -14,6 +14,31 @@ exports[`test/snapshot/generateAlbumTrackList.js > TAP > generateAlbumTrackList ` +exports[`test/snapshot/generateAlbumTrackList.js > TAP > generateAlbumTrackList (snapshot) > basic behavior, with descriptions 1`] = ` +
+ +Why yes!
+ +How contentful, this is.