sticky subheadings

hsmusic · Dec 4, 2022 · 4a1997b · 4a1997b
1 parent 690a7b5
commit 4a1997b
Show file tree

Hide file tree

Showing 14 changed files with 272 additions and 49 deletions.
diff --git a/src/data/things/language.js b/src/data/things/language.js
@@ -296,7 +296,6 @@ export class Language extends Thing {
       return this.formatString('count.fileSize.bytes', {bytes});
     }
   }
-
 }
 
 const countHelper = (stringKey, argName = stringKey) =>

diff --git a/src/listing-spec.js b/src/listing-spec.js
@@ -96,6 +96,7 @@ const listingSpec = [
       html.tag('dl',
         data.flatMap(({dateAddedToWiki, chunk: albums}) => [
           html.tag('dt',
+            {class: ['content-heading']},
             language.$('listingPage.listAlbums.byDateAdded.date', {
               date: language.formatDate(dateAddedToWiki),
             })),
@@ -445,6 +446,7 @@ const listingSpec = [
       html.tag('dl',
         data.flatMap(({category, groups}) => [
           html.tag('dt',
+            {class: ['content-heading']},
             language.$('listingPage.listGroups.byCategory.category', {
               category: empty(groups)
                 ? category.name
@@ -594,6 +596,7 @@ const listingSpec = [
       html.tag('dl',
         data.flatMap(({album, tracks}) => [
           html.tag('dt',
+            {class: ['content-heading']},
             language.$('listingPage.listTracks.byAlbum.album', {
               album: link.album(album),
             })),
@@ -678,6 +681,7 @@ const listingSpec = [
       html.tag('dl',
         data.flatMap(({album, tracks}) => [
           html.tag('dt',
+            {class: ['content-heading']},
             language.$('listingPage.listTracks.byDurationInAlbum.album', {
               album: link.album(album),
             })),
@@ -731,6 +735,7 @@ const listingSpec = [
       html.tag('dl',
         data.flatMap(({album, chunk: tracks}) => [
           html.tag('dt',
+            {class: ['content-heading']},
             language.$('listingPage.listTracks.inFlashes.byAlbum.album', {
               album: link.album(album),
               date: language.formatDate(album.date),
@@ -766,6 +771,7 @@ const listingSpec = [
       html.tag('dl',
         data.flatMap(({flash, tracks}) => [
           html.tag('dt',
+            {class: ['content-heading']},
             language.$('listingPage.listTracks.inFlashes.byFlash.flash', {
               flash: link.flash(flash),
               date: language.formatDate(flash.date),
@@ -798,6 +804,7 @@ const listingSpec = [
       html.tag('dl',
         data.flatMap(({album, tracks}) => [
           html.tag('dt',
+            {class: ['content-heading']},
             language.$('listingPage.listTracks.withLyrics.album', {
               album: link.album(album),
               date: language.formatDate(album.date),

diff --git a/src/misc-templates.js b/src/misc-templates.js
@@ -50,7 +50,10 @@ function unbound_generateAdditionalFilesList(additionalFiles, {
 
   return html.fragment([
     html.tag('p',
-      {id: 'additional-files'},
+      {
+        id: 'additional-files',
+        class: ['content-heading'],
+      },
       language.$('releaseInfo.additionalFiles.heading', {
         additionalFiles: language.countAdditionalFiles(fileCount, {
           unit: true,
@@ -717,6 +720,19 @@ function unbound_generateNavigationLinks(current, {
   return language.formatUnitList(links);
 }
 
+// Sticky heading, ooooo
+
+function unbound_generateStickyHeadingContainer(headingContent, {
+  html,
+}) {
+  return html.tag('div',
+    {class: 'content-sticky-heading-container'},
+    [
+      html.tag('h1', headingContent),
+      html.tag('h2', {class: 'content-sticky-subheading'}),
+    ]);
+}
+
 // Footer stuff
 
 function unbound_getFooterLocalizationLinks(pathname, {
@@ -794,5 +810,7 @@ export {
   unbound_generateInfoGalleryLinks as generateInfoGalleryLinks,
   unbound_generateNavigationLinks as generateNavigationLinks,
 
+  unbound_generateStickyHeadingContainer as generateStickyHeadingContainer,
+
   unbound_getFooterLocalizationLinks as getFooterLocalizationLinks,
 }
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 =>