content, css: linkExternal: suffixNormalContent slot

2 files changed, 19 insertions, 0 deletions

diff --git a/src/content/dependencies/linkExternal.js b/src/content/dependencies/linkExternal.js
index f6b47db7..073c821e 100644
--- a/src/content/dependencies/linkExternal.js
+++ b/src/content/dependencies/linkExternal.js
@@ -11,6 +11,11 @@ export default {
       mutable: false,
     },
 
+    suffixNormalContent: {
+      type: 'html',
+      mutable: false,
+    },
+
     style: {
       // This awkward syntax is because the slot descriptor validator can't
       // differentiate between a function that returns a validator (the usual
@@ -131,6 +136,16 @@ export default {
       linkAttributes.set('target', '_blank');
     }
 
+    if (!html.isBlank(slots.suffixNormalContent)) {
+      linkContent =
+        html.tags([
+          linkContent,
+
+          html.tag('span', {class: 'normal-content'},
+            slots.suffixNormalContent),
+        ], {[html.joinChildren]: ''});
+    }
+
     return html.tag('a', linkAttributes, linkContent);
   },
 };
diff --git a/src/static/css/site.css b/src/static/css/site.css
index c477fe8c..f67326e2 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -799,6 +799,10 @@ a:not([href]):hover {
   color: white;
 }
 
+.external-link .normal-content {
+  color: white;
+}
+
 .nav-main-links .nav-link.current > span.nav-link-content > a {
   font-weight: 800;
 }