diff options
author | (quasar) nebula <qznebula@protonmail.com> | 2023-10-02 19:07:03 -0300 |
---|---|---|
committer | (quasar) nebula <qznebula@protonmail.com> | 2023-10-02 19:07:03 -0300 |
commit | 7de691cb628c78440dee9781eee01ca7753d8be2 (patch) | |
tree | 07cb66403b57125820681923aa434a96b2e93dfd /src/content/dependencies | |
parent | 90e6cfcfb8c2c43228a13396ff0f6fb87c2c1589 (diff) |
content: generateCoverGrid: add "classes" slot
Diffstat (limited to 'src/content/dependencies')
-rw-r--r-- | src/content/dependencies/generateCoverGrid.js | 30 |
1 files changed, 28 insertions, 2 deletions
diff --git a/src/content/dependencies/generateCoverGrid.js b/src/content/dependencies/generateCoverGrid.js index 5636e4f3..6ac0f941 100644 --- a/src/content/dependencies/generateCoverGrid.js +++ b/src/content/dependencies/generateCoverGrid.js @@ -16,6 +16,19 @@ export default { names: {validate: v => v.strictArrayOf(v.isHTML)}, info: {validate: v => v.strictArrayOf(v.isHTML)}, + // Differentiating from sparseArrayOf here - this list of classes should + // have the same length as the items above, i.e. nulls aren't going to be + // filtered out of it, but it is okay to *include* null (standing in for + // no classes for this grid item). + classes: { + validate: v => + v.strictArrayOf( + v.optional( + v.oneOf( + v.isArray, + v.isString))), + }, + lazy: {validate: v => v.oneOf(v.isWholeNumber, v.isBoolean)}, actionLinks: {validate: v => v.sparseArrayOf(v.isHTML)}, }, @@ -24,13 +37,26 @@ export default { return ( html.tag('div', {class: 'grid-listing'}, [ stitchArrays({ + classOrClasses: slots.classes, image: slots.images, link: slots.links, name: slots.names, info: slots.info, - }).map(({image, link, name, info}, index) => + }).map(({classOrClasses, image, link, name, info}, index) => link.slots({ - attributes: {class: ['grid-item', 'box']}, + attributes: { + class: [ + 'grid-item', + 'box', + ... + (Array.isArray(classOrClasses) + ? classOrClasses + : typeof classOrClasses === 'string' + ? [classOrClasses] + : []), + ], + }, + content: [ image.slots({ thumb: 'medium', |