content, test: linkContribution: only show first four icons

3 files changed, 49 insertions, 4 deletions

diff --git a/src/content/dependencies/linkContribution.js b/src/content/dependencies/linkContribution.js
index 210d5b01..c9b514fe 100644
--- a/src/content/dependencies/linkContribution.js
+++ b/src/content/dependencies/linkContribution.js
@@ -16,9 +16,12 @@ export default {
 
     relations.artistLink = relation('linkArtist', artist);
 
-    relations.artistIcons =
-      (artist.urls ?? []).map(url =>
-        relation('linkExternalAsIcon', url));
+    if (!empty(artist.urls)) {
+      relations.artistIcons =
+        artist.urls
+          .slice(0, 4)
+          .map(url => relation('linkExternalAsIcon', url));
+    }
 
     return relations;
   },
@@ -34,7 +37,7 @@ export default {
 
   generate(data, relations, slots, {html, language}) {
     const hasContributionPart = !!(slots.showContribution && data.contribution);
-    const hasExternalPart = !!(slots.showIcons && !empty(relations.artistIcons));
+    const hasExternalPart = !!(slots.showIcons && relations.artistIcons);
 
     const externalLinks = hasExternalPart &&
       html.tag('span',
diff --git a/tap-snapshots/test/snapshot/linkContribution.js.test.cjs b/tap-snapshots/test/snapshot/linkContribution.js.test.cjs
index 9ae75091..dd796898 100644
--- a/tap-snapshots/test/snapshot/linkContribution.js.test.cjs
+++ b/tap-snapshots/test/snapshot/linkContribution.js.test.cjs
@@ -5,6 +5,30 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
+exports[`test/snapshot/linkContribution.js TAP linkContribution (snapshot) > loads of links 1`] = `
+<span class="nowrap"><a href="artist/lorem-ipsum-lover/">Lorem Ipsum Lover</a> (<span class="icons"><a href="https://loremipsum.io" class="icon">
+            <svg>
+                <title>External (loremipsum.io)</title>
+                <use href="static/icons.svg#icon-globe"></use>
+            </svg>
+        </a>, <a href="https://loremipsum.io/generator/" class="icon">
+            <svg>
+                <title>External (loremipsum.io)</title>
+                <use href="static/icons.svg#icon-globe"></use>
+            </svg>
+        </a>, <a href="https://loremipsum.io/#meaning" class="icon">
+            <svg>
+                <title>External (loremipsum.io)</title>
+                <use href="static/icons.svg#icon-globe"></use>
+            </svg>
+        </a>, <a href="https://loremipsum.io/#usage-and-examples" class="icon">
+            <svg>
+                <title>External (loremipsum.io)</title>
+                <use href="static/icons.svg#icon-globe"></use>
+            </svg>
+        </a></span>)</span>
+`
+
 exports[`test/snapshot/linkContribution.js TAP linkContribution (snapshot) > no accents 1`] = `
 <a href="artist/clark-powell/">Clark Powell</a>
 <a href="artist/the-big-baddies/">Grounder & Scratch</a>
diff --git a/test/snapshot/linkContribution.js b/test/snapshot/linkContribution.js
index 758fa264..44033ad3 100644
--- a/test/snapshot/linkContribution.js
+++ b/test/snapshot/linkContribution.js
@@ -51,4 +51,22 @@ testContentFunctions(t, 'linkContribution (snapshot)', async (t, evaluate) => {
   });
 
   quickSnapshot('no accents', {});
+
+  evaluate.snapshot('loads of links', {
+    name: 'linkContribution',
+    args: [
+      {name: 'Lorem Ipsum Lover', directory: 'lorem-ipsum-lover', urls: [
+        'https://loremipsum.io',
+        'https://loremipsum.io/generator/',
+        'https://loremipsum.io/#meaning',
+        'https://loremipsum.io/#usage-and-examples',
+        'https://loremipsum.io/#controversy',
+        'https://loremipsum.io/#when-to-use-lorem-ipsum',
+        'https://loremipsum.io/#lorem-ipsum-all-the-things',
+        'https://loremipsum.io/#original-source',
+      ]},
+      null,
+    ],
+    slots: {showIcons: true},
+  });
 });