2 files changed, 149 insertions, 7 deletions

diff --git a/src/content/dependencies/generateListRandomPageLinksGroupSection.js b/src/content/dependencies/generateListRandomPageLinksGroupSection.js
new file mode 100644
index 00000000..9a46e2c3
--- /dev/null
+++ b/src/content/dependencies/generateListRandomPageLinksGroupSection.js
@@ -0,0 +1,79 @@
+import {stitchArrays} from '../../util/sugar.js';
+
+export default {
+  contentDependencies: ['generateColorStyleVariables', 'linkGroup'],
+  extraDependencies: ['html', 'language', 'wikiData'],
+
+  sprawl: ({albumData}) => ({albumData}),
+
+  query: (sprawl, group) => ({
+    albums:
+      sprawl.albumData
+        .filter(album => album.groups.includes(group)),
+  }),
+
+  relations: (relation, query, sprawl, group) => ({
+    groupLink:
+      relation('linkGroup', group),
+
+    albumColorVariables:
+      query.albums
+        .map(() => relation('generateColorStyleVariables')),
+  }),
+
+  data: (query, sprawl, group) => ({
+    groupDirectory:
+      group.directory,
+
+    albumColors:
+      query.albums
+        .map(album => album.color),
+
+    albumDirectories:
+      query.albums
+        .map(album => album.directory),
+
+    albumNames:
+      query.albums
+        .map(album => album.name),
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    html.tags([
+      html.tag('dt',
+        language.$('listingPage.other.randomPages.group', {
+          group: relations.groupLink,
+
+          randomAlbum:
+            html.tag('a',
+              {href: '#', 'data-random': 'album-in-' + data.groupDirectory},
+              language.$('listingPage.other.randomPages.group.randomAlbum')),
+
+          randomTrack:
+            html.tag('a',
+              {href: '#', 'data-random': 'track-in-' + data.groupDirectory},
+              language.$('listingPage.other.randomPages.group.randomTrack')),
+        })),
+
+      html.tag('dd',
+        html.tag('ul',
+          stitchArrays({
+            colorVariables: relations.albumColorVariables,
+            color: data.albumColors,
+            directory: data.albumDirectories,
+            name: data.albumNames,
+          }).map(({colorVariables, color, directory, name}) =>
+              html.tag('li',
+                language.$('listingPage.other.randomPages.album', {
+                  album:
+                    html.tag('a', {
+                      href: '#',
+                      'data-random': 'track-in-album',
+                      style:
+                        colorVariables.slot('color', color).content +
+                        '; ' +
+                        `--album-directory: ${directory}`,
+                    }, name),
+                }))))),
+    ]),
+};
diff --git a/src/content/dependencies/listRandomPageLinks.js b/src/content/dependencies/listRandomPageLinks.js
index 28a925ac..43bf7dd5 100644
--- a/src/content/dependencies/listRandomPageLinks.js
+++ b/src/content/dependencies/listRandomPageLinks.js
@@ -1,28 +1,91 @@
 export default {
-  contentDependencies: ['generateListingPage'],
-  extraDependencies: ['html', 'wikiData'],
+  contentDependencies: [
+    'generateListingPage',
+    'generateListRandomPageLinksGroupSection',
+  ],
 
-  sprawl() {
-    return {};
+  extraDependencies: ['html', 'language', 'wikiData'],
+
+  sprawl({groupData}) {
+    return {groupData};
   },
 
   query(sprawl, spec) {
+    const group = directory =>
+      sprawl.groupData.find(group => group.directory === directory);
+
     return {
       spec,
+      officialGroup: group('official'),
+      fandomGroup: group('fandom'),
+      beyondGroup: group('beyond'),
     };
   },
 
   relations(relation, query) {
     return {
       page: relation('generateListingPage', query.spec),
+
+      officialSection:
+        relation('generateListRandomPageLinksGroupSection', query.officialGroup),
+
+      fandomSection:
+        relation('generateListRandomPageLinksGroupSection', query.fandomGroup),
+
+      beyondSection:
+        relation('generateListRandomPageLinksGroupSection', query.beyondGroup),
     };
   },
 
-  generate(relations, {html}) {
+  generate(relations, {html, language}) {
     return relations.page.slots({
       type: 'custom',
-      content:
-        html.tag('p', `Alright alright, this is a stub page! Coming soon!`),
+      content: [
+        html.tag('p',
+          language.$('listingPage.other.randomPages.chooseLinkLine')),
+
+        html.tag('p',
+          {class: 'js-hide-once-data'},
+          language.$('listingPage.other.randomPages.dataLoadingLine')),
+
+        html.tag('p',
+          {class: 'js-show-once-data'},
+          language.$('listingPage.other.randomPages.dataLoadedLine')),
+
+        html.tag('dl', [
+          html.tag('dt',
+            language.$('listingPage.other.randomPages.misc')),
+
+          html.tag('dd',
+            html.tag('ul', [
+              html.tag('li', [
+                html.tag('a',
+                  {href: '#', 'data-random': 'artist'},
+                  language.$('listingPage.other.randomPages.misc.randomArtist')),
+
+                '(' +
+                html.tag('a',
+                  {href: '#', 'data-random': 'artist-more-than-one-contrib'},
+                  language.$('listingPage.other.randomPages.misc.atLeastTwoContributions')) +
+                ')',
+              ]),
+
+              html.tag('li',
+                html.tag('a',
+                  {href: '#', 'data-random': 'album'},
+                  language.$('listingPage.other.randomPages.misc.randomAlbumWholeSite'))),
+
+              html.tag('li',
+                html.tag('a',
+                  {href: '#', 'data-random': 'track'},
+                  language.$('listingPage.other.randomPages.misc.randomTrackWholeSite'))),
+            ])),
+
+          relations.officialSection,
+          relations.fandomSection,
+          relations.beyondSection,
+        ]),
+      ],
     });
   },
 };