From c47d3a896c09bb55e8ac7a4b81c62b69d340ed66 Mon Sep 17 00:00:00 2001
From: Sutu Sebastian <41998826+SutuSebastian@users.noreply.github.com>
Date: Tue, 6 Aug 2024 16:23:15 +0300
Subject: [PATCH] SEO: a11y + open external links in new tabs (#1463)

* chore: improve SEO lighthouse

* chore: open external link in new tab

* chore: open external link in new tab #2
---
 apps/web/app/docs/layout.tsx                  | 11 ++----
 apps/web/app/layout.tsx                       |  1 -
 apps/web/components/code-demo.tsx             |  3 +-
 .../homepage/contributors-section.tsx         |  2 ++
 .../components/homepage/featured-section.tsx  | 35 ++++++++++++++++---
 .../web/components/homepage/figma-section.tsx |  4 +++
 apps/web/components/homepage/home-navbar.tsx  | 11 ++----
 .../web/components/homepage/react-section.tsx | 15 ++++++--
 .../homepage/social-proof-section.tsx         |  9 ++++-
 .../components/homepage/tailwind-section.tsx  |  4 +++
 apps/web/components/navbar.tsx                |  8 +++++
 11 files changed, 74 insertions(+), 29 deletions(-)

diff --git a/apps/web/app/docs/layout.tsx b/apps/web/app/docs/layout.tsx
index 8c91b406d..f775c337a 100644
--- a/apps/web/app/docs/layout.tsx
+++ b/apps/web/app/docs/layout.tsx
@@ -70,15 +70,8 @@ function DocsNavbar({ isCollapsed, setCollapsed }: DocsLayoutState) {
             <HiX aria-label="Close sidebar" className="size-6 cursor-pointer text-gray-600 dark:text-gray-300" />
           </button>
         )}
