content, css: generateAlbumTrackList: track section descriptions

Author: towerofnix

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