content: generateListingPage: "skip to a section"

3 files changed, 54 insertions, 4 deletions

diff --git a/src/content/dependencies/generateListingPage.js b/src/content/dependencies/generateListingPage.js
index 08eb40c6..4de2d006 100644
--- a/src/content/dependencies/generateListingPage.js
+++ b/src/content/dependencies/generateListingPage.js
@@ -7,6 +7,7 @@ export default {
     'generatePageLayout',
     'linkListing',
     'linkListingIndex',
+    'linkTemplate',
   ],
 
   extraDependencies: ['html', 'language', 'wikiData'],
@@ -26,6 +27,9 @@ export default {
     relations.chunkHeading =
       relation('generateContentHeading');
 
+    relations.showSkipToSectionLinkTemplate =
+      relation('linkTemplate');
+
     if (listing.target.listings.length > 1) {
       relations.sameTargetListingLinks =
         listing.target.listings
@@ -65,6 +69,9 @@ export default {
     chunkTitles: {validate: v => v.strictArrayOf(v.isObject)},
     chunkRows: {validate: v => v.strictArrayOf(v.isObject)},
 
+    showSkipToSection: {type: 'boolean', default: false},
+    chunkIDs: {validate: v => v.strictArrayOf(v.isString)},
+
     listStyle: {
       validate: v => v.is('ordered', 'unordered'),
       default: 'unordered',
@@ -128,16 +135,40 @@ export default {
                 formatListingString('item', row)))),
 
         slots.type === 'chunks' &&
-          html.tag('dl',
+          html.tag('dl', [
+            slots.showSkipToSection && [
+              html.tag('dt',
+                language.$('listingPage.skipToSection')),
+
+              html.tag('dd',
+                html.tag('ul',
+                  stitchArrays({
+                    title: slots.chunkTitles,
+                    id: slots.chunkIDs,
+                  }).filter(({id}) => id)
+                    .map(({title, id}) =>
+                      html.tag('li',
+                        relations.showSkipToSectionLinkTemplate
+                          .clone()
+                          .slots({
+                            hash: id,
+                            content:
+                              formatListingString('chunk.title', title)
+                                .replace(/:$/, ''),
+                          }))))),
+            ],
+
             stitchArrays({
               title: slots.chunkTitles,
               rows: slots.chunkRows,
-            }).map(({title, rows}) => [
+              id: slots.chunkIDs,
+            }).map(({title, rows, id}) => [
                 relations.chunkHeading
                   .clone()
                   .slots({
                     tag: 'dt',
                     title: formatListingString('chunk.title', title),
+                    id,
                   }),
 
                 html.tag('dd',
@@ -146,7 +177,8 @@ export default {
                       html.tag('li',
                         {class: row.stringsKey === 'rerelease' && 'rerelease'},
                         formatListingString('chunk.item', row))))),
-              ])),
+              ]),
+          ]),
 
         slots.type === 'custom' &&
           slots.content,
diff --git a/src/content/dependencies/listArtistsByName.js b/src/content/dependencies/listArtistsByName.js
index d83150e8..3778b9e3 100644
--- a/src/content/dependencies/listArtistsByName.js
+++ b/src/content/dependencies/listArtistsByName.js
@@ -1,5 +1,10 @@
 import {empty, stitchArrays, unique} from '#sugar';
-import {getArtistNumContributions, sortAlphabetically} from '#wiki-data';
+
+import {
+  filterMultipleArrays,
+  getArtistNumContributions,
+  sortAlphabetically,
+} from '#wiki-data';
 
 export default {
   contentDependencies: ['generateListingPage', 'linkArtist', 'linkGroup'],
@@ -29,6 +34,9 @@ export default {
       groups.map(group =>
         artists.filter((artist, index) => artistGroups[index].includes(group)));
 
+    filterMultipleArrays(groups, artistsByGroup,
+      (group, artists) => !empty(artists));
+
     return {spec, groups, artistsByGroup};
   },
 
@@ -68,6 +76,10 @@ export default {
     }
 
     if (query.artistsByGroup) {
+      data.groupDirectories =
+        query.groups
+          .map(group => group.directory);
+
       data.countsByGroup =
         query.artistsByGroup
           .map(artists => artists
@@ -83,6 +95,11 @@ export default {
         ? relations.page.slots({
             type: 'chunks',
 
+            showSkipToSection: true,
+            chunkIDs:
+              data.groupDirectories
+                .map(directory => `contributed-to-${directory}`),
+
             chunkTitles:
               relations.groupLinks.map(groupLink => ({
                 group: groupLink,
diff --git a/src/strings-default.json b/src/strings-default.json
index 2b4b0981..2cab3a19 100644
--- a/src/strings-default.json
+++ b/src/strings-default.json
@@ -348,6 +348,7 @@
   "listingPage.target.other": "Other",
   "listingPage.listingsFor": "Listings for {TARGET}: {LISTINGS}",
   "listingPage.seeAlso": "Also check out: {LISTINGS}",
+  "listingPage.skipToSection": "Skip to a section:",
   "listingPage.listAlbums.byName.title": "Albums - by Name",
   "listingPage.listAlbums.byName.title.short": "...by Name",
   "listingPage.listAlbums.byName.item": "{ALBUM} ({TRACKS})",