From 76833c4083648d11780b0bbc9dd4de05479db240 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Wed, 25 Jan 2023 14:51:00 -0400 Subject: 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'}) --- src/page/album-commentary.js | 24 ++++++------- src/page/album.js | 34 ++++++------------- src/page/artist.js | 28 +++++---------- src/page/flash.js | 61 ++++++++++++++------------------- src/page/group.js | 16 +++------ src/page/homepage.js | 6 ++-- src/page/listing.js | 12 +++---- src/page/news.js | 81 ++++++++++++++++++-------------------------- src/page/static.js | 14 +++----- src/page/tag.js | 7 ++-- src/page/track.js | 27 +++++---------- src/static/site2.css | 9 ++--- src/upd8.js | 2 +- src/write/page-template.js | 44 +++++++++++++++++++++--- 14 files changed, 162 insertions(+), 203 deletions(-) diff --git a/src/page/album-commentary.js b/src/page/album-commentary.js index 74eee2b..b8daee4 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 906c02e..95180ec 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 235fe11..bce81b1 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 8cffdcd..b06ea4f 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 6bfd153..bd85370 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 cb1e1da..94b0b65 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 dce3852..e831dab 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 61a52dc..020b9a6 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 1689d16..a82bb9e 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 da4f194..c610706 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 94c9c40..af9e9ab 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 287bbd6..cc853b6 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 21413a1..5d50740 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 33b36d5..e4bd977 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', -- cgit 1.3.0-6-gf8a5