From f8a5593abfddc433890e0c8916d07698bb8c7279 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Mon, 31 Mar 2025 16:18:03 -0300 Subject: content, css: demo new cover artworks ui + data integration This is not remotely comprehensive and mostly just touches album and track info pages. --- .../dependencies/generateAlbumCoverArtwork.js | 16 +++++++- src/content/dependencies/generateAlbumInfoPage.js | 1 + .../dependencies/generateAlbumReleaseInfo.js | 18 --------- .../generateCoverArtworkArtTagDetails.js | 8 ++-- .../generateCoverArtworkArtistDetails.js | 4 +- .../generateCoverArtworkOriginDetails.js | 44 ++++++++++++++++++++++ .../dependencies/generateTrackCoverArtwork.js | 31 +++++++++------ src/content/dependencies/generateTrackInfoPage.js | 1 + .../dependencies/generateTrackReleaseInfo.js | 15 -------- src/static/css/site.css | 8 ++++ src/strings-default.yaml | 12 +++++- 11 files changed, 103 insertions(+), 55 deletions(-) create mode 100644 src/content/dependencies/generateCoverArtworkOriginDetails.js (limited to 'src') diff --git a/src/content/dependencies/generateAlbumCoverArtwork.js b/src/content/dependencies/generateAlbumCoverArtwork.js index ff7d2b85..7c546fc6 100644 --- a/src/content/dependencies/generateAlbumCoverArtwork.js +++ b/src/content/dependencies/generateAlbumCoverArtwork.js @@ -3,6 +3,7 @@ export default { 'generateCoverArtwork', 'generateCoverArtworkArtTagDetails', 'generateCoverArtworkArtistDetails', + 'generateCoverArtworkOriginDetails', 'generateCoverArtworkReferenceDetails', 'image', 'linkAlbumReferencedArtworks', @@ -18,11 +19,14 @@ export default { image: relation('image'), + originDetails: + relation('generateCoverArtworkOriginDetails', album.coverArtwork), + artTagDetails: - relation('generateCoverArtworkArtTagDetails', album.artTags), + relation('generateCoverArtworkArtTagDetails', album.coverArtwork), artistDetails: - relation('generateCoverArtworkArtistDetails', album.coverArtistContribs), + relation('generateCoverArtworkArtistDetails', album.coverArtwork), referenceDetails: relation('generateCoverArtworkReferenceDetails', @@ -60,6 +64,11 @@ export default { default: 'tags', }, + showOriginDetails: { + type: 'boolean', + default: false, + }, + showReferenceLinks: { type: 'boolean', default: false, @@ -81,6 +90,9 @@ export default { warnings: data.warnings, details: [ + slots.showOriginDetails && + relations.originDetails, + slots.details === 'tags' && relations.artTagDetails, diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js index aae56637..2af461a4 100644 --- a/src/content/dependencies/generateAlbumInfoPage.js +++ b/src/content/dependencies/generateAlbumInfoPage.js @@ -115,6 +115,7 @@ export default { cover: (relations.cover ? relations.cover.slots({ + showOriginDetails: true, showReferenceLinks: true, }) : null), diff --git a/src/content/dependencies/generateAlbumReleaseInfo.js b/src/content/dependencies/generateAlbumReleaseInfo.js index 217282c0..f9806c30 100644 --- a/src/content/dependencies/generateAlbumReleaseInfo.js +++ b/src/content/dependencies/generateAlbumReleaseInfo.js @@ -14,9 +14,6 @@ export default { relations.artistContributionsLine = relation('generateReleaseInfoContributionsLine', album.artistContribs); - relations.coverArtistContributionsLine = - relation('generateReleaseInfoContributionsLine', album.coverArtistContribs); - relations.wallpaperArtistContributionsLine = relation('generateReleaseInfoContributionsLine', album.wallpaperArtistContribs); @@ -73,21 +70,6 @@ export default { chronologyKind: 'album', }), - relations.coverArtistContributionsLine.slots({ - stringKey: capsule + '.coverArtBy', - chronologyKind: 'coverArt', - }), - - relations.wallpaperArtistContributionsLine.slots({ - stringKey: capsule + '.wallpaperArtBy', - chronologyKind: 'wallpaperArt', - }), - - relations.bannerArtistContributionsLine.slots({ - stringKey: capsule + '.bannerArtBy', - chronologyKind: 'bannerArt', - }), - language.$(capsule, 'released', { [language.onlyIfOptions]: ['date'], date: language.formatDate(data.date), diff --git a/src/content/dependencies/generateCoverArtworkArtTagDetails.js b/src/content/dependencies/generateCoverArtworkArtTagDetails.js index b4edbbdd..b20f599b 100644 --- a/src/content/dependencies/generateCoverArtworkArtTagDetails.js +++ b/src/content/dependencies/generateCoverArtworkArtTagDetails.js @@ -4,19 +4,19 @@ export default { contentDependencies: ['linkArtTagGallery'], extraDependencies: ['html'], - query: (artTags) => ({ + query: (artwork) => ({ linkableArtTags: - artTags + artwork.artTags .filter(tag => !tag.isContentWarning), }), - relations: (relation, query, _artTags) => ({ + relations: (relation, query, _artwork) => ({ artTagLinks: query.linkableArtTags .map(tag => relation('linkArtTagGallery', tag)), }), - data: (query, _artTags) => { + data: (query, _artwork) => { const seenShortNames = new Set(); const duplicateShortNames = new Set(); diff --git a/src/content/dependencies/generateCoverArtworkArtistDetails.js b/src/content/dependencies/generateCoverArtworkArtistDetails.js index 5b235353..b9dd1fe2 100644 --- a/src/content/dependencies/generateCoverArtworkArtistDetails.js +++ b/src/content/dependencies/generateCoverArtworkArtistDetails.js @@ -2,9 +2,9 @@ export default { contentDependencies: ['linkArtistGallery'], extraDependencies: ['html', 'language'], - relations: (relation, contributions) => ({ + relations: (relation, artwork) => ({ artistLinks: - contributions + artwork.artistContribs .map(contrib => contrib.artist) .map(artist => relation('linkArtistGallery', artist)), diff --git a/src/content/dependencies/generateCoverArtworkOriginDetails.js b/src/content/dependencies/generateCoverArtworkOriginDetails.js new file mode 100644 index 00000000..8b5a28ac --- /dev/null +++ b/src/content/dependencies/generateCoverArtworkOriginDetails.js @@ -0,0 +1,44 @@ +export default { + contentDependencies: ['generateArtistCredit'], + extraDependencies: ['html', 'language'], + + relations: (relation, artwork) => ({ + credit: + relation('generateArtistCredit', artwork.artistContribs, []), + }), + + data: (artwork) => ({ + date: + (artwork.date !== artwork.thing.date + ? artwork.date + : null), + }), + + generate: (data, relations, {html, language}) => + language.encapsulate('misc.coverArtwork', capsule => + html.tag('p', {class: 'image-details'}, + {[html.onlyIfContent]: true}, + {[html.joinChildren]: html.tag('br')}, + + {class: 'origin-details'}, + + [ + relations.credit.slots({ + showAnnotation: true, + showExternalLinks: true, + showChronology: true, + showWikiEdits: true, + + trimAnnotation: false, + + chronologyKind: 'coverArt', + + normalStringKey: capsule + '.artworkBy', + }), + + language.$(capsule, 'released', { + [language.onlyIfOptions]: ['date'], + date: language.formatDate(data.date), + }) + ])), +}; diff --git a/src/content/dependencies/generateTrackCoverArtwork.js b/src/content/dependencies/generateTrackCoverArtwork.js index 9153e2fc..937347a3 100644 --- a/src/content/dependencies/generateTrackCoverArtwork.js +++ b/src/content/dependencies/generateTrackCoverArtwork.js @@ -3,6 +3,7 @@ export default { 'generateCoverArtwork', 'generateCoverArtworkArtTagDetails', 'generateCoverArtworkArtistDetails', + 'generateCoverArtworkOriginDetails', 'generateCoverArtworkReferenceDetails', 'image', 'linkAlbum', @@ -15,13 +16,10 @@ export default { query: (track) => ({ artTags: (track.hasUniqueCoverArt - ? track.artTags - : track.album.artTags), - - coverArtistContribs: - (track.hasUniqueCoverArt - ? track.coverArtistContribs - : track.album.coverArtistContribs), + ? track.trackArtwork.artTags + : track.album.hasCoverArt + ? track.album.coverArtwork.artTags + : []), }), relations: (relation, query, track) => ({ @@ -31,13 +29,14 @@ export default { image: relation('image'), + originDetails: + relation('generateCoverArtworkOriginDetails', track.trackArtwork), + artTagDetails: - relation('generateCoverArtworkArtTagDetails', - query.artTags), + relation('generateCoverArtworkArtTagDetails', track.trackArtwork), artistDetails: - relation('generateCoverArtworkArtistDetails', - query.coverArtistContribs), + relation('generateCoverArtworkArtistDetails', track.trackArtwork), referenceDetails: relation('generateCoverArtworkReferenceDetails', @@ -85,6 +84,11 @@ export default { default: 'tags', }, + showOriginDetails: { + type: 'boolean', + default: false, + }, + showReferenceLinks: { type: 'boolean', default: false, @@ -111,6 +115,9 @@ export default { warnings: data.warnings, details: [ + slots.showOriginDetails && + relations.originDetails, + slots.details === 'tags' && relations.artTagDetails, @@ -131,7 +138,7 @@ export default { html.tag('p', {class: 'image-details'}, {class: 'non-unique-details'}, - language.$('misc.trackArtFromAlbum', { + language.$('misc.coverArtwork.trackArtFromAlbum', { album: relations.albumLink.slots({ color: false, diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js index 1c349c2e..a2a83d2d 100644 --- a/src/content/dependencies/generateTrackInfoPage.js +++ b/src/content/dependencies/generateTrackInfoPage.js @@ -144,6 +144,7 @@ export default { cover: (relations.cover ? relations.cover.slots({ + showOriginDetails: true, showReferenceLinks: true, showNonUniqueLine: true, }) diff --git a/src/content/dependencies/generateTrackReleaseInfo.js b/src/content/dependencies/generateTrackReleaseInfo.js index 6f473041..54e462c7 100644 --- a/src/content/dependencies/generateTrackReleaseInfo.js +++ b/src/content/dependencies/generateTrackReleaseInfo.js @@ -14,11 +14,6 @@ export default { relations.artistContributionLinks = relation('generateReleaseInfoContributionsLine', track.artistContribs); - if (track.hasUniqueCoverArt) { - relations.coverArtistContributionsLine = - relation('generateReleaseInfoContributionsLine', track.coverArtistContribs); - } - if (!empty(track.urls)) { relations.externalLinks = track.urls.map(url => @@ -59,21 +54,11 @@ export default { chronologyKind: 'track', }), - relations.coverArtistContributionsLine?.slots({ - stringKey: capsule + '.coverArtBy', - chronologyKind: 'trackArt', - }), - language.$(capsule, 'released', { [language.onlyIfOptions]: ['date'], date: language.formatDate(data.date), }), - language.$(capsule, 'artReleased', { - [language.onlyIfOptions]: ['date'], - date: language.formatDate(data.coverArtDate), - }), - language.$(capsule, 'duration', { [language.onlyIfOptions]: ['duration'], duration: language.formatDuration(data.duration), diff --git a/src/static/css/site.css b/src/static/css/site.css index 623f129c..8836f03a 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -1480,6 +1480,10 @@ hr.cute, margin-bottom: 2px; } +ul.image-details.art-tag-details { + padding-bottom: 0; +} + ul.image-details.art-tag-details li { display: inline-block; } @@ -1497,6 +1501,10 @@ p.image-details.illustrator-details { font-style: oblique; } +p.image-details.origin-details { + margin-bottom: 2px; +} + p.content-heading:has(+ .commentary-entry-heading.dated) { clear: right; } diff --git a/src/strings-default.yaml b/src/strings-default.yaml index ec028f69..b21c9e0c 100644 --- a/src/strings-default.yaml +++ b/src/strings-default.yaml @@ -880,8 +880,6 @@ misc: socialEmbed: heading: "{WIKI_NAME} | {HEADING}" - trackArtFromAlbum: "Album cover for {ALBUM}" - # jumpTo: # Generic action displayed at the top of some longer pages, for # quickly scrolling down to a particular section. @@ -899,6 +897,16 @@ misc: warnings: "{WARNINGS}" reveal: "click to show" + # coverArtwork: + # Generic or particular strings for artworks outside a grid + # context, when just one cover is being spotlighted. + + coverArtwork: + artworkBy: "Artwork by {ARTISTS}" + released: "Released {DATE}" + + trackArtFromAlbum: "Album cover for {ALBUM}" + # coverGrid: # Generic strings for various sorts of gallery grids, displayed # on the homepage, album galleries, artist artwork galleries, and -- cgit 1.3.0-6-gf8a5