fix: partner links

TanStack · Aug 20, 2024 · f55c9a0 · f55c9a0
1 parent 8762dcd
commit f55c9a0
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 75 deletions.
diff --git a/app/routes/_libraries.index.tsx b/app/routes/_libraries.index.tsx
@@ -195,8 +195,10 @@ function Index() {
         <div className={`grid grid-cols-1 gap-6 sm:grid-cols-2`}>
           {partners.map((partner) => {
             return (
-              <div
+              <a
                 key={partner.name}
+                href={partner.href}
+                target="_blank"
                 className="bg-white shadow-xl shadow-gray-500/20 rounded-lg dark:border border-gray-500/20 dark:bg-gray-800 dark:shadow-none group overflow-hidden grid"
               >
                 <div className="z-0 row-start-1 col-start-1 bg-white flex items-center justify-center group-hover:blur-sm transition-all duration-200">
@@ -205,7 +207,7 @@ function Index() {
                 <div className="z-10 row-start-1 col-start-1 max-w-full p-4 text-sm flex flex-col gap-4 items-start opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-white/70 dark:bg-gray-800/70">
                   {partner.content}
                 </div>
-              </div>
+              </a>
             )
           })}
         </div>
@@ -224,6 +226,7 @@ function Index() {
               hover:border-green-500
               `}
               target="_blank"
+              rel="noreferrer"
             >
               <div
                 className={`col-span-2
@@ -331,6 +334,7 @@ function Index() {
               target="_blank"
               className={`block w-full mt-4 px-4 py-2 bg-white text-discord
                 text-center rounded shadow-lg z-10 uppercase font-black`}
+              rel="noreferrer"
             >
               Join TanStack Discord
             </a>

diff --git a/app/routes/_libraries.router.$version.index.tsx b/app/routes/_libraries.router.$version.index.tsx
@@ -238,8 +238,10 @@ function RouterVersionIndex() {
             .filter((d) => d.libraries?.includes('router'))
             .map((partner) => {
               return (
-                <div
+                <a
                   key={partner.name}
+                  href={partner.href}
+                  target="_blank"
                   className="bg-white shadow-xl shadow-gray-500/20 rounded-lg dark:border border-gray-500/20 dark:bg-gray-800 dark:shadow-none group overflow-hidden grid"
                 >
                   <div className="z-0 row-start-1 col-start-1 bg-white flex items-center justify-center group-hover:blur-sm transition-all duration-200">
@@ -248,7 +250,7 @@ function RouterVersionIndex() {
                   <div className="z-10 row-start-1 col-start-1 max-w-full p-4 text-sm flex flex-col gap-4 items-start opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-white/70 dark:bg-gray-800/70">
                     {partner.content}
                   </div>
-                </div>
+                </a>
               )
             })}
         </div>

diff --git a/app/routes/_libraries.start.$version.index.tsx b/app/routes/_libraries.start.$version.index.tsx
@@ -492,8 +492,10 @@ Check it out at https://tanstack.com/start/`
             .filter((d) => d.libraries?.includes('router'))
             .map((partner) => {
               return (
-                <div
+                <a
                   key={partner.name}
+                  href={partner.href}
+                  target="_blank"
                   className="bg-white shadow-xl shadow-gray-500/20 rounded-lg dark:border border-gray-500/20 dark:bg-gray-800 dark:shadow-none group overflow-hidden grid"
                 >
                   <div className="z-0 row-start-1 col-start-1 bg-white flex items-center justify-center group-hover:blur-sm transition-all duration-200">
@@ -502,7 +504,7 @@ Check it out at https://tanstack.com/start/`
                   <div className="z-10 row-start-1 col-start-1 max-w-full p-4 text-sm flex flex-col gap-4 items-start opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-white/70 dark:bg-gray-800/70">
                     {partner.content}
                   </div>
-                </div>
+                </a>
               )
             })}
         </div>

diff --git a/app/routes/_libraries.table.$version.index.tsx b/app/routes/_libraries.table.$version.index.tsx
@@ -334,8 +334,10 @@ export default function TableVersionIndex() {
               .filter((d) => d.libraries?.includes('table'))
               .map((partner) => {
                 return (
-                  <div
+                  <a
                     key={partner.name}
+                    href={partner.href}
+                    target="_blank"
                     className="bg-white shadow-xl shadow-gray-500/20 rounded-lg flex flex-col
                         divide-y-2 divide-gray-500 divide-opacity-10 overflow-hidden dark:border border-gray-500/20
                         dark:bg-gray-800 dark:shadow-none"
@@ -346,7 +348,7 @@ export default function TableVersionIndex() {
                     <div className="flex-1 p-4 text-sm flex flex-col gap-4 items-start">
                       {partner.content}
                     </div>
-                  </div>
+                  </a>
                 )
               })}
           </div>

diff --git a/app/utils/partners.tsx b/app/utils/partners.tsx
@@ -42,11 +42,7 @@ export const partners: Partner[] = [
       sidebarImgDark: vercelDarkSvg,
       sidebarImgClass: 'py-4',
       homepageImg: (
-        <a
-          href={href}
-          target="_blank"
-          className="dark:bg-black w-full h-full flex items-center justify-center px-4 py-12"
-        >
+        <div className="dark:bg-black w-full h-full flex items-center justify-center px-4 py-12">
           <img
             src={vercelLightSvg}
             alt="Vercel"
@@ -57,7 +53,7 @@ export const partners: Partner[] = [
             alt="Vercel"
             className="w-[220px] max-w-full hidden dark:block"
           />
-        </a>
+        </div>
       ),
       content: (
         <>
@@ -71,13 +67,9 @@ export const partners: Partner[] = [
             also push the boundaries of what's possible with TanStack on the
             web.
           </div>
-          <a
-            href={href}
-            target="_blank"
-            className="text-blue-500 uppercase font-black text-sm"
-          >
+          <span className="text-blue-500 uppercase font-black text-sm">
             Learn More
-          </a>
+          </span>
         </>
       ),
     }
@@ -94,11 +86,7 @@ export const partners: Partner[] = [
       sidebarImgDark: clerkDarkSvg,
       sidebarImgClass: 'py-4',
       homepageImg: (
-        <a
-          href={href}
-          target="_blank"
-          className="dark:bg-black w-full h-full flex items-center justify-center px-4 py-12"
-        >
+        <div className="dark:bg-black w-full h-full flex items-center justify-center px-4 py-12">
           <img
             src={clerkLightSvg}
             alt="Clerk"
@@ -109,7 +97,7 @@ export const partners: Partner[] = [
             alt="Clerk"
             className="w-[200px] max-w-full hidden dark:block"
           />
-        </a>
+        </div>
       ),
       content: (
         <>
@@ -121,13 +109,9 @@ export const partners: Partner[] = [
             effortlessly deliver top-notch experiences that your users can trust
             and your developers can rely on.
           </div>
-          <a
-            href={href}
-            target="_blank"
-            className="text-blue-500 uppercase font-black text-sm"
-          >
+          <span className="text-blue-500 uppercase font-black text-sm">
             Learn More
-          </a>
+          </span>
         </>
       ),
     }
@@ -145,15 +129,15 @@ export const partners: Partner[] = [
       sidebarImgClass: 'py-5 scale-[1.1]',
       href,
       homepageImg: (
-        <a href={href} target="_blank" className="px-8 py-8">
+        <div className="px-8 py-8">
           <img
             src={agGridImage}
             alt="Enterprise Data Grid"
             className="w-[270px] max-w-full"
             width="270"
             height="95"
           />
-        </a>
+        </div>
       ),
       content: (
         <>
@@ -190,11 +174,7 @@ export const partners: Partner[] = [
       sidebarImgClass: 'py-1.5 scale-[1.3]',
       href,
       homepageImg: (
-        <a
-          href={href}
-          target="_blank"
-          className="dark:bg-black w-full h-full flex items-center justify-center px-4 py-6"
-        >
+        <div className="dark:bg-black w-full h-full flex items-center justify-center px-4 py-6">
           <img
             src={convexColorSvg}
             alt="Convex"
@@ -205,7 +185,7 @@ export const partners: Partner[] = [
             alt="Convex"
             className="w-[300px] max-w-full hidden dark:block"
           />
-        </a>
+        </div>
       ),
       content: (
         <>
@@ -221,13 +201,9 @@ export const partners: Partner[] = [
             together, we're elevating what's possible with real-time React
             applications.
           </div>
-          <a
-            href={href}
-            target="_blank"
-            className="text-blue-500 uppercase font-black text-sm"
-          >
+          <span className="text-blue-500 uppercase font-black text-sm">
             Learn More
-          </a>
+          </span>
         </>
       ),
     }
@@ -244,11 +220,7 @@ export const partners: Partner[] = [
       sidebarImgClass: 'py-6 scale-[1.1]',
       href,
       homepageImg: (
-        <a
-          href={href}
-          target="_blank"
-          className="dark:bg-black w-full h-full flex items-center justify-center px-4 py-6"
-        >
+        <div className="dark:bg-black w-full h-full flex items-center justify-center px-4 py-6">
           <img
             src={sentryWordMarkDarkSvg}
             alt="Sentry"
@@ -259,7 +231,7 @@ export const partners: Partner[] = [
             alt="Sentry"
             className="w-[275px] max-w-full hidden dark:block"
           />
-        </a>
+        </div>
       ),
       content: (
         <>
@@ -271,13 +243,9 @@ export const partners: Partner[] = [
             the best possible experience to your users. Together, we're
             committed to making sure that you can build with confidence.
           </div>
-          <a
-            href={href}
-            target="_blank"
-            className="text-blue-500 uppercase font-black text-sm"
-          >
+          <span className="text-blue-500 uppercase font-black text-sm">
             Learn More
-          </a>
+          </span>
         </>
       ),
     }
@@ -291,15 +259,15 @@ export const partners: Partner[] = [
       libraries: [],
       href,
       homepageImg: (
-        <a href={href} target="_blank" className="py-4">
+        <div className="py-4">
           <img
             src={bytesUidotdevImage}
             alt="Bytes Logo"
             className="w-[350px] max-w-full"
             width="250"
             height="87"
           />
-        </a>
+        </div>
       ),
       content: (
         <>
@@ -311,26 +279,28 @@ export const partners: Partner[] = [
               target="_blank"
               className="text-blue-500 underline"
               href="https://ui.dev/?utm_source=tanstack&utm_campaign=tanstack"
+              rel="noreferrer"
             >
               ui.dev
             </a>{' '}
             to <strong>provide best-in-class education</strong> about TanStack
             products. It doesn't stop at TanStack though, with their sister
             product{' '}
-            <a target="_blank" className="text-blue-500 underline" href={href}>
+            <a
+              target="_blank"
+              className="text-blue-500 underline"
+              href={href}
+              rel="noreferrer"
+            >
               Bytes.dev
             </a>{' '}
             as our official newsletter partner, you'll be able to{' '}
             <strong>stay up to date with the latest and greatest</strong> in the
             web dev world regardless.
           </div>
-          <a
-            href={href}
-            target="_blank"
-            className="text-blue-500 uppercase font-black text-sm"
-          >
+          <span className="text-blue-500 uppercase font-black text-sm">
             Learn More
-          </a>
+          </span>
         </>
       ),
     }
@@ -346,15 +316,15 @@ export const partners: Partner[] = [
       sidebarImgDark: nozzleLightSvg,
       sidebarImgClass: 'w-[150px] py-4',
       homepageImg: (
-        <a href={href} target="_blank" className="py-6">
+        <div className="py-6">
           <img
             src={nozzleImage}
             alt="SEO keyword rank tracker"
             className="w-[230px] max-w-full my-2"
             width="230"
             height="80"
           />
-        </a>
+        </div>
       ),
       content: (
         <>
@@ -369,13 +339,9 @@ export const partners: Partner[] = [
             prove the value of the full gamut of TanStack tools on the front-end
             with unmatched UI/UX.
           </div>
-          <a
-            href={href}
-            target="_blank"
-            className="text-blue-500 uppercase font-black text-sm"
-          >
+          <span className="text-blue-500 uppercase font-black text-sm">
             Learn More
-          </a>
+          </span>
         </>
       ),
     }