content, css: linkExternal: indicateExternal slot + new design

4 files changed, 62 insertions, 13 deletions

diff --git a/src/content/dependencies/linkExternal.js b/src/content/dependencies/linkExternal.js
index 7a97762c..188c1f0d 100644
--- a/src/content/dependencies/linkExternal.js
+++ b/src/content/dependencies/linkExternal.js
@@ -24,6 +24,11 @@ export default {
       default: 'generic',
     },
 
+    indicateExternal: {
+      type: 'boolean',
+      default: false,
+    },
+
     tab: {
       validate: v => v.is('default', 'separate'),
       default: 'default',
@@ -31,29 +36,55 @@ export default {
   },
 
   generate(data, slots, {html, language}) {
-    const linkAttributes = html.attributes();
-    let linkContent = slots.content;
-
-    if (html.isBlank(linkContent)) {
-      linkContent =
-        language.formatExternalLink(data.url, {
-          style: slots.style,
-          context: slots.context,
-        });
-    }
+    let formattedLink =
+      language.formatExternalLink(data.url, {
+        style: slots.style,
+        context: slots.context,
+      });
 
     // Fall back to platform if nothing matched the desired style.
-    if (html.isBlank(linkContent) && slots.style !== 'platform') {
-      linkContent =
+    if (html.isBlank(formattedLink) && slots.style !== 'platform') {
+      formattedLink =
         language.formatExternalLink(data.url, {
           style: 'platform',
           context: slots.context,
         });
     }
 
+    const linkAttributes = html.attributes();
+    const linkContent =
+      (html.isBlank(slots.content)
+        ? formattedLink
+        : slots.content);
+
     linkAttributes.set('class', 'external-link');
     linkAttributes.set('href', data.url);
 
+    if (slots.indicateExternal) {
+      linkAttributes.add('class', 'indicate-external');
+
+      let titleText;
+      if (slots.tab === 'separate') {
+        if (html.isBlank(slots.content)) {
+          titleText =
+            language.$('misc.external.opensInNewTab.annotation');
+        } else {
+          titleText =
+            language.$('misc.external.opensInNewTab', {
+              link: formattedLink,
+              annotation:
+                language.$('misc.external.opensInNewTab.annotation'),
+            });
+        }
+      } else if (!html.isBlank(slots.content)) {
+        titleText = formattedLink;
+      }
+
+      if (titleText) {
+        linkAttributes.set('title', titleText.toString());
+      }
+    }
+
     if (slots.tab === 'separate') {
       linkAttributes.set('target', '_blank');
     }
diff --git a/src/content/dependencies/transformContent.js b/src/content/dependencies/transformContent.js
index d7b57ffd..e64aeb57 100644
--- a/src/content/dependencies/transformContent.js
+++ b/src/content/dependencies/transformContent.js
@@ -342,7 +342,12 @@ export default {
             const {label} = node.data;
             const externalLink = relations.externalLinks[externalLinkIndex++];
 
-            externalLink.setSlot('content', label);
+            externalLink.setSlots({
+              indicateExternal: true,
+              tab: 'separate',
+              style: 'platform',
+              content: label,
+            });
 
             return {type: 'processed-external-link', data: externalLink};
           }
diff --git a/src/static/site6.css b/src/static/site6.css
index 3d707f2c..83a066cd 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -472,6 +472,14 @@ a:not([href]):hover {
   white-space: nowrap;
 }
 
+.external-link.indicate-external::after {
+  content: ' ➚';
+}
+
+.external-link.indicate-external:hover::after {
+  color: white;
+}
+
 .nav-main-links .nav-link.current > span.nav-link-content > a {
   font-weight: 800;
 }
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 8cf3a734..46aeee86 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -504,6 +504,11 @@ misc:
     withHandle:
       "{PLATFORM} ({HANDLE})"
 
+    opensInNewTab:
+      _: "{LINK} ({ANNOTATION})"
+      annotation:
+        "opens in new tab"
+
     appleMusic: "Apple Music"
     artstation: "ArtStation"
     bandcamp: "Bandcamp"