chore: open external link in new tab

Author: SutuSebastian

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

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"
               >

apps/web/components/homepage/featured-section.tsx

@@ -8,9 +8,10 @@ export function FeaturedSection() {
           <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"
               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
@@ -31,7 +32,12 @@ export function FeaturedSection() {
                 />
               </svg>
             </Link>
-            <Link href="https://dev.to/t/flowbite" rel="nofollow noreferrer noopener" aria-label="DEV - Flowbite">
+            <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"
@@ -40,9 +46,10 @@ export function FeaturedSection() {
               </svg>
             </Link>
             <Link
-              href="https://www.producthunt.com/products/flowbite"
-              rel="nofollow noreferrer noopener"
               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
@@ -60,9 +67,10 @@ export function FeaturedSection() {
               </svg>
             </Link>
             <Link
-              href="https://news.ycombinator.com/item?id=28561468"
-              rel="nofollow noreferrer noopener"
               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" />
@@ -113,9 +121,10 @@ export function FeaturedSection() {
               </svg>
             </Link>
             <Link
-              href="https://www.youtube.com/channel/UC_Ms4V2kYDsh7F_CSsHyQ6A"
-              rel="nofollow noreferrer noopener"
               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

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"
                 >

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">

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

apps/web/components/homepage/tailwind-section.tsx

@@ -43,13 +43,17 @@ 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"
                 >
                   Tailwind CSS
                 </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"
                 >

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"
       >