content, css: generateContributionTooltip: dynamic divider line

3 files changed, 46 insertions, 42 deletions

diff --git a/src/content/dependencies/generateContributionTooltip.js b/src/content/dependencies/generateContributionTooltip.js
index c4df875c..67d6166e 100644
--- a/src/content/dependencies/generateContributionTooltip.js
+++ b/src/content/dependencies/generateContributionTooltip.js
@@ -28,8 +28,10 @@ export default {
       attributes:
         {class: ['icons', 'icons-tooltip']},
 
-      contentAttributes:
-        {[html.joinChildren]: ''},
+      contentAttributes: {
+        [html.joinChildren]:
+          html.tag('span', {class: 'tooltip-divider'}),
+      },
 
       content: [
         slots.showExternalLinks &&
diff --git a/src/content/dependencies/generateContributionTooltipChronologySection.js b/src/content/dependencies/generateContributionTooltipChronologySection.js
index 85b19be9..49e5d783 100644
--- a/src/content/dependencies/generateContributionTooltipChronologySection.js
+++ b/src/content/dependencies/generateContributionTooltipChronologySection.js
@@ -29,23 +29,24 @@ export default {
   }),
 
   generate: (relations, {html, language}) =>
-    language.encapsulate('misc.artistLink.chronology', capsule => [
-      html.tag('span', {class: 'chronology-link'},
-        {[html.onlyIfContent]: true},
+    language.encapsulate('misc.artistLink.chronology', capsule =>
+      html.tags([
+        html.tag('span', {class: 'chronology-link'},
+          {[html.onlyIfContent]: true},
 
-        language.$(capsule, 'previous', {
-          [language.onlyIfOptions]: ['thing'],
+          language.$(capsule, 'previous', {
+            [language.onlyIfOptions]: ['thing'],
 
-          thing: relations.previousLink,
-        })),
+            thing: relations.previousLink,
+          })),
 
-      html.tag('span', {class: 'chronology-link'},
-        {[html.onlyIfContent]: true},
+        html.tag('span', {class: 'chronology-link'},
+          {[html.onlyIfContent]: true},
 
-        language.$(capsule, 'next', {
-          [language.onlyIfOptions]: ['thing'],
+          language.$(capsule, 'next', {
+            [language.onlyIfOptions]: ['thing'],
 
-          thing: relations.nextLink,
-        })),
-    ]),
+            thing: relations.nextLink,
+          })),
+      ])),
 };
diff --git a/src/content/dependencies/generateContributionTooltipExternalLinkSection.js b/src/content/dependencies/generateContributionTooltipExternalLinkSection.js
index 3a124412..2a2b760f 100644
--- a/src/content/dependencies/generateContributionTooltipExternalLinkSection.js
+++ b/src/content/dependencies/generateContributionTooltipExternalLinkSection.js
@@ -16,33 +16,34 @@ export default {
 
   generate: (data, relations, {html, language}) =>
     language.encapsulate('misc.artistLink', capsule =>
-      stitchArrays({
-        icon: relations.artistIcons,
-        url: data.urls,
-      }).map(({icon, url}) => {
-          icon.setSlots({
-            context: 'artist',
-          });
-
-          let platformText =
-            language.formatExternalLink(url, {
+      html.tags(
+        stitchArrays({
+          icon: relations.artistIcons,
+          url: data.urls,
+        }).map(({icon, url}) => {
+            icon.setSlots({
               context: 'artist',
-              style: 'platform',
             });
 
-          // This is a pretty ridiculous hack, but we currently
-          // don't have a way of telling formatExternalLink to *not*
-          // use the fallback string, which just formats the URL as
-          // its host/domain... so is technically detectable.
-          if (platformText.toString() === (new URL(url)).host) {
-            platformText =
-              language.$(capsule, 'noExternalLinkPlatformName');
-          }
-
-          const platformSpan =
-            html.tag('span', {class: 'icon-platform'},
-              platformText);
-
-          return [icon, platformSpan];
-        })),
+            let platformText =
+              language.formatExternalLink(url, {
+                context: 'artist',
+                style: 'platform',
+              });
+
+            // This is a pretty ridiculous hack, but we currently
+            // don't have a way of telling formatExternalLink to *not*
+            // use the fallback string, which just formats the URL as
+            // its host/domain... so is technically detectable.
+            if (platformText.toString() === (new URL(url)).host) {
+              platformText =
+                language.$(capsule, 'noExternalLinkPlatformName');
+            }
+
+            const platformSpan =
+              html.tag('span', {class: 'icon-platform'},
+                platformText);
+
+            return [icon, platformSpan];
+          }))),
 };