Skip to content

Commit 5341845

Browse files
KevinVandyKevinVandy
authored
fix: homepage errors and nested links (TanStack#453)
* fix: homepage errors and nested links * format * use blank error boundary around OpenSourceStats * remove extra div
1 parent 4c831da commit 5341845

File tree

4 files changed

+73
-24
lines changed

4 files changed

+73
-24
lines changed

‎src/components/BlankErrorBoundary.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React, { Component, ReactNode } from 'react'
2+
3+
interface Props {
4+
children: ReactNode
5+
}
6+
7+
interface State {
8+
hasError: boolean
9+
}
10+
11+
export class BlankErrorBoundary extends Component<Props, State> {
12+
constructor(props: Props) {
13+
super(props)
14+
this.state = { hasError: false }
15+
}
16+
17+
static getDerivedStateFromError(_: Error): State {
18+
// Update state so the next render will show the fallback UI
19+
return { hasError: true }
20+
}
21+
22+
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
23+
// You can log the error to an error reporting service here
24+
console.error('BlankErrorBoundary caught an error:', error, errorInfo)
25+
}
26+
27+
render() {
28+
if (this.state.hasError) {
29+
// Render nothing when an error occurs
30+
return null
31+
}
32+
33+
return this.props.children
34+
}
35+
}

‎src/components/OpenSourceStats.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { FaCube, FaStar, FaUsers } from 'react-icons/fa'
77
import { FaDownload } from 'react-icons/fa'
88
import convexImageWhite from '~/images/convex-white.svg'
99
import convexImageDark from '~/images/convex-dark.svg'
10+
import { BlankErrorBoundary } from './BlankErrorBoundary'
11+
import { Suspense } from 'react'
1012

1113
const StableCounter = ({
1214
value,
@@ -58,7 +60,7 @@ const NpmDownloadCounter = ({
5860
return <StableCounter value={count} intervalMs={intervalMs} />
5961
}
6062

61-
export default function OssStats() {
63+
function _OssStats() {
6264
const { data: github } = useSuspenseQuery(
6365
convexQuery(api.stats.getGithubOwner, {
6466
owner: 'tanstack',
@@ -156,3 +158,13 @@ export default function OssStats() {
156158
</div>
157159
)
158160
}
161+
162+
export default function OssStats() {
163+
return (
164+
<Suspense fallback={<></>}>
165+
<BlankErrorBoundary>
166+
<_OssStats />
167+
</BlankErrorBoundary>
168+
</Suspense>
169+
)
170+
}

‎src/routes/_libraries/index.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11
import { Await, Link, MatchRoute, getRouteApi } from '@tanstack/react-router'
2-
import { Carbon } from '~/components/Carbon'
32
import { twMerge } from 'tailwind-merge'
43
import { CgSpinner } from 'react-icons/cg'
54
import { Footer } from '~/components/Footer'
65
import SponsorPack from '~/components/SponsorPack'
76
import discordImage from '~/images/discord-logo-white.svg'
87
import { useMutation } from '~/hooks/useMutation'
9-
import { sample } from '~/utils/utils'
108
import { librariesByGroup, librariesGroupNamesMap, Library } from '~/libraries'
119
import bytesImage from '~/images/bytes.svg'
1210
import { partners } from '../../utils/partners'
1311
import OpenSourceStats from '~/components/OpenSourceStats'
1412
import splashLightImg from '~/images/splash-light.png'
1513
import splashDarkImg from '~/images/splash-dark.png'
16-
import { GamFooter } from '~/components/Gam'
1714
import LandingPageGad from '~/components/LandingPageGad'
1815
import { MaintainerCard } from '~/components/MaintainerCard'
1916
import { coreMaintainers } from '~/libraries/maintainers'
@@ -73,9 +70,7 @@ function Index() {
7370
fn: bytesSignupServerFn,
7471
})
7572

76-
const { randomNumber } = Route.useLoaderData()
7773
const { sponsorsPromise } = librariesRouteApi.useLoaderData()
78-
const gradient = sample(gradients, randomNumber)
7974

8075
return (
8176
<>

‎src/utils/partners.tsx‎

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Link } from '@tanstack/react-router'
21
import agGridDarkSvg from '~/images/ag-grid-dark.svg'
32
import agGridLightSvg from '~/images/ag-grid-light.svg'
43
import nozzleImage from '~/images/nozzle.png'
@@ -223,15 +222,16 @@ const agGrid = (() => {
223222
for the entire JS/TS ecosystem. Whether it's a lightweight table or a
224223
complex datagrid, we've we've got you covered.
225224
</div>
226-
<Link
227-
to="/blog/$"
228-
params={{
229-
_splat: 'ag-grid-partnership',
225+
{/* Has to be button for separate link than parent anchor to be valid HTML */}
226+
<button
227+
type="button"
228+
onClick={() => {
229+
window.location.href = '/blog/ag-grid-partnership'
230230
}}
231231
className="text-blue-500 uppercase font-black text-sm"
232232
>
233233
Learn More
234-
</Link>
234+
</button>
235235
</>
236236
),
237237
}
@@ -365,25 +365,32 @@ const uiDev = (() => {
365365
TanStack's priority is to make its users productive, efficient and
366366
knowledgeable about web dev. To help us on this quest, we've partnered
367367
with{' '}
368-
<a
369-
target="_blank"
370-
className="text-blue-500 underline"
371-
href="https://ui.dev/?utm_source=tanstack&utm_campaign=tanstack"
372-
rel="noreferrer"
368+
{/* Has to be button for separate link than parent anchor to be valid HTML */}
369+
<button
370+
type="button"
371+
className="text-blue-500 underline cursor-pointer p-0 m-0 bg-transparent border-none inline"
372+
onClick={() =>
373+
window.open(
374+
'https://ui.dev/?utm_source=tanstack&utm_campaign=tanstack',
375+
'_blank',
376+
'noopener,noreferrer'
377+
)
378+
}
379+
tabIndex={0}
373380
>
374381
ui.dev
375-
</a>{' '}
382+
</button>{' '}
376383
to <strong>provide best-in-class education</strong> about TanStack
377384
products. It doesn't stop at TanStack though, with their sister
378385
product{' '}
379-
<a
380-
target="_blank"
381-
className="text-blue-500 underline"
382-
href={href}
383-
rel="noreferrer"
386+
<button
387+
type="button"
388+
className="text-blue-500 underline cursor-pointer p-0 m-0 bg-transparent border-none inline"
389+
onClick={() => window.open(href, '_blank', 'noopener,noreferrer')}
390+
tabIndex={0}
384391
>
385392
Bytes.dev
386-
</a>{' '}
393+
</button>{' '}
387394
as our official newsletter partner, you'll be able to{' '}
388395
<strong>stay up to date with the latest and greatest</strong> in the
389396
web dev world regardless.

0 commit comments

Comments
 (0)