Closely Linked Artists + annotated reference lists

src/content/dependencies/generateArtistInfoPage.js

@@ -1,4 +1,4 @@
-import {empty, unique} from '#sugar';
+import {empty, stitchArrays, unique} from '#sugar';
 
 export default {
   contentDependencies: [
@@ -13,6 +13,7 @@ export default {
     'generatePageLayout',
     'linkArtistGallery',
     'linkExternal',
+    'linkGroup',
     'transformContent',
   ],
 
@@ -48,6 +49,16 @@ export default {
     hasGallery:
       !empty(artist.albumCoverArtistContributions) ||
       !empty(artist.trackCoverArtistContributions),
+
+    aliasLinkedGroups:
+      artist.closelyLinkedGroups
+        .filter(({annotation}) =>
+          annotation === 'alias'),
+
+    generalLinkedGroups:
+      artist.closelyLinkedGroups
+        .filter(({annotation}) =>
+          annotation !== 'alias'),
   }),
 
   relations: (relation, query, artist) => ({
@@ -68,6 +79,16 @@ export default {
     contextNotes:
       relation('transformContent', artist.contextNotes),
 
+    closeGroupLinks:
+      query.generalLinkedGroups
+        .map(({thing: group}) =>
+          relation('linkGroup', group)),
+
+    aliasGroupLinks:
+      query.aliasLinkedGroups
+        .map(({thing: group}) =>
+          relation('linkGroup', group)),
+
     visitLinks:
       artist.urls
         .map(url => relation('linkExternal', url)),
@@ -111,6 +132,10 @@ export default {
         ? artist.avatarFileExtension
         : null),
 
+    closeGroupAnnotations:
+      query.generalLinkedGroups
+        .map(({annotation}) => annotation),
+
     totalTrackCount:
       query.allTracks.length,
 
@@ -146,6 +171,49 @@ export default {
               relations.contextNotes),
           ]),
 
+          html.tag('p',
+            {[html.onlyIfContent]: true},
+            {[html.joinChildren]: html.tag('br')},
+
+            language.encapsulate(pageCapsule, 'closelyLinkedGroups', capsule => [
+              language.encapsulate(capsule, capsule => {
+                const [workingCapsule, option] =
+                  (relations.closeGroupLinks.length === 0
+                    ? [null, null]
+                 : relations.closeGroupLinks.length === 1
+                    ? [language.encapsulate(capsule, 'one'), 'group']
+                    : [language.encapsulate(capsule, 'multiple'), 'groups']);
+
+                if (!workingCapsule) return html.blank();
+
+                return language.$(workingCapsule, {
+                  [option]:
+                    language.formatUnitList(
+                      stitchArrays({
+                        link: relations.closeGroupLinks,
+                        annotation: data.closeGroupAnnotations,
+                      }).map(({link, annotation}) =>
+                          language.encapsulate(capsule, 'group', workingCapsule => {
+                            const workingOptions = {group: link};
+
+                            if (annotation) {
+                              workingCapsule += '.withAnnotation';
+                              workingOptions.annotation = annotation;
+                            }
+
+                            return language.$(workingCapsule, workingOptions);
+                          }))),
+                });
+              }),
+
+              language.$(capsule, 'alias', {
+                [language.onlyIfOptions]: ['groups'],
+
+                groups:
+                  language.formatConjunctionList(relations.aliasGroupLinks),
+              }),
+            ])),
+
           html.tag('p',
             {[html.onlyIfContent]: true},
 

src/content/dependencies/generateGroupInfoPage.js

@@ -1,10 +1,14 @@
+import {stitchArrays} from '#sugar';
+
 export default {
   contentDependencies: [
+    'generateColorStyleAttribute',
     'generateGroupInfoPageAlbumsSection',
     'generateGroupNavLinks',
     'generateGroupSecondaryNav',
     'generateGroupSidebar',
     'generatePageLayout',
+    'linkArtist',
     'linkExternal',
     'transformContent',
   ],
@@ -14,9 +18,24 @@ export default {
   sprawl: ({wikiInfo}) => ({
     enableGroupUI:
       wikiInfo.enableGroupUI,
+
+    wikiColor:
+      wikiInfo.color,
+  }),
+
+  query: (_sprawl, group) => ({
+    aliasLinkedArtists:
+      group.closelyLinkedArtists
+        .filter(({annotation}) =>
+          annotation === 'alias'),
+
+    generalLinkedArtists:
+      group.closelyLinkedArtists
+        .filter(({annotation}) =>
+          annotation !== 'alias'),
   }),
 
-  relations: (relation, sprawl, group) => ({
+  relations: (relation, query, sprawl, group) => ({
     layout:
       relation('generatePageLayout'),
 
@@ -33,6 +52,19 @@ export default {
         ? relation('generateGroupSidebar', group)
         : null),
 
+    wikiColorAttribute:
+      relation('generateColorStyleAttribute', sprawl.wikiColor),
+
+    closeArtistLinks:
+      query.generalLinkedArtists
+        .map(({thing: artist}) =>
+          relation('linkArtist', artist)),
+
+    aliasArtistLinks:
+      query.aliasLinkedArtists
+        .map(({thing: artist}) =>
+          relation('linkArtist', artist)),
+
     visitLinks:
       group.urls
         .map(url => relation('linkExternal', url)),
@@ -44,12 +76,16 @@ export default {
       relation('generateGroupInfoPageAlbumsSection', group),
   }),
 
-  data: (_sprawl, group) => ({
+  data: (query, _sprawl, group) => ({
     name:
       group.name,
 
     color:
       group.color,
+
+    closeArtistAnnotations:
+      query.generalLinkedArtists
+        .map(({annotation}) => annotation),
   }),
 
   generate: (data, relations, {html, language}) =>
@@ -60,6 +96,58 @@ export default {
         color: data.color,
 
         mainContent: [
+          html.tag('p',
+            {[html.onlyIfContent]: true},
+            {[html.joinChildren]: html.tag('br')},
+
+            language.encapsulate(pageCapsule, 'closelyLinkedArtists', capsule => [
+              language.encapsulate(capsule, capsule => {
+                const [workingCapsule, option] =
+                  (relations.closeArtistLinks.length === 0
+                    ? [null, null]
+                 : relations.closeArtistLinks.length === 1
+                    ? [language.encapsulate(capsule, 'one'), 'artist']
+                    : [language.encapsulate(capsule, 'multiple'), 'artists']);
+
+                if (!workingCapsule) return html.blank();
+
+                return language.$(workingCapsule, {
+                  [option]:
+                    language.formatUnitList(
+                      stitchArrays({
+                        link: relations.closeArtistLinks,
+                        annotation: data.closeArtistAnnotations,
+                      }).map(({link, annotation}) =>
+                          language.encapsulate(capsule, 'artist', workingCapsule => {
+                            const workingOptions = {};
+
+                            workingOptions.artist =
+                              link.slots({
+                                attributes: [relations.wikiColorAttribute],
+                              });
+
+                            if (annotation) {
+                              workingCapsule += '.withAnnotation';
+                              workingOptions.annotation = annotation;
+                            }
+
+                            return language.$(workingCapsule, workingOptions);
+                          }))),
+                });
+              }),
+
+              language.$(capsule, 'aliases', {
+                [language.onlyIfOptions]: ['aliases'],
+
+                aliases:
+                  language.formatConjunctionList(
+                    relations.aliasArtistLinks.map(link =>
+                      link.slots({
+                        attributes: [relations.wikiColorAttribute],
+                      }))),
+              }),
+            ])),
+
           html.tag('p',
             {[html.onlyIfContent]: true},
 

src/data/composite/control-flow/helpers/performAvailabilityCheck.js

@@ -0,0 +1,19 @@
+import {empty} from '#sugar';
+
+export default function performAvailabilityCheck(value, mode) {
+  switch (mode) {
+    case 'null':
+      return value !== undefined && value !== null;
+
+    case 'empty':
+      return value !== undefined && !empty(value);
+
+    case 'falsy':
+      return !!value && (!Array.isArray(value) || !empty(value));
+
+    case 'index':
+      return typeof value === 'number' && value >= 0;
+  }
+
+  return undefined;
+}

src/data/composite/control-flow/index.js

@@ -12,4 +12,5 @@ export {default as exposeUpdateValueOrContinue} from './exposeUpdateValueOrConti
 export {default as exposeWhetherDependencyAvailable} from './exposeWhetherDependencyAvailable.js';
 export {default as raiseOutputWithoutDependency} from './raiseOutputWithoutDependency.js';
 export {default as raiseOutputWithoutUpdateValue} from './raiseOutputWithoutUpdateValue.js';
+export {default as withAvailabilityFilter} from './withAvailabilityFilter.js';
 export {default as withResultOfAvailabilityCheck} from './withResultOfAvailabilityCheck.js';

src/data/composite/control-flow/withAvailabilityFilter.js

@@ -0,0 +1,40 @@
+// Performs the same availability check across all items of a list, providing
+// a list that's suitable anywhere a filter is expected.
+//
+// Accepts the same mode options as withResultOfAvailabilityCheck.
+//
+// See also:
+//  - withFilteredList
+//  - withResultOfAvailabilityCheck
+//
+
+import {input, templateCompositeFrom} from '#composite';
+
+import inputAvailabilityCheckMode from './inputAvailabilityCheckMode.js';
+
+import performAvailabilityCheck from './helpers/performAvailabilityCheck.js';
+
+export default templateCompositeFrom({
+  annotation: `withAvailabilityFilter`,
+
+  inputs: {
+    from: input({type: 'array'}),
+    mode: inputAvailabilityCheckMode(),
+  },
+
+  outputs: ['#availabilityFilter'],
+
+  steps: () => [
+    {
+      dependencies: [input('from'), input('mode')],
+      compute: (continuation, {
+        [input('from')]: list,
+        [input('mode')]: mode,
+      }) => continuation({
+        ['#availabilityFilter']:
+          list.map(value =>
+            performAvailabilityCheck(value, mode)),
+      }),
+    },
+  ],
+});

src/data/composite/control-flow/withResultOfAvailabilityCheck.js

@@ -20,13 +20,15 @@
 //  - exposeWhetherDependencyAvailable
 //  - raiseOutputWithoutDependency
 //  - raiseOutputWithoutUpdateValue
+//  - withAvailabilityFilter
 //
 
 import {input, templateCompositeFrom} from '#composite';
-import {empty} from '#sugar';
 
 import inputAvailabilityCheckMode from './inputAvailabilityCheckMode.js';
 
+import performAvailabilityCheck from './helpers/performAvailabilityCheck.js';
+
 export default templateCompositeFrom({
   annotation: `withResultOfAvailabilityCheck`,
 
@@ -40,33 +42,13 @@ export default templateCompositeFrom({
   steps: () => [
     {
       dependencies: [input('from'), input('mode')],
-
       compute: (continuation, {
         [input('from')]: value,
         [input('mode')]: mode,
-      }) => {
-        let availability;
-
-        switch (mode) {
-          case 'null':
-            availability = value !== undefined && value !== null;
-            break;
-
-          case 'empty':
-            availability = value !== undefined && !empty(value);
-            break;
-
-          case 'falsy':
-            availability = !!value && (!Array.isArray(value) || !empty(value));
-            break;
-
-          case 'index':
-            availability = typeof value === 'number' && value >= 0;
-            break;
-        }
-
-        return continuation({'#availability': availability});
-      },
+      }) => continuation({
+        ['#availability']:
+          performAvailabilityCheck(value, mode),
+      }),
     },
   ],
 });

src/data/composite/data/index.js

@@ -18,6 +18,7 @@ export {default as withUniqueItemsOnly} from './withUniqueItemsOnly.js';
 export {default as withFilteredList} from './withFilteredList.js';
 export {default as withMappedList} from './withMappedList.js';
 export {default as withSortedList} from './withSortedList.js';
+export {default as withStretchedList} from './withStretchedList.js';
 
 export {default as withPropertyFromList} from './withPropertyFromList.js';
 export {default as withPropertiesFromList} from './withPropertiesFromList.js';

src/data/composite/data/withFilteredList.js

@@ -5,17 +5,11 @@
 // If the flip option is set, only items corresponding with a *falsy* value in
 // the filter are kept.
 //
-// TODO: It would be neat to apply an availability check here, e.g. to allow
-// not providing a filter at all and performing the check on the contents of
-// the list (though on the filter, if present, is fine too). But that's best
-// done by some shmancy-fancy mapping support in composite.js, so a bit out
-// of reach for now (apart from proving uses built on top of a more boring
-// implementation).
-//
 // TODO: There should be two outputs - one for the items included according to
 // the filter, and one for the items excluded.
 //
 // See also:
+//  - withAvailabilityFilter
 //  - withMappedList
 //  - withSortedList
 //