fix: wrap all links in articles in next/link and add target _blank fo…

…r external links

apps/www/components/Link/Href.tsx

@@ -0,0 +1,51 @@
+import Link from 'next/link'
+import { cloneElement } from 'react'
+
+/**
+ * isLinkOfSameHost checks if a link is of the same host as the host provided.
+ * @param link relative or absolute link
+ * @param host hostname with protocol prefix
+ * @returns boolean
+ */
+function isLinkOfSameHost(link: string, host: string) {
+  try {
+    const { origin: hostOrigin } = new URL(host)
+    const { origin } = new URL(link, host)
+
+    return origin === hostOrigin
+  } catch (e) {
+    return false
+  }
+}
+
+const HrefLink = ({
+  href,
+  passHref,
+  legacyBehavior = true,
+  children,
+  ...restProps
+}) => {
+  if (!href) {
+    return children
+  }
+
+  const isExternalLink = !isLinkOfSameHost(
+    href,
+    process.env.NEXT_PUBLIC_BASE_URL,
+  )
+
+  return (
+    <Link
+      {...restProps}
+      href={href}
+      passHref={passHref}
+      prefetch={false}
+      legacyBehavior={legacyBehavior}
+    >
+      {legacyBehavior && isExternalLink
+        ? cloneElement(children, { target: '_blank', rel: 'noreferrer' })
+        : children}
+    </Link>
+  )
+}
+export default HrefLink

packages/styleguide/src/templates/Article/base.js

@@ -38,7 +38,9 @@ import { MIN_GALLERY_IMG_WIDTH } from '../../components/Figure/Image'
 import { ExpandableLink } from '../../components/ExpandableLink'
 import { SEPARATOR as EXPANDABLE_LINK_SEPARATOR } from '../../components/ExpandableLink/ExpandableLink'
 
-const createBase = ({ metaBody, metaHeadlines }) => {
+const DefaultLink = ({ children }) => children
+
+const createBase = ({ metaBody, metaHeadlines, Link = DefaultLink }) => {
   const link = {
     matchMdast: matchType('link'),
     props: (node, index, parent, { ancestors }) => {
@@ -51,39 +53,48 @@ const createBase = ({ metaBody, metaHeadlines }) => {
         href: node.url,
       }
     },
-    component: (props) => {
-      const { href, description } = props
+    component: ({ href, description, children, ...restProps }) => {
       const LinkComponent = description ? ExpandableLink : Editorial.A
       // workaround app issues with hash url by handling them ourselves and preventing the default behaviour
       if (href && href.slice(0, 3) === '#t=') {
         return (
-          <Editorial.A
-            {...props}
-            onClick={(e) => {
-              const time = parseTimeHash(href)
-              if (time !== false) {
-                e.preventDefault()
-                globalMediaState.setTime(time)
-              }
-            }}
-          />
+          <Link {...restProps} href={href} legacyBehavior passHref>
+            <Editorial.A
+              onClick={(e) => {
+                const time = parseTimeHash(href)
+                if (time !== false) {
+                  e.preventDefault()
+                  globalMediaState.setTime(time)
+                }
+              }}
+            >
+              {children}
+            </Editorial.A>
+          </Link>
         )
       }
       if (href && href[0] === '#') {
         return (
-          <Editorial.A
-            {...props}
-            onClick={(e) => {
-              const ele = document.getElementById(href.substr(1))
-              if (ele) {
-                e.preventDefault()
-                scrollIntoView(ele, { time: 0, align: { top: 0 } })
-              }
-            }}
-          />
+          <Link {...restProps} href={href} legacyBehavior passHref>
+            <Editorial.A
+              onClick={(e) => {
+                const ele = document.getElementById(href.substr(1))
+                if (ele) {
+                  e.preventDefault()
+                  scrollIntoView(ele, { time: 0, align: { top: 0 } })
+                }
+              }}
+            >
+              {children}
+            </Editorial.A>
+          </Link>
         )
       }
-      return <LinkComponent {...props} />
+      return (
+        <Link {...restProps} href={href} legacyBehavior passHref>
+          <LinkComponent>{children}</LinkComponent>
+        </Link>
+      )
     },
     editorModule: 'link',
     rules: globalInlines,

packages/styleguide/src/templates/Article/index.js

@@ -189,7 +189,7 @@ const createSchema = ({
   noEmpty = true,
   AudioPlayButton,
 } = {}) => {
-  const base = createBase({ metaBody, metaHeadlines })
+  const base = createBase({ metaBody, metaHeadlines, Link })
   const blocks = createBlocks({
     COVER_TYPE,
     base,