From 073d9377d63eebf5eafbee41a8097f0bb94b13ef Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Thu, 15 Jun 2023 17:04:20 -0300 Subject: content: generateSecondaryNav, generateAlbumSecondaryNav --- src/content/dependencies/generateAlbumInfoPage.js | 15 ++-- .../dependencies/generateAlbumSecondaryNav.js | 96 ++++++++++++++++++++++ src/content/dependencies/generatePageLayout.js | 18 ++-- src/content/dependencies/generateSecondaryNav.js | 19 +++++ 4 files changed, 132 insertions(+), 16 deletions(-) create mode 100644 src/content/dependencies/generateAlbumSecondaryNav.js create mode 100644 src/content/dependencies/generateSecondaryNav.js diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js index a0f14c9a..8fbb81f9 100644 --- a/src/content/dependencies/generateAlbumInfoPage.js +++ b/src/content/dependencies/generateAlbumInfoPage.js @@ -10,6 +10,7 @@ export default { 'generateAlbumCoverArtwork', 'generateAlbumNavAccent', 'generateAlbumReleaseInfo', + 'generateAlbumSecondaryNav', 'generateAlbumSidebar', 'generateAlbumSocialEmbed', 'generateAlbumStyleRules', @@ -68,6 +69,9 @@ export default { relations.chronologyLinks = relation('generateChronologyLinks'); + relations.secondaryNav = + relation('generateAlbumSecondaryNav', album); + relations.sidebar = relation('generateAlbumSidebar', album, null); @@ -272,18 +276,11 @@ export default { banner: relations.banner ?? null, bannerPosition: 'top', + secondaryNav: relations.secondaryNav, + ...relations.sidebar, // socialEmbed: relations.socialEmbed, }); }, }; - -/* - secondaryNav: generateAlbumSecondaryNav(album, null, { - getLinkThemeString, - html, - language, - link, - }), -*/ diff --git a/src/content/dependencies/generateAlbumSecondaryNav.js b/src/content/dependencies/generateAlbumSecondaryNav.js new file mode 100644 index 00000000..b2cfef69 --- /dev/null +++ b/src/content/dependencies/generateAlbumSecondaryNav.js @@ -0,0 +1,96 @@ +export default { + contentDependencies: [ + 'generateColorStyleVariables', + 'generateSecondaryNav', + 'linkAlbum', + 'linkGroup', + 'linkTrack', + ], + + extraDependencies: ['html', 'language'], + + relations(relation, album) { + const relations = {}; + + relations.secondaryNav = + relation('generateSecondaryNav'); + + relations.groupParts = + album.groups.map(group => { + const relations = {}; + + relations.groupLink = + relation('linkGroup', group); + + relations.colorVariables = + relation('generateColorStyleVariables', group.color); + + if (album.date) { + const albums = group.albums.filter(album => album.date); + const index = albums.indexOf(album); + const previousAlbum = (index > 0) && albums[index - 1]; + const nextAlbum = (index < albums.length - 1) && albums[index + 1]; + + if (previousAlbum) { + relations.previousAlbumLink = + relation('linkAlbum', previousAlbum); + } + + if (nextAlbum) { + relations.nextAlbumLink = + relation('linkAlbum', nextAlbum); + } + } + + return relations; + }); + + return relations; + }, + + slots: { + mode: { + validate: v => v.is('album', 'track'), + default: 'album', + }, + }, + + generate(relations, slots, {html, language}) { + return relations.secondaryNav.slots({ + class: 'nav-links-groups', + content: + relations.groupParts.map(({ + colorVariables, + groupLink, + previousAlbumLink, + nextAlbumLink, + }) => { + const links = [ + previousAlbumLink + ?.slots({ + color: false, + content: language.$('misc.nav.previous'), + }), + + nextAlbumLink + ?.slots({ + color: false, + content: language.$('misc.nav.next'), + }), + ].filter(Boolean); + + return ( + (slots.mode === 'album' + ? html.tag('span', {style: colorVariables}, [ + language.$('albumSidebar.groupBox.title', { + group: groupLink, + }), + `(${language.formatUnitList(links)})`, + ]) + : language.$('albumSidebar.groupBox.title', { + group: groupLink, + }))); + }), + }); + }, +}; diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js index c9ab83fb..f4378700 100644 --- a/src/content/dependencies/generatePageLayout.js +++ b/src/content/dependencies/generatePageLayout.js @@ -98,12 +98,6 @@ export default { cover: {type: 'html'}, - banner: {type: 'html'}, - bannerPosition: { - validate: v => v.is('top', 'bottom'), - default: 'top', - }, - socialEmbed: {type: 'html'}, colorStyleRules: { @@ -135,6 +129,14 @@ export default { ...sidebarSlots('leftSidebar'), ...sidebarSlots('rightSidebar'), + // Banner + + banner: {type: 'html'}, + bannerPosition: { + validate: v => v.is('top', 'bottom'), + default: 'top', + }, + // Nav & Footer navContent: {type: 'html'}, @@ -189,6 +191,8 @@ export default { }) }, + secondaryNav: {type: 'html'}, + footerContent: {type: 'html'}, }, @@ -420,7 +424,7 @@ export default { const layoutHTML = [ navHTML, slots.bannerPosition === 'top' && slots.banner, - // secondaryNavHTML, + slots.secondaryNav, html.tag('div', { class: [ diff --git a/src/content/dependencies/generateSecondaryNav.js b/src/content/dependencies/generateSecondaryNav.js new file mode 100644 index 00000000..6fdfd428 --- /dev/null +++ b/src/content/dependencies/generateSecondaryNav.js @@ -0,0 +1,19 @@ +export default { + extraDependencies: ['html'], + + slots: { + content: {type: 'html'}, + + class: { + validate: v => v.oneOf(v.isString, v.arrayOf(v.isString)), + }, + }, + + generate(slots, {html}) { + return html.tag('nav', { + [html.onlyIfContent]: true, + id: 'secondary-nav', + class: slots.class, + }, slots.content); + }, +}; -- cgit 1.3.0-6-gf8a5