#97 open external links in new window and stylize

.vscode/settings.json

@@ -67,6 +67,7 @@
     "caniuse",
     "deflist",
     "destructure",
+    "docgov",
     "docx",
     "eleventy",
     "flexbox",
@@ -83,6 +84,7 @@
     "minmax",
     "netlify",
     "nofollow",
+    "noopener",
     "nwsprod",
     "nwstest",
     "passthroughs",

assets/styles/dark.css

@@ -45,7 +45,17 @@ body.color-theme-dark {
 }
 
 .color-theme-dark .toc a {
-    color: #97a0a3;
+    color: #b5c4c9;
+}
+
+.color-theme-dark .toc a:hover,
+.color-theme-dark .toc li.active>a {
+    color: #5db6d9;
+}
+
+.color-theme-dark .toc a::before {
+    content: "{";
+    color: #5db6d9;
 }
 
 .color-theme-dark footer.footer {

assets/styles/styles.css

@@ -250,6 +250,7 @@ aside.toc {
 .toc a::before {
     content: "{";
     color: #1a7498;
+    font-weight: bold;
     position: absolute;
     left: -10px;
     top: -1px;
@@ -591,6 +592,19 @@ dt {
     background-position: 0 100%;
 }
 
+.content a.external-link:hover::after {
+    content: "";
+    background-image: url(/assets/images/icons/fa/external-link.svg);
+    background-repeat: no-repeat;
+    width: 12px;
+    height: 12px;
+    display: inline-block;
+    filter: invert(1)brightness(0.5);
+    margin-left: -1px;
+    margin-top: -5px;
+    position: absolute;
+}
+
 .content a.post-title {
     padding: 4px;
 }

data/config.js

@@ -1,13 +1,15 @@
 // These come from Netlify https://www.netlify.com/docs/continuous-deployment/#build-environment-variables
-const CONTEXT = process.env.CONTEXT;                   // Name of the context a deploy is built around, it can be production, deploy-preview or branch-deploy.
-const URL = process.env.URL;                           // This URL represents the main address to your site
+const CONTEXT = process.env.CONTEXT; // Name of the context a deploy is built around, it can be production, deploy-preview or branch-deploy.
+const URL = process.env.URL; // This URL represents the main address to your site
 const DEPLOY_PRIME_URL = process.env.DEPLOY_PRIME_URL; // This URL represents the unique URL for an individual deploy
 
 const DEFAULT_DEV_URL = 'http://localhost:8080';
 
 
 module.exports = {
 
+    PROD_DOMAIN: "docgov.dev",
+
     ELEVENTY_ENV: process.env.ELEVENTY_ENV,
 
     /**
@@ -45,13 +47,12 @@ module.exports = {
 };
 
 
-function getBaseUrl()
-{
+function getBaseUrl() {
     if (CONTEXT == 'production') {
         return URL;
     } else if (DEPLOY_PRIME_URL) {
         return DEPLOY_PRIME_URL;
     } else {
         return DEFAULT_DEV_URL;
     }
-}
+}

plugins/customize-markdown.js

@@ -60,6 +60,43 @@ module.exports = function CustomizeMD() {
     };
 
 
+    // Remember old renderer, if overridden, or proxy to default renderer
+    let defaultAnchorRender = md.renderer.rules.link_open || function(tokens, idx, options, env, self) {
+        return self.renderToken(tokens, idx, options);
+    };
+
+    md.renderer.rules.link_open = function(tokens, idx, options, env, self) {
+        // If you are sure other plugins can't add `target` - drop check below
+        let token = tokens[idx]
+        var tarIndex = token.attrIndex('target');
+
+        let setAttribute = function(token, attrName, attrValue, append) {
+            var index = token.attrIndex(attrName);
+
+            if (index < 0) {
+                // add new attribute
+                token.attrPush([attrName, attrValue]);
+            } else {
+                // update value of existing attr
+                token.attrs[index][1] = (append ? token.attrs[index][1] : "") + attrValue;
+            }
+        }
+
+        let config = require("../data/config")
+        let externalRegex = new RegExp(`^https?:\/\/(?!${config.PROD_DOMAIN})`)
+        let isExternal = externalRegex.test(token.attrGet('href'))
+
+        if (isExternal) {
+            setAttribute(token, "target", "_blank")
+            setAttribute(token, "rel", "noopener")
+            setAttribute(token, "class", " external-link", true)
+        }
+
+        // pass token to default renderer.
+        return defaultAnchorRender(tokens, idx, options, env, self);
+    };
+
+
     return md
 }