1 files changed, 18 insertions, 36 deletions
diff --git a/src/content/dependencies/generateTrackList.js b/src/content/dependencies/generateTrackList.js
index 7c3b11c1..53a32536 100644
--- a/src/content/dependencies/generateTrackList.js
+++ b/src/content/dependencies/generateTrackList.js
@@ -1,46 +1,28 @@
-import {empty, stitchArrays} from '#sugar';
-
 export default {
-  contentDependencies: ['linkTrack', 'linkContribution'],
-
-  extraDependencies: ['html', 'language'],
+  contentDependencies: ['generateTrackListItem'],
+  extraDependencies: ['html'],
 
   relations: (relation, tracks) => ({
-    trackLinks:
-      tracks
-        .map(track => relation('linkTrack', track)),
-
-    contributionLinks:
+    items:
       tracks
-        .map(track =>
-          track.artistContribs
-            .map(contrib => relation('linkContribution', contrib))),
+        .map(track => relation('generateTrackListItem', track, [])),
   }),
 
-  generate: (relations, {html, language}) =>
+  slots: {
+    colorMode: {
+      validate: v => v.is('none', 'track', 'line'),
+      default: 'track',
+    },
+  },
+
+  generate: (relations, slots, {html}) =>
     html.tag('ul',
       {[html.onlyIfContent]: true},
 
-      stitchArrays({
-        trackLink: relations.trackLinks,
-        contributionLinks: relations.contributionLinks,
-      }).map(({trackLink, contributionLinks}) =>
-          html.tag('li',
-            language.encapsulate('trackList.item', itemCapsule =>
-              language.encapsulate(itemCapsule, workingCapsule => {
-                const workingOptions = {track: trackLink};
-
-                if (!empty(contributionLinks)) {
-                  workingCapsule += '.withArtists';
-                  workingOptions.by =
-                    html.tag('span', {class: 'by'},
-                      html.metatag('chunkwrap', {split: ','},
-                        language.$(itemCapsule, 'withArtists.by', {
-                          artists:
-                            language.formatConjunctionList(contributionLinks),
-                        })));
-                }
-
-                return language.$(workingCapsule, workingOptions);
-              }))))),
+      relations.items.map(item =>
+        item.slots({
+          showArtists: true,
+          showDuration: false,
+          colorMode: slots.colorMode,
+        }))),
 };