data-ize various page content calls

* page.cover replaces calls to generateCoverLink
* page.main.headingMode replaces calls to
  generateStickyHeadingContainer or html.tag('h1')
* page.main.classes: ['long-content'] replaces hard-
  coded calls to html.tag('div', {class: 'long-content'})

14 files changed, 162 insertions, 203 deletions

diff --git a/src/page/album-commentary.js b/src/page/album-commentary.js
index 74eee2b0..b8daee41 100644
--- a/src/page/album-commentary.js
+++ b/src/page/album-commentary.js
@@ -22,7 +22,6 @@ export function write(album) {
     type: 'page',
     path: ['albumCommentary', album.directory],
     page: ({
-      generateStickyHeadingContainer,
       getAlbumStylesheet,
       getLinkThemeString,
       getThemeString,
@@ -36,13 +35,10 @@ export function write(album) {
       theme: getThemeString(album.color),
 
       main: {
-        content: html.tag('div', {class: 'long-content'}, [
-          generateStickyHeadingContainer({
-            title: language.$('albumCommentaryPage.title', {
-              album: album.name,
-            }),
-          }),
+        classes: ['long-content'],
+        headingMode: 'sticky',
 
+        content: [
           html.tag('p',
             language.$('albumCommentaryPage.infoLine', {
               words: html.tag('b', language.formatWordCount(words, {unit: true})),
@@ -68,7 +64,7 @@ export function write(album) {
               {style: getLinkThemeString(track.color)},
               transformMultiline(track.commentary)),
           ])
-        ]),
+        ],
       },
 
       nav: generateAlbumExtrasPageNav(album, 'commentary', {
@@ -110,20 +106,24 @@ export function writeTargetless({wikiData}) {
       title: language.$('commentaryIndex.title'),
 
       main: {
-        content: html.tag('div', {class: 'long-content'}, [
-          html.tag('h1', language.$('commentaryIndex.title')),
+        classes: ['long-content'],
+        headingMode: 'static',
+
+        content: [
           html.tag('p', language.$('commentaryIndex.infoLine', {
             words: html.tag('b', language.formatWordCount(totalWords, {unit: true})),
             entries: html.tag('b', language.countCommentaryEntries(totalEntries, {unit: true})),
           })),
+
           html.tag('p', language.$('commentaryIndex.albumList.title')),
+
           html.tag('ul', data.map(({album, entries, words}) =>
             html.tag('li', language.$('commentaryIndex.albumList.item', {
               album: link.albumCommentary(album),
               words: language.formatWordCount(words, {unit: true}),
               entries: language.countCommentaryEntries(entries.length, {unit: true}),
-            }))))
-        ]),
+            })))),
+        ],
       },
 
       nav: {simple: true},
diff --git a/src/page/album.js b/src/page/album.js
index 906c02ea..95180ecd 100644
--- a/src/page/album.js
+++ b/src/page/album.js
@@ -128,9 +128,7 @@ export function write(album, {wikiData}) {
       generateAdditionalFilesShortcut,
       generateAdditionalFilesList,
       generateChronologyLinks,
-      generateCoverLink,
       generateNavigationLinks,
-      generateStickyHeadingContainer,
       getAlbumCover,
       getAlbumStylesheet,
       getArtistString,
@@ -151,8 +149,6 @@ export function write(album, {wikiData}) {
         link,
       });
 
-      const cover = getAlbumCover(album);
-
       return {
         title: language.$('albumPage.title', {album: album.name}),
         stylesheet: getAlbumStylesheet(album),
@@ -195,22 +191,16 @@ export function write(album, {wikiData}) {
           position: 'top',
         },
 
-        main: {
-          content: [
-            generateStickyHeadingContainer({
-              title: language.$('albumPage.title', {album: album.name}),
-
-              coverSrc: cover,
-              coverAlt: language.$('misc.alt.albumCover'),
-              coverTags: album.artTags,
-            }),
+        cover: {
+          src: getAlbumCover(album),
+          alt: language.$('misc.alt.albumCover'),
+          artTags: album.artTags,
+        },
 
-            cover && generateCoverLink({
-              src: cover,
-              alt: language.$('misc.alt.albumCover'),
-              tags: album.artTags,
-            }),
+        main: {
+          headingMode: 'sticky',
 
+          content: [
             html.tag('p',
               {
                 [html.onlyIfContent]: true,
@@ -254,6 +244,7 @@ export function write(album, {wikiData}) {
                     date: language.formatDate(album.date),
                   }),
 
+                album.hasCoverArt &&
                 album.coverArtDate &&
                 +album.coverArtDate !== +album.date &&
                   language.$('releaseInfo.artReleased', {
@@ -434,12 +425,9 @@ export function write(album, {wikiData}) {
 
       main: {
         classes: ['top-index'],
-        content: [
-          html.tag('h1',
-            language.$('albumGalleryPage.title', {
-              album: album.name,
-            })),
+        headingMode: 'static',
 
+        content: [
           html.tag('p',
             {class: 'quick-info'},
             (album.date
diff --git a/src/page/artist.js b/src/page/artist.js
index 235fe113..bce81b17 100644
--- a/src/page/artist.js
+++ b/src/page/artist.js
@@ -319,9 +319,7 @@ export function write(artist, {wikiData}) {
     path: ['artist', artist.directory],
     page: ({
       fancifyURL,
-      generateCoverLink,
       generateInfoGalleryLinks,
-      generateStickyHeadingContainer,
       getArtistAvatar,
       getArtistString,
       html,
@@ -339,20 +337,15 @@ export function write(artist, {wikiData}) {
       return {
         title: language.$('artistPage.title', {artist: name}),
 
-        main: {
-          content: [
-            artist.hasAvatar &&
-              generateCoverLink({
-                src: getArtistAvatar(artist),
-                alt: language.$('misc.alt.artistAvatar'),
-              }),
+        cover: artist.hasAvatar && {
+          src: getArtistAvatar(artist),
+          alt: language.$('misc.alt.artistAvatar'),
+        },
 
-            generateStickyHeadingContainer({
-              title: language.$('artistPage.title', {
-                artist: name,
-              }),
-            }),
+        main: {
+          headingMode: 'sticky',
 
+          content: [
             ...html.fragment(
               contextNotes && [
                 html.tag('p',
@@ -608,12 +601,9 @@ export function write(artist, {wikiData}) {
 
       main: {
         classes: ['top-index'],
-        content: [
-          html.tag('h1',
-            language.$('artistGalleryPage.title', {
-              artist: name,
-            })),
+        headingMode: 'static',
 
+        content: [
           html.tag('p',
             {class: 'quick-info'},
             language.$('artistGalleryPage.infoLine', {
diff --git a/src/page/flash.js b/src/page/flash.js
index 8cffdcd5..b06ea4f9 100644
--- a/src/page/flash.js
+++ b/src/page/flash.js
@@ -18,9 +18,7 @@ export function write(flash, {wikiData}) {
     page: ({
       fancifyFlashURL,
       generateChronologyLinks,
-      generateCoverLink,
       generateNavigationLinks,
-      generateStickyHeadingContainer,
       getArtistString,
       getFlashCover,
       getThemeString,
@@ -38,19 +36,15 @@ export function write(flash, {wikiData}) {
           ],
         }),
 
-      main: {
-        content: [
-          generateCoverLink({
-            src: getFlashCover(flash),
-            alt: language.$('misc.alt.flashArt'),
-          }),
+      cover: {
+        src: getFlashCover(flash),
+        alt: language.$('misc.alt.flashArt'),
+      },
 
-          generateStickyHeadingContainer({
-            title: language.$('flashPage.title', {
-              flash: flash.name,
-            }),
-          }),
+      main: {
+        headingMode: 'sticky',
 
+        content: [
           html.tag('p',
             language.$('releaseInfo.released', {
               date: language.formatDate(flash.date),
@@ -144,30 +138,25 @@ export function writeTargetless({
 
       main: {
         classes: ['flash-index'],
-        content: [
-          html.tag('h1',
-            language.$('flashIndex.title')),
+        headingMode: 'static',
 
-          html.tag('div',
-            {class: 'long-content'},
-            [
-              html.tag('p',
-                {class: 'quick-info'},
-                language.$('misc.jumpTo')),
-
-              html.tag('ul',
-                {class: 'quick-info'},
-                flashActData
-                  .filter(act => act.jump)
-                  .map(({anchor, jump, jumpColor}) =>
-                    html.tag('li',
-                      html.tag('a',
-                        {
-                          href: '#' + anchor,
-                          style: getLinkThemeString(jumpColor),
-                        },
-                        jump)))),
-            ]),
+        content: [
+          html.tag('p',
+            {class: 'quick-info'},
+            language.$('misc.jumpTo')),
+
+          html.tag('ul',
+            {class: 'quick-info'},
+            flashActData
+              .filter(act => act.jump)
+              .map(({anchor, jump, jumpColor}) =>
+                html.tag('li',
+                  html.tag('a',
+                    {
+                      href: '#' + anchor,
+                      style: getLinkThemeString(jumpColor),
+                    },
+                    jump)))),
 
           ...flashActData.flatMap((act, i) => [
             html.tag('h2',
diff --git a/src/page/group.js b/src/page/group.js
index 6bfd1532..bd85370a 100644
--- a/src/page/group.js
+++ b/src/page/group.js
@@ -32,7 +32,6 @@ export function write(group, {wikiData}) {
       fancifyURL,
       generateInfoGalleryLinks,
       generateNavigationLinks,
-      generateStickyHeadingContainer,
       getLinkThemeString,
       getThemeString,
       html,
@@ -46,13 +45,9 @@ export function write(group, {wikiData}) {
       theme: getThemeString(group.color),
 
       main: {
-        content: [
-          generateStickyHeadingContainer({
-            title: language.$('groupInfoPage.title', {
-              group: group.name
-            }),
-          }),
+        headingMode: 'sticky',
 
+        content: [
           !empty(group.urls) &&
             html.tag('p',
               language.$('releaseInfo.visitOn', {
@@ -145,12 +140,9 @@ export function write(group, {wikiData}) {
 
       main: {
         classes: ['top-index'],
-        content: [
-          html.tag('h1',
-            language.$('groupGalleryPage.title', {
-              group: group.name,
-            })),
+        headingMode: 'static',
 
+        content: [
           getCarouselHTML({
             items: group.featuredAlbums.slice(0, 12 + 1),
             srcFn: getAlbumCover,
diff --git a/src/page/homepage.js b/src/page/homepage.js
index cb1e1da1..94b0b65b 100644
--- a/src/page/homepage.js
+++ b/src/page/homepage.js
@@ -82,7 +82,9 @@ export function writeTargetless({wikiData}) {
 
       main: {
         classes: ['top-index'],
-        content: html.fragment([
+        headingMode: 'none',
+
+        content: [
           html.tag('h1',
             wikiInfo.name),
 
@@ -134,7 +136,7 @@ export function writeTargetless({wikiData}) {
                           })),
                     ]),
                 ]))),
-        ]),
+        ],
       },
 
       sidebarLeft: homepageLayout.sidebarContent && {
diff --git a/src/page/listing.js b/src/page/listing.js
index dce38526..e831daba 100644
--- a/src/page/listing.js
+++ b/src/page/listing.js
@@ -32,7 +32,6 @@ export function write(listing, {wikiData}) {
     path: ['listing', listing.directory],
     page: (opts) => {
       const {
-        generateStickyHeadingContainer,
         getLinkThemeString,
         html,
         language,
@@ -45,11 +44,9 @@ export function write(listing, {wikiData}) {
         title: language.$(titleKey),
 
         main: {
-          content: [
-            generateStickyHeadingContainer({
-              title: language.$(titleKey),
-            }),
+          headingMode: 'sticky',
 
+          content: [
             ...html.fragment(
               listing.html &&
                 (listing.data
@@ -109,10 +106,9 @@ export function writeTargetless({wikiData}) {
       title: language.$('listingIndex.title'),
 
       main: {
-        content: [
-          html.tag('h1',
-            language.$('listingIndex.title')),
+        headingMode: 'static',
 
+        content: [
           html.tag('p',
             language.$('listingIndex.infoLine', {
               wiki: wikiInfo.name,
diff --git a/src/page/news.js b/src/page/news.js
index 61a52dc0..020b9a60 100644
--- a/src/page/news.js
+++ b/src/page/news.js
@@ -14,7 +14,6 @@ export function write(entry, {wikiData}) {
     path: ['newsEntry', entry.directory],
     page: ({
       generateNavigationLinks,
-      generateStickyHeadingContainer,
       html,
       language,
       link,
@@ -23,22 +22,16 @@ export function write(entry, {wikiData}) {
       title: language.$('newsEntryPage.title', {entry: entry.name}),
 
       main: {
+        classes: ['long-content'],
+        headingMode: 'sticky',
+
         content: [
-          generateStickyHeadingContainer({
-            class: ['long-content'],
-            title: language.$('newsEntryPage.title', {
-              entry: entry.name,
-            }),
-          }),
-
-          html.tag('div', {class: 'long-content'}, [
-            html.tag('p',
-              language.$('newsEntryPage.published', {
-                date: language.formatDate(entry.date),
-              })),
-
-            transformMultiline(entry.content),
-          ]),
+          html.tag('p',
+            language.$('newsEntryPage.published', {
+              date: language.formatDate(entry.date),
+            })),
+
+          transformMultiline(entry.content),
         ],
       },
 
@@ -62,7 +55,6 @@ export function writeTargetless({wikiData}) {
     type: 'page',
     path: ['newsIndex'],
     page: ({
-      generateStickyHeadingContainer,
       html,
       language,
       link,
@@ -71,37 +63,30 @@ export function writeTargetless({wikiData}) {
       title: language.$('newsIndex.title'),
 
       main: {
-        content: [
-          generateStickyHeadingContainer({
-            class: ['long-content'],
-            title: language.$('newsIndex.title'),
-          }),
-
-          html.tag('div',
-            {class: ['long-content', 'news-index']},
-            [
-              ...newsData.map(entry =>
-                html.tag('article',
-                  {id: entry.directory},
-                  [
-                    html.tag('h2', [
-                      html.tag('time',
-                        language.formatDate(entry.date)),
-                      link.newsEntry(entry),
-                    ]),
-
-                    transformMultiline(entry.contentShort),
-
-                    entry.contentShort !== entry.content &&
-                      html.tag('p',
-                        link.newsEntry(entry, {
-                          text: language.$(
-                            'newsIndex.entry.viewRest'
-                          ),
-                        })),
-                  ])),
-            ]),
-        ],
+        classes: ['long-content', 'news-index'],
+        headingMode: 'sticky',
+
+        content:
+          newsData.map(entry =>
+            html.tag('article',
+              {id: entry.directory},
+              [
+                html.tag('h2', [
+                  html.tag('time',
+                    language.formatDate(entry.date)),
+                  link.newsEntry(entry),
+                ]),
+
+                transformMultiline(entry.contentShort),
+
+                entry.contentShort !== entry.content &&
+                  html.tag('p',
+                    link.newsEntry(entry, {
+                      text: language.$(
+                        'newsIndex.entry.viewRest'
+                      ),
+                    })),
+              ])),
       },
 
       nav: {simple: true},
diff --git a/src/page/static.js b/src/page/static.js
index 1689d16b..a82bb9e3 100644
--- a/src/page/static.js
+++ b/src/page/static.js
@@ -11,22 +11,16 @@ export function write(staticPage) {
     type: 'page',
     path: ['staticPage', staticPage.directory],
     page: ({
-      generateStickyHeadingContainer,
-      html,
       transformMultiline,
     }) => ({
       title: staticPage.name,
       stylesheet: staticPage.stylesheet,
 
       main: {
-        content: [
-          generateStickyHeadingContainer({
-            class: ['long-content'],
-            title: staticPage.name,
-          }),
-          html.tag('div', {class: 'long-content'},
-            transformMultiline(staticPage.content)),
-        ],
+        classes: ['long-content'],
+        headingMode: 'sticky',
+
+        content: transformMultiline(staticPage.content),
       },
 
       nav: {simple: true},
diff --git a/src/page/tag.js b/src/page/tag.js
index da4f194a..c6107062 100644
--- a/src/page/tag.js
+++ b/src/page/tag.js
@@ -34,12 +34,9 @@ export function write(tag, {wikiData}) {
 
       main: {
         classes: ['top-index'],
-        content: [
-          html.tag('h1',
-            language.$('tagPage.title', {
-              tag: tag.name,
-            })),
+        headingMode: 'static',
 
+        content: [
           html.tag('p',
             {class: 'quick-info'},
             language.$('tagPage.infoLine', {
diff --git a/src/page/track.js b/src/page/track.js
index 94c9c40a..af9e9ab1 100644
--- a/src/page/track.js
+++ b/src/page/track.js
@@ -160,9 +160,7 @@ export function write(track, {wikiData}) {
       absoluteTo,
       fancifyURL,
       generateChronologyLinks,
-      generateCoverLink,
       generateNavigationLinks,
-      generateStickyHeadingContainer,
       generateTrackListDividedByGroups,
       getAlbumStylesheet,
       getArtistString,
@@ -183,7 +181,6 @@ export function write(track, {wikiData}) {
         language,
         link,
       });
-      const cover = getTrackCover(track);
 
       return {
         title: language.$('trackPage.title', {track: track.name}),
@@ -222,22 +219,16 @@ export function write(track, {wikiData}) {
         },
         */
 
-        main: {
-          content: [
-            generateStickyHeadingContainer({
-              title: language.$('trackPage.title', {track: track.name}),
-
-              coverSrc: cover,
-              coverAlt: language.$('misc.alt.trackCover'),
-              coverTags: track.artTags,
-            }),
+        cover: {
+          src: getTrackCover(track),
+          alt: language.$('misc.alt.trackCover'),
+          artTags: track.artTags,
+        },
 
-            cover && generateCoverLink({
-              src: cover,
-              alt: language.$('misc.alt.trackCover'),
-              tags: track.artTags,
-            }),
+        main: {
+          headingMode: 'sticky',
 
+          content: [
             html.tag('p',
               {
                 [html.onlyIfContent]: true,
@@ -265,7 +256,7 @@ export function write(track, {wikiData}) {
                     date: language.formatDate(track.date),
                   }),
 
-                cover &&
+                track.hasCoverArt &&
                 track.coverArtDate &&
                 +track.coverArtDate !== +track.date &&
                   language.$('releaseInfo.artReleased', {
diff --git a/src/static/site2.css b/src/static/site2.css
index 287bbd66..cc853b65 100644
--- a/src/static/site2.css
+++ b/src/static/site2.css
@@ -626,7 +626,8 @@ blockquote {
   margin-right: 0;
 }
 
-.long-content {
+main.long-content .main-content-container,
+main.long-content > h1 {
   padding-left: 12%;
   padding-right: 12%;
 }
@@ -1149,13 +1150,13 @@ html[data-url-key="localized.home"] .carousel-container {
   transform: translateY(-5px);
 }
 
-.content-sticky-heading-container.long-content {
+main.long-content .content-sticky-heading-container {
   padding-left: 0;
   padding-right: 0;
 }
 
-.content-sticky-heading-container.long-content .content-sticky-heading-row,
-.content-sticky-heading-container.long-content .content-sticky-subheading-row {
+main.long-content .content-sticky-heading-container .content-sticky-heading-row,
+main.long-content .content-sticky-heading-container .content-sticky-subheading-row {
   padding-left: calc(0.12 * (100% - 2 * var(--content-padding)) + var(--content-padding));
   padding-right: calc(0.12 * (100% - 2 * var(--content-padding)) + var(--content-padding));
 }
diff --git a/src/upd8.js b/src/upd8.js
index 21413a17..5d507407 100755
--- a/src/upd8.js
+++ b/src/upd8.js
@@ -79,7 +79,7 @@ import FileSizePreloader from './file-size-preloader.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-const CACHEBUST = 17;
+const CACHEBUST = 18;
 
 let COMMIT;
 try {
diff --git a/src/write/page-template.js b/src/write/page-template.js
index 33b36d5f..e4bd9774 100644
--- a/src/write/page-template.js
+++ b/src/write/page-template.js
@@ -49,6 +49,8 @@ export function generateDocumentHTML(pageInfo, {
   cachebust,
   defaultLanguage,
   developersComment,
+  generateCoverLink,
+  generateStickyHeadingContainer,
   getThemeString,
   language,
   languages,
@@ -74,6 +76,7 @@ export function generateDocumentHTML(pageInfo, {
     // missing properties are auto-filled, see below!
     body = {},
     banner = {},
+    cover = {},
     main = {},
     sidebarLeft = {},
     sidebarRight = {},
@@ -95,6 +98,11 @@ export function generateDocumentHTML(pageInfo, {
 
   main.classes ??= [];
   main.content ??= '';
+  main.headingMode ??= 'none';
+
+  cover.src ??= '';
+  cover.alt ??= '';
+  cover.artTags ??= [];
 
   sidebarLeft ??= {};
   sidebarRight ??= {};
@@ -139,13 +147,39 @@ export function generateDocumentHTML(pageInfo, {
     sidebarLeft.collapse !== false && sidebarRight.collapse !== false;
 
   const mainHTML =
-    main.content &&
-      html.tag('main',
+    html.tag('main', {
+      id: 'content',
+      class: main.classes,
+    }, [
+      ...html.fragment(
+          !title ?
+            null
+        : main.headingMode === 'sticky' ?
+            generateStickyHeadingContainer({
+              coverSrc: cover.src,
+              coverAlt: cover.alt,
+              coverArtTags: cover.artTags,
+              title,
+            })
+        : main.headingMode === 'static' ?
+            html.tag('h1', title)
+        : null),
+
+      ...html.fragment(
+        cover.src &&
+          generateCoverLink({
+            src: cover.src,
+            alt: cover.alt,
+            tags: cover.artTags,
+          })),
+
+      html.tag('div',
         {
-          id: 'content',
-          class: main.classes,
+          [html.onlyIfContent]: true,
+          class: 'main-content-container',
         },
-        main.content);
+        main.content),
+    ]);
 
   const footerHTML =
     html.tag('footer',