diff options
Diffstat (limited to 'src/content')
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 |