enhancement/issue 220 open all external links in a new browser tab (#221)

Author: thescientist13

greenwood.config.js

@@ -47,6 +47,17 @@ export default {
       "rehype-autolink-headings",
       "remark-github",
       "remark-gfm",
+      {
+        name: "rehype-external-links",
+        options: {
+          // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#security_and_privacy
+          rel: ["nofollow", "noopener", "noreferrer"],
+          target: "_blank",
+          contentProperties: { className: ["no-show-screen-reader"] },
+          content: [{ type: "text", value: " (opens in a new window)" }],
+          properties: { className: ["external-link-icon"] },
+        },
+      },
     ],
   },
 

package-lock.json

@@ -66,6 +66,7 @@
     "node-html-parser": "^6.1.13",
     "prettier": "^3.2.5",
     "rehype-autolink-headings": "^4.0.0",
+    "rehype-external-links": "^3.0.0",
     "rehype-slug": "^3.0.0",
     "remark-gfm": "^4.0.0",
     "remark-github": "^10.0.1",

package.json

@@ -15,8 +15,9 @@ export default class GetStarted extends HTMLElement {
         </div>
 
         <div>
-          <a href="https://stackblitz.com/github/projectevergreen/greenwood-getting-started" class="${styles.buttonBlitz}">
+          <a href="https://stackblitz.com/github/projectevergreen/greenwood-getting-started" class="${styles.buttonBlitz}" target="_blank">
             <span>View in Stackblitz</span>
+            <span class="no-show-screen-reader"> (opens in a new window)</span>
           </a>
           
           <a href="/guides/getting-started/" class="${styles.buttonStarted}">

src/assets/external-link.svg

@@ -12,8 +12,9 @@ export default class HeroBanner extends HTMLElement {
         <p class="${styles.headingSub}">Greenwood is your workbench for the web, embracing web standards from the ground up to empower your stack from front to back.</p>
 
         <div class="${styles.ctaContainer}">
-          <a href="https://stackblitz.com/github/projectevergreen/greenwood-getting-started" class="${styles.buttonBlitz}">
+          <a href="https://stackblitz.com/github/projectevergreen/greenwood-getting-started" class="${styles.buttonBlitz}"  target="_blank">
             <span>View in Stackblitz</span>
+            <span class="no-show-screen-reader"> (opens in a new window)</span>
           </a>
           
           <a href="/guides/getting-started/" class="${styles.buttonStarted}">

src/components/get-started/get-started.js

@@ -9,26 +9,30 @@ export default class SocialTray extends HTMLElement {
     this.innerHTML = `
       <ul class="${styles.socialTray}">
         <li class="${styles.socialIcon}">
-          <a href="https://github.com/ProjectEvergreen/greenwood" title="GitHub">
+          <a href="https://github.com/ProjectEvergreen/greenwood" title="GitHub" target="_blank">
             ${githubIcon}
+            <span class="no-show-screen-reader"> (opens in a new window)</span>
           </a>
         </li>
 
         <li class="${styles.socialIcon}">
-          <a href="/discord/" title="Discord">
+          <a href="/discord/" title="Discord" target="_blank">
             ${discordIcon}
+            <span class="no-show-screen-reader"> (opens in a new window)</span>
           </a>
         </li>
 		
         <li class="${styles.socialIcon}">
-          <a href="https://bsky.app/profile/projectevergreen.bsky.social" title="BlueSky">
+          <a href="https://bsky.app/profile/projectevergreen.bsky.social" title="BlueSky" target="_blank">
             ${blueskyIcon}
+            <span class="no-show-screen-reader"> (opens in a new window)</span>
           </a>
         </li>
 
         <li class="${styles.socialIcon}">
-          <a href="https://twitter.com/PrjEvergreen" title="Twitter">
+          <a href="https://twitter.com/PrjEvergreen" title="Twitter" target="_blank">
             ${twitterIcon}
+            <span class="no-show-screen-reader"> (opens in a new window)</span>
           </a>
         </li>
       </ul>

src/components/hero-banner/hero-banner.js

@@ -40,15 +40,18 @@ describe("Components/Social Tray", () => {
     it("should have the expected social link icons", () => {
       const links = tray.querySelectorAll("ul li a");
       const icons = tray.querySelectorAll("ul li a svg");
+      const noShowScreenReader = tray.querySelectorAll("ul li a span.no-show-screen-reader");
 
       expect(links.length).to.equal(4);
       expect(icons.length).to.equal(4);
+      expect(noShowScreenReader.length).to.equal(4);
 
       Array.from(links).forEach((link) => {
         const iconItem = ICONS.find((icon) => icon.title === link.getAttribute("title"));
 
         expect(iconItem).to.not.equal(undefined);
         expect(link.getAttribute("href")).to.equal(iconItem.link);
+        expect(link.getAttribute("target")).equal("_blank");
       });
     });
   });

src/components/social-tray/social-tray.js

@@ -144,3 +144,20 @@ li {
     font-style: italic;
   }
 }
+
+/* external links styling */
+.no-show-screen-reader {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.external-link-icon::after {
+  content: url(/assets/external-link.svg);
+  margin: 0 0 0 var(--size-1);
+  vertical-align: middle;
+}