4 files changed, 64 insertions, 17 deletions
diff --git a/src/content/dependencies/generateExternalHandle.js b/src/content/dependencies/generateExternalHandle.js
new file mode 100644
index 00000000..8c0368a4
--- /dev/null
+++ b/src/content/dependencies/generateExternalHandle.js
@@ -0,0 +1,20 @@
+import {isExternalLinkContext} from '#external-links';
+
+export default {
+  extraDependencies: ['html', 'language'],
+
+  data: (url) => ({url}),
+
+  slots: {
+    context: {
+      validate: () => isExternalLinkContext,
+      default: 'generic',
+    },
+  },
+
+  generate: (data, slots, {language}) =>
+    language.formatExternalLink(data.url, {
+      style: 'handle',
+      context: slots.context,
+    }),
+};
diff --git a/src/content/dependencies/generateExternalIcon.js b/src/content/dependencies/generateExternalIcon.js
index cb65a00a..9f65a275 100644
--- a/src/content/dependencies/generateExternalIcon.js
+++ b/src/content/dependencies/generateExternalIcon.js
@@ -7,9 +7,6 @@ export default {
 
   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',
     },
diff --git a/src/content/dependencies/generateExternalPlatform.js b/src/content/dependencies/generateExternalPlatform.js
new file mode 100644
index 00000000..c4f63ecf
--- /dev/null
+++ b/src/content/dependencies/generateExternalPlatform.js
@@ -0,0 +1,20 @@
+import {isExternalLinkContext} from '#external-links';
+
+export default {
+  extraDependencies: ['html', 'language'],
+
+  data: (url) => ({url}),
+
+  slots: {
+    context: {
+      validate: () => isExternalLinkContext,
+      default: 'generic',
+    },
+  },
+
+  generate: (data, slots, {language}) =>
+    language.formatExternalLink(data.url, {
+      style: 'platform',
+      context: slots.context,
+    }),
+};
diff --git a/src/content/dependencies/linkExternalAsIcon.js b/src/content/dependencies/linkExternalAsIcon.js
index 9b146a4c..0217e9d6 100644
--- a/src/content/dependencies/linkExternalAsIcon.js
+++ b/src/content/dependencies/linkExternalAsIcon.js
@@ -1,32 +1,42 @@
 import {isExternalLinkContext} from '#external-links';
 
 export default {
-  contentDependencies: ['generateExternalIcon'],
-  extraDependencies: ['html', 'language'],
+  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: {
-      // 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, relations, slots, {html, language}) {
-    const format = style =>
-      language.formatExternalLink(data.url, {style, context: slots.context});
-
-    const platformText = format('platform');
-    const handleText = format('handle');
+  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'},
@@ -37,9 +47,9 @@ export default {
           relations.icon,
 
           html.tag('span', {class: 'icon-text'},
-            (html.isBlank(handleText)
-              ? platformText
-              : handleText)),
+            (html.isBlank(relations.handle)
+              ? relations.platform
+              : relations.handle)),
         ]));
   },
 };