diff options
-rw-r--r-- | src/content/dependencies/generateAlbumCoverArtwork.js | 41 | ||||
-rw-r--r-- | src/content/dependencies/generateAlbumInfoPage.js | 5 | ||||
-rw-r--r-- | src/content/dependencies/generateCoverArtworkReferenceDetails.js | 56 | ||||
-rw-r--r-- | src/content/dependencies/generateTrackCoverArtwork.js | 67 | ||||
-rw-r--r-- | src/content/dependencies/generateTrackInfoPage.js | 6 | ||||
-rw-r--r-- | src/content/dependencies/linkAlbumReferencedArtworks.js | 8 | ||||
-rw-r--r-- | src/content/dependencies/linkAlbumReferencingArtworks.js | 8 | ||||
-rw-r--r-- | src/content/dependencies/linkTrackReferencedArtworks.js | 8 | ||||
-rw-r--r-- | src/content/dependencies/linkTrackReferencingArtworks.js | 8 | ||||
-rw-r--r-- | src/static/css/site.css | 39 | ||||
-rw-r--r-- | src/strings-default.yaml | 5 |
11 files changed, 234 insertions, 17 deletions
diff --git a/src/content/dependencies/generateAlbumCoverArtwork.js b/src/content/dependencies/generateAlbumCoverArtwork.js index d52d57ce..1e11c0ac 100644 --- a/src/content/dependencies/generateAlbumCoverArtwork.js +++ b/src/content/dependencies/generateAlbumCoverArtwork.js @@ -3,7 +3,10 @@ export default { 'generateCoverArtwork', 'generateCoverArtworkArtTagDetails', 'generateCoverArtworkArtistDetails', + 'generateCoverArtworkReferenceDetails', 'image', + 'linkAlbumReferencedArtworks', + 'linkAlbumReferencingArtworks', ], extraDependencies: ['html', 'language'], @@ -20,6 +23,17 @@ export default { artistDetails: relation('generateCoverArtworkArtistDetails', album.coverArtistContribs), + + referenceDetails: + relation('generateCoverArtworkReferenceDetails', + album.referencedArtworks, + album.referencedByArtworks), + + referencedArtworksLink: + relation('linkAlbumReferencedArtworks', album), + + referencingArtworksLink: + relation('linkAlbumReferencingArtworks', album), }), data: (album) => ({ @@ -40,6 +54,11 @@ export default { validate: v => v.is('tags', 'artists'), default: 'tags', }, + + showReferenceLinks: { + type: 'boolean', + default: false, + }, }, generate: (data, relations, slots, {language}) => @@ -55,11 +74,21 @@ export default { dimensions: data.dimensions, - details: - (slots.details === 'tags' - ? relations.artTagDetails - : slots.details === 'artists' - ? relations.artistDetails - : null), + details: [ + slots.details === 'tags' && + relations.artTagDetails, + + slots.details === 'artists' && + relations.artistDetails, + + slots.showReferenceLinks && + relations.referenceDetails.slots({ + referencedLink: + relations.referencedArtworksLink, + + referencingLink: + relations.referencingArtworksLink, + }), + ], }), }; diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js index a291dedb..14745b96 100644 --- a/src/content/dependencies/generateAlbumInfoPage.js +++ b/src/content/dependencies/generateAlbumInfoPage.js @@ -108,7 +108,10 @@ export default { additionalNames: relations.additionalNamesBox, - cover: relations.cover, + cover: + relations.cover?.slots({ + showReferenceLinks: true, + }), mainContent: [ relations.releaseInfo, diff --git a/src/content/dependencies/generateCoverArtworkReferenceDetails.js b/src/content/dependencies/generateCoverArtworkReferenceDetails.js new file mode 100644 index 00000000..006b2b4b --- /dev/null +++ b/src/content/dependencies/generateCoverArtworkReferenceDetails.js @@ -0,0 +1,56 @@ +export default { + extraDependencies: ['html', 'language'], + + data: (referenced, referencedBy) => ({ + referenced: + referenced.length, + + referencedBy: + referencedBy.length, + }), + + slots: { + referencedLink: {type: 'html', mutable: true}, + referencingLink: {type: 'html', mutable: true}, + }, + + generate: (data, slots, {html, language}) => + language.encapsulate('releaseInfo', capsule => { + const referencedText = + language.$(capsule, 'referencesArtworks', { + [language.onlyIfOptions]: ['artworks'], + + artworks: + language.countArtworks(data.referenced, { + blankIfZero: true, + unit: true, + }), + }); + + const referencingText = + language.$(capsule, 'referencedByArtworks', { + [language.onlyIfOptions]: ['artworks'], + + artworks: + language.countArtworks(data.referencedBy, { + blankIfZero: true, + unit: true, + }), + }); + + return ( + html.tag('p', {class: 'image-details'}, + {[html.onlyIfContent]: true}, + {[html.joinChildren]: html.tag('br')}, + + {class: 'reference-details'}, + + [ + !html.isBlank(referencedText) && + slots.referencedLink.slot('content', referencedText), + + !html.isBlank(referencingText) && + slots.referencingLink.slot('content', referencingText), + ])); + }), +} diff --git a/src/content/dependencies/generateTrackCoverArtwork.js b/src/content/dependencies/generateTrackCoverArtwork.js index 2ad14993..90ce2b4a 100644 --- a/src/content/dependencies/generateTrackCoverArtwork.js +++ b/src/content/dependencies/generateTrackCoverArtwork.js @@ -3,7 +3,11 @@ export default { 'generateCoverArtwork', 'generateCoverArtworkArtTagDetails', 'generateCoverArtworkArtistDetails', + 'generateCoverArtworkReferenceDetails', 'image', + 'linkAlbum', + 'linkTrackReferencedArtworks', + 'linkTrackReferencingArtworks', ], extraDependencies: ['html', 'language'], @@ -26,6 +30,20 @@ export default { (track.hasUniqueCoverArt ? track.coverArtistContribs : track.album.coverArtistContribs)), + + referenceDetails: + relation('generateCoverArtworkReferenceDetails', + track.referencedArtworks, + track.referencedByArtworks), + + referencedArtworksLink: + relation('linkTrackReferencedArtworks', track), + + referencingArtworksLink: + relation('linkTrackReferencingArtworks', track), + + albumLink: + relation('linkAlbum', track.album), }), data: (track) => ({ @@ -41,6 +59,9 @@ export default { (track.hasUniqueCoverArt ? track.coverArtDimensions : track.album.coverArtDimensions), + + nonUnique: + !track.hasUniqueCoverArt, }), slots: { @@ -50,9 +71,19 @@ export default { validate: v => v.is('tags', 'artists'), default: 'tags', }, + + showReferenceLinks: { + type: 'boolean', + default: false, + }, + + showNonUniqueLine: { + type: 'boolean', + default: false, + }, }, - generate: (data, relations, slots, {language}) => + generate: (data, relations, slots, {html, language}) => relations.coverArtwork.slots({ mode: slots.mode, @@ -65,12 +96,34 @@ export default { dimensions: data.dimensions, - details: - (slots.details === 'tags' - ? relations.artTagDetails - : slots.details === 'artists' - ? relations.artistDetails - : null), + details: [ + slots.details === 'tags' && + relations.artTagDetails, + + slots.details === 'artists'&& + relations.artistDetails, + + slots.showReferenceLinks && + relations.referenceDetails.slots({ + referencedLink: + relations.referencedArtworksLink, + + referencingLink: + relations.referencingArtworksLink, + }), + + slots.showNonUniqueLine && + data.nonUnique && + html.tag('p', {class: 'image-details'}, + {class: 'non-unique-details'}, + + language.$('misc.trackArtFromAlbum', { + album: + relations.albumLink.slots({ + color: false, + }), + })), + ], }), }; diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js index ea13032a..39f2a437 100644 --- a/src/content/dependencies/generateTrackInfoPage.js +++ b/src/content/dependencies/generateTrackInfoPage.js @@ -139,7 +139,11 @@ export default { color: data.color, styleRules: [relations.albumStyleRules], - cover: relations.cover, + cover: + relations.cover?.slots({ + showReferenceLinks: true, + showNonUniqueLine: true, + }), mainContent: [ relations.releaseInfo, diff --git a/src/content/dependencies/linkAlbumReferencedArtworks.js b/src/content/dependencies/linkAlbumReferencedArtworks.js new file mode 100644 index 00000000..ba51b5e3 --- /dev/null +++ b/src/content/dependencies/linkAlbumReferencedArtworks.js @@ -0,0 +1,8 @@ +export default { + contentDependencies: ['linkThing'], + + relations: (relation, album) => + ({link: relation('linkThing', 'localized.albumReferencedArtworks', album)}), + + generate: (relations) => relations.link, +}; diff --git a/src/content/dependencies/linkAlbumReferencingArtworks.js b/src/content/dependencies/linkAlbumReferencingArtworks.js new file mode 100644 index 00000000..4d5e799d --- /dev/null +++ b/src/content/dependencies/linkAlbumReferencingArtworks.js @@ -0,0 +1,8 @@ +export default { + contentDependencies: ['linkThing'], + + relations: (relation, album) => + ({link: relation('linkThing', 'localized.albumReferencingArtworks', album)}), + + generate: (relations) => relations.link, +}; diff --git a/src/content/dependencies/linkTrackReferencedArtworks.js b/src/content/dependencies/linkTrackReferencedArtworks.js new file mode 100644 index 00000000..b4cb08fe --- /dev/null +++ b/src/content/dependencies/linkTrackReferencedArtworks.js @@ -0,0 +1,8 @@ +export default { + contentDependencies: ['linkThing'], + + relations: (relation, track) => + ({link: relation('linkThing', 'localized.trackReferencedArtworks', track)}), + + generate: (relations) => relations.link, +}; diff --git a/src/content/dependencies/linkTrackReferencingArtworks.js b/src/content/dependencies/linkTrackReferencingArtworks.js new file mode 100644 index 00000000..c9c9f4d1 --- /dev/null +++ b/src/content/dependencies/linkTrackReferencingArtworks.js @@ -0,0 +1,8 @@ +export default { + contentDependencies: ['linkThing'], + + relations: (relation, track) => + ({link: relation('linkThing', 'localized.trackReferencingArtworks', track)}), + + generate: (relations) => relations.link, +}; diff --git a/src/static/css/site.css b/src/static/css/site.css index 9a1db403..781bafd5 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -1263,6 +1263,10 @@ p .current { border-top-color: var(--deep-color); } +#cover-art-container .image-details + .image-details { + border-top-color: var(--primary-color); +} + #cover-art-container .image { display: block; width: 100%; @@ -1272,21 +1276,52 @@ p .current { .image-details { display: block; - padding: 6px 9px 4px 9px; margin-top: 0; margin-bottom: 0; + + /* Styles below only apply for first image-details. */ + + margin-left: 0; + margin-right: 0; + padding-left: 9px; + padding-right: 9px; + + padding-top: 6px; + padding-bottom: 4px; + border-top: 1px dashed var(--dim-color); } +.image-details + .image-details { + display: block; + + margin-left: 6px; + margin-right: 6px; + padding-left: 3px; + padding-right: 3px; + + padding-top: 4px; + padding-bottom: 4px; + + border-top: 1px dotted var(--primary-color); +} + +.image-details:last-child { + margin-bottom: 2px; +} + ul.image-details.art-tag-details li { display: inline-block; - margin: 0; } ul.image-details.art-tag-details li:not(:last-child)::after { content: " \00b7 "; } +.image-details.non-unique-details { + font-style: oblique; +} + p.image-details.illustrator-details { text-align: center; font-style: oblique; diff --git a/src/strings-default.yaml b/src/strings-default.yaml index 204d2002..af9f5895 100644 --- a/src/strings-default.yaml +++ b/src/strings-default.yaml @@ -308,6 +308,9 @@ releaseInfo: _: "{FLASH}" asDifferentRelease: "{FLASH} (as {TRACK})" + referencesArtworks: "References {ARTWORKS}." + referencedByArtworks: "Referenced by {ARTWORKS}." + # Note that there's no sticky variant here, # such as "Tracks that this flash features", # because not all flashes are *called* flashes! @@ -845,6 +848,8 @@ 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. |