content: gCTExternalLinkSection: inline linkExternalAsIcon behavior

2 files changed, 45 insertions, 80 deletions

diff --git a/src/content/dependencies/generateContributionTooltipExternalLinkSection.js b/src/content/dependencies/generateContributionTooltipExternalLinkSection.js
index 2a2b760f..a9d17457 100644
--- a/src/content/dependencies/generateContributionTooltipExternalLinkSection.js
+++ b/src/content/dependencies/generateContributionTooltipExternalLinkSection.js
@@ -1,13 +1,26 @@
 import {stitchArrays} from '#sugar';
 
 export default {
-  contentDependencies: ['linkExternalAsIcon'],
+  contentDependencies: [
+    'generateExternalHandle',
+    'generateExternalIcon',
+    'generateExternalPlatform',
+  ],
+
   extraDependencies: ['html', 'language'],
 
   relations: (relation, contribution) => ({
-    artistIcons:
+    icons:
+      contribution.artist.urls
+        .map(url => relation('generateExternalIcon', url)),
+
+    handles:
+      contribution.artist.urls
+        .map(url => relation('generateExternalHandle', url)),
+
+    platforms:
       contribution.artist.urls
-        .map(url => relation('linkExternalAsIcon', url)),
+        .map(url => relation('generateExternalPlatform', url)),
   }),
 
   data: (contribution) => ({
@@ -18,32 +31,39 @@ export default {
     language.encapsulate('misc.artistLink', capsule =>
       html.tags(
         stitchArrays({
-          icon: relations.artistIcons,
+          icon: relations.icons,
+          handle: relations.handles,
+          platform: relations.platforms,
           url: data.urls,
-        }).map(({icon, url}) => {
-            icon.setSlots({
-              context: 'artist',
-            });
-
-            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');
+        }).map(({icon, handle, platform, url}) => {
+            for (const template of [icon, handle, platform]) {
+              template.setSlot('context', 'artist');
             }
 
-            const platformSpan =
+            return [
+              html.tag('a', {class: 'icon'},
+                {href: url},
+                {class: 'has-text'},
+
+                [
+                  icon,
+
+                  html.tag('span', {class: 'icon-text'},
+                    (html.isBlank(handle)
+                      ? platform
+                      : handle)),
+                ]),
+
               html.tag('span', {class: 'icon-platform'},
-                platformText);
+                // 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.
+                ((html.resolve(platform, {normalize: 'string'}) ===
+                  (new URL(url)).host)
 
-            return [icon, platformSpan];
+                  ? language.$(capsule, 'noExternalLinkPlatformName')
+                  : platform)),
+            ];
           }))),
 };
diff --git a/src/content/dependencies/linkExternalAsIcon.js b/src/content/dependencies/linkExternalAsIcon.js
deleted file mode 100644
index 0217e9d6..00000000
--- a/src/content/dependencies/linkExternalAsIcon.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import {isExternalLinkContext} from '#external-links';
-
-export default {
-  contentDependencies: [
-    'generateExternalHandle',
-    'generateExternalIcon',
-    'generateExternalPlatform',
-  ],
-
-  extraDependencies: ['html'],
-
-  relations: (relation, url) => ({
-    icon:
-      relation('generateExternalIcon', url),
-
-    handle:
-      relation('generateExternalHandle', url),
-
-    platform:
-      relation('generateExternalPlatform', url),
-  }),
-
-  data: (url) => ({url}),
-
-  slots: {
-    context: {
-      validate: () => isExternalLinkContext,
-      default: 'generic',
-    },
-  },
-
-  generate(data, relations, slots, {html}) {
-    for (const template of [
-      relations.icon,
-      relations.handle,
-      relations.platform,
-    ]) {
-      template.setSlot('context', slots.context);
-    }
-
-    return (
-      html.tag('a', {class: 'icon'},
-        {href: data.url},
-        {class: 'has-text'},
-
-        [
-          relations.icon,
-
-          html.tag('span', {class: 'icon-text'},
-            (html.isBlank(relations.handle)
-              ? relations.platform
-              : relations.handle)),
-        ]));
-  },
-};