diff options
| -rw-r--r-- | src/content/dependencies/generateGroupInfoPage.js | 273 | ||||
| -rw-r--r-- | src/content/dependencies/generateGroupInfoPageAlbumsSection.js | 132 |
2 files changed, 203 insertions, 202 deletions
diff --git a/src/content/dependencies/generateGroupInfoPage.js b/src/content/dependencies/generateGroupInfoPage.js index e6b0ded1..956d56d8 100644 --- a/src/content/dependencies/generateGroupInfoPage.js +++ b/src/content/dependencies/generateGroupInfoPage.js @@ -1,221 +1,90 @@ -import {empty, stitchArrays} from '#sugar'; - export default { contentDependencies: [ - 'generateAbsoluteDatetimestamp', - 'generateColorStyleAttribute', - 'generateContentHeading', + 'generateGroupInfoPageAlbumsSection', 'generateGroupNavLinks', 'generateGroupSecondaryNav', 'generateGroupSidebar', 'generatePageLayout', - 'linkAlbum', 'linkExternal', - 'linkGroupGallery', - 'linkGroup', 'transformContent', ], extraDependencies: ['html', 'language', 'wikiData'], - sprawl({wikiInfo}) { - return { - enableGroupUI: wikiInfo.enableGroupUI, - }; - }, - - query(sprawl, group) { - const albums = - group.albums; - - const albumGroups = - albums - .map(album => album.groups); - - const albumOtherCategory = - albumGroups - .map(groups => groups - .map(group => group.category) - .find(category => category !== group.category)); - - const albumOtherGroups = - stitchArrays({ - groups: albumGroups, - category: albumOtherCategory, - }).map(({groups, category}) => - groups - .filter(group => group.category === category)); - - return {albums, albumOtherGroups}; - }, - - relations(relation, query, sprawl, group) { - const relations = {}; - const sec = relations.sections = {}; - - relations.layout = - relation('generatePageLayout'); + sprawl: ({wikiInfo}) => ({ + enableGroupUI: + wikiInfo.enableGroupUI, + }), - relations.navLinks = - relation('generateGroupNavLinks', group); + relations: (relation, sprawl, group) => ({ + layout: + relation('generatePageLayout'), - if (sprawl.enableGroupUI) { - relations.secondaryNav = - relation('generateGroupSecondaryNav', group); + navLinks: + relation('generateGroupNavLinks', group), - relations.sidebar = - relation('generateGroupSidebar', group); - } + secondaryNav: + (sprawl.enableGroupUI + ? relation('generateGroupSecondaryNav', group) + : null), - sec.info = {}; + sidebar: + (sprawl.enableGroupUI + ? relation('generateGroupSidebar', group) + : null), - sec.info.visitLinks = + visitLinks: group.urls - .map(url => relation('linkExternal', url)); - - if (group.description) { - sec.info.description = - relation('transformContent', group.description); - } - - if (!empty(query.albums)) { - sec.albums = {}; - - sec.albums.heading = - relation('generateContentHeading'); - - sec.albums.galleryLink = - relation('linkGroupGallery', group); - - sec.albums.albumColorStyles = - query.albums - .map(album => relation('generateColorStyleAttribute', album.color)); - - sec.albums.albumLinks = - query.albums - .map(album => relation('linkAlbum', album)); - - sec.albums.otherGroupLinks = - query.albumOtherGroups - .map(groups => groups - .map(group => relation('linkGroup', group))); - - sec.albums.datetimestamps = - group.albums.map(album => - (album.date - ? relation('generateAbsoluteDatetimestamp', album.date) - : null)); - } - - return relations; - }, - - data(query, sprawl, group) { - const data = {}; - - data.name = group.name; - data.color = group.color; - - return data; - }, - - generate(data, relations, {html, language}) { - const {sections: sec} = relations; - - return relations.layout - .slots({ - title: language.$('groupInfoPage.title', {group: data.name}), - headingMode: 'sticky', - color: data.color, - - mainContent: [ - html.tag('p', - {[html.onlyIfContent]: true}, - language.$('releaseInfo.visitOn', { - [language.onlyIfOptions]: ['links'], - links: - language.formatDisjunctionList( - sec.info.visitLinks - .map(link => link.slot('context', 'group'))), - })), - - html.tag('blockquote', - {[html.onlyIfContent]: true}, - sec.info.description - ?.slot('mode', 'multiline')), - - sec.albums && [ - sec.albums.heading - .slots({ - tag: 'h2', - title: language.$('groupInfoPage.albumList.title'), - }), - - html.tag('p', - language.$('groupInfoPage.viewAlbumGallery', { - link: - sec.albums.galleryLink - .slot('content', language.$('groupInfoPage.viewAlbumGallery.link')), - })), - - html.tag('ul', - stitchArrays({ - albumLink: sec.albums.albumLinks, - otherGroupLinks: sec.albums.otherGroupLinks, - datetimestamp: sec.albums.datetimestamps, - albumColorStyle: sec.albums.albumColorStyles, - }).map(({ - albumLink, - otherGroupLinks, - datetimestamp, - albumColorStyle, - }) => { - const prefix = 'groupInfoPage.albumList.item'; - const parts = [prefix]; - const options = {}; - - options.album = - albumLink.slot('color', false); - - if (datetimestamp) { - parts.push('withYear'); - options.yearAccent = - language.$(prefix, 'yearAccent', { - year: - datetimestamp.slots({style: 'year', tooltip: true}), - }); - } - - if (!empty(otherGroupLinks)) { - parts.push('withOtherGroup'); - options.otherGroupAccent = - html.tag('span', {class: 'other-group-accent'}, - language.$(prefix, 'otherGroupAccent', { - groups: - language.formatConjunctionList( - otherGroupLinks.map(groupLink => - groupLink.slot('color', false))), - })); - } - - return ( - html.tag('li', - albumColorStyle, - language.$(...parts, options))); - })), - ], - ], - - leftSidebar: - (relations.sidebar - ? relations.sidebar - .content /* TODO: Kludge. */ - : null), - - navLinkStyle: 'hierarchical', - navLinks: relations.navLinks.content, - - secondaryNav: relations.secondaryNav ?? null, - }); - }, + .map(url => relation('linkExternal', url)), + + description: + relation('transformContent', group.description), + + albumSection: + relation('generateGroupInfoPageAlbumsSection', group), + }), + + data: (_sprawl, group) => ({ + name: + group.name, + + color: + group.color, + }), + + generate: (data, relations, {html, language}) => + relations.layout.slots({ + title: language.$('groupInfoPage.title', {group: data.name}), + headingMode: 'sticky', + color: data.color, + + mainContent: [ + html.tag('p', + {[html.onlyIfContent]: true}, + language.$('releaseInfo.visitOn', { + [language.onlyIfOptions]: ['links'], + links: + language.formatDisjunctionList( + relations.visitLinks + .map(link => link.slot('context', 'group'))), + })), + + html.tag('blockquote', + {[html.onlyIfContent]: true}, + relations.description.slot('mode', 'multiline')), + + relations.albumSection, + ], + + leftSidebar: + (relations.sidebar + ? relations.sidebar + .content /* TODO: Kludge. */ + : null), + + navLinkStyle: 'hierarchical', + navLinks: relations.navLinks.content, + + secondaryNav: relations.secondaryNav ?? null, + }), }; diff --git a/src/content/dependencies/generateGroupInfoPageAlbumsSection.js b/src/content/dependencies/generateGroupInfoPageAlbumsSection.js new file mode 100644 index 00000000..d1dab542 --- /dev/null +++ b/src/content/dependencies/generateGroupInfoPageAlbumsSection.js @@ -0,0 +1,132 @@ +import {empty} from '#sugar'; +import {stitchArrays} from '#sugar'; + +export default { + contentDependencies: [ + 'generateAbsoluteDatetimestamp', + 'generateColorStyleAttribute', + 'generateContentHeading', + 'linkAlbum', + 'linkGroupGallery', + 'linkGroup', + ], + + extraDependencies: ['html', 'language'], + + query(group) { + const albums = + group.albums; + + const albumGroups = + albums + .map(album => album.groups); + + const albumOtherCategory = + albumGroups + .map(groups => groups + .map(group => group.category) + .find(category => category !== group.category)); + + const albumOtherGroups = + stitchArrays({ + groups: albumGroups, + category: albumOtherCategory, + }).map(({groups, category}) => + groups + .filter(group => group.category === category)); + + return {albums, albumOtherGroups}; + }, + + relations: (relation, query, group) => ({ + contentHeading: + relation('generateContentHeading'), + + galleryLink: + relation('linkGroupGallery', group), + + albumColorStyles: + query.albums + .map(album => relation('generateColorStyleAttribute', album.color)), + + albumLinks: + query.albums + .map(album => relation('linkAlbum', album)), + + otherGroupLinks: + query.albumOtherGroups + .map(groups => groups + .map(group => relation('linkGroup', group))), + + datetimestamps: + group.albums.map(album => + (album.date + ? relation('generateAbsoluteDatetimestamp', album.date) + : null)), + }), + + generate: (relations, {html, language}) => + html.tags([ + relations.contentHeading + .slots({ + tag: 'h2', + title: language.$('groupInfoPage.albumList.title'), + }), + + html.tag('p', + {[html.onlyIfSiblings]: true}, + language.$('groupInfoPage.viewAlbumGallery', { + link: + relations.galleryLink + .slot('content', language.$('groupInfoPage.viewAlbumGallery.link')), + })), + + html.tag('ul', + {[html.onlyIfContent]: true}, + + stitchArrays({ + albumLink: relations.albumLinks, + otherGroupLinks: relations.otherGroupLinks, + datetimestamp: relations.datetimestamps, + albumColorStyle: relations.albumColorStyles, + }).map(({ + albumLink, + otherGroupLinks, + datetimestamp, + albumColorStyle, + }) => { + const prefix = 'groupInfoPage.albumList.item'; + const parts = [prefix]; + const options = {}; + + options.album = + albumLink.slot('color', false); + + if (datetimestamp) { + parts.push('withYear'); + options.yearAccent = + language.$(prefix, 'yearAccent', { + year: + datetimestamp.slots({style: 'year', tooltip: true}), + }); + } + + if (!empty(otherGroupLinks)) { + parts.push('withOtherGroup'); + options.otherGroupAccent = + html.tag('span', {class: 'other-group-accent'}, + language.$(prefix, 'otherGroupAccent', { + groups: + language.formatConjunctionList( + otherGroupLinks.map(groupLink => + groupLink.slot('color', false))), + })); + } + + return ( + html.tag('li', + albumColorStyle, + language.$(...parts, options))); + })), + ]), +}; |