Skip to content

Commit 02e8cf4

Browse files
OmOgaleOmOgale
authored
Merge branch 'main' into chore/update_twitter_logo
2 parents 7ea213d + b59555c commit 02e8cf4

File tree

16 files changed

+510
-348
lines changed

16 files changed

+510
-348
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ This site is built with TanStack Router!
44

55
- [TanStack Router Docs](https://tanstack.com/router)
66

7-
It's deployed automagically with Vercel!
7+
It's deployed automagically with Netlify!
88

9-
- [Vercel](https://vercel.com/)
9+
- [Netlify](https://netlify.com/)
1010

1111
## Development
1212

‎app/components/DocsLayout.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -646,7 +646,7 @@ export function DocsLayout({
646646
<a
647647
href={partner.href}
648648
target="_blank"
649-
className="px-4 flex items-center justify-center cursor-pointer"
649+
className="px-4 flex flex-col items-center justify-center cursor-pointer gap-1"
650650
rel="noreferrer"
651651
>
652652
<div className="mx-auto max-w-[150px]">
@@ -672,6 +672,7 @@ export function DocsLayout({
672672
/>
673673
</div>
674674
</a>
675+
{partner.sidebarAfterImg || null}
675676
</div>
676677
)
677678
})

‎app/components/OpenSourceStats.tsx‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
import { convexQuery } from '@convex-dev/react-query'
2+
import { useNpmDownloadCounter } from '@erquhart/convex-oss-stats/react'
3+
import NumberFlow from '@number-flow/react'
4+
import { useSuspenseQuery } from '@tanstack/react-query'
5+
import { api } from 'convex/_generated/api'
6+
import { FaCube, FaStar, FaUsers } from 'react-icons/fa'
7+
import { FaDownload } from 'react-icons/fa'
8+
import convexImageWhite from '~/images/convex-white.svg'
9+
import convexImageDark from '~/images/convex-dark.svg'
10+
11+
const counterIntervalMs = 500
12+
13+
const StableCounter = ({ value }: { value?: number }) => {
14+
const dummyString = Number(
15+
Array(value?.toString().length ?? 1)
16+
.fill('8')
17+
.join('')
18+
).toLocaleString()
19+
20+
return (
21+
<>
22+
{/* Dummy span to prevent layout shift */}
23+
<span className="opacity-0">{dummyString}</span>
24+
<span className="absolute -top-0.5 left-0">
25+
<NumberFlow
26+
transformTiming={{
27+
duration: counterIntervalMs,
28+
easing: 'linear',
29+
}}
30+
value={value}
31+
trend={1}
32+
continuous
33+
isolate
34+
willChange
35+
/>
36+
</span>
37+
</>
38+
)
39+
}
40+
41+
const NpmDownloadCounter = ({
42+
npmData,
43+
}: {
44+
npmData: Parameters<typeof useNpmDownloadCounter>[0]
45+
}) => {
46+
const liveNpmDownloadCount = useNpmDownloadCounter(npmData, {
47+
intervalMs: counterIntervalMs,
48+
})
49+
return <StableCounter value={liveNpmDownloadCount} />
50+
}
51+
52+
export default function OssStats() {
53+
const { data: github } = useSuspenseQuery(
54+
convexQuery(api.stats.getGithubOwner, {
55+
owner: 'tanstack',
56+
})
57+
)
58+
const { data: npm } = useSuspenseQuery(
59+
convexQuery(api.stats.getNpmOrg, {
60+
name: 'tanstack',
61+
})
62+
)
63+
64+
return (
65+
<div>
66+
<div className="p-8 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-8 items-center justify-center xl:place-items-center bg-white/50 dark:bg-gray-700/30 dark:shadow-none rounded-xl shadow-xl">
67+
<a
68+
href="https://www.npmjs.com/org/tanstack"
69+
target="_blank"
70+
rel="noreferrer"
71+
className="group flex gap-4 items-center"
72+
>
73+
<FaDownload className="text-2xl group-hover:text-emerald-500 transition-colors duration-200" />
74+
<div>
75+
<div className="text-2xl font-bold opacity-80 relative group-hover:text-emerald-500 transition-colors duration-200">
76+
<NpmDownloadCounter npmData={npm} />
77+
</div>
78+
<div className="text-sm opacity-50 font-medium italic group-hover:text-emerald-500 transition-colors duration-200">
79+
NPM Downloads
80+
</div>
81+
</div>
82+
</a>
83+
<a
84+
href="https://github.com/orgs/TanStack/repositories?q=sort:stars"
85+
target="_blank"
86+
rel="noreferrer"
87+
className="group flex gap-4 items-center"
88+
>
89+
<FaStar className="group-hover:text-yellow-500 text-2xl transition-colors duration-200" />
90+
<div>
91+
<div className="text-2xl font-bold opacity-80 leading-none group-hover:text-yellow-500 transition-colors duration-200">
92+
<NumberFlow value={github?.starCount} />
93+
</div>
94+
<div className="text-sm opacity-50 font-medium italic -mt-1 group-hover:text-yellow-500 transition-colors duration-200">
95+
Stars on Github
96+
</div>
97+
</div>
98+
</a>
99+
<div className="flex gap-4 items-center">
100+
<FaUsers className="text-2xl" />
101+
<div className="">
102+
<div className="text-2xl font-bold opacity-80">
103+
<NumberFlow value={github?.contributorCount} />
104+
</div>
105+
<div className="text-sm opacity-50 font-medium italic -mt-1">
106+
Contributors on GitHub
107+
</div>
108+
</div>
109+
</div>
110+
<div className="flex gap-4 items-center">
111+
<FaCube className="text-2xl" />
112+
<div className="">
113+
<div className="text-2xl font-bold opacity-80 relative">
114+
<NumberFlow value={github?.dependentCount} />
115+
</div>
116+
<div className="text-sm opacity-50 font-medium italic -mt-1">
117+
Dependents on GitHub
118+
</div>
119+
</div>
120+
</div>
121+
</div>
122+
<div className="px-4 py-2 flex justify-end">
123+
<a
124+
href="https://www.convex.dev/?utm_source=tanstack"
125+
className="group flex items-center gap-2"
126+
>
127+
<div className="h-2 w-2 animate-pulse rounded-full bg-green-500"></div>
128+
<div className="flex items-center gap-1">
129+
<span className="text-[.75rem] opacity-30 relative -top-px">
130+
Powered by
131+
</span>
132+
<img
133+
className="dark:hidden opacity-30 group-hover:opacity-50"
134+
src={convexImageDark}
135+
alt="Convex Logo"
136+
width={80}
137+
/>
138+
<img
139+
className="hidden dark:block opacity-30 group-hover:opacity-50"
140+
src={convexImageWhite}
141+
alt="Convex Logo"
142+
width={80}
143+
/>
144+
</div>
145+
</a>
146+
</div>
147+
</div>
148+
)
149+
}

‎app/images/netlify-dark.svg‎

Lines changed: 22 additions & 0 deletions
Loading

‎app/images/netlify-light.svg‎

Lines changed: 22 additions & 0 deletions
Loading

‎app/libraries/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,8 @@ export type Library = {
6363
handleRedirects?: (href: string) => void
6464
hideCodesandboxUrl?: true
6565
hideStackblitzUrl?: true
66-
showVercelUrl?: true
66+
showVercelUrl?: boolean
67+
showNetlifyUrl?: boolean
6768
}
6869

6970
export const libraries = [
@@ -85,7 +86,7 @@ export function getLibrary(id: string) {
8586
throw new Error(`Library with id "${id}" not found`)
8687
}
8788

88-
return library
89+
return library as Library
8990
}
9091

9192
export function getFrameworkOptions(frameworkStrs: Framework[]) {

‎app/libraries/router.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,6 @@ export const routerProject = {
2222
scarfId: '3d14fff2-f326-4929-b5e1-6ecf953d24f4',
2323
defaultDocs: 'framework/react/overview',
2424
hideCodesandboxUrl: true,
25-
showVercelUrl: true,
25+
showVercelUrl: false,
26+
showNetlifyUrl: true,
2627
} satisfies Library

‎app/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react'
33

44
import { FaExternalLinkAlt } from 'react-icons/fa'
55
import { DocTitle } from '~/components/DocTitle'
6-
import { getBranch, getLibrary } from '~/libraries'
6+
import { Framework, getBranch, getLibrary } from '~/libraries'
77
import { getInitialSandboxFileName } from '~/utils/sandbox'
88
import { seo } from '~/utils/seo'
99
import { capitalize, slugToTitle } from '~/utils/utils'
@@ -41,7 +41,10 @@ export default function Example() {
4141
setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
4242
}, [])
4343

44-
const sandboxFirstFileName = getInitialSandboxFileName(framework, libraryId)
44+
const sandboxFirstFileName = getInitialSandboxFileName(
45+
framework as Framework,
46+
libraryId
47+
)
4548

4649
const githubUrl = `https://github.com/${library.repo}/tree/${branch}/examples/${examplePath}`
4750
// preset=node can be removed once Stackblitz runs Angular as webcontainer by default
@@ -60,15 +63,26 @@ export default function Example() {
6063
const hideCodesandbox = library.hideCodesandboxUrl
6164
const hideStackblitz = library.hideStackblitzUrl
6265
const showVercel = library.showVercelUrl
66+
const showNetlify = library.showNetlifyUrl
6367

6468
return (
6569
<div className="flex-1 flex flex-col min-h-0 overflow-auto">
6670
<div className="p-4 lg:p-6">
6771
<DocTitle>
6872
<span>
69-
{capitalize(framework)} Example: {slugToTitle(_splat)}
73+
{capitalize(framework)} Example: {slugToTitle(_splat!)}
7074
</span>
7175
<div className="flex items-center gap-4 flex-wrap font-normal text-xs">
76+
{showNetlify ? (
77+
<a
78+
href={`https://app.netlify.com/start/deploy?repository-url=${githubUrl}`}
79+
>
80+
<img
81+
src="https://www.netlify.com/img/deploy/button.svg"
82+
alt="Deploy with Netlify"
83+
/>
84+
</a>
85+
) : null}
7286
{showVercel ? (
7387
<a
7488
href={`https://vercel.com/new/clone?repository-url=${githubUrl}`}

0 commit comments

Comments
 (0)