Track section descriptions!

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':

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'},
     },
   };
 

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;
 }

tap-snapshots/test/snapshot/generateAlbumTrackList.js.test.cjs

@@ -14,6 +14,31 @@ exports[`test/snapshot/generateAlbumTrackList.js > TAP > generateAlbumTrackList
 </ul>
 `
 
+exports[`test/snapshot/generateAlbumTrackList.js > TAP > generateAlbumTrackList (snapshot) > basic behavior, with descriptions 1`] = `
+<dl class="album-group-list">
+    <dt class="content-heading" tabindex="0">
+        <span class="content-heading-main-title">First section: (~1:00)</span>
+        <template class="content-heading-sticky-title">First section:</template>
+    </dt>
+    <dd>
+        <blockquote><p>Why yes!</p></blockquote>
+        <ul>
+            <li>(0:20) <a href="track/t1/">Track 1</a></li>
+            <li>[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t2/">Track 2</a></li>
+            <li>(0:40) <a href="track/t3/">Track 3</a></li>
+        </ul>
+    </dd>
+    <dt class="content-heading" tabindex="0">
+        <span class="content-heading-main-title">Second section:</span>
+        <template class="content-heading-sticky-title">Second section:</template>
+    </dt>
+    <dd>
+        <blockquote><p>How <em>contentful,</em> this is.</p></blockquote>
+        <ul><li style="--primary-color: #ea2e83">[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t4/">Track 4</a> <span class="by"><span class="chunkwrap">by <span class="contribution nowrap"><a href="artist/apricot/">Apricot</a></span>,</span> <span class="chunkwrap"><span class="contribution nowrap"><a href="artist/peach/">Peach</a></span>,</span> <span class="chunkwrap">and <span class="contribution nowrap"><a href="artist/cerise/">Cerise</a></span></span></span></li></ul>
+    </dd>
+</dl>
+`
+
 exports[`test/snapshot/generateAlbumTrackList.js > TAP > generateAlbumTrackList (snapshot) > basic behavior, with track sections 1`] = `
 <dl class="album-group-list">
     <dt class="content-heading" tabindex="0">

test/snapshot/generateAlbumTrackList.js

@@ -6,6 +6,9 @@ testContentFunctions(t, 'generateAlbumTrackList (snapshot)', async (t, evaluate)
     mock: {
       generateAlbumTrackListMissingDuration:
         evaluate.stubContentFunction('generateAlbumTrackListMissingDuration'),
+
+      image:
+        evaluate.stubContentFunction('image'),
     },
   });
 
@@ -46,6 +49,16 @@ testContentFunctions(t, 'generateAlbumTrackList (snapshot)', async (t, evaluate)
     tracks,
   };
 
+  const albumWithTrackSectionDescriptions = {
+    color: color1,
+    artistContribs: contribs1,
+    trackSections: [
+      {name: 'First section', tracks: tracks.slice(0, 3), description: `Why yes!`},
+      {name: 'Second section', tracks: tracks.slice(3), description: `How *contentful,* this is.`},
+    ],
+    tracks,
+  };
+
   const albumWithNoDuration = {
     color: color1,
     artistContribs: contribs1,
@@ -63,6 +76,11 @@ testContentFunctions(t, 'generateAlbumTrackList (snapshot)', async (t, evaluate)
     args: [albumWithoutTrackSections],
   });
 
+  evaluate.snapshot(`basic behavior, with descriptions`, {
+    name: 'generateAlbumTrackList',
+    args: [albumWithTrackSectionDescriptions],
+  });
+
   evaluate.snapshot(`collapseDurationScope: never`, {
     name: 'generateAlbumTrackList',
     slots: {collapseDurationScope: 'never'},