sticky subheadings

8 files changed, 87 insertions, 44 deletions

diff --git a/src/page/album-commentary.js b/src/page/album-commentary.js
index 50a2aa39..90040026 100644
--- a/src/page/album-commentary.js
+++ b/src/page/album-commentary.js
@@ -21,6 +21,7 @@ export function write(album) {
     type: 'page',
     path: ['albumCommentary', album.directory],
     page: ({
+      generateStickyHeadingContainer,
       getAlbumStylesheet,
       getLinkThemeString,
       getThemeString,
@@ -35,23 +36,32 @@ export function write(album) {
 
       main: {
         content: html.tag('div', {class: 'long-content'}, [
-          html.tag('h1', language.$('albumCommentaryPage.title', {
-            album: link.album(album),
-          })),
-          html.tag('p', language.$('albumCommentaryPage.infoLine', {
-            words: html.tag('b', language.formatWordCount(words, {unit: true})),
-            entries: html.tag('b', language.countCommentaryEntries(entries.length, {unit: true})),
-          })),
+          generateStickyHeadingContainer(
+            language.$('albumCommentaryPage.title', {
+              album: link.album(album),
+            })),
+
+          html.tag('p',
+            language.$('albumCommentaryPage.infoLine', {
+              words: html.tag('b', language.formatWordCount(words, {unit: true})),
+              entries: html.tag('b', language.countCommentaryEntries(entries.length, {unit: true})),
+            })),
+
           ...html.fragment(album.commentary && [
-            html.tag('h3', language.$('albumCommentaryPage.entry.title.albumCommentary')),
-            html.tag('blockquote', transformMultiline(album.commentary)),
+            html.tag('h3',
+              {class: ['content-heading']},
+              language.$('albumCommentaryPage.entry.title.albumCommentary')),
+            html.tag('blockquote',
+              transformMultiline(album.commentary)),
           ]),
+
           ...album.tracks.filter(t => t.commentary).flatMap(track => [
             html.tag('h3',
-              {id: 'track.directory'},
+              {id: 'track.directory', class: ['content-heading']},
               language.$('albumCommentaryPage.entry.title.trackCommentary', {
                 track: link.track(track),
               })),
+
             html.tag('blockquote',
               {style: getLinkThemeString(track.color)},
               transformMultiline(track.commentary)),
diff --git a/src/page/album.js b/src/page/album.js
index cb512e86..1a90a79c 100644
--- a/src/page/album.js
+++ b/src/page/album.js
@@ -106,6 +106,7 @@ export function write(album, {wikiData}) {
       generateChronologyLinks,
       generateCoverLink,
       generateNavigationLinks,
+      generateStickyHeadingContainer,
       getAlbumCover,
       getAlbumStylesheet,
       getArtistString,
@@ -159,9 +160,8 @@ export function write(album, {wikiData}) {
               tags: album.artTags,
             }),
 
-            html.tag('h1', language.$('albumPage.title', {
-              album: album.name,
-            })),
+            generateStickyHeadingContainer(
+              language.$('albumPage.title', {album: album.name})),
 
             html.tag('p',
               {
@@ -254,6 +254,7 @@ export function write(album, {wikiData}) {
                   tracks,
                 }) => [
                   html.tag('dt',
+                    {class: ['content-heading']},
                     language.$('trackList.section.withDuration', {
                       duration: language.formatDuration(getTotalDuration(tracks), {
                         approximate: tracks.length > 1,
@@ -300,7 +301,9 @@ export function write(album, {wikiData}) {
 
             ...html.fragment(
               album.commentary && [
-                html.tag('p', language.$('releaseInfo.artistCommentary')),
+                html.tag('p',
+                  {class: ['content-heading']},
+                  language.$('releaseInfo.artistCommentary')),
                 html.tag('blockquote', transformMultiline(album.commentary)),
               ]),
           ],
diff --git a/src/page/artist.js b/src/page/artist.js
index 6dd2ef30..b62b32b5 100644
--- a/src/page/artist.js
+++ b/src/page/artist.js
@@ -321,6 +321,7 @@ export function write(artist, {wikiData}) {
       fancifyURL,
       generateCoverLink,
       generateInfoGalleryLinks,
+      generateStickyHeadingContainer,
       getArtistAvatar,
       getArtistString,
       html,
@@ -346,7 +347,7 @@ export function write(artist, {wikiData}) {
                 alt: language.$('misc.alt.artistAvatar'),
               }),
 
-            html.tag('h1',
+            generateStickyHeadingContainer(
               language.$('artistPage.title', {
                 artist: name,
               })),
@@ -408,7 +409,7 @@ export function write(artist, {wikiData}) {
             ...html.fragment(
               !empty(allTracks) && [
                 html.tag('h2',
-                  {id: 'tracks'},
+                  {id: 'tracks', class: ['content-heading']},
                   language.$('artistPage.trackList.title')),
 
                 totalDuration > 0 &&
@@ -446,7 +447,7 @@ export function write(artist, {wikiData}) {
             ...html.fragment(
               !empty(artThingsAll) && [
                 html.tag('h2',
-                  {id: 'art'},
+                  {id: 'art', class: ['content-heading']},
                   language.$('artistPage.artList.title')),
 
                 hasGallery &&
@@ -513,7 +514,7 @@ export function write(artist, {wikiData}) {
               wikiInfo.enableFlashesAndGames &&
               !empty(flashes) && [
                 html.tag('h2',
-                  {id: 'flashes'},
+                  {id: 'flashes', class: ['content-heading']},
                   language.$('artistPage.flashList.title')),
 
                 html.tag('dl',
@@ -555,7 +556,7 @@ export function write(artist, {wikiData}) {
             ...html.fragment(
               !empty(commentaryThings) && [
                 html.tag('h2',
-                  {id: 'commentary'},
+                  {id: 'commentary', class: ['content-heading']},
                   language.$('artistPage.commentaryList.title')),
 
                 html.tag('dl',
diff --git a/src/page/flash.js b/src/page/flash.js
index e5353a18..d968d00b 100644
--- a/src/page/flash.js
+++ b/src/page/flash.js
@@ -20,6 +20,7 @@ export function write(flash, {wikiData}) {
       generateChronologyLinks,
       generateCoverLink,
       generateNavigationLinks,
+      generateStickyHeadingContainer,
       getArtistString,
       getFlashCover,
       getThemeString,
@@ -44,7 +45,7 @@ export function write(flash, {wikiData}) {
             alt: language.$('misc.alt.flashArt'),
           }),
 
-          html.tag('h1',
+          generateStickyHeadingContainer(
             language.$('flashPage.title', {
               flash: flash.name,
             })),
@@ -68,6 +69,7 @@ export function write(flash, {wikiData}) {
           ...html.fragment(
             !empty(flash.featuredTracks) && [
               html.tag('p',
+                {class: ['content-heading']},
                 language.$('releaseInfo.tracksFeatured', {
                   flash: html.tag('i', flash.name),
                 })),
@@ -87,6 +89,7 @@ export function write(flash, {wikiData}) {
           ...html.fragment(
             !empty(flash.contributorContribs) && [
               html.tag('p',
+                {class: ['content-heading']},
                 language.$('releaseInfo.contributors')),
 
               html.tag('ul',
diff --git a/src/page/group.js b/src/page/group.js
index 1d586cf5..c4c376b6 100644
--- a/src/page/group.js
+++ b/src/page/group.js
@@ -32,6 +32,7 @@ export function write(group, {wikiData}) {
       fancifyURL,
       generateInfoGalleryLinks,
       generateNavigationLinks,
+      generateStickyHeadingContainer,
       getLinkThemeString,
       getThemeString,
       html,
@@ -46,7 +47,7 @@ export function write(group, {wikiData}) {
 
       main: {
         content: [
-          html.tag('h1',
+          generateStickyHeadingContainer(
             language.$('groupInfoPage.title', {
               group: group.name
             })),
@@ -65,6 +66,7 @@ export function write(group, {wikiData}) {
           ...html.fragment(
             group.albums && [
               html.tag('h2',
+                {class: ['content-heading']},
                 language.$('groupInfoPage.albumList.title')),
 
               html.tag('p',
diff --git a/src/page/listing.js b/src/page/listing.js
index cb297a89..fc643b11 100644
--- a/src/page/listing.js
+++ b/src/page/listing.js
@@ -32,6 +32,7 @@ export function write(listing, {wikiData}) {
     path: ['listing', listing.directory],
     page: (opts) => {
       const {
+        generateStickyHeadingContainer,
         getLinkThemeString,
         html,
         language,
@@ -45,7 +46,7 @@ export function write(listing, {wikiData}) {
 
         main: {
           content: [
-            html.tag('h1',
+            generateStickyHeadingContainer(
               language.$(titleKey)),
 
             ...html.fragment(
@@ -230,6 +231,7 @@ function generateLinkIndexForListings(currentListing, forSidebar, {
     : html.tag('dl',
         filteredByCondition.flatMap(({title, listings}) => [
           html.tag('dt',
+            {class: ['content-heading']},
             title({language})),
           html.tag('dd',
             genUL(listings)),
diff --git a/src/page/news.js b/src/page/news.js
index 62f94fb9..78e25f41 100644
--- a/src/page/news.js
+++ b/src/page/news.js
@@ -14,6 +14,7 @@ export function write(entry, {wikiData}) {
     path: ['newsEntry', entry.directory],
     page: ({
       generateNavigationLinks,
+      generateStickyHeadingContainer,
       html,
       language,
       link,
@@ -24,7 +25,7 @@ export function write(entry, {wikiData}) {
       main: {
         content:
           html.tag('div', {class: 'long-content'}, [
-            html.tag('h1',
+            generateStickyHeadingContainer(
               language.$('newsEntryPage.title', {
                 entry: entry.name,
               })),
@@ -58,6 +59,7 @@ export function writeTargetless({wikiData}) {
     type: 'page',
     path: ['newsIndex'],
     page: ({
+      generateStickyHeadingContainer,
       html,
       language,
       link,
@@ -70,7 +72,7 @@ export function writeTargetless({wikiData}) {
           html.tag('div',
             {class: ['long-content', 'news-index']},
             [
-              html.tag('h1',
+              generateStickyHeadingContainer(
                 language.$('newsIndex.title')),
 
               ...newsData.map(entry =>
diff --git a/src/page/track.js b/src/page/track.js
index 18fd7262..09c472ac 100644
--- a/src/page/track.js
+++ b/src/page/track.js
@@ -162,6 +162,7 @@ export function write(track, {wikiData}) {
       generateChronologyLinks,
       generateCoverLink,
       generateNavigationLinks,
+      generateStickyHeadingContainer,
       generateTrackListDividedByGroups,
       getAlbumStylesheet,
       getArtistString,
@@ -229,7 +230,8 @@ export function write(track, {wikiData}) {
               tags: track.artTags,
             }),
 
-            html.tag('h1', language.$('trackPage.title', {track: track.name})),
+            generateStickyHeadingContainer(
+              language.$('trackPage.title', {track: track.name})),
 
             html.tag('p',
               {
@@ -282,7 +284,9 @@ export function write(track, {wikiData}) {
 
             ...html.fragment(
               !empty(otherReleases) && [
-                html.tag('p', language.$('releaseInfo.alsoReleasedAs')),
+                html.tag('p', {class: ['content-heading']},
+                  language.$('releaseInfo.alsoReleasedAs')),
+
                 html.tag('ul', otherReleases.map(track =>
                   html.tag('li', language.$('releaseInfo.alsoReleasedAs.item', {
                     track: link.track(track),
@@ -292,7 +296,9 @@ export function write(track, {wikiData}) {
 
             ...html.fragment(
               !empty(contributorContribs) && [
-                html.tag('p', language.$('releaseInfo.contributors')),
+                html.tag('p', {class: ['content-heading']},
+                  language.$('releaseInfo.contributors')),
+
                 html.tag('ul', contributorContribs.map(contrib =>
                   html.tag('li', getArtistString([contrib], {
                     showContrib: true,
@@ -302,17 +308,21 @@ export function write(track, {wikiData}) {
 
             ...html.fragment(
               !empty(referencedTracks) && [
-                html.tag('p', language.$('releaseInfo.tracksReferenced', {
-                  track: html.tag('i', track.name),
-                })),
+                html.tag('p', {class: ['content-heading']},
+                  language.$('releaseInfo.tracksReferenced', {
+                    track: html.tag('i', track.name),
+                  })),
+
                 html.tag('ul', referencedTracks.map(getTrackItem)),
               ]),
 
             ...html.fragment(
               !empty(referencedByTracks) && [
-                html.tag('p', language.$('releaseInfo.tracksThatReference', {
-                  track: html.tag('i', track.name),
-                })),
+                html.tag('p', {class: ['content-heading']},
+                  language.$('releaseInfo.tracksThatReference', {
+                    track: html.tag('i', track.name),
+                  })),
+
                 generateTrackListDividedByGroups(referencedByTracks, {
                   getTrackItem,
                   wikiData,
@@ -321,26 +331,32 @@ export function write(track, {wikiData}) {
 
             ...html.fragment(
               !empty(sampledTracks) && [
-                html.tag('p', language.$('releaseInfo.tracksSampled', {
-                  track: html.tag('i', track.name),
-                })),
+                html.tag('p', {class: ['content-heading']},
+                  language.$('releaseInfo.tracksSampled', {
+                    track: html.tag('i', track.name),
+                  })),
+
                 html.tag('ul', sampledTracks.map(getTrackItem)),
               ]),
 
             ...html.fragment(
               !empty(sampledByTracks) && [
-                html.tag('p', language.$('releaseInfo.tracksThatSample', {
-                  track: html.tag('i', track.name),
-                })),
+                html.tag('p', {class: ['content-heading']},
+                  language.$('releaseInfo.tracksThatSample', {
+                    track: html.tag('i', track.name),
+                  })),
+
                 html.tag('ul', sampledByTracks.map(getTrackItem)),
               ]),
 
             ...html.fragment(
               wikiInfo.enableFlashesAndGames &&
               !empty(flashesThatFeature) && [
-                html.tag('p', language.$('releaseInfo.flashesThatFeature', {
-                  track: `<i>${track.name}</i>`,
-                })),
+                html.tag('p', {class: ['content-heading']},
+                  language.$('releaseInfo.flashesThatFeature', {
+                    track: html.tag('i', track.name),
+                  })),
+
                 html.tag('ul', flashesThatFeature.map(({flash, as}) =>
                   html.tag('li',
                     {class: as !== track && 'rerelease'},
@@ -356,13 +372,17 @@ export function write(track, {wikiData}) {
 
             ...html.fragment(
               track.lyrics && [
-                html.tag('p', language.$('releaseInfo.lyrics')),
+                html.tag('p', {class: ['content-heading']},
+                  language.$('releaseInfo.lyrics')),
+
                 html.tag('blockquote', transformLyrics(track.lyrics)),
               ]),
 
             ...html.fragment(
               hasCommentary && [
-                html.tag('p', language.$('releaseInfo.artistCommentary')),
+                html.tag('p', {class: ['content-heading']},
+                  language.$('releaseInfo.artistCommentary')),
+
                 html.tag('blockquote', generateCommentary({
                   link,
                   language,