diff options
| -rw-r--r-- | src/content/dependencies/generateArtTagGalleryPage.js | 137 | ||||
| -rw-r--r-- | src/page/index.js | 2 | ||||
| -rw-r--r-- | src/page/tag.js | 96 |
3 files changed, 149 insertions, 86 deletions
diff --git a/src/content/dependencies/generateArtTagGalleryPage.js b/src/content/dependencies/generateArtTagGalleryPage.js new file mode 100644 index 0000000..138189e --- /dev/null +++ b/src/content/dependencies/generateArtTagGalleryPage.js @@ -0,0 +1,137 @@ +import {stitchArrays} from '../../util/sugar.js'; +import {sortAlbumsTracksChronologically} from '../../util/wiki-data.js'; + +export default { + contentDependencies: [ + 'generateColorStyleRules', + 'generateCoverGrid', + 'generatePageLayout', + 'image', + 'linkAlbum', + 'linkArtTag', + 'linkTrack', + ], + + extraDependencies: ['html', 'language', 'wikiData'], + + sprawl({wikiInfo}) { + return { + enableListings: wikiInfo.enableListings, + }; + }, + + query(sprawl, tag) { + const things = tag.taggedInThings.slice(); + + sortAlbumsTracksChronologically(things, { + getDate: thing => thing.coverArtDate, + latestFirst: true, + }); + + return {things}; + }, + + relations(relation, query, sprawl, tag) { + const relations = {}; + + relations.layout = + relation('generatePageLayout'); + + relations.colorStyleRules = + relation('generateColorStyleRules', tag.color); + + relations.artTagMainLink = + relation('linkArtTag', tag); + + relations.coverGrid = + relation('generateCoverGrid'); + + relations.links = + query.things.map(thing => + (thing.album + ? relation('linkTrack', thing) + : relation('linkAlbum', thing))); + + relations.images = + query.things.map(thing => + relation('image', thing.artTags)); + + return relations; + }, + + data(query, sprawl, artist) { + const data = {}; + + data.enableListings = sprawl.enableListings; + + data.name = artist.name; + + data.numArtworks = query.things.length; + + data.names = + query.things.map(thing => thing.name); + + data.paths = + query.things.map(thing => + (thing.album + ? ['media.trackCover', thing.album.directory, thing.directory, thing.coverArtFileExtension] + : ['media.albumCover', thing.directory, thing.coverArtFileExtension])); + + return data; + }, + + generate(data, relations, {html, language}) { + return relations.layout + .slots({ + title: + language.$('tagPage.title', { + tag: data.name, + }), + + headingMode: 'static', + + colorStyleRules: [relations.colorStyleRules], + + mainClasses: ['top-index'], + mainContent: [ + html.tag('p', + {class: 'quick-info'}, + language.$('tagPage.infoLine', { + coverArts: language.countCoverArts(data.numArtworks, { + unit: true, + }), + })), + + relations.coverGrid + .slots({ + links: relations.links, + names: data.names, + images: + stitchArrays({ + image: relations.images, + path: data.paths, + }).map(({image, path}) => + image.slot('path', path)), + }), + ], + + navLinkStyle: 'hierarchical', + navLinks: [ + {auto: 'home'}, + + data.enableListings && + { + path: ['localized.listingIndex'], + title: language.$('listingIndex.title'), + }, + + { + html: + language.$('tagPage.nav.tag', { + tag: relations.artTagMainLink, + }), + }, + ], + }); + }, +}; diff --git a/src/page/index.js b/src/page/index.js index e07c135..fd55050 100644 --- a/src/page/index.js +++ b/src/page/index.js @@ -16,5 +16,5 @@ export * as group from './group.js'; export * as listing from './listing.js'; // export * as news from './news.js'; export * as static from './static.js'; -// export * as tag from './tag.js'; +export * as tag from './tag.js'; export * as track from './track.js'; diff --git a/src/page/tag.js b/src/page/tag.js index 81db613..8942aea 100644 --- a/src/page/tag.js +++ b/src/page/tag.js @@ -10,90 +10,16 @@ export function targets({wikiData}) { return wikiData.artTagData.filter((tag) => !tag.isContentWarning); } -export function write(tag, {wikiData}) { - const {taggedInThings: things} = tag; - - // Display things featuring this art tag in reverse chronological order, - // sticking the most recent additions near the top! - const thingsReversed = things.slice().reverse(); - - const entries = thingsReversed.map((item) => ({item})); - - const page = { - type: 'page', - path: ['tag', tag.directory], - page: ({ - getAlbumCover, - getGridHTML, - getThemeString, - getTrackCover, - html, - language, - link, - }) => ({ - title: language.$('tagPage.title', {tag: tag.name}), - theme: getThemeString(tag.color), - - main: { - classes: ['top-index'], - headingMode: 'static', - - content: [ - html.tag('p', - {class: 'quick-info'}, - language.$('tagPage.infoLine', { - coverArts: language.countCoverArts(things.length, { - unit: true, - }), - })), - - html.tag('div', - {class: 'grid-listing'}, - getGridHTML({ - entries, - srcFn: (thing) => - thing.album - ? getTrackCover(thing) - : getAlbumCover(thing), - linkFn: (thing, opts) => - thing.album - ? link.track(thing, opts) - : link.album(thing, opts), - })), - ], - }, - - nav: generateTagNav(tag, { - link, - language, - wikiData, - }), - }), - }; - - return [page]; -} - -// Utility functions - -function generateTagNav(tag, { - language, - link, - wikiData, -}) { - return { - linkContainerClasses: ['nav-links-hierarchy'], - links: [ - {toHome: true}, - wikiData.wikiInfo.enableListings && { - path: ['localized.listingIndex'], - title: language.$('listingIndex.title'), - }, - { - html: language.$('tagPage.nav.tag', { - tag: link.tag(tag, {class: 'current'}), - }), +export function pathsForTarget(tag) { + return [ + { + type: 'page', + path: ['tag', tag.directory], + + contentFunction: { + name: 'generateArtTagGalleryPage', + args: [tag], }, - ], - }; + }, + ]; } |