content: pass color directly through slots in various places

Primarily through generateColorStyle{Rules,Variables}, the former
of which is also refactored into generatePageLayout, which now
takes a direct color slot itself as well.

11 files changed, 67 insertions, 81 deletions

diff --git a/src/content/dependencies/generateAlbumCommentaryPage.js b/src/content/dependencies/generateAlbumCommentaryPage.js
index ea31292c..2eeedada 100644
--- a/src/content/dependencies/generateAlbumCommentaryPage.js
+++ b/src/content/dependencies/generateAlbumCommentaryPage.js
@@ -4,7 +4,6 @@ export default {
   contentDependencies: [
     'generateAlbumNavAccent',
     'generateAlbumStyleRules',
-    'generateColorStyleRules',
     'generateColorStyleVariables',
     'generateContentHeading',
     'generatePageLayout',
@@ -24,9 +23,6 @@ export default {
     relations.albumStyleRules =
       relation('generateAlbumStyleRules', album);
 
-    relations.colorStyleRules =
-      relation('generateColorStyleRules', album.color);
-
     relations.albumLink =
       relation('linkAlbum', album);
 
@@ -59,7 +55,7 @@ export default {
         .map(track =>
           (track.color === album.color
             ? null
-            : relation('generateColorStyleVariables', track.color)));
+            : relation('generateColorStyleVariables')));
 
     return relations;
   },
@@ -68,6 +64,7 @@ export default {
     const data = {};
 
     data.name = album.name;
+    data.color = album.color;
 
     const tracksWithCommentary =
       album.tracks
@@ -91,6 +88,13 @@ export default {
       tracksWithCommentary
         .map(track => track.directory);
 
+    data.trackCommentaryColors =
+      tracksWithCommentary
+        .map(track =>
+          (track.color === album.color
+            ? null
+            : track.color));
+
     return data;
   },
 
@@ -104,8 +108,8 @@ export default {
 
         headingMode: 'sticky',
 
-        colorStyleRules: [relations.colorStyleRules],
-        additionalStyleRules: [relations.albumStyleRules],
+        color: data.color,
+        styleRules: [relations.albumStyleRules],
 
         mainClasses: ['long-content'],
         mainContent: [
@@ -135,13 +139,18 @@ export default {
             directory: data.trackCommentaryDirectories,
             content: relations.trackCommentaryContent,
             colorVariables: relations.trackCommentaryColorVariables,
-          }).map(({heading, link, directory, content, colorVariables}) => [
+            color: data.trackCommentaryColors,
+          }).map(({heading, link, directory, content, colorVariables, color}) => [
               heading.slots({
                 tag: 'h3',
                 id: directory,
                 title: link,
               }),
-              html.tag('blockquote', {style: colorVariables}, content),
+              html.tag('blockquote',
+                (color
+                  ? {style: colorVariables.slot('color', color).content}
+                  : {}),
+                content),
             ]),
         ],
 
diff --git a/src/content/dependencies/generateAlbumGalleryPage.js b/src/content/dependencies/generateAlbumGalleryPage.js
index c88d1768..568c3ca6 100644
--- a/src/content/dependencies/generateAlbumGalleryPage.js
+++ b/src/content/dependencies/generateAlbumGalleryPage.js
@@ -6,7 +6,6 @@ export default {
     'generateAlbumGalleryStatsLine',
     'generateAlbumNavAccent',
     'generateAlbumStyleRules',
-    'generateColorStyleRules',
     'generateCoverGrid',
     'generatePageLayout',
     'image',
@@ -54,9 +53,6 @@ export default {
     relations.albumStyleRules =
       relation('generateAlbumStyleRules', album);
 
-    relations.colorStyleRules =
-      relation('generateColorStyleRules', album.color);
-
     relations.albumLink =
       relation('linkAlbum', album);
 
@@ -91,6 +87,7 @@ export default {
     const data = {};
 
     data.name = album.name;
+    data.color = album.color;
 
     data.names =
       album.tracks.map(track => track.name);
@@ -127,8 +124,8 @@ export default {
 
         headingMode: 'static',
 
-        colorStyleRules: [relations.colorStyleRules],
-        additionalStyleRules: [relations.albumStyleRules],
+        color: data.color,
+        styleRules: [relations.albumStyleRules],
 
         mainClasses: ['top-index'],
         mainContent: [
diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js
index 8fbb81f9..8ba53530 100644
--- a/src/content/dependencies/generateAlbumInfoPage.js
+++ b/src/content/dependencies/generateAlbumInfoPage.js
@@ -16,7 +16,6 @@ export default {
     'generateAlbumStyleRules',
     'generateAlbumTrackList',
     'generateChronologyLinks',
-    'generateColorStyleRules',
     'generateContentHeading',
     'generatePageLayout',
     'linkAlbum',
@@ -39,9 +38,6 @@ export default {
     relations.albumStyleRules =
       relation('generateAlbumStyleRules', album);
 
-    relations.colorStyleRules =
-      relation('generateColorStyleRules', album.color);
-
     relations.socialEmbed =
       relation('generateAlbumSocialEmbed', album);
 
@@ -145,6 +141,7 @@ export default {
     const data = {};
 
     data.name = album.name;
+    data.color = album.color;
 
     if (!empty(album.additionalFiles)) {
       data.numAdditionalFiles = album.additionalFiles.length;
@@ -163,8 +160,8 @@ export default {
         title: language.$('albumPage.title', {album: data.name}),
         headingMode: 'sticky',
 
-        colorStyleRules: [relations.colorStyleRules],
-        additionalStyleRules: [relations.albumStyleRules],
+        color: data.color,
+        styleRules: [relations.albumStyleRules],
 
         cover:
           relations.cover
diff --git a/src/content/dependencies/generateArtTagGalleryPage.js b/src/content/dependencies/generateArtTagGalleryPage.js
index 138189e1..a08e1920 100644
--- a/src/content/dependencies/generateArtTagGalleryPage.js
+++ b/src/content/dependencies/generateArtTagGalleryPage.js
@@ -3,7 +3,6 @@ import {sortAlbumsTracksChronologically} from '../../util/wiki-data.js';
 
 export default {
   contentDependencies: [
-    'generateColorStyleRules',
     'generateCoverGrid',
     'generatePageLayout',
     'image',
@@ -37,9 +36,6 @@ export default {
     relations.layout =
       relation('generatePageLayout');
 
-    relations.colorStyleRules =
-      relation('generateColorStyleRules', tag.color);
-
     relations.artTagMainLink =
       relation('linkArtTag', tag);
 
@@ -59,12 +55,13 @@ export default {
     return relations;
   },
 
-  data(query, sprawl, artist) {
+  data(query, sprawl, tag) {
     const data = {};
 
     data.enableListings = sprawl.enableListings;
 
-    data.name = artist.name;
+    data.name = tag.name;
+    data.color = tag.color;
 
     data.numArtworks = query.things.length;
 
@@ -90,7 +87,7 @@ export default {
 
         headingMode: 'static',
 
-        colorStyleRules: [relations.colorStyleRules],
+        color: data.color,
 
         mainClasses: ['top-index'],
         mainContent: [
diff --git a/src/content/dependencies/generateColorStyleRules.js b/src/content/dependencies/generateColorStyleRules.js
index fbc32599..1b316a3c 100644
--- a/src/content/dependencies/generateColorStyleRules.js
+++ b/src/content/dependencies/generateColorStyleRules.js
@@ -1,26 +1,27 @@
 export default {
-  contentDependencies: [
-    'generateColorStyleVariables',
-  ],
+  contentDependencies: ['generateColorStyleVariables'],
+  extraDependencies: ['html'],
 
-  relations(relation, color) {
-    const relations = {};
+  relations: (relation) =>
+    ({variables: relation('generateColorStyleVariables')}),
 
-    if (color) {
-      relations.variables =
-        relation('generateColorStyleVariables', color);
-    }
-
-    return relations;
+  slots: {
+    color: {validate: v => v.isColor},
   },
 
-  generate(relations) {
-    if (!relations.variables) return '';
+  generate(relations, slots) {
+    if (!slots.color) {
+      return '';
+    }
 
     return [
       `:root {`,
-      // This is pretty hilariously hacky.
-      ...relations.variables.split(';').map(line => line + ';'),
+      ...(
+        relations.variables
+          .slot('color', slots.color)
+          .content
+          .split(';')
+          .map(line => line + ';')),
       `}`,
     ].join('\n');
   },
diff --git a/src/content/dependencies/generateColorStyleVariables.js b/src/content/dependencies/generateColorStyleVariables.js
index 90346d8d..f30d786b 100644
--- a/src/content/dependencies/generateColorStyleVariables.js
+++ b/src/content/dependencies/generateColorStyleVariables.js
@@ -1,14 +1,12 @@
 export default {
-  extraDependencies: [
-    'getColors',
-  ],
+  extraDependencies: ['html', 'getColors'],
 
-  data(color) {
-    return {color};
+  slots: {
+    color: {validate: v => v.isColor},
   },
 
-  generate(data, {getColors}) {
-    if (!data.color) return [];
+  generate(slots, {getColors}) {
+    if (!slots.color) return [];
 
     const {
       primary,
@@ -18,7 +16,7 @@ export default {
       bg,
       bgBlack,
       shadow,
-    } = getColors(data.color);
+    } = getColors(slots.color);
 
     return [
       `--primary-color: ${primary}`,
diff --git a/src/content/dependencies/generateGroupGalleryPage.js b/src/content/dependencies/generateGroupGalleryPage.js
index 7b655805..ed3daf8c 100644
--- a/src/content/dependencies/generateGroupGalleryPage.js
+++ b/src/content/dependencies/generateGroupGalleryPage.js
@@ -8,7 +8,6 @@ import {
 
 export default {
   contentDependencies: [
-    'generateColorStyleRules',
     'generateCoverCarousel',
     'generateCoverGrid',
     'generateGroupNavLinks',
@@ -51,9 +50,6 @@ export default {
         relation('generateGroupSidebar', group);
     }
 
-    relations.colorStyleRules =
-      relation('generateColorStyleRules', group.color);
-
     if (sprawl.groupsByCategoryListing) {
       relations.groupListingLink =
         relation('linkListing', sprawl.groupsByCategoryListing);
@@ -94,6 +90,7 @@ export default {
     const data = {};
 
     data.name = group.name;
+    data.color = group.color;
 
     const albums = sortChronologically(group.albums.slice(), {latestFirst: true});
     const tracks = albums.flatMap((album) => album.tracks);
@@ -131,7 +128,7 @@ export default {
         title: language.$('groupGalleryPage.title', {group: data.name}),
         headingMode: 'static',
 
-        colorStyleRules: [relations.colorStyleRules],
+        color: data.color,
 
         mainClasses: ['top-index'],
         mainContent: [
diff --git a/src/content/dependencies/generateGroupInfoPage.js b/src/content/dependencies/generateGroupInfoPage.js
index 3cffb748..73f62241 100644
--- a/src/content/dependencies/generateGroupInfoPage.js
+++ b/src/content/dependencies/generateGroupInfoPage.js
@@ -2,7 +2,6 @@ import {empty} from '../../util/sugar.js';
 
 export default {
   contentDependencies: [
-    'generateColorStyleRules',
     'generateContentHeading',
     'generateGroupNavLinks',
     'generateGroupSidebar',
@@ -37,9 +36,6 @@ export default {
         relation('generateGroupSidebar', group);
     }
 
-    relations.colorStyleRules =
-      relation('generateColorStyleRules', group.color);
-
     sec.info = {};
 
     if (!empty(group.urls)) {
@@ -83,6 +79,7 @@ export default {
     const data = {};
 
     data.name = group.name;
+    data.color = group.color;
 
     if (!empty(group.albums)) {
       data.albumYears =
@@ -100,8 +97,7 @@ export default {
       .slots({
         title: language.$('groupInfoPage.title', {group: data.name}),
         headingMode: 'sticky',
-
-        colorStyleRules: [relations.colorStyleRules],
+        color: data.color,
 
         mainContent: [
           sec.info.visitLinks &&
diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js
index c4047ed8..899725b8 100644
--- a/src/content/dependencies/generatePageLayout.js
+++ b/src/content/dependencies/generatePageLayout.js
@@ -68,8 +68,9 @@ export default {
     };
   },
 
-  data({wikiName}) {
+  data({wikiColor, wikiName}) {
     return {
+      wikiColor,
       wikiName,
     };
   },
@@ -86,8 +87,8 @@ export default {
     relations.defaultFooterContent =
       relation('transformContent', sprawl.footerContent);
 
-    relations.defaultColorStyleRules =
-      relation('generateColorStyleRules', sprawl.wikiColor);
+    relations.colorStyleRules =
+      relation('generateColorStyleRules');
 
     return relations;
   },
@@ -100,12 +101,9 @@ export default {
 
     socialEmbed: {type: 'html'},
 
-    colorStyleRules: {
-      validate: v => v.sparseArrayOf(v.isString),
-      default: [],
-    },
+    color: {validate: v => v.isColor},
 
-    additionalStyleRules: {
+    styleRules: {
       validate: v => v.sparseArrayOf(v.isString),
       default: [],
     },
@@ -588,10 +586,9 @@ export default {
             }),
 
             html.tag('style', [
-              (empty(slots.colorStyleRules)
-                ? relations.defaultColorStyleRules
-                : slots.colorStyleRules),
-              slots.additionalStyleRules,
+              relations.colorStyleRules
+                .slot('color', slots.color ?? data.wikiColor),
+              slots.styleRules,
             ]),
 
             html.tag('script', {
diff --git a/src/content/dependencies/generateStaticPage.js b/src/content/dependencies/generateStaticPage.js
index cbd477e0..3e27fd43 100644
--- a/src/content/dependencies/generateStaticPage.js
+++ b/src/content/dependencies/generateStaticPage.js
@@ -21,7 +21,7 @@ export default {
         title: data.name,
         headingMode: 'sticky',
 
-        additionalStyleRules:
+        styleRules:
           (data.stylesheet
             ? [data.stylesheet]
             : []),
diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js
index c4596f14..b5ecb3b9 100644
--- a/src/content/dependencies/generateTrackInfoPage.js
+++ b/src/content/dependencies/generateTrackInfoPage.js
@@ -15,7 +15,6 @@ export default {
     'generateAlbumSidebar',
     'generateAlbumStyleRules',
     'generateChronologyLinks',
-    'generateColorStyleRules',
     'generateContentHeading',
     'generatePageLayout',
     'generateTrackCoverArtwork',
@@ -50,9 +49,6 @@ export default {
     relations.albumStyleRules =
       relation('generateAlbumStyleRules', track.album);
 
-    relations.colorStyleRules =
-      relation('generateColorStyleRules', track.color);
-
     relations.artistChronologyContributions =
       getChronologyRelations(track, {
         contributions: [...track.artistContribs, ...track.contributorContribs],
@@ -285,6 +281,7 @@ export default {
   data(sprawl, track) {
     return {
       name: track.name,
+      color: track.color,
 
       hasTrackNumbers: track.album.hasTrackNumbers,
       trackNumber: track.album.tracks.indexOf(track) + 1,
@@ -301,8 +298,8 @@ export default {
         title: language.$('trackPage.title', {track: data.name}),
         headingMode: 'sticky',
 
-        colorStyleRules: [relations.colorStyleRules],
-        additionalStyleRules: [relations.albumStyleRules],
+        color: data.color,
+        styleRules: [relations.albumStyleRules],
 
         cover:
           (relations.cover