Add custom style and behaviour on external link

Resolves #190
spring-io · Nov 2, 2023 · d6739c7 · d6739c7
1 parent 379fb35
commit d6739c7
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/src/css/doc.css b/src/css/doc.css
@@ -721,9 +721,7 @@ h1.page + aside.toc.embedded {
   background: var(--kbd-background);
   border: 1px solid var(--kbd-border-color);
   border-radius: 0.25em;
-  box-shadow:
-    0 1px 0 var(--kbd-border-color),
-    0 0 0 0.1em var(--body-background) inset;
+  box-shadow: 0 1px 0 var(--kbd-border-color), 0 0 0 0.1em var(--body-background) inset;
   padding: 0.25em 0.5em;
   vertical-align: text-bottom;
   white-space: nowrap; /* effectively ignores hyphens setting */
@@ -807,3 +805,14 @@ html.dark-theme .doc img {
   padding: 1rem;
   padding-top: 0;
 }
+
+.doc a.external::after {
+  content: "\f08e";
+  margin-left: 4px;
+  display: inline-block;
+  font: normal normal normal 14px/1 FontAwesome, sans-serif;
+  font-size: 12px;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/src/js/02-on-this-page.js b/src/js/02-on-this-page.js
@@ -1,6 +1,17 @@
 ;(function () {
   'use strict'
 
+  document.querySelectorAll('.content article a')
+    .forEach(function (item) {
+      const location = window.location
+      if (location) {
+        if (item.hostname && item.hostname !== location.hostname) {
+          item.classList.add('external')
+          item.setAttribute('target', '_blank')
+        }
+      }
+    })
+
   var sidebar = document.querySelector('div.toc')
   if (!sidebar) return
   if (document.querySelector('body.-toc')) return sidebar.parentNode.removeChild(sidebar)