Open all external links in a new tab

app/scripts/components/common/card.tsx

@@ -356,7 +356,7 @@ function CardComponent(props: CardComponentProps) {
 
   const isExternalLink = linkTo.match(/^https?:\/\//);
   const linkProps = isExternalLink
-    ? { href: linkTo, onClick: onLinkClick }
+    ? { href: linkTo, target: "_blank", rel: "noopener noreferrer", onClick: onLinkClick }
     : { as: Link, to: linkTo, onClick: onLinkClick };
 
   return (

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/smart-link.tsx

@@ -12,8 +12,25 @@ export default function SmartLink(props: SmartLinkProps) {
   const { to, ...rest } = props;
 
   return /^https?:\/\//.test(to) ? (
-    <a href={to} {...rest} />
+    <a target='_blank' rel='noopener noreferrer' href={to} {...rest} />
   ) : (
     <Link to={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;
+
+  return /^https?:\/\//.test(href) ? (
+    <a target='_blank' rel='noopener noreferrer' href={href} {...rest} />
+  ) : (
+    <Link to={href} {...rest} />
+  );
+}