diff options
| -rw-r--r-- | src/content/dependencies/generateArtTagGalleryPage.js | 83 | ||||
| -rw-r--r-- | src/static/site4.css | 2 | ||||
| -rw-r--r-- | src/strings-default.json | 4 |
3 files changed, 78 insertions, 11 deletions
diff --git a/src/content/dependencies/generateArtTagGalleryPage.js b/src/content/dependencies/generateArtTagGalleryPage.js index c04bfb68..a60d1a5d 100644 --- a/src/content/dependencies/generateArtTagGalleryPage.js +++ b/src/content/dependencies/generateArtTagGalleryPage.js @@ -1,4 +1,4 @@ -import {stitchArrays} from '#sugar'; +import {empty, stitchArrays, unique} from '#sugar'; import {sortAlbumsTracksChronologically} from '#wiki-data'; export default { @@ -9,6 +9,7 @@ export default { 'linkAlbum', 'linkArtTag', 'linkTrack', + 'transformContent', ], extraDependencies: ['html', 'language', 'wikiData'], @@ -20,14 +21,16 @@ export default { }, query(sprawl, tag) { - const things = tag.taggedInThings.slice(); + const directThings = tag.directlyTaggedInThings; + const indirectThings = tag.indirectlyTaggedInThings; + const allThings = unique([...directThings, ...indirectThings]); - sortAlbumsTracksChronologically(things, { - getDate: thing => thing.coverArtDate, + sortAlbumsTracksChronologically(allThings, { + getDate: thing => thing.coverArtDate ?? thing.date, latestFirst: true, }); - return {things}; + return {directThings, indirectThings, allThings}; }, relations(relation, query, sprawl, tag) { @@ -39,17 +42,38 @@ export default { relations.artTagMainLink = relation('linkArtTag', tag); + // TODO: linkArtTagInfo + relations.infoPageLink = + relation('linkArtTag', tag); + + if (tag.descriptionShort) { + relations.description = + relation('transformContent', tag.descriptionShort); + } + + if (!empty(tag.directAncestorTags)) { + relations.ancestorLinks = + tag.directAncestorTags.map(tag => + relation('linkArtTag', tag)); + } + + if (!empty(tag.directDescendantTags)) { + relations.descendantLinks = + tag.directDescendantTags.map(tag => + relation('linkArtTag', tag)); + } + relations.coverGrid = relation('generateCoverGrid'); relations.links = - query.things.map(thing => + query.allThings.map(thing => (thing.album ? relation('linkTrack', thing) : relation('linkAlbum', thing))); relations.images = - query.things.map(thing => + query.allThings.map(thing => relation('image', thing.artTags)); return relations; @@ -62,18 +86,23 @@ export default { data.name = tag.name; data.color = tag.color; + data.hasLongerDescription = tag.descriptionShort !== tag.description; - data.numArtworks = query.things.length; + data.numArtworks = query.allThings.length; data.names = - query.things.map(thing => thing.name); + query.allThings.map(thing => thing.name); data.paths = - query.things.map(thing => + query.allThings.map(thing => (thing.album ? ['media.trackCover', thing.album.directory, thing.directory, thing.coverArtFileExtension] : ['media.albumCover', thing.directory, thing.coverArtFileExtension])); + data.onlyFeaturedIndirectly = + query.allThings.map(thing => + !query.directThings.includes(thing)); + return data; }, @@ -92,17 +121,49 @@ export default { mainClasses: ['top-index'], mainContent: [ html.tag('p', - {class: 'quick-info'}, + { + [html.joinChildren]: html.tag('br'), + [html.onlyIfContent]: true, + class:' quick-info', + }, + [ + relations.description?.slot('mode', 'inline'), + data.hasLongerDescription && + language.$('tagPage.moreInfo', { + link: + relations.infoPageLink + .slot('content', language.$('tagPage.moreInfo.link')), + }), + ]), + + html.tag('p', {class: 'quick-info'}, language.$('tagPage.infoLine', { coverArts: language.countCoverArts(data.numArtworks, { unit: true, }), })), + relations.ancestorLinks && + html.tag('p', {class: 'quick-info'}, + language.$('tagPage.descendsFrom', { + tags: language.formatConjunctionList(relations.ancestorLinks), + })), + + relations.descendantLinks && + html.tag('p', {clasS: 'quick-info'}, + language.$('tagPage.desendants', { + tags: language.formatUnitList(relations.descendantLinks), + })), + relations.coverGrid .slots({ links: relations.links, names: data.names, + + classes: + data.onlyFeaturedIndirectly.map(onlyFeaturedIndirectly => + (onlyFeaturedIndirectly ? 'featured-indirectly' : '')), + images: stitchArrays({ image: relations.images, diff --git a/src/static/site4.css b/src/static/site4.css index ab8976bc..62659519 100644 --- a/src/static/site4.css +++ b/src/static/site4.css @@ -605,6 +605,8 @@ html[data-url-key="localized.home"] #content h1 { .quick-info { text-align: center; + padding-left: 12%; + padding-right: 12%; } ul.quick-info { diff --git a/src/strings-default.json b/src/strings-default.json index 0ad7a516..55d3b41f 100644 --- a/src/strings-default.json +++ b/src/strings-default.json @@ -497,6 +497,10 @@ "redirectPage.infoLine": "This page has been moved to {TARGET}.", "tagPage.title": "{TAG}", "tagPage.infoLine": "Appears in {COVER_ARTS}.", + "tagPage.descendsFrom": "Descends from {TAGS}.", + "tagPage.desendants": "Direct descendants: {TAGS}.", + "tagPage.moreInfo": "({LINK})", + "tagPage.moreInfo.link": "More info...", "tagPage.nav.tag": "Tag: {TAG}", "trackPage.title": "{TRACK}", "trackPage.referenceList.fandom": "Fandom:", |