From 05c8c67dd63352db898b1c10129c2239c0bf1936 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Thu, 15 Jun 2023 16:26:02 -0300 Subject: content: generatePageBanner, generateAlbumBanner --- src/content/dependencies/generateAlbumBanner.js | 37 +++++++++++++++++++++++ src/content/dependencies/generateAlbumInfoPage.js | 30 +++++++++--------- src/content/dependencies/generatePageBanner.js | 28 +++++++++++++++++ src/content/dependencies/generatePageLayout.js | 10 ++++-- 4 files changed, 87 insertions(+), 18 deletions(-) create mode 100644 src/content/dependencies/generateAlbumBanner.js create mode 100644 src/content/dependencies/generatePageBanner.js (limited to 'src/content/dependencies') diff --git a/src/content/dependencies/generateAlbumBanner.js b/src/content/dependencies/generateAlbumBanner.js new file mode 100644 index 00000000..155f4974 --- /dev/null +++ b/src/content/dependencies/generateAlbumBanner.js @@ -0,0 +1,37 @@ +export default { + contentDependencies: ['generatePageBanner'], + extraDependencies: ['html', 'language'], + + relations(relation, album) { + if (!album.hasBannerArt) { + return {}; + } + + return { + banner: relation('generatePageBanner'), + }; + }, + + data(album) { + if (!album.hasBannerArt) { + return {}; + } + + return { + path: ['media.albumBanner', album.directory, album.bannerFileExtension], + dimensions: album.bannerDimensions, + }; + }, + + generate(data, relations, {html, language}) { + if (!relations.banner) { + return html.blank(); + } + + return relations.banner.slots({ + path: data.path, + dimensions: data.dimensions, + alt: language.$('misc.alt.albumBanner'), + }); + }, +}; diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js index d1be0f3a..a0f14c9a 100644 --- a/src/content/dependencies/generateAlbumInfoPage.js +++ b/src/content/dependencies/generateAlbumInfoPage.js @@ -6,6 +6,7 @@ export default { contentDependencies: [ 'generateAdditionalFilesShortcut', 'generateAlbumAdditionalFilesList', + 'generateAlbumBanner', 'generateAlbumCoverArtwork', 'generateAlbumNavAccent', 'generateAlbumReleaseInfo', @@ -75,6 +76,11 @@ export default { relation('generateAlbumCoverArtwork', album); } + if (album.hasBannerArt) { + relations.banner = + relation('generateAlbumBanner', album); + } + // Section: Release info relations.releaseInfo = @@ -157,11 +163,11 @@ export default { additionalStyleRules: [relations.albumStyleRules], cover: - (relations.cover - ? relations.cover.slots({ - alt: language.$('misc.alt.albumCover'), - }) - : null), + relations.cover + ?.slots({ + alt: language.$('misc.alt.albumCover'), + }) + ?? null, mainContent: [ relations.releaseInfo, @@ -263,6 +269,9 @@ export default { ], }), + banner: relations.banner ?? null, + bannerPosition: 'top', + ...relations.sidebar, // socialEmbed: relations.socialEmbed, @@ -271,17 +280,6 @@ export default { }; /* - banner: !empty(album.bannerArtistContribs) && { - dimensions: album.bannerDimensions, - path: [ - 'media.albumBanner', - album.directory, - album.bannerFileExtension, - ], - alt: language.$('misc.alt.albumBanner'), - position: 'top', - }, - secondaryNav: generateAlbumSecondaryNav(album, null, { getLinkThemeString, html, diff --git a/src/content/dependencies/generatePageBanner.js b/src/content/dependencies/generatePageBanner.js new file mode 100644 index 00000000..835140a8 --- /dev/null +++ b/src/content/dependencies/generatePageBanner.js @@ -0,0 +1,28 @@ +export default { + extraDependencies: ['html', 'to'], + + slots: { + path: { + validate: v => v.validateArrayItems(v.isString), + }, + + dimensions: { + validate: v => v.isDimensions, + }, + + alt: { + type: 'string', + }, + }, + + generate(slots, {html, to}) { + return ( + html.tag('div', {id: 'banner'}, + html.tag('img', { + src: to(...slots.path), + alt: slots.alt, + width: slots.dimensions?.[0] ?? 1100, + height: slots.dimensions?.[1] ?? 200, + }))); + }, +}; diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js index 610b4a1f..c9ab83fb 100644 --- a/src/content/dependencies/generatePageLayout.js +++ b/src/content/dependencies/generatePageLayout.js @@ -98,6 +98,12 @@ export default { cover: {type: 'html'}, + banner: {type: 'html'}, + bannerPosition: { + validate: v => v.is('top', 'bottom'), + default: 'top', + }, + socialEmbed: {type: 'html'}, colorStyleRules: { @@ -413,7 +419,7 @@ export default { const layoutHTML = [ navHTML, - // banner.position === 'top' && bannerHTML, + slots.bannerPosition === 'top' && slots.banner, // secondaryNavHTML, html.tag('div', { @@ -432,7 +438,7 @@ export default { mainHTML, sidebarRightHTML, ]), - // banner.position === 'bottom' && bannerHTML, + slots.bannerPosition === 'bottom' && slots.banner, footerHTML, ].filter(Boolean).join('\n'); -- cgit 1.3.0-6-gf8a5