content: generateArtTagGalleryPage: misc. additions & updates

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:",