Skip to content

Commit d8f5cc0

Browse files
austin-liminalaustin-liminal
committed
Merge branch 'main' of https://github.com/austin-liminal/tanstack.com into austin/builder-tailwind-v4
2 parents 288e089 + 72682fe commit d8f5cc0

41 files changed

Lines changed: 1088 additions & 5961 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ node_modules
22
package-lock.json
33
yarn.lock
44

5+
.tanstack
56
.DS_Store
67
.cache
78
.env

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
"@sentry/react": "^8.35.0",
3434
"@sentry/vite-plugin": "^2.22.6",
3535
"@tailwindcss/typography": "^0.5.13",
36+
"@tailwindcss/vite": "^4.1.11",
3637
"@tanstack/cta-engine": "^0.19.0",
3738
"@tanstack/cta-framework-react-cra": "^0.19.0",
3839
"@tanstack/cta-ui": "^0.19.0",

‎pnpm-lock.yaml‎

Lines changed: 8 additions & 34 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎postcss.config.cjs‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/components/BottomCTA.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import * as React from 'react'
2+
import type { LinkProps } from '@tanstack/react-router'
3+
import { Link } from '@tanstack/react-router'
4+
import { twMerge } from 'tailwind-merge'
5+
6+
type BottomCTAProps = {
7+
linkProps: Omit<LinkProps, 'className' | 'children'>
8+
label?: string
9+
className?: string
10+
}
11+
12+
export function BottomCTA({
13+
linkProps,
14+
label = 'Get Started!',
15+
className,
16+
}: BottomCTAProps) {
17+
return (
18+
<div className="flex flex-col gap-4 items-center">
19+
<div className="font-extrabold text-xl lg:text-2xl">
20+
Wow, you've come a long way!
21+
</div>
22+
<div className="italic font-sm opacity-70">
23+
Only one thing left to do...
24+
</div>
25+
<div>
26+
<Link
27+
{...linkProps}
28+
className={twMerge(
29+
'inline-block py-2 px-4 rounded uppercase font-extrabold transition-colors',
30+
className
31+
)}
32+
>
33+
{label}
34+
</Link>
35+
</div>
36+
</div>
37+
)
38+
}

