content: generateGridActionLinks

3 files changed, 77 insertions, 30 deletions

diff --git a/src/content/dependencies/generateCoverCarousel.js b/src/content/dependencies/generateCoverCarousel.js
index e854113e..c3ce1df6 100644
--- a/src/content/dependencies/generateCoverCarousel.js
+++ b/src/content/dependencies/generateCoverCarousel.js
@@ -2,16 +2,24 @@ import {empty, repeat, stitchArrays} from '../../util/sugar.js';
 import {getCarouselLayoutForNumberOfItems} from '../../util/wiki-data.js';
 
 export default {
+  contentDependencies: ['generateGridActionLinks'],
   extraDependencies: ['html'],
 
+  relations(relation) {
+    return {
+      actionLinks: relation('generateGridActionLinks'),
+    };
+  },
+
   slots: {
     images: {validate: v => v.strictArrayOf(v.isHTML)},
     links: {validate: v => v.strictArrayOf(v.isHTML)},
 
     lazy: {validate: v => v.oneOf(v.isWholeNumber, v.isBoolean)},
+    actionLinks: {validate: v => v.sparseArrayOf(v.isHTML)},
   },
 
-  generate(slots, {html}) {
+  generate(relations, slots, {html}) {
     const stitched =
       stitchArrays({
         image: slots.images,
@@ -24,31 +32,36 @@ export default {
 
     const layout = getCarouselLayoutForNumberOfItems(stitched.length);
 
-    return html.tag('div',
-      {
-        class: 'carousel-container',
-        'data-carousel-rows': layout.rows,
-        'data-carousel-columns': layout.columns,
-      },
-      repeat(3, [
-        html.tag('div',
-          {class: 'carousel-grid', 'aria-hidden': 'true'},
-          stitched.map(({image, link}, index) =>
-            html.tag('div', {class: 'carousel-item'},
-              link.slots({
-                attributes: {tabindex: '-1'},
-                content:
-                  image.slots({
-                    thumb: 'small',
-                    square: true,
-                    lazy:
-                      (typeof slots.lazy === 'number'
-                        ? index >= slots.lazy
-                     : typeof slots.lazy === 'boolean'
-                        ? slots.lazy
-                        : false),
-                  }),
-              })))),
-      ]));
+    return html.tags([
+      html.tag('div',
+        {
+          class: 'carousel-container',
+          'data-carousel-rows': layout.rows,
+          'data-carousel-columns': layout.columns,
+        },
+        repeat(3, [
+          html.tag('div',
+            {class: 'carousel-grid', 'aria-hidden': 'true'},
+            stitched.map(({image, link}, index) =>
+              html.tag('div', {class: 'carousel-item'},
+                link.slots({
+                  attributes: {tabindex: '-1'},
+                  content:
+                    image.slots({
+                      thumb: 'small',
+                      square: true,
+                      lazy:
+                        (typeof slots.lazy === 'number'
+                          ? index >= slots.lazy
+                       : typeof slots.lazy === 'boolean'
+                          ? slots.lazy
+                          : false),
+                    }),
+                })))),
+        ])),
+
+      relations.actionLinks
+        .slot('actionLinks', slots.actionLinks),
+    ]);
   },
 };
diff --git a/src/content/dependencies/generateCoverGrid.js b/src/content/dependencies/generateCoverGrid.js
index c7713cce..a9beb6f4 100644
--- a/src/content/dependencies/generateCoverGrid.js
+++ b/src/content/dependencies/generateCoverGrid.js
@@ -1,8 +1,15 @@
 import {stitchArrays} from '../../util/sugar.js';
 
 export default {
+  contentDependencies: ['generateGridActionLinks'],
   extraDependencies: ['html'],
 
+  relations(relation) {
+    return {
+      actionLinks: relation('generateGridActionLinks'),
+    };
+  },
+
   slots: {
     images: {validate: v => v.strictArrayOf(v.isHTML)},
     links: {validate: v => v.strictArrayOf(v.isHTML)},
@@ -10,11 +17,12 @@ export default {
     info: {validate: v => v.strictArrayOf(v.isHTML)},
 
     lazy: {validate: v => v.oneOf(v.isWholeNumber, v.isBoolean)},
+    actionLinks: {validate: v => v.sparseArrayOf(v.isHTML)},
   },
 
-  generate(slots, {html}) {
+  generate(relations, slots, {html}) {
     return (
-      html.tag('div', {class: 'grid-listing'},
+      html.tag('div', {class: 'grid-listing'}, [
         stitchArrays({
           image: slots.images,
           link: slots.links,
@@ -37,6 +45,10 @@ export default {
                 html.tag('span', {[html.onlyIfContent]: true}, name),
                 html.tag('span', {[html.onlyIfContent]: true}, info),
               ],
-            }))));
+            })),
+
+        relations.actionLinks
+          .slot('actionLinks', slots.actionLinks),
+      ]));
   },
 };
diff --git a/src/content/dependencies/generateGridActionLinks.js b/src/content/dependencies/generateGridActionLinks.js
new file mode 100644
index 00000000..09399f17
--- /dev/null
+++ b/src/content/dependencies/generateGridActionLinks.js
@@ -0,0 +1,22 @@
+import {empty} from '../../util/sugar.js';
+
+export default {
+  extraDependencies: ['html'],
+
+  slots: {
+    actionLinks: {validate: v => v.sparseArrayOf(v.isHTML)},
+  },
+
+  generate(slots, {html}) {
+    if (empty(slots.actionLinks)) {
+      return html.blank();
+    }
+
+    return (
+      html.tag('div', {class: 'grid-actions'},
+        slots.actionLinks
+          .filter(Boolean)
+          .map(link => link
+            .slot('attributes', {class: ['grid-item', 'box']}))));
+  },
+};