3 files changed, 42 insertions, 21 deletions

diff --git a/src/content/dependencies/generateExternalIcon.js b/src/content/dependencies/generateExternalIcon.js
new file mode 100644
index 00000000..cb65a00a
--- /dev/null
+++ b/src/content/dependencies/generateExternalIcon.js
@@ -0,0 +1,28 @@
+import {isExternalLinkContext} from '#external-links';
+
+export default {
+  extraDependencies: ['html', 'language', 'to'],
+
+  data: (url) => ({url}),
+
+  slots: {
+    context: {
+      // This awkward syntax is because the slot descriptor validator can't
+      // differentiate between a function that returns a validator (the usual
+      // syntax) and a function that is itself a validator.
+      validate: () => isExternalLinkContext,
+      default: 'generic',
+    },
+  },
+
+  generate: (data, slots, {html, language, to}) =>
+    html.tag('svg',
+      html.tag('use', {
+        href:
+          to('staticMisc.icon',
+            language.formatExternalLink(data.url, {
+              style: 'icon-id',
+              context: slots.context,
+            })),
+      })),
+};
diff --git a/src/content/dependencies/linkContribution.js b/src/content/dependencies/linkContribution.js
index aee93d60..4e1c8977 100644
--- a/src/content/dependencies/linkContribution.js
+++ b/src/content/dependencies/linkContribution.js
@@ -90,7 +90,6 @@ export default {
         }).map(({icon, url}) => {
             icon.setSlots({
               context: 'artist',
-              withText: true,
             });
 
             let platformText =
diff --git a/src/content/dependencies/linkExternalAsIcon.js b/src/content/dependencies/linkExternalAsIcon.js
index e2ce4b3c..9b146a4c 100644
--- a/src/content/dependencies/linkExternalAsIcon.js
+++ b/src/content/dependencies/linkExternalAsIcon.js
@@ -1,7 +1,13 @@
 import {isExternalLinkContext} from '#external-links';
 
 export default {
-  extraDependencies: ['html', 'language', 'to'],
+  contentDependencies: ['generateExternalIcon'],
+  extraDependencies: ['html', 'language'],
+
+  relations: (relation, url) => ({
+    icon:
+      relation('generateExternalIcon', url),
+  }),
 
   data: (url) => ({url}),
 
@@ -13,39 +19,27 @@ export default {
       validate: () => isExternalLinkContext,
       default: 'generic',
     },
-
-    withText: {type: 'boolean'},
   },
 
-  generate(data, slots, {html, language, to}) {
+  generate(data, relations, slots, {html, language}) {
     const format = style =>
       language.formatExternalLink(data.url, {style, context: slots.context});
 
     const platformText = format('platform');
     const handleText = format('handle');
-    const iconId = format('icon-id');
 
-    return html.tag('a', {class: 'icon'},
-      {href: data.url},
-
-      slots.withText &&
+    return (
+      html.tag('a', {class: 'icon'},
+        {href: data.url},
         {class: 'has-text'},
 
-      [
-        html.tag('svg', [
-          !slots.withText &&
-            html.tag('title', platformText),
-
-          html.tag('use', {
-            href: to('staticMisc.icon', iconId),
-          }),
-        ]),
+        [
+          relations.icon,
 
-        slots.withText &&
           html.tag('span', {class: 'icon-text'},
             (html.isBlank(handleText)
               ? platformText
               : handleText)),
-      ]);
+        ]));
   },
 };