fix: homepage errors and nested links (#453)

* fix: homepage errors and nested links

* format

* use blank error boundary around OpenSourceStats

* remove extra div

Author: KevinVandy

src/components/BlankErrorBoundary.tsx

@@ -0,0 +1,35 @@
+import React, { Component, ReactNode } from 'react'
+
+interface Props {
+  children: ReactNode
+}
+
+interface State {
+  hasError: boolean
+}
+
+export class BlankErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(_: Error): State {
+    // Update state so the next render will show the fallback UI
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    // You can log the error to an error reporting service here
+    console.error('BlankErrorBoundary caught an error:', error, errorInfo)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // Render nothing when an error occurs
+      return null
+    }
+
+    return this.props.children
+  }
+}

src/components/OpenSourceStats.tsx

@@ -7,6 +7,8 @@ import { FaCube, FaStar, FaUsers } from 'react-icons/fa'
 import { FaDownload } from 'react-icons/fa'
 import convexImageWhite from '~/images/convex-white.svg'
 import convexImageDark from '~/images/convex-dark.svg'
+import { BlankErrorBoundary } from './BlankErrorBoundary'
+import { Suspense } from 'react'
 
 const StableCounter = ({
   value,
@@ -58,7 +60,7 @@ const NpmDownloadCounter = ({
   return <StableCounter value={count} intervalMs={intervalMs} />
 }
 
-export default function OssStats() {
+function _OssStats() {
   const { data: github } = useSuspenseQuery(
     convexQuery(api.stats.getGithubOwner, {
       owner: 'tanstack',
@@ -156,3 +158,13 @@ export default function OssStats() {
     </div>
   )
 }
+
+export default function OssStats() {
+  return (
+    <Suspense fallback={<></>}>
+      <BlankErrorBoundary>
+        <_OssStats />
+      </BlankErrorBoundary>
+    </Suspense>
+  )
+}

src/routes/_libraries/index.tsx

@@ -1,19 +1,16 @@
 import { Await, Link, MatchRoute, getRouteApi } from '@tanstack/react-router'
-import { Carbon } from '~/components/Carbon'
 import { twMerge } from 'tailwind-merge'
 import { CgSpinner } from 'react-icons/cg'
 import { Footer } from '~/components/Footer'
 import SponsorPack from '~/components/SponsorPack'
 import discordImage from '~/images/discord-logo-white.svg'
 import { useMutation } from '~/hooks/useMutation'
-import { sample } from '~/utils/utils'
 import { librariesByGroup, librariesGroupNamesMap, Library } from '~/libraries'
 import bytesImage from '~/images/bytes.svg'
 import { partners } from '../../utils/partners'
 import OpenSourceStats from '~/components/OpenSourceStats'
 import splashLightImg from '~/images/splash-light.png'
 import splashDarkImg from '~/images/splash-dark.png'
-import { GamFooter } from '~/components/Gam'
 import LandingPageGad from '~/components/LandingPageGad'
 import { MaintainerCard } from '~/components/MaintainerCard'
 import { coreMaintainers } from '~/libraries/maintainers'
@@ -73,9 +70,7 @@ function Index() {
     fn: bytesSignupServerFn,
   })
 
-  const { randomNumber } = Route.useLoaderData()
   const { sponsorsPromise } = librariesRouteApi.useLoaderData()
-  const gradient = sample(gradients, randomNumber)
 
   return (
     <>

src/utils/partners.tsx

@@ -1,4 +1,3 @@
-import { Link } from '@tanstack/react-router'
 import agGridDarkSvg from '~/images/ag-grid-dark.svg'
 import agGridLightSvg from '~/images/ag-grid-light.svg'
 import nozzleImage from '~/images/nozzle.png'
@@ -223,15 +222,16 @@ const agGrid = (() => {
           for the entire JS/TS ecosystem. Whether it's a lightweight table or a
           complex datagrid, we've we've got you covered.
         </div>
-        <Link
-          to="/blog/$"
-          params={{
-            _splat: 'ag-grid-partnership',
+        {/* Has to be button for separate link than parent anchor to be valid HTML */}
+        <button
+          type="button"
+          onClick={() => {
+            window.location.href = '/blog/ag-grid-partnership'
           }}
           className="text-blue-500 uppercase font-black text-sm"
         >
           Learn More
-        </Link>
+        </button>
       </>
     ),
   }
@@ -365,25 +365,32 @@ const uiDev = (() => {
           TanStack's priority is to make its users productive, efficient and
           knowledgeable about web dev. To help us on this quest, we've partnered
           with{' '}
-          <a
-            target="_blank"
-            className="text-blue-500 underline"
-            href="https://ui.dev/?utm_source=tanstack&utm_campaign=tanstack"
-            rel="noreferrer"
+          {/* Has to be button for separate link than parent anchor to be valid HTML */}
+          <button
+            type="button"
+            className="text-blue-500 underline cursor-pointer p-0 m-0 bg-transparent border-none inline"
+            onClick={() =>
+              window.open(
+                'https://ui.dev/?utm_source=tanstack&utm_campaign=tanstack',
+                '_blank',
+                'noopener,noreferrer'
+              )
+            }
+            tabIndex={0}
           >
             ui.dev
-          </a>{' '}
+          </button>{' '}
           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}
-            rel="noreferrer"
+          <button
+            type="button"
+            className="text-blue-500 underline cursor-pointer p-0 m-0 bg-transparent border-none inline"
+            onClick={() => window.open(href, '_blank', 'noopener,noreferrer')}
+            tabIndex={0}
           >
             Bytes.dev
-          </a>{' '}
+          </button>{' '}
           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.