Open all external links in a new tab (#870)

Closes #873

app/scripts/components/common/card.tsx

@@ -20,6 +20,7 @@ import { variableBaseType, variableGlsp } from '$styles/variable-utils';
 import { ElementInteractive } from '$components/common/element-interactive';
 import { VarHeading } from '$styles/variable-components';
 import { Figure } from '$components/common/figure';
+import { getLinkProps } from '$utils/url';
 
 type CardType = 'classic' | 'cover' | 'featured';
 
@@ -354,10 +355,9 @@ function CardComponent(props: CardComponentProps) {
     onLinkClick
   } = props;
 
-  const isExternalLink = linkTo.match(/^https?:\/\//);
-  const linkProps = isExternalLink
-    ? { href: linkTo, onClick: onLinkClick }
-    : { as: Link, to: linkTo, onClick: onLinkClick };
+  const isExternalLink = /^https?:\/\//.test(linkTo);
+  const linkProps = getLinkProps(linkTo, Link, onLinkClick);
+
 
   return (
     <ElementInteractive

app/scripts/components/common/mdx-content.js

@@ -19,7 +19,7 @@ import {
   LazyEmbed
 } from '$components/common/blocks/lazy-components';
 import { NotebookConnectCalloutBlock } from '$components/common/notebook-connect';
-import SmartLink from '$components/common/smart-link';
+import SmartLink, { CustomLink } from '$components/common/smart-link';
 
 function MdxContent(props) {
   const pageMdx = useMdxPageLoader(props.loader);
@@ -44,6 +44,7 @@ function MdxContent(props) {
           CompareImage: LazyCompareImage,
           NotebookConnectCallout: NotebookConnectCalloutBlock,
           Link: SmartLink,
+          a: CustomLink,
           Table: LazyTable,
           Embed: LazyEmbed
         }}

app/scripts/components/common/page-footer.js

@@ -21,6 +21,8 @@ import { variableGlsp } from '../../styles/variable-utils';
 import { Tip } from '$components/common/tip';
 import { ComponentOverride } from '$components/common/page-overrides';
 
+import SmartLink from '$components/common/smart-link';
+
 const PageFooterSelf = styled.footer`
   padding: ${variableGlsp(0.75, 1)};
   background: ${themeVal('color.base-50')};
@@ -140,6 +142,8 @@ function PageFooter(props) {
               variation='base-text'
               size='small'
               fitting='skinny'
+              target='_blank'
+              rel='noopener noreferrer'
             >
               <CollecticonBrandGithub title='Explore the code' meaningful />
               GitHub
@@ -148,12 +152,12 @@ function PageFooter(props) {
         </InfoList>
         <FooterCredits>
           <p>
-            <a href='https://earthdata.nasa.gov/'>
+            <SmartLink to='https://earthdata.nasa.gov/'>
               <span>By</span> NASA <strong>Earthdata</strong> <span>on</span>{' '}
               <time dateTime={nowDate.getFullYear()}>
                 {nowDate.getFullYear()}
               </time>
-            </a>
+            </SmartLink>
             {' • '}
             <Tip
               content={`Released on ${format(

app/scripts/components/common/smart-link.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+import { getLinkProps } from '$utils/url';
+
 interface SmartLinkProps {
   to: string;
 }
@@ -10,10 +12,30 @@ interface SmartLinkProps {
  */
 export default function SmartLink(props: SmartLinkProps) {
   const { to, ...rest } = props;
+  const isExternalLink = /^https?:\/\//.test(to);
+  const linkProps = getLinkProps(to);
+  return isExternalLink ? (
+      <a {...linkProps} {...rest} />
+  ) : (
+    <Link {...linkProps} {...rest} />
+  );
+}
+
 
-  return /^https?:\/\//.test(to) ? (
-    <a href={to} {...rest} />
+interface CustomLinkProps {
+  href: string;
+}
+
+/**
+ * For links defined as markdown, this component will open the external link in a new tab.
+ */
+export function CustomLink(props: CustomLinkProps) {
+  const { href, ...rest } = props;
+  const isExternalLink = /^https?:\/\//.test(href);
+  const linkProps = getLinkProps(href);
+  return isExternalLink ? (
+      <a {...linkProps} {...rest} />
   ) : (
-    <Link to={to} {...rest} />
+    <Link {...linkProps} {...rest} />
   );
 }

app/scripts/utils/url.ts

@@ -0,0 +1,27 @@
+import React, { MouseEventHandler } from 'react';
+import { getBoolean } from 'veda';
+import { LinkProps } from 'react-router-dom';
+
+
+export const getLinkProps = (
+    linkTo: string,
+    as?: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>,
+    onClick?: (() => void) | MouseEventHandler
+  ) => {
+    const externalLinksInNewTab = getBoolean('externalLinksInNewTab');
+    const isExternalLink = /^https?:\/\//.test(linkTo);
+    return isExternalLink
+    ? {
+        href: linkTo,
+        to: linkTo,
+        ...(externalLinksInNewTab
+          ? {target: '_blank', rel: 'noopener noreferrer'}
+          : {}),
+        ...(onClick ? {onClick: onClick} : {})
+      }
+    : {
+        ...(as ? {as: as} : {}),
+        to: linkTo,
+        ...(onClick ? {onClick: onClick} : {})
+      };
+  };

parcel-resolver-veda/index.d.ts

@@ -293,6 +293,9 @@ export interface LayerInfo {
     one: string;
     other: string;
   };
+
+  export const getBoolean: (variable: string) => boolean;
+
   /**
    * List of custom user defined pages.
    */

parcel-resolver-veda/index.js

@@ -193,7 +193,8 @@ module.exports = new Resolver({
             root,
             logger
           )},
-          strings: ${JSON.stringify(withDefaultStrings(result.strings))}
+          strings: ${JSON.stringify(withDefaultStrings(result.strings))},
+          booleans: ${JSON.stringify(withDefaultStrings(result.booleans))}
         };
 
         export const theme = ${JSON.stringify(result.theme) || null};
@@ -212,6 +213,7 @@ module.exports = new Resolver({
           .filter((k) => k.startsWith('/'));
 
         export const getString = (variable) => config.strings[variable];
+        export const getBoolean = (variable) => config.booleans[variable];
 
         export const datasets = ${generateMdxDataObject(datasetsImportData)};
         export const stories = ${generateMdxDataObject(storiesImportData)};