Skip to content

Commit 8ed2ee1

Browse files
feat: Libraries homepage redesign (#381)
* feat: add pacer library * run format * redesign home page libraries and add optimistic library * remove optimistic page, add preact logo, set max number per row to 3 for now * tweak homepage library styles more * fix issues with example starting paths * mark store as alpha --------- Co-authored-by: Sean Cassiere <[email protected]>
1 parent 28134ad commit 8ed2ee1

File tree

9 files changed

+281
-96
lines changed

9 files changed

+281
-96
lines changed

app/images/preact-logo.svg

+6
Loading

app/libraries/index.tsx

+20-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import reactLogo from '../images/react-logo.svg'
2+
import preactLogo from '../images/preact-logo.svg'
23
import solidLogo from '../images/solid-logo.svg'
34
import vueLogo from '../images/vue-logo.svg'
45
import angularLogo from '../images/angular-logo.svg'
@@ -16,9 +17,11 @@ import { virtualProject } from './virtual'
1617
import { rangerProject } from './ranger'
1718
import { storeProject } from './store'
1819
import { pacerProject } from './pacer'
20+
// import { optimisticProject } from './optimistic'
1921

2022
export const frameworkOptions = [
2123
{ label: 'React', value: 'react', logo: reactLogo },
24+
{ label: 'Preact', value: 'preact', logo: preactLogo },
2225
{ label: 'Vue', value: 'vue', logo: vueLogo },
2326
{ label: 'Angular', value: 'angular', logo: angularLogo },
2427
{ label: 'Solid', value: 'solid', logo: solidLogo },
@@ -41,6 +44,7 @@ export type Library = {
4144
| 'ranger'
4245
| 'store'
4346
| 'pacer'
47+
| 'optimistic'
4448
| 'config'
4549
| 'react-charts'
4650
name: string
@@ -51,7 +55,7 @@ export type Library = {
5155
ogImage?: string
5256
bgStyle: string
5357
textStyle: string
54-
badge?: 'new' | 'soon' | 'alpha' | 'beta'
58+
badge?: 'new' | 'soon' | 'alpha' | 'beta' | 'fresh'
5559
repo: string
5660
latestBranch: string
5761
latestVersion: string
@@ -93,9 +97,24 @@ export const libraries = [
9397
storeProject,
9498
rangerProject,
9599
pacerProject,
100+
// optimisticProject,
96101
configProject,
97102
] satisfies Library[]
98103

104+
export const librariesByGroup = {
105+
app: [startProject, routerProject],
106+
state: [queryProject, storeProject, pacerProject],
107+
headlessUI: [tableProject, formProject, virtualProject, rangerProject],
108+
other: [configProject],
109+
}
110+
111+
export const librariesGroupNamesMap = {
112+
app: 'Application Building',
113+
state: 'Data and State Management',
114+
headlessUI: 'Headless UI',
115+
other: 'Other',
116+
}
117+
99118
export function getLibrary(id: string) {
100119
const library = libraries.find((d) => d.id === id)
101120

app/libraries/optimistic.tsx

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import { VscPreview, VscWand } from 'react-icons/vsc'
2+
import { Library } from '.'
3+
import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa'
4+
import { BiBookAlt } from 'react-icons/bi'
5+
import { twMerge } from 'tailwind-merge'
6+
7+
const repo = 'tanstack/optimistic'
8+
9+
const textStyles = `text-orange-600 dark:text-orange-500`
10+
11+
export const optimisticProject = {
12+
id: 'optimistic',
13+
name: 'TanStack Optimistic',
14+
cardStyles: `shadow-xl shadow-orange-700/20 dark:shadow-lg dark:shadow-orange-500/20 text-orange-500 dark:text-orange-400 border-2 border-transparent hover:border-current`,
15+
to: '/optimistic',
16+
tagline: `Framework agnostic debouncing, throttling, and queueing utilities`,
17+
description: `Set the pace of interactions in your applications. Limit the rate at which functions can fire, or intelligently queue long-running tasks with Concurrency Control.`,
18+
ogImage:
19+
'https://github.com/tanstack/optimistic/raw/main/media/repo-header.png',
20+
badge: 'soon',
21+
bgStyle: `bg-orange-700`,
22+
textStyle: `text-orange-500`,
23+
repo,
24+
latestBranch: 'main',
25+
latestVersion: 'v0',
26+
availableVersions: ['v0'],
27+
colorFrom: `from-orange-500`,
28+
colorTo: `to-orange-700`,
29+
textColor: `text-orange-700`,
30+
frameworks: ['react', 'solid'],
31+
scarfId: '302d0fef-cb3f-43c6-b45c-f055b9745edb',
32+
defaultDocs: 'overview',
33+
menu: [
34+
{
35+
icon: <VscPreview />,
36+
label: 'Examples',
37+
to: '/optimistic/latest/docs/framework/react/examples/simple',
38+
},
39+
{
40+
icon: <BiBookAlt />,
41+
label: 'Docs',
42+
to: '/optimistic/latest/docs',
43+
},
44+
{
45+
icon: <FaGithub />,
46+
label: 'Github',
47+
to: `https://github.com/${repo}`,
48+
},
49+
],
50+
featureHighlights: [
51+
{
52+
title: 'Framework Agnostic & Type-Safe',
53+
icon: <VscWand className={twMerge(textStyles)} />,
54+
description: (
55+
<div>
56+
TanStack Optimistic provides an intuitive and flexible API that works
57+
across any JavaScript framework.{' '}
58+
<span className={twMerge('font-semibold', textStyles)}>
59+
Every utility is fully type-safe with reactive framework adapters
60+
</span>{' '}
61+
that seamlessly connect to your state management of choice. Choose
62+
from multiple layers of abstraction to confidently control timing in
63+
your applications.
64+
</div>
65+
),
66+
},
67+
{
68+
title: 'Flexible Rate Limiting Controls',
69+
icon: <FaBolt className={twMerge(textStyles)} />,
70+
description: (
71+
<div>
72+
Take control of your application's timing with powerful utilities for{' '}
73+
<span className={twMerge('font-semibold', textStyles)}>
74+
rate limiting, throttling, and debouncing
75+
</span>
76+
. Leverage built-in cleanup and cancellation capabilities to help you
77+
manage execution timing with precision while preventing memory leaks.
78+
Flexible configuration options let you fine-tune the behavior to match
79+
your needs.
80+
</div>
81+
),
82+
},
83+
{
84+
title: 'Async/Sync Queue Management',
85+
icon: <FaCogs className={twMerge(textStyles)} />,
86+
description: (
87+
<div>
88+
Handle complex asynchronous workflows with intelligent queuing and
89+
concurrency control.{' '}
90+
<span className={twMerge('font-semibold', textStyles)}>
91+
Manage long-running tasks with FIFO/LIFO ordering, priority queuing,
92+
and parallel execution
93+
</span>
94+
. Built-in pause, resume and cancel capabilities give you complete
95+
control over your queue's lifecycle. Perfect for managing API calls,
96+
animations, and other sequential operations.
97+
</div>
98+
),
99+
},
100+
],
101+
} satisfies Library

app/libraries/pacer.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const pacerProject = {
1616
tagline: `Framework agnostic debouncing, throttling, and queueing utilities`,
1717
description: `Set the pace of interactions in your applications. Limit the rate at which functions can fire, or intelligently queue long-running tasks with Concurrency Control.`,
1818
ogImage: 'https://github.com/tanstack/pacer/raw/main/media/repo-header.png',
19-
badge: 'soon',
19+
badge: 'alpha',
2020
bgStyle: `bg-lime-700`,
2121
textStyle: `text-lime-500`,
2222
repo,
@@ -33,7 +33,7 @@ export const pacerProject = {
3333
{
3434
icon: <VscPreview />,
3535
label: 'Examples',
36-
to: '/pacer/latest/docs/framework/react/examples/simple',
36+
to: '/pacer/latest/docs/framework/react/examples/debounce',
3737
},
3838
{
3939
icon: <BiBookAlt />,

app/libraries/store.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const storeProject = {
1616
tagline: `Framework agnostic data store with reactive framework adapters`,
1717
description: `The immutable-reactive data store that powers the core of TanStack libraries and their framework adapters.`,
1818
ogImage: 'https://github.com/tanstack/store/raw/main/media/repo-header.png',
19-
badge: undefined,
19+
badge: 'alpha',
2020
bgStyle: 'bg-twine-700',
2121
textStyle: 'text-twine-500',
2222
repo,

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ import { DocTitle } from '~/components/DocTitle'
1111
import { Framework, getBranch, getLibrary } from '~/libraries'
1212
import { fetchFile, fetchRepoDirectoryContents } from '~/utils/docs'
1313
import {
14-
getFrameworkStartFileName,
15-
getInitialExplorerFileName,
14+
getExampleStartingFileName,
15+
getExampleStartingPath,
1616
} from '~/utils/sandbox'
1717
import { seo } from '~/utils/seo'
1818
import { capitalize, slugToTitle } from '~/utils/utils'
@@ -75,7 +75,7 @@ export const Route = createFileRoute(
7575
// Used to determine the starting file name for the explorer
7676
// i.e. app.tsx, main.tsx, src/routes/__root.tsx, etc.
7777
// This value is not absolutely guaranteed to be available, so further resolution may be necessary
78-
const explorerCandidateStartingFileName = getInitialExplorerFileName(
78+
const explorerCandidateStartingFileName = getExampleStartingPath(
7979
params.framework as Framework,
8080
params.libraryId
8181
)
@@ -129,7 +129,7 @@ function PageComponent() {
129129

130130
const examplePath = [framework, _splat].join('/')
131131

132-
const mainExampleFile = getInitialExplorerFileName(
132+
const mainExampleFile = getExampleStartingPath(
133133
framework as Framework,
134134
libraryId
135135
)
@@ -305,8 +305,8 @@ function determineStartingFilePath(
305305
}
306306

307307
const preferenceFiles = new Set([
308-
getFrameworkStartFileName(framework, libraryId),
309-
...['App', 'main', 'index', 'page', 'action']
308+
getExampleStartingFileName(framework, libraryId),
309+
...['__root', 'App', 'main', 'index', 'page', 'action']
310310
.map((name) => [`${name}.tsx`, `${name}.ts`, `${name}.js`, `${name}.jsx`])
311311
.flat(),
312312
'README.md',

0 commit comments

Comments
 (0)