From cfc92c62fc914f174e4b44d6637effdd388137d2 Mon Sep 17 00:00:00 2001
From: Niklas Metje <22395665+niklasmtj@users.noreply.github.com>
Date: Tue, 6 Dec 2022 21:22:31 +0100
Subject: [PATCH] feature: Use internal Link component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Since Gatsby has it's own Link component to route to internal
pages which is a lot faster than the simple `a` tag, this
is now used. Also checking for external links with a
simple check for `http` or ´https` at the start of
the URL. This should do the trick for most of the
URLs.

Signed-off-by: Niklas Metje <22395665+niklasmtj@users.noreply.github.com>
---
 src/components/ui/banner.js | 48 +++++++++++++++++++++++++++----------
 1 file changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/components/ui/banner.js b/src/components/ui/banner.js
index 244620b..1da31cd 100644
--- a/src/components/ui/banner.js
+++ b/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>