-        <Link href="/" className="sr-only">
-          Flowbite React
-        </Link>
-        <Link
-          aria-hidden
-          href="/"
-          className="flex items-center gap-3 text-2xl font-semibold text-gray-900 dark:text-white"
-        >
-          <Image alt="" height={32} src="/favicon.svg" width={32} className="size-8" />
+        <Link href="/" className="flex items-center gap-3 text-2xl font-semibold text-gray-900 dark:text-white">
+          <Image alt="Flowbite React logo" src="/favicon.svg" height={32} width={32} className="size-8" />
           <span>Flowbite React</span>
         </Link>
         <div className="hidden lg:ml-[4.5rem] lg:flex">
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index aa0ce6744..2e851f266 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -47,7 +47,6 @@ export const metadata: Metadata = {
 export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
-  maximumScale: 1,
   themeColor: [
     { media: "(prefers-color-scheme: light)", color: "#ffffff" },
     { media: "(prefers-color-scheme: dark)", color: "#1f2937" },
diff --git a/apps/web/components/code-demo.tsx b/apps/web/components/code-demo.tsx
index 15faa9a84..b83d0465c 100644
--- a/apps/web/components/code-demo.tsx
+++ b/apps/web/components/code-demo.tsx
@@ -272,7 +272,8 @@ function EditOnGithubButton({ githubSlug }: { githubSlug: string }) {
   return (
     <a
       href={href}
-      rel="noreferrer nofollow noopener"
+      target="_blank"
+      rel="nofollow noopener noreferrer"
       className="inline-flex w-fit items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-center text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-primary-700 focus:text-primary-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:text-white dark:focus:ring-gray-700"
     >
       <svg
diff --git a/apps/web/components/homepage/contributors-section.tsx b/apps/web/components/homepage/contributors-section.tsx
index 5ca4f2679..6e5c433ac 100644
--- a/apps/web/components/homepage/contributors-section.tsx
+++ b/apps/web/components/homepage/contributors-section.tsx
@@ -72,6 +72,8 @@ export async function ContributorsSection() {
                 <p>Become a member of a community of developers by supporting Flowbite</p>
               </div>
               <Link
+                rel="noopener"
+                target="_blank"
                 href="https://github.com/themesberg/flowbite-react"
                 className="flex items-center gap-2 whitespace-nowrap text-base font-medium text-cyan-700 hover:underline"
               >
diff --git a/apps/web/components/homepage/featured-section.tsx b/apps/web/components/homepage/featured-section.tsx
index 59fb0b401..9073d4818 100644
--- a/apps/web/components/homepage/featured-section.tsx
+++ b/apps/web/components/homepage/featured-section.tsx
@@ -7,7 +7,12 @@ export function FeaturedSection() {
         <div className="flex flex-col items-center justify-center gap-2 lg:flex-row lg:gap-8">
           <div className="mx-auto mb-4 text-base tracking-tight lg:mx-0 lg:mb-0">Featured in:</div>
           <div className="flex flex-wrap items-center justify-center gap-8">
-            <Link href="https://www.reddit.com/r/flowbite/" rel="nofollow noreferrer noopener">
+            <Link
+              aria-label="Reddit - Flowbite"
+              href="https://www.reddit.com/r/flowbite/"
+              rel="nofollow noopener noreferrer"
+              target="_blank"
+            >
               <svg width="105" height="36" viewBox="0 0 105 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                   d="M17.727 35.0829C27.2844 35.0829 35.0322 27.3351 35.0322 17.7778C35.0322 8.22043 27.2844 0.472656 17.727 0.472656C8.16966 0.472656 0.421875 8.22043 0.421875 17.7778C0.421875 27.3351 8.16966 35.0829 17.727 35.0829Z"
@@ -27,7 +32,12 @@ export function FeaturedSection() {
                 />
               </svg>
             </Link>
-            <Link href="https://dev.to/t/flowbite" rel="nofollow noreferrer noopener">
+            <Link
+              aria-label="DEV - Flowbite"
+              href="https://dev.to/t/flowbite"
+              rel="nofollow noopener noreferrer"
+              target="_blank"
+            >
               <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                   d="M9.8811 14.0207C9.57556 13.7923 9.26923 13.6781 8.96369 13.6781H7.59032V21.905H8.96447C9.27002 21.905 9.57634 21.7908 9.88189 21.5624C10.1874 21.334 10.3402 20.9915 10.3402 20.534V15.0492C10.3394 14.5924 10.1859 14.2491 9.8811 14.0207ZM32.244 0.138184H3.87892C1.97321 0.138184 0.4266 1.68086 0.421875 3.58735V31.9682C0.4266 33.8747 1.97321 35.4174 3.87892 35.4174H32.244C34.1505 35.4174 35.6963 33.8747 35.701 31.9682V3.58735C35.6963 1.68086 34.1497 0.138184 32.244 0.138184ZM12.5648 20.5489C12.5648 22.0302 11.6506 24.2745 8.75658 24.2698H5.10266V11.2401H8.83375C11.6246 11.2401 12.5633 13.4813 12.564 14.9633L12.5648 20.5489ZM20.4932 13.5671H16.2975V16.5926H18.8623V18.9212H16.2975V21.9459H20.494V24.2745H15.5974C14.7186 24.2973 13.9878 23.6028 13.9658 22.7239V12.8718C13.9445 11.9937 14.6398 11.2645 15.5179 11.2425H20.494L20.4932 13.5671ZM28.6547 22.646C27.6152 25.0675 25.7528 24.5856 24.9188 22.646L21.8847 11.2433H24.4495L26.7891 20.1985L29.1177 11.2433H31.6833L28.6547 22.646Z"
@@ -35,7 +45,12 @@ export function FeaturedSection() {
                 />
               </svg>
             </Link>
-            <Link href="https://www.producthunt.com/products/flowbite" rel="nofollow noreferrer noopener">
+            <Link
+              aria-label="Product Hunt - Flowbite"
+              href="https://www.producthunt.com/products/flowbite"
+              rel="nofollow noopener noreferrer"
+              target="_blank"
+            >
               <svg width="153" height="36" viewBox="0 0 153 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                   d="M36.257 17.7779C36.257 27.5959 28.2971 35.5558 18.4791 35.5558C8.65988 35.5558 0.701172 27.5959 0.701172 17.7779C0.701172 7.95871 8.66049 0 18.4791 0C28.2971 0 36.257 7.95932 36.257 17.7779Z"
@@ -51,7 +66,12 @@ export function FeaturedSection() {
                 />
               </svg>
             </Link>
-            <Link href="https://news.ycombinator.com/item?id=28561468" rel="nofollow noreferrer noopener">
+            <Link
+              aria-label="Y Combinator - Flowbite"
+              href="https://news.ycombinator.com/item?id=28561468"
+              rel="nofollow noopener noreferrer"
+              target="_blank"
+            >
               <svg width="161" height="34" viewBox="0 0 161 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M33.6816 0.226074H0.578125V33.3295H33.6816V0.226074Z" fill="#6B7280" />
                 <path
@@ -100,7 +120,12 @@ export function FeaturedSection() {
                 />
               </svg>
             </Link>
-            <Link href="https://www.youtube.com/channel/UC_Ms4V2kYDsh7F_CSsHyQ6A" rel="nofollow noreferrer noopener">
+            <Link
+              aria-label="YoutTube - Flowbite"
+              href="https://www.youtube.com/channel/UC_Ms4V2kYDsh7F_CSsHyQ6A"
+              rel="nofollow noopener noreferrer"
+              target="_blank"
+            >
               <svg width="113" height="24" viewBox="0 0 113 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                   d="M33.6752 3.75529C33.2799 2.28706 32.1223 1.12941 30.6541 0.734118C27.9717 0 17.2423 0 17.2423 0C17.2423 0 6.51292 0 3.83057 0.705882C2.39057 1.10118 1.20469 2.28706 0.809397 3.75529C0.103516 6.43765 0.103516 12 0.103516 12C0.103516 12 0.103516 17.5906 0.809397 20.2447C1.20469 21.7129 2.36234 22.8706 3.83057 23.2659C6.54116 24 17.2423 24 17.2423 24C17.2423 24 27.9717 24 30.6541 23.2941C32.1223 22.8988 33.2799 21.7412 33.6752 20.2729C34.3811 17.5906 34.3811 12.0282 34.3811 12.0282C34.3811 12.0282 34.4094 6.43765 33.6752 3.75529Z"
diff --git a/apps/web/components/homepage/figma-section.tsx b/apps/web/components/homepage/figma-section.tsx
index e5ece76f4..898a51a54 100644
--- a/apps/web/components/homepage/figma-section.tsx
+++ b/apps/web/components/homepage/figma-section.tsx
@@ -20,6 +20,8 @@ export function FigmaSection() {
               <p className="self-stretch">Check out the following resources to learn more about Flowbite Figma:</p>
               <div className="isolate flex flex-col items-start gap-4 self-stretch">
                 <a
+                  rel="nofollow noopener noreferrer"
+                  target="_blank"
                   href="https://www.figma.com/file/xYaJr6UvThCW2LM2RjLeJf/flowbite-pro-figma-2.6.0?type=design&node-id=18-0&t=jKFrn2Dz5D8jhk7d-0"
                   className="inline-flex max-w-lg items-center justify-start gap-5 self-stretch rounded-lg border border-gray-300 bg-white px-4 py-3.5 text-center text-base font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 sm:gap-7 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
                 >
@@ -65,6 +67,8 @@ export function FigmaSection() {
                   </div>
                 </a>
                 <a
+                  rel="noopener"
+                  target="_blank"
                   href="https://flowbite.com/figma/"
                   className="inline-flex max-w-lg items-center justify-start gap-4 self-stretch rounded-lg border border-gray-300 bg-white px-4 py-3.5 text-center text-base font-medium text-gray-900 placeholder:py-3.5 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 sm:gap-6 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
                 >
diff --git a/apps/web/components/homepage/home-navbar.tsx b/apps/web/components/homepage/home-navbar.tsx
index d84870bbb..ab2b3b52c 100644
--- a/apps/web/components/homepage/home-navbar.tsx
+++ b/apps/web/components/homepage/home-navbar.tsx
@@ -17,15 +17,8 @@ export function HomeNavbar() {
       }}
     >
       <div className="flex items-center gap-3">
-        <Link href="/" className="sr-only">
-          Flowbite React
-        </Link>
-        <Link
-          aria-hidden
-          href="/"
-          className="flex items-center gap-3 text-2xl font-semibold text-gray-900 dark:text-white"
-        >
-          <Image alt="" aria-hidden height="32" src="/favicon.svg" width="32" />
+        <Link href="/" className="flex items-center gap-3 text-2xl font-semibold text-gray-900 dark:text-white">
+          <Image alt="Flowbite React logo" src="/favicon.svg" width="32" height="32" className="size-8" />
           <span>Flowbite React</span>
         </Link>
         <div className="ml-4 hidden lg:flex">
diff --git a/apps/web/components/homepage/react-section.tsx b/apps/web/components/homepage/react-section.tsx
index 99e08c4ed..de85003bc 100644
--- a/apps/web/components/homepage/react-section.tsx
+++ b/apps/web/components/homepage/react-section.tsx
@@ -39,9 +39,12 @@ export function ReactSection() {
                 React UI components
               </h2>
               <p className="text-lg text-gray-500 dark:text-gray-400">
-                <a href="" className="text-lg font-medium text-gray-900 underline hover:no-underline dark:text-white">
+                <Link
+                  href="/"
+                  className="text-lg font-medium text-gray-900 underline hover:no-underline dark:text-white"
+                >
                   Flowbite React
-                </a>{" "}
+                </Link>{" "}
                 is a free and open-source UI component library based on accessible React components and Tailwind CSS.
               </p>
               <p className="text-lg text-gray-500 dark:text-gray-400">
@@ -78,7 +81,13 @@ export function ReactSection() {
                 <Button as={Link} href="/docs/getting-started/quickstart">
                   Start building <HiOutlineArrowRight className="ml-2 size-5" />
                 </Button>
-                <Button as={Link} href="https://github.com/themesberg/flowbite-react" color="gray">
+                <Button
+                  as={Link}
+                  color="gray"
+                  href="https://github.com/themesberg/flowbite-react"
+                  rel="noopener"
+                  target="_blank"
+                >
                   View on GitHub
                 </Button>
               </div>
diff --git a/apps/web/components/homepage/social-proof-section.tsx b/apps/web/components/homepage/social-proof-section.tsx
index 04d27ef06..2f21a9405 100644
--- a/apps/web/components/homepage/social-proof-section.tsx
+++ b/apps/web/components/homepage/social-proof-section.tsx
@@ -90,6 +90,8 @@ export async function SocialProofSection() {
           <div className="flex w-full flex-col items-start gap-6 md:gap-3">
             <div className="flex flex-row items-start gap-2 self-stretch md:justify-between md:gap-2 md:pr-16 lg:justify-end lg:gap-2 lg:pr-0">
               <a
+                rel="noopener"
+                target="_blank"
                 href="https://github.com/themesberg/flowbite-react"
                 className="flex w-full max-w-[272px] flex-col items-start gap-4 rounded-lg px-4 py-2 text-gray-400 hover:bg-gray-50 lg:px-8 lg:py-6 dark:hover:bg-gray-800"
               >
@@ -114,6 +116,8 @@ export async function SocialProofSection() {
                 </div>
               </a>
               <a
+                rel="nofollow noopener noreferrer"
+                target="_blank"
                 href="https://www.npmjs.com/package/flowbite-react"
                 className="flex w-full max-w-[272px] flex-col items-start gap-4 rounded-lg px-4 py-2 text-gray-400 hover:bg-gray-50 lg:px-8 lg:py-6 dark:hover:bg-gray-800"
               >
@@ -131,6 +135,8 @@ export async function SocialProofSection() {
             </div>
             <div className="flex flex-row items-start gap-2 self-stretch md:justify-between md:gap-12 md:pr-16 lg:justify-end lg:gap-2 lg:pr-0">
               <a
+                rel="nofollow noopener noreferrer"
+                target="_blank"
                 href="https://www.figma.com/community/file/1179442320711977498"
                 className="flex w-full max-w-[272px] flex-col items-start gap-4 rounded-lg px-4 py-2 text-gray-400 hover:bg-gray-50 lg:px-8 lg:py-6 dark:hover:bg-gray-800"
               >
@@ -169,8 +175,9 @@ export async function SocialProofSection() {
                 </div>
               </a>
               <a
+                rel="nofollow noopener noreferrer"
+                target="_blank"
                 href="https://discord.gg/4eeurUVvTy"
-                rel="nofollow"
                 className="flex w-full max-w-[272px] flex-col items-start gap-4 rounded-lg px-4 py-2 text-gray-400 hover:bg-gray-50 lg:px-8 lg:py-6 dark:hover:bg-gray-800"
               >
                 <svg
diff --git a/apps/web/components/homepage/tailwind-section.tsx b/apps/web/components/homepage/tailwind-section.tsx
index 75a661cbd..6bfc89d92 100644
--- a/apps/web/components/homepage/tailwind-section.tsx
+++ b/apps/web/components/homepage/tailwind-section.tsx
@@ -43,6 +43,8 @@ export function TailwindSection() {
               </p>
               <p className="text-lg text-gray-500 dark:text-gray-400">
                 <a
+                  rel="nofollow noopener noreferrer"
+                  target="_blank"
                   href="https://tailwindcss.com"
                   className="text-lg font-medium text-gray-900 underline hover:no-underline dark:text-white"
                 >
@@ -50,6 +52,8 @@ export function TailwindSection() {
                 </a>{" "}
                 is the most popular and open-source utility-first CSS framework on the market and the{" "}
                 <a
+                  rel="noopener"
+                  target="_blank"
                   href="https://flowbite.com"
                   className="text-lg font-medium text-gray-900 underline hover:no-underline dark:text-white"
                 >
diff --git a/apps/web/components/navbar.tsx b/apps/web/components/navbar.tsx
index f7fe4faaf..ccf5729ca 100644
--- a/apps/web/components/navbar.tsx
+++ b/apps/web/components/navbar.tsx
@@ -21,12 +21,16 @@ export function NavbarLinks() {
         Quickstart
       </a>
       <a
+        rel="noopener"
+        target="_blank"
         href="https://flowbite.com/figma/"
         className="rounded-lg p-2.5 text-sm font-medium text-gray-900 hover:text-cyan-700 dark:text-gray-300 dark:hover:text-cyan-500"
       >
         Figma
       </a>
       <a
+        rel="noopener"
+        target="_blank"
         href="https://flowbite.com"
         className="rounded-lg p-2.5 text-sm font-medium text-gray-900 hover:text-cyan-700 dark:text-gray-300 dark:hover:text-cyan-500"
       >
@@ -48,6 +52,7 @@ export function NavbarIcons() {
           rel="noopener"
           target="_blank"
           href="https://storybook.flowbite-react.com/"
+          aria-label="View Storybook"
           className="hidden rounded-lg p-2.5 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 lg:block dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
         >
           <SiStorybook aria-hidden className="size-5" />
@@ -58,6 +63,7 @@ export function NavbarIcons() {
           rel="nofollow noopener noreferrer"
           target="_blank"
           href="https://discord.gg/4eeurUVvTy"
+          aria-label="Join Discord Community"
           className="hidden rounded-lg p-2.5 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 lg:block dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
         >
           <SiDiscord aria-hidden className="size-5" />
@@ -68,6 +74,7 @@ export function NavbarIcons() {
           rel="noopener"
           target="_blank"
           href="https://github.com/themesberg/flowbite-react"
+          aria-label="View on GitHub"
           className="hidden rounded-lg p-2.5 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 lg:block dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
         >
           <BsGithub aria-hidden className="size-5" />
@@ -80,6 +87,7 @@ export function NavbarIcons() {
         rel="nofollow noopener noreferrer"
         target="_blank"
         href="https://npmjs.com/package/flowbite-react"
+        aria-label="Toggle dark mode"
         className="ml-2 hidden lg:block"
       >
         <Badge className="bg-primary-50 px-2 text-sm font-medium text-primary-700 hover:bg-primary-600 hover:text-white sm:block lg:block dark:bg-gray-700 dark:text-primary-500 dark:hover:bg-primary-800 dark:hover:text-white">