diff options
| -rw-r--r-- | src/content/dependencies/generateAlbumReferencingArtworksPage.js | 68 | ||||
| -rw-r--r-- | src/content/dependencies/generateReferencingArtworksPage.js | 121 | ||||
| -rw-r--r-- | src/content/dependencies/generateTrackNavLinks.js | 4 | ||||
| -rw-r--r-- | src/content/dependencies/generateTrackReferencingArtworksPage.js | 57 | ||||
| -rw-r--r-- | src/page/album.js | 10 | ||||
| -rw-r--r-- | src/page/track.js | 10 | ||||
| -rw-r--r-- | src/static/css/site.css | 1 | ||||
| -rw-r--r-- | src/strings-default.yaml | 15 |
8 files changed, 283 insertions, 3 deletions
diff --git a/src/content/dependencies/generateAlbumReferencingArtworksPage.js b/src/content/dependencies/generateAlbumReferencingArtworksPage.js new file mode 100644 index 00000000..8f2349f9 --- /dev/null +++ b/src/content/dependencies/generateAlbumReferencingArtworksPage.js @@ -0,0 +1,68 @@ +export default { + contentDependencies: [ + 'generateAlbumCoverArtwork', + 'generateAlbumStyleRules', + 'generateBackToAlbumLink', + 'generateReferencingArtworksPage', + 'linkAlbum', + ], + + extraDependencies: ['html', 'language'], + + relations: (relation, album) => ({ + page: + relation('generateReferencingArtworksPage', album.referencedByArtworks), + + albumStyleRules: + relation('generateAlbumStyleRules', album, null), + + albumLink: + relation('linkAlbum', album), + + backToAlbumLink: + relation('generateBackToAlbumLink', album), + + cover: + relation('generateAlbumCoverArtwork', album), + }), + + data: (album) => ({ + name: + album.name, + + color: + album.color, + }), + + generate: (data, relations, {html, language}) => + relations.page.slots({ + title: + language.$('albumPage.title', { + album: + data.name, + }), + + color: data.color, + styleRules: [relations.albumStyleRules], + + cover: relations.cover, + + navLinks: [ + {auto: 'home'}, + + { + html: + relations.albumLink + .slot('attributes', {class: 'current'}), + + accent: + html.tag('a', {href: ''}, + {class: 'current'}, + + language.$('referencingArtworksPage.subtitle')), + }, + ], + + navBottomRowContent: relations.backToAlbumLink, + }), +}; diff --git a/src/content/dependencies/generateReferencingArtworksPage.js b/src/content/dependencies/generateReferencingArtworksPage.js new file mode 100644 index 00000000..468d5f78 --- /dev/null +++ b/src/content/dependencies/generateReferencingArtworksPage.js @@ -0,0 +1,121 @@ +import {stitchArrays} from '#sugar'; + +export default { + contentDependencies: [ + 'generateCoverGrid', + 'generatePageLayout', + 'image', + 'linkAlbum', + 'linkTrack', + ], + + extraDependencies: ['html', 'language'], + + relations: (relation, referencedArtworks) => ({ + layout: + relation('generatePageLayout'), + + coverGrid: + relation('generateCoverGrid'), + + links: + referencedArtworks.map(({thing}) => + (thing.album + ? relation('linkTrack', thing) + : relation('linkAlbum', thing))), + + images: + referencedArtworks.map(({thing}) => + relation('image', thing.artTags)), + }), + + data: (referencedArtworks) => ({ + count: + referencedArtworks.length, + + names: + referencedArtworks + .map(({thing}) => thing.name), + + paths: + referencedArtworks + .map(({thing}) => + (thing.album + ? ['media.trackCover', thing.album.directory, thing.directory, thing.coverArtFileExtension] + : ['media.albumCover', thing.directory, thing.coverArtFileExtension])), + + dimensions: + referencedArtworks + .map(({thing}) => thing.coverArtDimensions), + + coverArtistNames: + referencedArtworks + .map(({thing}) => + thing.coverArtistContribs + .map(contrib => contrib.artist.name)), + }), + + slots: { + color: {validate: v => v.isColor}, + + styleRules: {type: 'html', mutable: false}, + + title: {type: 'html', mutable: false}, + cover: {type: 'html', mutable: true}, + + navLinks: {validate: v => v.isArray}, + navBottomRowContent: {type: 'html', mutable: false}, + }, + + generate: (data, relations, slots, {html, language}) => + language.encapsulate('referencingArtworksPage', pageCapsule => + relations.layout.slots({ + title: slots.title, + subtitle: language.$(pageCapsule, 'subtitle'), + + color: slots.color, + styleRules: slots.styleRules, + + cover: + slots.cover + .slot('mode', 'primary-artists'), + + mainClasses: ['top-index'], + mainContent: [ + html.tag('p', {class: 'quick-info'}, + language.$(pageCapsule, 'statsLine', { + artworks: + language.countArtworks(data.count, { + unit: true, + }), + })), + + relations.coverGrid.slots({ + links: relations.links, + names: data.names, + + images: + stitchArrays({ + image: relations.images, + path: data.paths, + dimensions: data.dimensions, + }).map(({image, path, dimensions}) => + image.slots({ + path, + dimensions, + })), + + info: + data.coverArtistNames.map(names => + language.$('misc.coverGrid.details.coverArtists', { + artists: + language.formatUnitList(names), + })), + }), + ], + + navLinkStyle: 'hierarchical', + navLinks: slots.navLinks, + navBottomRowContent: slots.navBottomRowContent, + })), +}; diff --git a/src/content/dependencies/generateTrackNavLinks.js b/src/content/dependencies/generateTrackNavLinks.js index 2d4ad378..e01653f0 100644 --- a/src/content/dependencies/generateTrackNavLinks.js +++ b/src/content/dependencies/generateTrackNavLinks.js @@ -20,7 +20,7 @@ export default { slots: { currentExtra: { - validate: v => v.is('referenced-art'), + validate: v => v.is('referenced-art', 'referencing-art'), }, }, @@ -56,6 +56,8 @@ export default { (slots.currentExtra === 'referenced-art' ? language.$('referencedArtworksPage.subtitle') + : slots.currentExtra === 'referencing-art' + ? language.$('referencingArtworksPage.subtitle') : null)), }, ]), diff --git a/src/content/dependencies/generateTrackReferencingArtworksPage.js b/src/content/dependencies/generateTrackReferencingArtworksPage.js new file mode 100644 index 00000000..097ee929 --- /dev/null +++ b/src/content/dependencies/generateTrackReferencingArtworksPage.js @@ -0,0 +1,57 @@ +export default { + contentDependencies: [ + 'generateAlbumStyleRules', + 'generateBackToTrackLink', + 'generateReferencingArtworksPage', + 'generateTrackCoverArtwork', + 'generateTrackNavLinks', + ], + + extraDependencies: ['html', 'language'], + + relations: (relation, track) => ({ + page: + relation('generateReferencingArtworksPage', track.referencedByArtworks), + + albumStyleRules: + relation('generateAlbumStyleRules', track.album, track), + + navLinks: + relation('generateTrackNavLinks', track), + + backToTrackLink: + relation('generateBackToTrackLink', track), + + cover: + relation('generateTrackCoverArtwork', track), + }), + + data: (track) => ({ + name: + track.name, + + color: + track.color, + }), + + generate: (data, relations, {html, language}) => + relations.page.slots({ + title: + language.$('trackPage.title', { + track: + data.name, + }), + + color: data.color, + styleRules: [relations.albumStyleRules], + + cover: relations.cover, + + navLinks: + html.resolve( + relations.navLinks + .slot('currentExtra', 'referencing-art')), + + navBottomRowContent: relations.backToTrackLink, + }), +}; diff --git a/src/page/album.js b/src/page/album.js index 76f3d6b0..be551ca7 100644 --- a/src/page/album.js +++ b/src/page/album.js @@ -50,6 +50,16 @@ export function pathsForTarget(album) { }, }, + !empty(album.referencedByArtworks) && { + type: 'page', + path: ['albumReferencingArtworks', album.directory], + + contentFunction: { + name: 'generateAlbumReferencingArtworksPage', + args: [album], + }, + }, + /* { type: 'data', diff --git a/src/page/track.js b/src/page/track.js index ea5d0dce..94a1e48d 100644 --- a/src/page/track.js +++ b/src/page/track.js @@ -29,5 +29,15 @@ export function pathsForTarget(track) { args: [track], }, }, + + !empty(track.referencedByArtworks) && { + type: 'page', + path: ['trackReferencingArtworks', track.directory], + + contentFunction: { + name: 'generateTrackReferencingArtworksPage', + args: [track], + }, + }, ]; } diff --git a/src/static/css/site.css b/src/static/css/site.css index be13fded..9a1db403 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -2969,6 +2969,7 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content #content.top-index #cover-art-container { float: none; margin: 2em auto 2.5em auto; + max-width: 375px; } html[data-url-key="localized.home"] #page-container.showing-sidebar-left .grid-listing > .grid-item:not(:nth-child(n+7)) { diff --git a/src/strings-default.yaml b/src/strings-default.yaml index e6682fa6..204d2002 100644 --- a/src/strings-default.yaml +++ b/src/strings-default.yaml @@ -2058,8 +2058,8 @@ redirectPage: # # referencedArtworksPage: -# The "referenced artworks" page shows a list of all the artworks which -# some artwork references. +# The "referenced artworks" page shows a gallery of all the artworks +# which some artwork references. # referencedArtworksPage: subtitle: "Referenced Artworks" @@ -2068,6 +2068,17 @@ referencedArtworksPage: References {ARTWORKS}. # +# referencingArtworksPage: +# The "referencing artworks" page shows a gallery of all the artworks +# which reference some artwork. +# +referencingArtworksPage: + subtitle: "Referencing Artworks" + + statsLine: >- + Referenced by {ARTWORKS}. + +# # tagPage: # The tag gallery page displays all the artworks that a tag has # been featured in, in one neat grid, with each artwork displaying |