From 8c69ef2b14c4719fa0cd0c7daca27c613167b7ca Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Thu, 23 Nov 2023 18:52:04 -0400 Subject: content: contextual external links --- src/content/dependencies/generateGroupInfoPage.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'src/content/dependencies/generateGroupInfoPage.js') diff --git a/src/content/dependencies/generateGroupInfoPage.js b/src/content/dependencies/generateGroupInfoPage.js index 0583755e..05df33fb 100644 --- a/src/content/dependencies/generateGroupInfoPage.js +++ b/src/content/dependencies/generateGroupInfoPage.js @@ -107,7 +107,10 @@ export default { sec.info.visitLinks && html.tag('p', language.$('releaseInfo.visitOn', { - links: language.formatDisjunctionList(sec.info.visitLinks), + links: + language.formatDisjunctionList( + sec.info.visitLinks + .map(link => link.slot('context', 'group'))), })), html.tag('blockquote', -- cgit 1.3.0-6-gf8a5 From e156e337c29558b44e75e2d63494221823c5a9f9 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Wed, 29 Nov 2023 16:53:31 -0400 Subject: content: generateGroupInfoPage: tidy album list implementation --- src/content/dependencies/generateGroupInfoPage.js | 89 +++++++++++------------ 1 file changed, 44 insertions(+), 45 deletions(-) (limited to 'src/content/dependencies/generateGroupInfoPage.js') diff --git a/src/content/dependencies/generateGroupInfoPage.js b/src/content/dependencies/generateGroupInfoPage.js index 05df33fb..04886fe2 100644 --- a/src/content/dependencies/generateGroupInfoPage.js +++ b/src/content/dependencies/generateGroupInfoPage.js @@ -1,4 +1,4 @@ -import {empty} from '#sugar'; +import {empty, stitchArrays} from '#sugar'; export default { contentDependencies: [ @@ -62,18 +62,17 @@ export default { sec.albums.galleryLink = relation('linkGroupGallery', group); - sec.albums.entries = - group.albums.map(album => { - const links = {}; - links.albumLink = relation('linkAlbum', album); - - const otherGroup = album.groups.find(g => g !== group); - if (otherGroup) { - links.groupLink = relation('linkGroup', otherGroup); - } + sec.albums.albumLinks = + group.albums + .map(album => relation('linkAlbum', album)); - return links; - }); + sec.albums.groupLinks = + group.albums + .map(album => album.groups.find(g => g !== group)) + .map(group => + (group + ? relation('linkGroup', group) + : null)); } return relations; @@ -85,11 +84,9 @@ export default { data.name = group.name; data.color = group.color; - if (!empty(group.albums)) { - data.albumYears = - group.albums - .map(album => album.date?.getFullYear()); - } + data.albumYears = + group.albums + .map(album => album.date?.getFullYear()); return data; }, @@ -133,34 +130,36 @@ export default { })), html.tag('ul', - sec.albums.entries.map(({albumLink, groupLink}, index) => { - // All these strings are really jank, and should probably - // be implemented with the same 'const parts = [], opts = {}' - // form used elsewhere... - const year = data.albumYears[index]; - const item = - (year - ? language.$('groupInfoPage.albumList.item', { - year, - album: albumLink, - }) - : language.$('groupInfoPage.albumList.item.withoutYear', { - album: albumLink, - })); - - return html.tag('li', - (groupLink - ? language.$('groupInfoPage.albumList.item.withAccent', { - item, - accent: - html.tag('span', {class: 'other-group-accent'}, - language.$('groupInfoPage.albumList.item.otherGroupAccent', { - group: - groupLink.slot('color', false), - })), - }) - : item)); - })), + stitchArrays({ + albumLink: sec.albums.albumLinks, + groupLink: sec.albums.groupLinks, + albumYear: data.albumYears, + }).map(({albumLink, groupLink, albumYear}) => { + const prefix = 'groupInfoPage.albumList.item'; + const parts = [prefix]; + const options = {album: albumLink}; + + if (albumYear) { + parts.push('withYear'); + options.yearAccent = + language.$(prefix, 'yearAccent', { + year: albumYear, + }); + } + + if (groupLink) { + parts.push('withOtherGroup'); + options.otherGroupAccent = + html.tag('span', {class: 'other-group-accent'}, + language.$(prefix, 'otherGroupAccent', { + group: + groupLink.slot('color', false), + })); + } + + return language.$(...parts, options); + }) + .map(content => html.tag('li', content))), ], ], -- cgit 1.3.0-6-gf8a5 From 301ae482ee60897db13d5fd76b9ce7c9df5790f2 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Wed, 29 Nov 2023 17:58:07 -0400 Subject: content: generateGroupInfoPage: use datetimestamps --- src/content/dependencies/generateGroupInfoPage.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) (limited to 'src/content/dependencies/generateGroupInfoPage.js') diff --git a/src/content/dependencies/generateGroupInfoPage.js b/src/content/dependencies/generateGroupInfoPage.js index 04886fe2..5bf2b1bf 100644 --- a/src/content/dependencies/generateGroupInfoPage.js +++ b/src/content/dependencies/generateGroupInfoPage.js @@ -2,6 +2,7 @@ import {empty, stitchArrays} from '#sugar'; export default { contentDependencies: [ + 'generateAbsoluteDatetimestamp', 'generateContentHeading', 'generateGroupNavLinks', 'generateGroupSecondaryNav', @@ -73,6 +74,12 @@ export default { (group ? relation('linkGroup', group) : null)); + + sec.albums.datetimestamps = + group.albums.map(album => + (album.date + ? relation('generateAbsoluteDatetimestamp', album.date) + : null)); } return relations; @@ -84,10 +91,6 @@ export default { data.name = group.name; data.color = group.color; - data.albumYears = - group.albums - .map(album => album.date?.getFullYear()); - return data; }, @@ -133,17 +136,18 @@ export default { stitchArrays({ albumLink: sec.albums.albumLinks, groupLink: sec.albums.groupLinks, - albumYear: data.albumYears, - }).map(({albumLink, groupLink, albumYear}) => { + datetimestamp: sec.albums.datetimestamps, + }).map(({albumLink, groupLink, datetimestamp}) => { const prefix = 'groupInfoPage.albumList.item'; const parts = [prefix]; const options = {album: albumLink}; - if (albumYear) { + if (datetimestamp) { parts.push('withYear'); options.yearAccent = language.$(prefix, 'yearAccent', { - year: albumYear, + year: + datetimestamp.slots({style: 'year', tooltip: true}), }); } -- cgit 1.3.0-6-gf8a5 From ad823614a22807321d28ad25fa5440d439d84975 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Wed, 29 Nov 2023 18:22:05 -0400 Subject: content: generateGroupInfoPage: colorize tooltips --- src/content/dependencies/generateGroupInfoPage.js | 31 +++++++++++++++++++---- 1 file changed, 26 insertions(+), 5 deletions(-) (limited to 'src/content/dependencies/generateGroupInfoPage.js') diff --git a/src/content/dependencies/generateGroupInfoPage.js b/src/content/dependencies/generateGroupInfoPage.js index 5bf2b1bf..0e5d645b 100644 --- a/src/content/dependencies/generateGroupInfoPage.js +++ b/src/content/dependencies/generateGroupInfoPage.js @@ -3,6 +3,7 @@ import {empty, stitchArrays} from '#sugar'; export default { contentDependencies: [ 'generateAbsoluteDatetimestamp', + 'generateColorStyleVariables', 'generateContentHeading', 'generateGroupNavLinks', 'generateGroupSecondaryNav', @@ -63,6 +64,10 @@ export default { sec.albums.galleryLink = relation('linkGroupGallery', group); + sec.albums.colorVariables = + group.albums + .map(() => relation('generateColorStyleVariables')); + sec.albums.albumLinks = group.albums .map(album => relation('linkAlbum', album)); @@ -91,6 +96,9 @@ export default { data.name = group.name; data.color = group.color; + data.albumColors = + group.albums.map(album => album.color); + return data; }, @@ -137,10 +145,21 @@ export default { albumLink: sec.albums.albumLinks, groupLink: sec.albums.groupLinks, datetimestamp: sec.albums.datetimestamps, - }).map(({albumLink, groupLink, datetimestamp}) => { + colorVariables: sec.albums.colorVariables, + albumColor: data.albumColors, + }).map(({ + albumLink, + groupLink, + datetimestamp, + colorVariables, + albumColor, + }) => { const prefix = 'groupInfoPage.albumList.item'; const parts = [prefix]; - const options = {album: albumLink}; + const options = {}; + + options.album = + albumLink.slot('color', false); if (datetimestamp) { parts.push('withYear'); @@ -161,9 +180,11 @@ export default { })); } - return language.$(...parts, options); - }) - .map(content => html.tag('li', content))), + return ( + html.tag('li', + {style: colorVariables.slot('color', albumColor).content}, + language.$(...parts, options))); + })), ], ], -- cgit 1.3.0-6-gf8a5