add js to open external links in new tab

Author: jsdearbo

_config.yml

@@ -64,6 +64,7 @@ footer:
       icon: "fab fa-linkedin"
       url: "https://www.linkedin.com/in/jake-dearborn-15408652/"
 
+
 # Defaults for pages
 defaults:
   - scope:
@@ -76,6 +77,9 @@ defaults:
       comments: false
       share: false
       related: false
+      # Add custom footer include for JS
+      footer:
+        custom: custom-footer
 
 # Markdown settings
 markdown: kramdown

_includes/custom-footer.html

@@ -0,0 +1 @@
+<script src="/assets/js/open-external-in-new-tab.js"></script>

assets/js/open-external-in-new-tab.js

@@ -0,0 +1,12 @@
+// This script makes all external links open in a new tab (target="_blank")
+// It runs after the DOM is loaded.
+document.addEventListener("DOMContentLoaded", function() {
+  var links = document.querySelectorAll('a[href^="http"], a[href^="mailto:"]');
+  links.forEach(function(link) {
+    // Only set target for links not on the same domain
+    if (!link.href.startsWith(window.location.origin)) {
+      link.setAttribute('target', '_blank');
+      link.setAttribute('rel', 'noopener noreferrer');
+    }
+  });
+});