diff --git a/src/components/BlankErrorBoundary.tsx b/src/components/BlankErrorBoundary.tsx new file mode 100644 index 000000000..f0faa9a2f --- /dev/null +++ b/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 { + 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 + } +} diff --git a/src/components/OpenSourceStats.tsx b/src/components/OpenSourceStats.tsx index 3629f6371..6aa287a06 100644 --- a/src/components/OpenSourceStats.tsx +++ b/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 } -export default function OssStats() { +function _OssStats() { const { data: github } = useSuspenseQuery( convexQuery(api.stats.getGithubOwner, { owner: 'tanstack', @@ -156,3 +158,13 @@ export default function OssStats() { ) } + +export default function OssStats() { + return ( + }> + + <_OssStats /> + + + ) +} diff --git a/src/routes/_libraries/index.tsx b/src/routes/_libraries/index.tsx index 00f8cba32..e4bd334c8 100644 --- a/src/routes/_libraries/index.tsx +++ b/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 ( <> diff --git a/src/utils/partners.tsx b/src/utils/partners.tsx index dcc09ddfb..ad92d28a6 100644 --- a/src/utils/partners.tsx +++ b/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. - { + window.location.href = '/blog/ag-grid-partnership' }} className="text-blue-500 uppercase font-black text-sm" > Learn More - + ), } @@ -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{' '} - + window.open( + 'https://ui.dev/?utm_source=tanstack&utm_campaign=tanstack', + '_blank', + 'noopener,noreferrer' + ) + } + tabIndex={0} > ui.dev - {' '} + {' '} to provide best-in-class education about TanStack products. It doesn't stop at TanStack though, with their sister product{' '} - window.open(href, '_blank', 'noopener,noreferrer')} + tabIndex={0} > Bytes.dev - {' '} + {' '} as our official newsletter partner, you'll be able to{' '} stay up to date with the latest and greatest in the web dev world regardless.