diff options
Diffstat (limited to 'src/content/dependencies/generateCoverGrid.js')
-rw-r--r-- | src/content/dependencies/generateCoverGrid.js | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/src/content/dependencies/generateCoverGrid.js b/src/content/dependencies/generateCoverGrid.js new file mode 100644 index 0000000..0433aaf --- /dev/null +++ b/src/content/dependencies/generateCoverGrid.js @@ -0,0 +1,59 @@ +import {stitchArrays} from '#sugar'; + +export default { + contentDependencies: ['generateGridActionLinks'], + extraDependencies: ['html', 'language'], + + relations(relation) { + return { + actionLinks: relation('generateGridActionLinks'), + }; + }, + + slots: { + images: {validate: v => v.strictArrayOf(v.isHTML)}, + links: {validate: v => v.strictArrayOf(v.isHTML)}, + names: {validate: v => v.strictArrayOf(v.isHTML)}, + info: {validate: v => v.strictArrayOf(v.isHTML)}, + + lazy: {validate: v => v.anyOf(v.isWholeNumber, v.isBoolean)}, + actionLinks: {validate: v => v.sparseArrayOf(v.isHTML)}, + }, + + generate(relations, slots, {html, language}) { + return ( + html.tag('div', {class: 'grid-listing'}, [ + stitchArrays({ + image: slots.images, + link: slots.links, + name: slots.names, + info: slots.info, + }).map(({image, link, name, info}, index) => + link.slots({ + attributes: {class: ['grid-item', 'box']}, + colorContext: 'image-box', + content: [ + image.slots({ + thumb: 'medium', + square: true, + lazy: + (typeof slots.lazy === 'number' + ? index >= slots.lazy + : typeof slots.lazy === 'boolean' + ? slots.lazy + : false), + }), + + html.tag('span', {[html.onlyIfContent]: true}, + language.sanitize(name)), + + html.tag('span', {[html.onlyIfContent]: true}, + language.sanitize(info)), + ], + })), + + relations.actionLinks + .slot('actionLinks', slots.actionLinks), + ])); + }, +}; |