fix: open blog link in new window (#2211)

Author: e-schneid

packages/website/components/link.js

@@ -7,15 +7,23 @@ import Link from 'next/link'
  * @param {string} [props.className]
  * @param {number} [props.tabIndex]
  * @param {string} [props.id]
+ * @param {string} [props.target]
  * @param {React.MouseEventHandler} [props.onClick]
  * @param {React.ReactNode | string} props.children
  * @returns {JSX.Element}
  */
-const WrappedLink = ({ tabIndex = 0, href = '', children, ...otherProps }) => (
-  <Link href={href} {...otherProps}>
+const WrappedLink = ({
+  tabIndex = 0,
+  href = '',
+  children,
+  target,
+  ...otherProps
+}) => (
+  <Link href={href} {...otherProps} passHref={target === '_blank'}>
     <a
       href={href.pathname || href}
       {...otherProps}
+      target={target}
       tabIndex={tabIndex}
       onClick={otherProps.onClick}
     >

packages/website/components/navbar.js

@@ -103,6 +103,7 @@ export default function Navbar({ bgColor = 'bg-nsorange', logo, user }) {
           pathname: BLOG_URL,
           activeClass: '!text-forest',
         },
+        target: '_blank',
         name: 'Blog',
       },
       ...(user
@@ -183,6 +184,7 @@ export default function Navbar({ bgColor = 'bg-nsorange', logo, user }) {
                     href={item.link || ''}
                     key={item.name}
                     aria-current={isActive ? 'page' : undefined}
+                    target={item.target}
                     className={clsx(
                       'text-xl text-black no-underline underline-hover align-middle',
                       {
@@ -264,6 +266,7 @@ export default function Navbar({ bgColor = 'bg-nsorange', logo, user }) {
                     'mobile-nav-link align-middle chicagoflf',
                     logo.isDark ? 'black' : 'white'
                   )}
+                  target={item.target}
                   onClick={item.tracking ? item.tracking : onMobileLinkClick}
                 >
                   {item.name}