From c628d4adee33b3eb10262a634b8ac39176186a94 Mon Sep 17 00:00:00 2001
From: yash Saraswat <saraswatyash2004@gmail.com>
Date: Tue, 17 Sep 2024 14:16:04 +0530
Subject: [PATCH] Fix: Footer Social Media Links (Twitter, LinkedIn) Not
 Opening in New Tabs (#248)

---
 src/components/Footer.jsx | 61 ++++++++++++++++++++++++++++++---------
 src/pages/index.jsx       | 20 +++++++++----
 2 files changed, 63 insertions(+), 18 deletions(-)

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index a036da7..4e98f66 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -3,7 +3,12 @@ import Link from 'next/link'
 import { Container } from '@/components/Container'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
-import { faDiscord, faGithub, faGitlab, faTwitter } from '@fortawesome/free-brands-svg-icons'
+import {
+  faDiscord,
+  faGithub,
+  faGitlab,
+  faTwitter,
+} from '@fortawesome/free-brands-svg-icons'
 
 function NavLink({ href, children }) {
   return (
@@ -23,30 +28,60 @@ export function Footer() {
         <div className="pt-10 pb-10">
           <Container.Inner>
             <div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
-              <div className="flex gap-5 text-md font-semibold font-mono text-zinc-800 dark:text-zinc-200">
+              <div className="text-md flex gap-5 font-mono font-semibold text-zinc-800 dark:text-zinc-200">
                 <NavLink href="/about">About</NavLink>
                 <NavLink href="/projects">Projects</NavLink>
                 <NavLink href="/ideas">Ideas</NavLink>
                 <NavLink href="/apply">Apply</NavLink>
               </div>
-              <p className="text-sm text-zinc-400 dark:text-zinc-500 font-mono">
+              <p className="font-mono text-sm text-zinc-400 dark:text-zinc-500">
                 &copy; 2016-2023 AOSSIE. All rights reserved.
               </p>
               <div className="flex gap-6">
-                <Link aria-label="Contact by Mail" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='mailto:aossie.oss@gmail.com'>
-                  <FontAwesomeIcon icon={faEnvelope} size='xl' />
+                <Link
+                  aria-label="Contact by Mail"
+                  className="text-zinc-400 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
+                  href="mailto:aossie.oss@gmail.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <FontAwesomeIcon icon={faEnvelope} size="xl" />
                 </Link>
-                <Link aria-label="Follow on GitLab" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://gitlab.com/aossie'>
-                  <FontAwesomeIcon icon={faGitlab} size='xl' />
+                <Link
+                  aria-label="Follow on GitLab"
+                  className="text-zinc-400 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
+                  href="https://gitlab.com/aossie"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <FontAwesomeIcon icon={faGitlab} size="xl" />
                 </Link>
-                <Link aria-label="Follow on GitHub" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://github.com/AOSSIE-Org'>
-                  <FontAwesomeIcon icon={faGithub} size='xl' />
+                <Link
+                  aria-label="Follow on GitHub"
+                  className="text-zinc-400 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
+                  href="https://github.com/AOSSIE-Org"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <FontAwesomeIcon icon={faGithub} size="xl" />
                 </Link>
-                <Link aria-label="Join on Discord" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://discord.com/invite/6mFZ2S846n'>
-                  <FontAwesomeIcon icon={faDiscord} size='xl' />
+                <Link
+                  aria-label="Join on Discord"
+                  className="text-zinc-400 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
+                  href="https://discord.com/invite/6mFZ2S846n"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <FontAwesomeIcon icon={faDiscord} size="xl" />
                 </Link>
-                <Link aria-label="Follow on Twitter" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'>
-                  <FontAwesomeIcon icon={faTwitter} size='xl' />
+                <Link
+                  aria-label="Follow on Twitter"
+                  className="text-zinc-400 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
+                  href="https://twitter.com/aossie_org"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <FontAwesomeIcon icon={faTwitter} size="xl" />
                 </Link>
               </div>
             </div>
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 2193d69..185c7bb 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -53,36 +53,46 @@ export default function Home() {
               <div className="mt-6 ml-4 flex gap-6">
                 <Link
                   aria-label="Contact by Mail"
-                  className=" text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
+                  className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
                   href="mailto:aossie.oss@gmail.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   <FontAwesomeIcon icon={faEnvelope} size="2xl" />
                 </Link>
                 <Link
                   aria-label="Follow on GitLab"
-                  className=" text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
+                  className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
                   href="https://gitlab.com/aossie"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   <FontAwesomeIcon icon={faGitlab} size="2xl" />
                 </Link>
                 <Link
                   aria-label="Follow on GitHub"
-                  className=" text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
+                  className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
                   href="https://github.com/AOSSIE-Org"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   <FontAwesomeIcon icon={faGithub} size="2xl" />
                 </Link>
                 <Link
                   aria-label="Join on Discord"
-                  className=" text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
+                  className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
                   href="https://discord.com/invite/6mFZ2S846n"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   <FontAwesomeIcon icon={faDiscord} size="2xl" />
                 </Link>
                 <Link
                   aria-label="Follow on Twitter"
-                  className=" text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
+                  className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
                   href="https://twitter.com/aossie_org"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   <FontAwesomeIcon icon={faTwitter} size="2xl" />
                 </Link>