From 4a1997b0edd7de4b124c17e3cdeb1a47ecea1095 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Sat, 3 Dec 2022 21:28:15 -0400 Subject: sticky subheadings --- src/page/album-commentary.js | 30 ++++++++++++++-------- src/page/album.js | 11 +++++--- src/page/artist.js | 11 ++++---- src/page/flash.js | 5 +++- src/page/group.js | 4 ++- src/page/listing.js | 4 ++- src/page/news.js | 6 +++-- src/page/track.js | 60 +++++++++++++++++++++++++++++--------------- 8 files changed, 87 insertions(+), 44 deletions(-) (limited to 'src/page') 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: `${track.name}`, - })), + 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, -- cgit 1.3.0-6-gf8a5