diff options
| -rw-r--r-- | static/site.css | 17 | ||||
| -rw-r--r-- | strings-default.json | 3 | ||||
| -rwxr-xr-x | upd8.js | 50 |
3 files changed, 64 insertions, 6 deletions
diff --git a/static/site.css b/static/site.css index 3f66c9ea..59c9f624 100644 --- a/static/site.css +++ b/static/site.css @@ -34,11 +34,26 @@ body::before { max-width: 1100px; margin: 10px auto 50px; - padding: 15px; + padding: 15px 0; box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); } +#page-container > * { + margin-left: 15px; + margin-right: 15px; +} + +#banner { + margin: 10px 0; + width: 100%; + display: block; +} + +#banner.dim { + filter: brightness(0.8); +} + a { color: var(--primary-color); text-decoration: none; diff --git a/strings-default.json b/strings-default.json index 9df60538..e9dbf293 100644 --- a/strings-default.json +++ b/strings-default.json @@ -73,6 +73,7 @@ "releaseInfo.by": "By {ARTISTS}.", "releaseInfo.coverArtBy": "Cover art by {ARTISTS}.", "releaseInfo.wallpaperArtBy": "Wallpaper art by {ARTISTS}.", + "releaseInfo.bannerArtBy": "Banner art by {ARTISTS}.", "releaseInfo.released": "Released {DATE}.", "releaseInfo.artReleased": "Art released {DATE}.", "releaseInfo.duration": "Duration: {DURATION}.", @@ -102,6 +103,7 @@ "trackList.item.withArtists.by": "by {ARTISTS}", "trackList.item.rerelease": "{TRACK} (re-release)", "misc.alt.albumCover": "album cover", + "misc.alt.albumBanner": "album banner", "misc.alt.trackCover": "track cover", "misc.alt.artistAvatar": "artist avatar", "misc.alt.flashArt": "flash art", @@ -170,6 +172,7 @@ "artistPage.creditList.entry.track.withDuration": "({DURATION}) {TRACK}", "artistPage.creditList.entry.album.coverArt": "(cover art)", "artistPage.creditList.entry.album.wallpaperArt": "(wallpaper art)", + "artistPage.creditList.entry.album.bannerArt": "(banner art)", "artistPage.creditList.entry.album.commentary": "(album commentary)", "artistPage.creditList.entry.flash": "{FLASH}", "artistPage.creditList.entry.rerelease": "{ENTRY} (re-release)", diff --git a/upd8.js b/upd8.js index cb0271a1..8b0c6ecc 100755 --- a/upd8.js +++ b/upd8.js @@ -131,7 +131,7 @@ const genThumbs = require('./gen-thumbs'); const C = require('./common/common'); -const CACHEBUST = 4; +const CACHEBUST = 5; const WIKI_INFO_FILE = 'wiki-info.txt'; const HOMEPAGE_INFO_FILE = 'homepage.txt'; @@ -221,6 +221,7 @@ const urlSpec = { media: 'media/<>', albumCover: 'media/album-art/<>/cover.jpg', albumWallpaper: 'media/album-art/<>/bg.jpg', + albumBanner: 'media/album-art/<>/banner.jpg', trackCover: 'media/album-art/<>/<>.jpg', artistAvatar: 'media/artist-avatar/<>.jpg', flashArt: 'media/flash-art/<>.jpg' @@ -1167,6 +1168,7 @@ async function processAlbumDataFile(file) { album.name = getBasicField(albumSection, 'Album'); album.artists = getContributionField(albumSection, 'Artists') || getContributionField(albumSection, 'Artist'); album.wallpaperArtists = getContributionField(albumSection, 'Wallpaper Art'); + album.bannerArtists = getContributionField(albumSection, 'Banner Art'); album.wallpaperStyle = getMultilineField(albumSection, 'Wallpaper Style'); album.date = getBasicField(albumSection, 'Date'); album.trackArtDate = getBasicField(albumSection, 'Track Art Date') || album.date; @@ -2012,6 +2014,7 @@ writePage.html = (pageFn, {paths, strings, to}) => { // missing properties are auto-filled, see below! body = {}, + banner = {}, main = {}, sidebarLeft = {}, sidebarRight = {}, @@ -2023,6 +2026,10 @@ writePage.html = (pageFn, {paths, strings, to}) => { theme = theme || getThemeString(wikiInfo); + banner.classes ??= []; + banner.src ??= ''; + banner.position ??= ''; + main.classes ??= []; main.content ??= ''; @@ -2142,8 +2149,17 @@ writePage.html = (pageFn, {paths, strings, to}) => { </nav> `; + const bannerHTML = banner.position && banner.src && fixWS` + <img ${attributes({ + id: 'banner', + src: banner.src, + alt: banner.alt + })} ${classes(...banner.classes || [])}> + `; + const layoutHTML = [ navHTML, + banner.position === 'top' && bannerHTML, (sidebarLeftHTML || sidebarRightHTML) ? fixWS` <div ${classes('layout-columns', !collapseSidebars && 'vertical-when-thin')}> ${sidebarLeftHTML} @@ -2151,6 +2167,7 @@ writePage.html = (pageFn, {paths, strings, to}) => { ${sidebarRightHTML} </div> ` : mainHTML, + banner.position === 'bottom' && bannerHTML, footerHTML ].filter(Boolean).join('\n'); @@ -2634,6 +2651,12 @@ function writeAlbumPage(album) { `--album-directory: ${album.directory}` ]), + banner: { + src: to.albumBanner(album.directory), + alt: strings('misc.alt.albumBanner'), + position: 'top' + }, + main: { content: fixWS` ${generateCoverLink({ @@ -2666,6 +2689,13 @@ function writeAlbumPage(album) { showIcons: true }) }), + album.bannerArtists && strings('releaseInfo.bannerArtBy', { + artists: getArtistString(album.bannerArtists, { + strings, to, + showContrib: true, + showIcons: true + }) + }), strings('releaseInfo.released', { date: strings.count.date(album.date) }), @@ -2827,6 +2857,13 @@ function writeTrackPage(track) { `--track-directory: ${track.directory}` ]), + banner: { + classes: ['dim'], + src: to.albumBanner(track.album.directory), + alt: strings('misc.alt.albumBanner'), + position: 'bottom' + }, + main: { content: fixWS` ${generateCoverLink({ @@ -3003,7 +3040,7 @@ function writeArtistPage(artist) { note = '' } = artist; - const artThingsAll = C.sortByDate(unique([...artist.albums.asCoverArtist, ...artist.albums.asWallpaperArtist, ...artist.tracks.asCoverArtist])); + const artThingsAll = C.sortByDate(unique([...artist.albums.asCoverArtist, ...artist.albums.asWallpaperArtist, ...artist.albums.asBannerArtist, ...artist.tracks.asCoverArtist])); const artThingsGallery = C.sortByDate([...artist.albums.asCoverArtist, ...artist.tracks.asCoverArtist]); const commentaryThings = C.sortByDate([...artist.albums.asCommentator, ...artist.tracks.asCommentator]); @@ -3016,7 +3053,7 @@ function writeArtistPage(artist) { }); const artListChunks = chunkByProperties(artThingsAll.flatMap(thing => - (['coverArtists', 'wallpaperArtists'] + (['coverArtists', 'wallpaperArtists', 'bannerArtists'] .map(key => getArtistsAndContrib(thing, key)) .filter(({ contrib }) => contrib) .map(props => ({ @@ -3245,6 +3282,7 @@ function writeArtistPage(artist) { }) : `<i>${strings('artistPage.creditList.entry.album.' + { wallpaperArtists: 'wallpaperArt', + bannerArtists: 'bannerArt', coverArtists: 'coverArt' }[key])}</i>`), ...props @@ -3712,6 +3750,7 @@ const listingSpec = [ artist.tracks.asCoverArtist.length + artist.albums.asCoverArtist.length + artist.albums.asWallpaperArtist.length + + artist.albums.asBannerArtist.length + (wikiInfo.features.flashesAndGames ? artist.flashes.asContributor.length : 0) @@ -5639,7 +5678,7 @@ async function main() { contributionData = Array.from(new Set([ ...trackData.flatMap(track => [...track.artists || [], ...track.contributors || [], ...track.coverArtists || []]), - ...albumData.flatMap(album => [...album.artists || [], ...album.coverArtists || [], ...album.wallpaperArtists || []]), + ...albumData.flatMap(album => [...album.artists || [], ...album.coverArtists || [], ...album.wallpaperArtists || [], ...album.bannerArtists || []]), ...(flashData?.flatMap(flash => [...flash.contributors || []]) || []) ])); @@ -5724,7 +5763,8 @@ async function main() { asArtist: filterProp(albumData, 'artists'), asCommentator: filterCommentary(albumData), asCoverArtist: filterProp(albumData, 'coverArtists'), - asWallpaperArtist: filterProp(albumData, 'wallpaperArtists') + asWallpaperArtist: filterProp(albumData, 'wallpaperArtists'), + asBannerArtist: filterProp(albumData, 'bannerArtists') }; if (wikiInfo.features.flashesAndGames) { artist.flashes = { |