diff options
| -rw-r--r-- | src/content/dependencies/generateWikiHomeAlbumsRow.js | 140 | ||||
| -rw-r--r-- | src/content/dependencies/generateWikiHomeContentRow.js | 34 | ||||
| -rw-r--r-- | src/content/dependencies/generateWikiHomePage.js | 15 | ||||
| -rw-r--r-- | src/page/homepage.js | 135 | ||||
| -rw-r--r-- | src/util/wiki-data.js | 13 |
5 files changed, 194 insertions, 143 deletions
diff --git a/src/content/dependencies/generateWikiHomeAlbumsRow.js b/src/content/dependencies/generateWikiHomeAlbumsRow.js new file mode 100644 index 0000000..1e438a1 --- /dev/null +++ b/src/content/dependencies/generateWikiHomeAlbumsRow.js @@ -0,0 +1,140 @@ +import {empty, stitchArrays} from '../../util/sugar.js'; +import {getNewAdditions, getNewReleases} from '../../util/wiki-data.js'; + +export default { + contentDependencies: [ + 'generateWikiHomeContentRow', + 'generateCoverCarousel', + 'generateCoverGrid', + 'image', + 'linkAlbum', + 'transformContent', + ], + + extraDependencies: ['wikiData'], + + sprawl({albumData}, row) { + const sprawl = {}; + + switch (row.sourceGroupByRef) { + case 'new-releases': + sprawl.albums = getNewReleases(row.countAlbumsFromGroup, {albumData}); + break; + + case 'new-additions': + sprawl.albums = getNewAdditions(row.countAlbumsFromGroup, {albumData}); + break; + + default: + sprawl.albums = + (row.sourceGroup + ? row.sourceGroup.albums + .slice() + .reverse() + .filter(album => album.isListedOnHomepage) + .slice(0, row.countAlbumsFromGroup) + : []); + } + + if (!empty(row.sourceAlbums)) { + sprawl.albums.push(...row.sourceAlbums); + } + + return sprawl; + }, + + relations(relation, sprawl, row) { + const relations = {}; + + relations.contentRow = + relation('generateWikiHomeContentRow', row); + + if (row.displayStyle === 'grid') { + relations.coverGrid = + relation('generateCoverGrid'); + } + + if (row.displayStyle === 'carousel') { + relations.coverCarousel = + relation('generateCoverCarousel'); + } + + relations.links = + sprawl.albums + .map(album => relation('linkAlbum', album)); + + relations.images = + sprawl.albums + .map(album => relation('image', album.artTags)); + + if (row.actionLinks) { + relations.actionLinks = + row.actionLinks + .map(content => relation('transformContent', content)); + } + + return relations; + }, + + data(sprawl, row) { + const data = {}; + + data.displayStyle = row.displayStyle; + + if (row.displayStyle === 'grid') { + data.names = + sprawl.albums + .map(album => album.name); + } + + data.paths = + sprawl.albums + .map(album => + ['media.albumCover', album.directory, album.coverArtFileExtension]); + + return data; + }, + + generate(data, relations) { + // Grids and carousels share some slots! Very convenient. + const commonSlots = {}; + + commonSlots.links = + relations.links; + + commonSlots.images = + stitchArrays({ + image: relations.images, + path: data.paths, + }).map(({image, path}) => + image.slot('path', path)); + + commonSlots.actionLinks = + (relations.actionLinks + ? relations.actionLinks + .map(contents => + contents + .slot('mode', 'single-link') + .content) + : null); + + let content; + + switch (data.displayStyle) { + case 'grid': + content = + relations.coverGrid.slots({ + ...commonSlots, + names: data.names, + }); + break; + + case 'carousel': + content = + relations.coverCarousel.slots(commonSlots); + break; + } + + return relations.contentRow.slots({content}); + }, +}; diff --git a/src/content/dependencies/generateWikiHomeContentRow.js b/src/content/dependencies/generateWikiHomeContentRow.js new file mode 100644 index 0000000..9062280 --- /dev/null +++ b/src/content/dependencies/generateWikiHomeContentRow.js @@ -0,0 +1,34 @@ +export default { + contentDependencies: ['generateColorStyleVariables'], + extraDependencies: ['html'], + + relations(relation, row) { + return { + colorVariables: + relation('generateColorStyleVariables', row.color), + }; + }, + + data(row) { + return { + name: row.name, + }; + }, + + slots: { + content: {type: 'html'}, + }, + + generate(data, relations, slots, {html}) { + return ( + html.tag('section', + { + class: 'row', + style: [relations.colorVariables], + }, + [ + html.tag('h2', data.name), + slots.content, + ])); + }, +}; diff --git a/src/content/dependencies/generateWikiHomePage.js b/src/content/dependencies/generateWikiHomePage.js index d3d05c4..40a6b1c 100644 --- a/src/content/dependencies/generateWikiHomePage.js +++ b/src/content/dependencies/generateWikiHomePage.js @@ -1,6 +1,7 @@ export default { contentDependencies: [ 'generatePageLayout', + 'generateWikiHomeAlbumsRow', 'generateWikiHomeNewsBox', 'transformContent', ], @@ -37,6 +38,16 @@ export default { .map(content => relation('transformContent', content)); } + relations.contentRows = + homepageLayout.rows.map(row => { + switch (row.type) { + case 'albums': + return relation('generateWikiHomeAlbumsRow', row); + default: + return null; + } + }); + return relations; }, @@ -54,7 +65,9 @@ export default { mainClasses: ['top-index'], headingMode: 'static', - mainContent: [], + mainContent: [ + relations.contentRows, + ], leftSidebarCollapse: false, leftSidebarWide: true, diff --git a/src/page/homepage.js b/src/page/homepage.js index 8d06c0b..15dcadd 100644 --- a/src/page/homepage.js +++ b/src/page/homepage.js @@ -26,138 +26,3 @@ export function pathsTargetless({wikiData}) { }, ]; } - -/* -export function writeTargetless({wikiData}) { - const {newsData, homepageLayout, wikiInfo} = wikiData; - - const rowData = homepageLayout.rows?.map(row => { - const {color, name, type} = row; - const entry = {row, color, name, type}; - - switch (type) { - case 'albums': { - entry.displayStyle = row.displayStyle; - - switch (row.sourceGroupByRef) { - case 'new-releases': - entry.entries = getNewReleases(row.countAlbumsFromGroup, {wikiData}); - break; - case 'new-additions': - entry.entries = getNewAdditions(row.countAlbumsFromGroup, {wikiData}); - break; - default: - entry.entries = row.sourceGroup - ? row.sourceGroup.albums - .slice() - .reverse() - .filter(album => album.isListedOnHomepage) - .slice(0, row.countAlbumsFromGroup) - .map(album => ({item: album})) - : []; - } - - if (!empty(row.sourceAlbums)) { - entry.entries.push(...row.sourceAlbums.map(album => ({item: album}))); - } - - entry.actionLinks = row.actionLinks ?? []; - break; - } - } - - return entry; - }); - - const transformActionLinks = (actionLinks, { - transformInline, - }) => - actionLinks?.map(transformInline) - .map(a => a.replace('<a', '<a class="box grid-item"')); - - const page = { - type: 'page', - path: ['home'], - page: ({ - getAlbumGridHTML, - getAlbumCover, - getCarouselHTML, - getLinkThemeString, - html, - language, - link, - to, - transformInline, - transformMultiline, - }) => ({ - title: wikiInfo.name, - showWikiNameInTitle: false, - - meta: { - description: wikiInfo.description, - }, - - main: { - classes: ['top-index'], - headingMode: 'none', - - content: [ - html.tag('h1', - wikiInfo.name), - - ...html.fragment( - rowData.map((entry, i) => - html.tag('section', - { - class: 'row', - style: getLinkThemeString(entry.color), - }, - [ - html.tag('h2', - entry.name), - - entry.type === 'albums' && - entry.displayStyle === 'grid' && - html.tag('div', {class: 'grid-listing'}, [ - ...html.fragment( - getAlbumGridHTML({ - entries: entry.entries, - lazy: i > 0, - })), - - html.tag('div', - { - [html.onlyIfContent]: true, - class: 'grid-actions', - }, - transformActionLinks(entry.actionLinks, { - transformInline, - })), - ]), - - ...html.fragment( - entry.type === 'albums' && - entry.displayStyle === 'carousel' && [ - getCarouselHTML({ - items: entry.entries.map(e => e.item), - // Lazy carousels are kinda glitchy, possibly browser-dependant - // lazy: i > 0, - srcFn: getAlbumCover, - linkFn: link.album, - }), - - entry.actionLinks.length && - html.tag('div', {class: 'grid-actions'}, - transformActionLinks(entry.actionLinks, { - transformInline, - })), - ]), - ]))), - ], - }, - }), - }; - - return [page]; -} -*/ diff --git a/src/util/wiki-data.js b/src/util/wiki-data.js index a313374..97a3f3e 100644 --- a/src/util/wiki-data.js +++ b/src/util/wiki-data.js @@ -728,8 +728,8 @@ export function getArtistAvatar(artist, {to}) { // Big-ass homepage row functions -export function getNewAdditions(numAlbums, {wikiData}) { - const sortedAlbums = wikiData.albumData +export function getNewAdditions(numAlbums, {albumData}) { + const sortedAlbums = albumData .filter((album) => album.isListedOnHomepage) .sort((a, b) => { if (a.dateAddedToWiki > b.dateAddedToWiki) return -1; @@ -808,15 +808,14 @@ export function getNewAdditions(numAlbums, {wikiData}) { } } - return albums.map((album) => ({item: album})); + return albums; } -export function getNewReleases(numReleases, {wikiData}) { - return wikiData.albumData +export function getNewReleases(numReleases, {albumData}) { + return albumData .filter((album) => album.isListedOnHomepage) .reverse() - .slice(0, numReleases) - .map((album) => ({item: album})); + .slice(0, numReleases); } // Carousel layout and utilities |