‎src/components/DocsLayout.tsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -400,9 +400,9 @@ export function DocsLayout({
400400
{group?.label}
401401
</LabelComp>
402402
<div className="h-2" />
403-
<ul className="ml-2 text-[.85em] list-none">
403+
<ul className="ml-2 text-[.85em] leading-6 list-none">
404404
{group?.children?.map((child, i) => {
405-
const linkClasses = `cursor-pointer flex gap-2 items-center justify-between group px-2 py-[.1rem] rounded-lg hover:bg-gray-500 hover:bg-gray-500/10`
405+
const linkClasses = `flex gap-2 items-center justify-between group px-2 py-[.1rem] rounded-lg hover:bg-gray-500/10`
406406

407407
return (
408408
<li key={i}>
@@ -422,7 +422,7 @@ export function DocsLayout({
422422
includeHash: false,
423423
includeSearch: false,
424424
}}
425-
className="cursor-pointer! relative"
425+
className="relative"
426426
>
427427
{(props) => {
428428
return (
@@ -503,11 +503,7 @@ export function DocsLayout({
503503
{logo}
504504
</div>
505505
</summary>
506-
<div
507-
className="flex flex-col gap-4 p-4 whitespace-nowrap h-[0vh] overflow-y-auto
508-
border-t border-gray-500/20 bg-white/20 text-lg
509-
dark:bg-black/20"
510-
>
506+
<div className="flex flex-col gap-4 p-4 whitespace-nowrap overflow-y-auto border-t border-gray-500/20 bg-white/20 text-lg dark:bg-black/20">
511507
<div className="flex gap-4">
512508
<FrameworkSelect
513509
label={frameworkConfig.label}
@@ -581,7 +577,7 @@ export function DocsLayout({
581577
{children}
582578
</div>
583579
<AdGate>
584-
<div className="mb-8 py-0! mx-auto max-w-full overflow-x-hidden">
580+
<div className="mb-8 !py-0! mx-auto max-w-full overflow-x-hidden">
585581
<GamFooter />
586582
</div>
587583
</AdGate>

‎src/components/FeatureGrid.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import * as React from 'react'
2+
import { FaCheckCircle } from 'react-icons/fa'
3+
4+
type FeatureGridProps = {
5+
title?: string
6+
items: React.ReactNode[]
7+
gridClassName?: string
8+
}
9+
10+
export function FeatureGrid({ title, items, gridClassName }: FeatureGridProps) {
11+
return (
12+
<div className="px-4 sm:px-6 lg:px-8 mx-auto">
13+
{title ? (
14+
<div className=" sm:text-center pb-16">
15+
<h3 className="text-3xl text-center mx-auto leading-tight font-extrabold tracking-tight sm:text-4xl lg:leading-none mt-2">
16+
{title}
17+
</h3>
18+
</div>
19+
) : null}
20+
<div
21+
className={
22+
gridClassName ||
23+
'grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-4 mx-auto'
24+
}
25+
>
26+
{items.map((d, i) => (
27+
<span key={i} className="flex items-center gap-2">
28+
<FaCheckCircle className="text-green-500 " /> {d}
29+
</span>
30+
))}
31+
</div>
32+
</div>
33+
)
34+
}

‎src/components/FileExplorer.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import svelteIconUrl from '~/images/file-icons/svelte.svg?url'
88
import vueIconUrl from '~/images/file-icons/vue.svg?url'
99
import textIconUrl from '~/images/file-icons/txt.svg?url'
1010
import type { GitHubFileNode } from '~/utils/documents.server'
11+
import { twMerge } from 'tailwind-merge'
1112

1213
const getFileIconPath = (filename: string) => {
1314
const ext = filename.split('.').pop()?.toLowerCase() || ''
@@ -289,11 +290,12 @@ const RenderFileTree = (props: {
289290
onMouseEnter={() =>
290291
file.type !== 'dir' && props.prefetchFileContent(file.path)
291292
}
292-
className={`px-2 py-1.5 text-left w-full flex items-center gap-2 text-sm rounded transition-colors duration-200 min-w-0 ${
293+
className={twMerge(
294+
`px-2 py-1.5 text-left w-full flex items-center gap-2 text-sm rounded transition-colors duration-200 min-w-0`,
293295
props.currentPath === file.path
294-
? `${props.libraryColor} text-gray-900 dark:text-white shadow-sm`
296+
? `${props.libraryColor}/20 text-gray-900 dark:text-white shadow-sm`
295297
: 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
296-
}`}
298+
)}
297299
>
298300
<span className="shrink-0 select-none">
299301
{file.type === 'dir' ? (

‎src/components/FrameworkSelect.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export function FrameworkSelect<T extends SelectOption>({
6969
leaveFrom="opacity-100"
7070
leaveTo="opacity-0"
7171
>
72-
<Listbox.Options className="absolute z-10 dark:bg-gray-800 dark:border-2 border-gray-600/70 mt-1 max-h-60 w-fit overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
72+
<Listbox.Options className="absolute z-10 dark:bg-gray-800 dark:border-2 border-gray-600/70 mt-1 max-h-60 w-fit overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
7373
{Object.values(available).map((option) => (
7474
<Listbox.Option
7575
key={option.value}

‎src/components/LibraryHero.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import * as React from 'react'
2+
import { twMerge } from 'tailwind-merge'
3+
import { Link } from '@tanstack/react-router'
4+
import type { Library } from '~/libraries'
5+
6+
type LibraryHeroProps = {
7+
project: Library
8+
cta?: {
9+
linkProps: React.ComponentProps<typeof Link>
10+
label: string
11+
className?: string
12+
}
13+
actions?: React.ReactNode
14+
}
15+
16+
export function LibraryHero({ project, cta, actions }: LibraryHeroProps) {
17+
const resolvedName = project.name.replace('TanStack ', '')
18+
const gradientText = `pr-1 inline-block text-transparent bg-clip-text bg-linear-to-r ${project.colorFrom} ${project.colorTo}`
19+
20+
return (
21+
<div className="flex flex-col items-center gap-8 text-center px-4">
22+
<h1 className="font-black flex gap-x-3 gap-y-0 items-center text-5xl md:text-6xl lg:text-7xl xl:text-8xl uppercase [letter-spacing:-.05em] flex-wrap justify-center leading-none">
23+
<span>TanStack</span>
24+
<span className={twMerge(gradientText, 'relative')}>
25+
{resolvedName}
26+
{project.badge ? (
27+
<div
28+
className={twMerge(
29+
'absolute bottom-0 right-0 translate-y-full',
30+
'[letter-spacing:0] text-sm md:text-base font-black lg:text-lg align-super text-white animate-bounce uppercase',
31+
'dark:text-black bg-black dark:bg-white shadow-black/30 px-2 py-1 rounded-md',
32+
'leading-none whitespace-nowrap'
33+
)}
34+
>
35+
{String(project.badge).toUpperCase().trim()}
36+
</div>
37+
) : null}
38+
</span>
39+
</h1>
40+
<h2 className="font-bold text-2xl md:text-4xl max-w-xl xl:max-w-4xl text-balance [letter-spacing:-0.03em]">
41+
{project.tagline}
42+
</h2>
43+
{project.description ? (
44+
<p className="text opacity-90 max-w-lg xl:max-w-2xl lg:text-base text-balance">
45+
{project.description}
46+
</p>
47+
) : null}
48+
{actions ? (
49+
<div>{actions}</div>
50+
) : cta ? (
51+
<Link
52+
{...cta.linkProps}
53+
className={twMerge(
54+
'inline-block py-2 px-4 rounded uppercase font-extrabold transition-colors',
55+
cta.className
56+
)}
57+
>
58+
{cta.label}
59+
</Link>
60+
) : null}
61+
</div>
62+
)
63+
}

0 commit comments

Comments
 (0)