From 51d31398caa01cb762e1301ac6f210da6ebdae3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20B=C3=BCttner?=
 <Idrinth@users.noreply.github.com>
Date: Fri, 5 Jul 2024 22:29:06 +0200
Subject: [PATCH] fix: make external links open in new tabs (#114)

introduce an external link component to facilitate them always opening in new tabs
introduce rel=noreferrer to prevent javascript hijacking by target tabs

Closes #107
---
 src/components/ExternalLink.js | 5 +++++
 src/components/Footer.js       | 4 ++--
 src/components/list/Item.js    | 6 +++---
 3 files changed, 10 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ExternalLink.js

diff --git a/src/components/ExternalLink.js b/src/components/ExternalLink.js
new file mode 100644
index 0000000..f23830e
--- /dev/null
+++ b/src/components/ExternalLink.js
@@ -0,0 +1,5 @@
+import Link from "next/link";
+
+export default function ExternalLink({ href, children, ...rest }) {
+    return <Link target={"_blank"} rel={"noreferrer"} href={href} {...rest}>{ children }</Link>;
+}
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 98f24cd..1a03d2f 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,5 +1,5 @@
 import data from "@/config/app.json";
-import Link from "next/link";
+import ExternalLink from "@/components/ExternalLink";
 
 export default function Footer() {
   const githubUrl = "https://github.com/EddieHubCommunity/CreatorsRegistry";
@@ -11,7 +11,7 @@ export default function Footer() {
           &copy; {new Date().getFullYear()} EddieHub All rights reserved | v
           {data.version}
         </div>
-        <Link href={githubUrl}>{githubUrl}</Link>
+        <ExternalLink href={githubUrl}>{githubUrl}</ExternalLink>
       </div>
     </footer>
   );
diff --git a/src/components/list/Item.js b/src/components/list/Item.js
index 004cf3c..2387eb9 100644
--- a/src/components/list/Item.js
+++ b/src/components/list/Item.js
@@ -1,10 +1,10 @@
 import { ChevronRightIcon } from "@heroicons/react/20/solid";
 import Image from "next/image";
-import Link from "next/link";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import Badge from "@/components/Badge";
 import socialIcon from "@/config/socialIcon";
+import ExternalLink from "@/components/ExternalLink";
 
 export default function Item({ data }) {
   return (
@@ -33,10 +33,10 @@ export default function Item({ data }) {
           )}
           <div className="min-w-0 flex-auto">
             <p className="text-sm font-semibold leading-6 text-gray-900">
-              <Link href={data.url}>
+              <ExternalLink href={data.url}>
                 <span className="absolute inset-x-0 -top-px bottom-0" />
                 {data.urlText}
-              </Link>
+              </ExternalLink>
             </p>
             <p className="mt-1 flex text-xs leading-5 text-gray-500">
               {data.description}