Merge pull request #105 from niklasmtj/feature/internal-gatsby-links

feature: Use internal Link component

Author: todaywasawesome

src/components/ui/banner.js

@@ -1,6 +1,11 @@
+import { Link } from "gatsby"
 import * as React from "react"
 
 const Banner = ({ description, shortDescription, emoji, announcementLink }) => {
+  const isExternalLink =
+    announcementLink.indexOf("http://") === 0 ||
+    announcementLink.indexOf("https://") === 0
+
   return (
     <div className="bg-accent">
       <div className="mx-auto max-w-7xl py-3 px-3 sm:px-6 lg:px-8">
@@ -9,18 +14,37 @@ const Banner = ({ description, shortDescription, emoji, announcementLink }) => {
             {emoji && <span className="flex p-2 text-4xl">{emoji}</span>}
             <p className="ml-3 truncate font-bold text-2xl text-night">
               {announcementLink ? (
-                <>
-                  <a
-                    href={announcementLink}
-                    className="md:hidden hover:underline hover:text-night">
-                    {shortDescription}
-                  </a>
-                  <a
-                    href={announcementLink}
-                    className="hidden md:inline hover:underline hover:text-night">
-                    {description}
-                  </a>
-                </>
+                isExternalLink ? (
+                  <>
+                    <a
+                      href={announcementLink}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="md:hidden hover:underline hover:text-night">
+                      {shortDescription}
+                    </a>
+                    <a
+                      href={announcementLink}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="hidden md:inline hover:underline hover:text-night">
+                      {description}
+                    </a>
+                  </>
+                ) : (
+                  <>
+                    <Link
+                      to={announcementLink}
+                      className="md:hidden hover:underline hover:text-night">
+                      {shortDescription}
+                    </Link>
+                    <Link
+                      to={announcementLink}
+                      className="hidden md:inline hover:underline hover:text-night">
+                      {description}
+                    </Link>
+                  </>
+                )
               ) : (
                 <>
                   <span className="md:hidden">{shortDescription}</span>