content: generatePageLayout: divide style rules, apply default color

5 files changed, 25 insertions, 15 deletions

diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js
index 2375551..749dd2a 100644
--- a/src/content/dependencies/generateAlbumInfoPage.js
+++ b/src/content/dependencies/generateAlbumInfoPage.js
@@ -62,10 +62,8 @@ export default {
         title: language.$('albumPage.title', {album: data.name}),
         headingMode: 'sticky',
 
-        styleRules: [
-          relations.albumStyleRules,
-          relations.colorStyleRules,
-        ],
+        colorStyleRules: [relations.colorStyleRules],
+        additionalStyleRules: [relations.albumStyleRules],
 
         cover: relations.content.cover,
         mainContent: relations.content.main.content,
diff --git a/src/content/dependencies/generateArtistInfoPage.js b/src/content/dependencies/generateArtistInfoPage.js
index 3a04730..9c2eecc 100644
--- a/src/content/dependencies/generateArtistInfoPage.js
+++ b/src/content/dependencies/generateArtistInfoPage.js
@@ -239,8 +239,6 @@ export default {
         title: data.name,
         headingMode: 'sticky',
 
-        styleRules: [data.stylesheet].filter(Boolean),
-
         mainClasses: ['long-content'],
         mainContent: [
           sec.artworks && [
diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js
index be61a6c..32effbf 100644
--- a/src/content/dependencies/generatePageLayout.js
+++ b/src/content/dependencies/generatePageLayout.js
@@ -2,6 +2,7 @@ import {empty, openAggregate} from '../../util/sugar.js';
 
 export default {
   contentDependencies: [
+    'generateColorStyleRules',
     'generateFooterLocalizationLinks',
     'generateStickyHeadingContainer',
     'transformContent',
@@ -19,6 +20,7 @@ export default {
   sprawl({wikiInfo}) {
     return {
       footerContent: wikiInfo.footerContent,
+      wikiColor: wikiInfo.color,
       wikiName: wikiInfo.nameShort,
     };
   },
@@ -41,6 +43,9 @@ export default {
     relations.defaultFooterContent =
       relation('transformContent', sprawl.footerContent);
 
+    relations.defaultColorStyleRules =
+      relation('generateColorStyleRules', sprawl.wikiColor);
+
     return relations;
   },
 
@@ -100,7 +105,12 @@ export default {
 
         socialEmbed: {type: 'html'},
 
-        styleRules: {
+        colorStyleRules: {
+          validate: v => v.arrayOf(v.isString),
+          default: [],
+        },
+
+        additionalStyleRules: {
           validate: v => v.arrayOf(v.isString),
           default: [],
         },
@@ -456,9 +466,12 @@ export default {
                   href: to('shared.staticFile', `site4.css?${cachebust}`),
                 }),
 
-                html.tag('style',
-                  {[html.onlyIfContent]: true},
-                  slots.styleRules),
+                html.tag('style', [
+                  (empty(slots.colorStyleRules)
+                    ? relations.defaultColorStyleRules
+                    : slots.colorStyleRules),
+                  slots.additionalStyleRules,
+                ]),
 
                 html.tag('script', {
                   src: to('shared.staticFile', `lazy-loading.js?${cachebust}`),
diff --git a/src/content/dependencies/generateStaticPage.js b/src/content/dependencies/generateStaticPage.js
index e3063ff..cbd477e 100644
--- a/src/content/dependencies/generateStaticPage.js
+++ b/src/content/dependencies/generateStaticPage.js
@@ -21,7 +21,10 @@ export default {
         title: data.name,
         headingMode: 'sticky',
 
-        styleRules: [data.stylesheet].filter(Boolean),
+        additionalStyleRules:
+          (data.stylesheet
+            ? [data.stylesheet]
+            : []),
 
         mainClasses: ['long-content'],
         mainContent: relations.content,
diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js
index 197d631..b2cc0ca 100644
--- a/src/content/dependencies/generateTrackInfoPage.js
+++ b/src/content/dependencies/generateTrackInfoPage.js
@@ -79,10 +79,8 @@ export default {
         title: language.$('trackPage.title', {track: data.name}),
         headingMode: 'sticky',
 
-        styleRules: [
-          relations.albumStyleRules,
-          relations.colorStyleRules,
-        ],
+        colorStyleRules: [relations.colorStyleRules],
+        additionalStyleRules: [relations.albumStyleRules],
 
         cover: relations.content.cover,
         mainContent: relations.content.main.content,