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

Author: Idrinth

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>;
+}

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() {
           © {new Date().getFullYear()} EddieHub All rights reserved | v
           {data.version}
         </div>
-        <Link href={githubUrl}>{githubUrl}</Link>
+        <ExternalLink href={githubUrl}>{githubUrl}</ExternalLink>
       </div>
     </footer>
   );

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}