« get me outta code hell

content, css: linkExternal: indicateExternal slot + new design - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/src
diff options
context:
space:
mode:
author(quasar) nebula <qznebula@protonmail.com>2024-03-01 07:50:58 -0400
committer(quasar) nebula <qznebula@protonmail.com>2024-03-31 19:19:33 -0300
commitb2f09b9ca45ac7f439aa5160c4d1b0ac61e66846 (patch)
treec5f0dfcd0dac1ee7a7c98deb65e0cd96e550bd86 /src
parentae3fac05e0d2ae6c654e2d23b66a9c63709a4f94 (diff)
content, css: linkExternal: indicateExternal slot + new design
Diffstat (limited to 'src')
-rw-r--r--src/content/dependencies/linkExternal.js55
-rw-r--r--src/content/dependencies/transformContent.js7
-rw-r--r--src/static/site6.css8
-rw-r--r--src/strings-default.yaml5
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"