From 53395fa815cdf6f912e78f80bef8908005186270 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Thu, 22 Jun 2023 16:37:36 -0300 Subject: content: group info + gallery pages These are good to go! Only thing missing is carousels on gallery pages. --- src/page/group.js | 315 ++++-------------------------------------------------- src/page/index.js | 2 +- 2 files changed, 19 insertions(+), 298 deletions(-) (limited to 'src/page') diff --git a/src/page/group.js b/src/page/group.js index 81e1728..4d5f91c 100644 --- a/src/page/group.js +++ b/src/page/group.js @@ -15,307 +15,28 @@ export function targets({wikiData}) { return wikiData.groupData; } -export function write(group, {wikiData}) { - const {listingSpec, wikiInfo} = wikiData; +export function pathsForTarget(group) { + const hasGalleryPage = !empty(group.albums); - const tracks = group.albums.flatMap((album) => album.tracks); - const totalDuration = getTotalDuration(tracks, {originalReleasesOnly: true}); + return [ + { + type: 'page', + path: ['groupInfo', group.directory], - const albumLines = group.albums.map((album) => ({ - album, - otherGroup: album.groups.find((g) => g !== group), - })); - - const infoPage = { - type: 'page', - path: ['groupInfo', group.directory], - page: ({ - fancifyURL, - generateInfoGalleryLinks, - generateNavigationLinks, - getLinkThemeString, - getThemeString, - html, - language, - link, - transformMultiline, - }) => ({ - title: language.$('groupInfoPage.title', {group: group.name}), - - themeColor: group.color, - theme: getThemeString(group.color), - - main: { - headingMode: 'sticky', - - content: [ - !empty(group.urls) && - html.tag('p', - language.$('releaseInfo.visitOn', { - links: language.formatDisjunctionList( - group.urls.map(url => fancifyURL(url, {language}))), - })), - - group.description && - html.tag('blockquote', - transformMultiline(group.description)), - - ...html.fragment( - !empty(group.albums) && [ - html.tag('h2', - {class: ['content-heading']}, - language.$('groupInfoPage.albumList.title')), - - html.tag('p', - language.$('groupInfoPage.viewAlbumGallery', { - link: link.groupGallery(group, { - text: language.$('groupInfoPage.viewAlbumGallery.link'), - }), - })), - - html.tag('ul', - albumLines.map(({album, otherGroup}) => { - const item = album.date - ? language.$('groupInfoPage.albumList.item', { - year: album.date.getFullYear(), - album: link.album(album), - }) - : language.$('groupInfoPage.albumList.item.withoutYear', { - album: link.album(album), - }); - return html.tag('li', - otherGroup - ? language.$('groupInfoPage.albumList.item.withAccent', { - item, - accent: html.tag('span', - {class: 'other-group-accent'}, - language.$('groupInfoPage.albumList.item.otherGroupAccent', { - group: link.groupInfo(otherGroup, { - color: false, - }), - })), - }) - : item); - })), - ]), - ], - }, - - sidebarLeft: generateGroupSidebar(group, false, { - getLinkThemeString, - html, - language, - link, - wikiData, - }), - - nav: generateGroupNav(group, false, { - generateInfoGalleryLinks, - generateNavigationLinks, - language, - link, - wikiData, - }), - }), - }; - - const galleryPage = !empty(group.albums) && { - type: 'page', - path: ['groupGallery', group.directory], - page: ({ - generateInfoGalleryLinks, - generateNavigationLinks, - getAlbumCover, - getAlbumGridHTML, - getCarouselHTML, - getLinkThemeString, - getThemeString, - html, - language, - link, - }) => ({ - title: language.$('groupGalleryPage.title', {group: group.name}), - - themeColor: group.color, - theme: getThemeString(group.color), - - main: { - classes: ['top-index'], - headingMode: 'static', - - content: [ - getCarouselHTML({ - items: group.featuredAlbums.slice(0, 12 + 1), - srcFn: getAlbumCover, - linkFn: link.album, - }), - - html.tag('p', - {class: 'quick-info'}, - language.$('groupGalleryPage.infoLine', { - tracks: html.tag('b', - language.countTracks(tracks.length, { - unit: true, - })), - albums: html.tag('b', - language.countAlbums(group.albums.length, { - unit: true, - })), - time: html.tag('b', - language.formatDuration(totalDuration, { - unit: true, - })), - })), - - wikiInfo.enableGroupUI && - wikiInfo.enableListings && - html.tag('p', - {class: 'quick-info'}, - language.$('groupGalleryPage.anotherGroupLine', { - link: link.listing( - listingSpec.find(l => l.directory === 'groups/by-category'), - { - text: language.$('groupGalleryPage.anotherGroupLine.link'), - }), - })), - - html.tag('div', - {class: 'grid-listing'}, - getAlbumGridHTML({ - entries: sortChronologically( - group.albums - .filter(album => album.isListedInGalleries) - .map(album => ({ - item: album, - directory: album.directory, - name: album.name, - date: album.date, - })) - ).reverse(), - details: true, - })), - ], + contentFunction: { + name: 'generateGroupInfoPage', + args: [group], }, + }, - sidebarLeft: generateGroupSidebar(group, true, { - getLinkThemeString, - html, - language, - link, - wikiData, - }), + hasGalleryPage && { + type: 'page', + path: ['groupGallery', group.directory], - nav: generateGroupNav(group, true, { - generateInfoGalleryLinks, - generateNavigationLinks, - language, - link, - wikiData, - }), - }), - }; - - return [infoPage, galleryPage].filter(Boolean); -} - -// Utility functions - -function generateGroupSidebar(currentGroup, isGallery, { - getLinkThemeString, - html, - language, - link, - wikiData, -}) { - const {groupCategoryData, wikiInfo} = wikiData; - - if (!wikiInfo.enableGroupUI) { - return null; - } - - return { - content: [ - html.tag('h1', - language.$('groupSidebar.title')), - - ...groupCategoryData.map((category) => - html.tag('details', - { - open: category === currentGroup.category, - class: category === currentGroup.category && 'current', - }, - [ - html.tag('summary', - {style: getLinkThemeString(category.color)}, - html.tag('span', - language.$('groupSidebar.groupList.category', { - category: `${category.name}`, - }))), - html.tag('ul', - category.groups.map((group) => { - const linkKey = ( - isGallery && !empty(group.albums) - ? 'groupGallery' - : 'groupInfo'); - - return html.tag('li', - { - class: group === currentGroup && 'current', - style: getLinkThemeString(group.color), - }, - language.$('groupSidebar.groupList.item', { - group: link[linkKey](group), - })); - })), - ])), - ], - }; -} - -function generateGroupNav(currentGroup, isGallery, { - generateInfoGalleryLinks, - generateNavigationLinks, - link, - language, - wikiData, -}) { - const {groupData, wikiInfo} = wikiData; - - if (!wikiInfo.enableGroupUI) { - return {simple: true}; - } - - const linkKey = isGallery ? 'groupGallery' : 'groupInfo'; - - const infoGalleryLinks = generateInfoGalleryLinks(currentGroup, isGallery, { - linkKeyGallery: 'groupGallery', - linkKeyInfo: 'groupInfo', - }); - - const previousNextLinks = generateNavigationLinks(currentGroup, { - data: groupData, - linkKey, - }); - - return { - linkContainerClasses: ['nav-links-hierarchy'], - links: [ - {toHome: true}, - wikiInfo.enableListings && { - path: ['localized.listingIndex'], - title: language.$('listingIndex.title'), - }, - { - html: language.$('groupPage.nav.group', { - group: link[linkKey](currentGroup, {class: 'current'}), - }), - }, - { - divider: false, - html: previousNextLinks - ? `(${infoGalleryLinks}; ${previousNextLinks})` - : `(${previousNextLinks})`, + contentFunction: { + name: 'generateGroupGalleryPage', + args: [group], }, - ], - }; + }, + ]; } diff --git a/src/page/index.js b/src/page/index.js index 311fcd6..5a62213 100644 --- a/src/page/index.js +++ b/src/page/index.js @@ -11,7 +11,7 @@ export * as album from './album.js'; export * as artist from './artist.js'; export * as artistAlias from './artist-alias.js'; // export * as flash from './flash.js'; -// export * as group from './group.js'; +export * as group from './group.js'; // export * as homepage from './homepage.js'; // export * as listing from './listing.js'; // export * as news from './news.js'; -- cgit 1.3.0-6-gf8a5