content: generateCommentaryEntry: add color slot

2 files changed, 25 insertions, 15 deletions

diff --git a/src/content/dependencies/generateAlbumCommentaryPage.js b/src/content/dependencies/generateAlbumCommentaryPage.js
index 5b00acf7..001003ae 100644
--- a/src/content/dependencies/generateAlbumCommentaryPage.js
+++ b/src/content/dependencies/generateAlbumCommentaryPage.js
@@ -6,7 +6,6 @@ export default {
     'generateAlbumNavAccent',
     'generateAlbumSidebarTrackSection',
     'generateAlbumStyleRules',
-    'generateColorStyleVariables',
     'generateCommentaryEntry',
     'generateContentHeading',
     'generateTrackCoverArtwork',
@@ -68,13 +67,6 @@ export default {
           track.commentary
             .map(entry => relation('generateCommentaryEntry', entry)));
 
-    relations.trackCommentaryColorVariables =
-      tracksWithCommentary
-        .map(track =>
-          (track.color === album.color
-            ? null
-            : relation('generateColorStyleVariables')));
-
     relations.sidebarAlbumLink =
       relation('linkAlbum', album);
 
@@ -167,9 +159,8 @@ export default {
             directory: data.trackCommentaryDirectories,
             cover: relations.trackCommentaryCovers,
             entries: relations.trackCommentaryEntries,
-            colorVariables: relations.trackCommentaryColorVariables,
             color: data.trackCommentaryColors,
-          }).map(({heading, link, directory, cover, entries, colorVariables, color}) => [
+          }).map(({heading, link, directory, cover, entries, color}) => [
               heading.slots({
                 tag: 'h3',
                 id: directory,
@@ -178,7 +169,7 @@ export default {
 
               cover?.slots({mode: 'commentary'}),
 
-              entries,
+              entries.map(entry => entry.slot('color', color)),
             ]),
         ],
 
diff --git a/src/content/dependencies/generateCommentaryEntry.js b/src/content/dependencies/generateCommentaryEntry.js
index 22e8fd1e..72e30657 100644
--- a/src/content/dependencies/generateCommentaryEntry.js
+++ b/src/content/dependencies/generateCommentaryEntry.js
@@ -1,5 +1,10 @@
 export default {
-  contentDependencies: ['linkArtist', 'transformContent'],
+  contentDependencies: [
+    'generateColorStyleVariables',
+    'linkArtist',
+    'transformContent',
+  ],
+
   extraDependencies: ['html', 'language'],
 
   relations: (relation, entry) => ({
@@ -22,13 +27,20 @@ export default {
       (entry.body
         ? relation('transformContent', entry.body)
         : null),
+
+    colorVariables:
+      relation('generateColorStyleVariables'),
   }),
 
   data: (entry) => ({
     date: entry.date,
   }),
 
-  generate(data, relations, {html, language}) {
+  slots: {
+    color: {validate: v => v.isColor},
+  },
+
+  generate(data, relations, slots, {html, language}) {
     const artistsSpan =
       html.tag('span', {class: 'commentary-entry-artists'},
         (relations.artistsContent
@@ -66,11 +78,18 @@ export default {
       titleOptions.accent = accent;
     }
 
+    const style =
+      (slots.color
+        ? relations.colorVariables
+            .slot('color', slots.color)
+            .content
+        : null);
+
     return html.tags([
-      html.tag('p', {class: 'commentary-entry-heading'},
+      html.tag('p', {class: 'commentary-entry-heading', style},
         language.$(...titleParts, titleOptions)),
 
-      html.tag('blockquote', {class: 'commentary-entry-body'},
+      html.tag('blockquote', {class: 'commentary-entry-body', style},
         relations.bodyContent.slot('mode', 'multiline')),
     ]);
   },