From e2da977cf111c23e603128afd8a102cfd6ad0a58 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Wed, 16 Oct 2024 00:08:18 -0300 Subject: content: generateAlbumSecondaryNavSeriesPart --- .../dependencies/generateAlbumSecondaryNav.js | 41 ++++++++- .../generateAlbumSecondaryNavSeriesPart.js | 98 ++++++++++++++++++++++ src/static/css/site.css | 4 + src/strings-default.yaml | 6 ++ 4 files changed, 145 insertions(+), 4 deletions(-) create mode 100644 src/content/dependencies/generateAlbumSecondaryNavSeriesPart.js diff --git a/src/content/dependencies/generateAlbumSecondaryNav.js b/src/content/dependencies/generateAlbumSecondaryNav.js index 4a3d18be..a5dc0ba8 100644 --- a/src/content/dependencies/generateAlbumSecondaryNav.js +++ b/src/content/dependencies/generateAlbumSecondaryNav.js @@ -1,21 +1,47 @@ +import {stitchArrays} from '#sugar'; + export default { contentDependencies: [ 'generateAlbumSecondaryNavGroupPart', + 'generateAlbumSecondaryNavSeriesPart', 'generateSecondaryNav', ], extraDependencies: ['html'], - relations: (relation, album) => ({ + query(album) { + const query = {}; + + query.groups = + album.groups; + + query.groupSerieses = + query.groups + .map(group => + group.serieses + .filter(series => series.albums.includes(album))); + + return query; + }, + + relations: (relation, query, album) => ({ secondaryNav: relation('generateSecondaryNav'), groupParts: - album.groups + query.groups .map(group => relation('generateAlbumSecondaryNavGroupPart', group, album)), + + seriesParts: + query.groupSerieses + .map(serieses => serieses + .map(series => + relation('generateAlbumSecondaryNavSeriesPart', + series, + album))), }), slots: { @@ -29,7 +55,14 @@ export default { relations.secondaryNav.slots({ class: 'nav-links-groups', content: - relations.groupParts - .map(part => part.slot('mode', slots.mode)), + stitchArrays({ + groupPart: relations.groupParts, + seriesParts: relations.seriesParts, + }).map(({groupPart, seriesParts}) => [ + groupPart.slot('mode', slots.mode), + + seriesParts + .map(part => part.slot('mode', slots.mode)), + ]), }), }; diff --git a/src/content/dependencies/generateAlbumSecondaryNavSeriesPart.js b/src/content/dependencies/generateAlbumSecondaryNavSeriesPart.js new file mode 100644 index 00000000..4cba4cf3 --- /dev/null +++ b/src/content/dependencies/generateAlbumSecondaryNavSeriesPart.js @@ -0,0 +1,98 @@ +import {atOffset} from '#sugar'; + +export default { + contentDependencies: [ + 'generateColorStyleAttribute', + 'generatePreviousNextLinks', + 'linkAlbumDynamically', + 'linkGroup', + ], + + extraDependencies: ['html', 'language'], + + query(series, album) { + const query = {}; + + const albums = + series.albums; + + const currentIndex = + albums.indexOf(album); + + query.previousAlbum = + atOffset(albums, currentIndex, -1); + + query.nextAlbum = + atOffset(albums, currentIndex, +1); + + return query; + }, + + relations: (relation, query, series, _album) => ({ + groupLink: + relation('linkGroup', series.group), + + colorStyle: + relation('generateColorStyleAttribute', series.group.color), + + previousNextLinks: + relation('generatePreviousNextLinks'), + + previousAlbumLink: + (query.previousAlbum + ? relation('linkAlbumDynamically', query.previousAlbum) + : null), + + nextAlbumLink: + (query.nextAlbum + ? relation('linkAlbumDynamically', query.nextAlbum) + : null), + }), + + data: (_query, series) => ({ + name: series.name, + }), + + slots: { + mode: { + validate: v => v.is('album', 'track'), + default: 'album', + }, + }, + + generate: (data, relations, slots, {html, language}) => + html.tag('span', + {class: 'nav-link'}, + + relations.colorStyle + .slot('context', 'primary-only'), + + language.encapsulate('albumSecondaryNav.series', workingCapsule => { + const workingOptions = {}; + + workingOptions.series = + relations.groupLink.slots({ + attributes: {class: 'series'}, + color: false, + content: language.sanitize(data.name), + }); + + if (slots.mode === 'album') { + const {previousNextLinks} = relations; + + previousNextLinks.setSlots({ + previousLink: relations.previousAlbumLink, + nextLink: relations.nextAlbumLink, + id: false, + }); + + if (!html.isBlank(previousNextLinks)) { + workingCapsule += '.withPreviousNext'; + workingOptions.previousNext = + language.formatUnitList(previousNextLinks.content); + } + } + + return language.$(workingCapsule, workingOptions); + })), +}; diff --git a/src/static/css/site.css b/src/static/css/site.css index 9d17fd0f..77d2a56a 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -804,6 +804,10 @@ a:not([href]):hover { color: white; } +.nav-link a.series { + font-style: oblique; +} + .nav-main-links .nav-link.current > span.nav-link-content > a { font-weight: 800; } diff --git a/src/strings-default.yaml b/src/strings-default.yaml index 731943a0..0d4bdecd 100644 --- a/src/strings-default.yaml +++ b/src/strings-default.yaml @@ -943,6 +943,12 @@ albumSecondaryNav: group.withPreviousNext: >- {GROUP} ({PREVIOUS_NEXT}) + series: >- + Series: {SERIES} + + series.withPreviousNext: >- + Series: {SERIES} ({PREVIOUS_NEXT}) + # # albumPage: # -- cgit 1.3.0-6-gf8a5