Skip to content

Commit 0ee5324

Browse files
tannerlinsleytannerlinsley
committed
add frameworks landing page for crawling
1 parent 21cd2fb commit 0ee5324

5 files changed

Lines changed: 214 additions & 7 deletions

File tree

‎app/components/DocsLayout.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ import {
1313
useNavigate,
1414
useParams,
1515
} from '@tanstack/react-router'
16-
import { Select } from '~/components/Select'
16+
import { FrameworkSelect } from '~/components/FrameworkSelect'
1717
import { useLocalStorage } from '~/utils/useLocalStorage'
1818
import { DocsLogo } from '~/components/DocsLogo'
1919
import { last, capitalize } from '~/utils/utils'
20-
import type { SelectOption } from '~/components/Select'
20+
import type { SelectOption } from '~/components/FrameworkSelect'
2121
import type { ConfigSchema, MenuItem } from '~/utils/config'
2222
import { create } from 'zustand'
2323
import { Framework, getFrameworkOptions } from '~/libraries'
@@ -188,6 +188,14 @@ const useMenuConfig = ({
188188
label: 'Home',
189189
to: '..',
190190
},
191+
...(frameworks.length > 1
192+
? [
193+
{
194+
label: 'Frameworks',
195+
to: './framework',
196+
},
197+
]
198+
: []),
191199
{
192200
label: (
193201
<div className="flex items-center gap-2">
@@ -488,13 +496,13 @@ export function DocsLayout({
488496
dark:bg-black/20"
489497
>
490498
<div className="flex gap-4">
491-
<Select
499+
<FrameworkSelect
492500
label={frameworkConfig.label}
493501
selected={frameworkConfig.selected}
494502
available={frameworkConfig.available}
495503
onSelect={frameworkConfig.onSelect}
496504
/>
497-
<Select
505+
<FrameworkSelect
498506
label={versionConfig.label}
499507
selected={versionConfig.selected!}
500508
available={versionConfig.available}
@@ -522,14 +530,14 @@ export function DocsLayout({
522530
<SearchButton />
523531
</div>
524532
<div className="flex gap-2 px-4">
525-
<Select
533+
<FrameworkSelect
526534
className="flex-[3_1_0%]"
527535
label={frameworkConfig.label}
528536
selected={frameworkConfig.selected}
529537
available={frameworkConfig.available}
530538
onSelect={frameworkConfig.onSelect}
531539
/>
532-
<Select
540+
<FrameworkSelect
533541
className="flex-[2_1_0%]"
534542
label={versionConfig.label}
535543
selected={versionConfig.selected!}

app/components/Select.tsx renamed to app/components/FrameworkSelect.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export type SelectProps<T extends SelectOption> = {
1717
onSelect: (selected: T) => void
1818
}
1919

20-
export function Select<T extends SelectOption>({
20+
export function FrameworkSelect<T extends SelectOption>({
2121
className = '',
2222
label,
2323
selected,

‎app/routeTree.gen.ts‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ import { Route as LibrariesFormVersionIndexImport } from './routes/_libraries/fo
4343
import { Route as LibrariesConfigVersionIndexImport } from './routes/_libraries/config.$version.index'
4444
import { Route as LibraryIdVersionDocsIndexImport } from './routes/$libraryId/$version.docs.index'
4545
import { Route as LibraryIdVersionDocsSplatImport } from './routes/$libraryId/$version.docs.$'
46+
import { Route as LibraryIdVersionDocsFrameworkIndexImport } from './routes/$libraryId/$version.docs.framework.index'
47+
import { Route as LibraryIdVersionDocsFrameworkFrameworkIndexImport } from './routes/$libraryId/$version.docs.framework.$framework.index'
4648
import { Route as LibraryIdVersionDocsFrameworkFrameworkSplatImport } from './routes/$libraryId/$version.docs.framework.$framework.$'
4749
import { Route as LibraryIdVersionDocsFrameworkFrameworkExamplesSplatImport } from './routes/$libraryId/$version.docs.framework.$framework.examples.$'
4850

@@ -253,6 +255,20 @@ const LibraryIdVersionDocsSplatRoute = LibraryIdVersionDocsSplatImport.update({
253255
getParentRoute: () => LibraryIdVersionDocsRoute,
254256
} as any)
255257

258+
const LibraryIdVersionDocsFrameworkIndexRoute =
259+
LibraryIdVersionDocsFrameworkIndexImport.update({
260+
id: '/framework/',
261+
path: '/framework/',
262+
getParentRoute: () => LibraryIdVersionDocsRoute,
263+
} as any)
264+
265+
const LibraryIdVersionDocsFrameworkFrameworkIndexRoute =
266+
LibraryIdVersionDocsFrameworkFrameworkIndexImport.update({
267+
id: '/framework/$framework/',
268+
path: '/framework/$framework/',
269+
getParentRoute: () => LibraryIdVersionDocsRoute,
270+
} as any)
271+
256272
const LibraryIdVersionDocsFrameworkFrameworkSplatRoute =
257273
LibraryIdVersionDocsFrameworkFrameworkSplatImport.update({
258274
id: '/framework/$framework/$',
@@ -495,13 +511,27 @@ declare module '@tanstack/react-router' {
495511
preLoaderRoute: typeof LibrariesVirtualVersionIndexImport
496512
parentRoute: typeof LibrariesRouteImport
497513
}
514+
'/$libraryId/$version/docs/framework/': {
515+
id: '/$libraryId/$version/docs/framework/'
516+
path: '/framework'
517+
fullPath: '/$libraryId/$version/docs/framework'
518+
preLoaderRoute: typeof LibraryIdVersionDocsFrameworkIndexImport
519+
parentRoute: typeof LibraryIdVersionDocsImport
520+
}
498521
'/$libraryId/$version/docs/framework/$framework/$': {
499522
id: '/$libraryId/$version/docs/framework/$framework/$'
500523
path: '/framework/$framework/$'
501524
fullPath: '/$libraryId/$version/docs/framework/$framework/$'
502525
preLoaderRoute: typeof LibraryIdVersionDocsFrameworkFrameworkSplatImport
503526
parentRoute: typeof LibraryIdVersionDocsImport
504527
}
528+
'/$libraryId/$version/docs/framework/$framework/': {
529+
id: '/$libraryId/$version/docs/framework/$framework/'
530+
path: '/framework/$framework'
531+
fullPath: '/$libraryId/$version/docs/framework/$framework'
532+
preLoaderRoute: typeof LibraryIdVersionDocsFrameworkFrameworkIndexImport
533+
parentRoute: typeof LibraryIdVersionDocsImport
534+
}
505535
'/$libraryId/$version/docs/framework/$framework/examples/$': {
506536
id: '/$libraryId/$version/docs/framework/$framework/examples/$'
507537
path: '/framework/$framework/examples/$'
@@ -517,15 +547,21 @@ declare module '@tanstack/react-router' {
517547
interface LibraryIdVersionDocsRouteChildren {
518548
LibraryIdVersionDocsSplatRoute: typeof LibraryIdVersionDocsSplatRoute
519549
LibraryIdVersionDocsIndexRoute: typeof LibraryIdVersionDocsIndexRoute
550+
LibraryIdVersionDocsFrameworkIndexRoute: typeof LibraryIdVersionDocsFrameworkIndexRoute
520551
LibraryIdVersionDocsFrameworkFrameworkSplatRoute: typeof LibraryIdVersionDocsFrameworkFrameworkSplatRoute
552+
LibraryIdVersionDocsFrameworkFrameworkIndexRoute: typeof LibraryIdVersionDocsFrameworkFrameworkIndexRoute
521553
LibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute: typeof LibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute
522554
}
523555

524556
const LibraryIdVersionDocsRouteChildren: LibraryIdVersionDocsRouteChildren = {
525557
LibraryIdVersionDocsSplatRoute: LibraryIdVersionDocsSplatRoute,
526558
LibraryIdVersionDocsIndexRoute: LibraryIdVersionDocsIndexRoute,
559+
LibraryIdVersionDocsFrameworkIndexRoute:
560+
LibraryIdVersionDocsFrameworkIndexRoute,
527561
LibraryIdVersionDocsFrameworkFrameworkSplatRoute:
528562
LibraryIdVersionDocsFrameworkFrameworkSplatRoute,
563+
LibraryIdVersionDocsFrameworkFrameworkIndexRoute:
564+
LibraryIdVersionDocsFrameworkFrameworkIndexRoute,
529565
LibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute:
530566
LibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute,
531567
}
@@ -651,7 +687,9 @@ export interface FileRoutesByFullPath {
651687
'/store/$version': typeof LibrariesStoreVersionIndexRoute
652688
'/table/$version': typeof LibrariesTableVersionIndexRoute
653689
'/virtual/$version': typeof LibrariesVirtualVersionIndexRoute
690+
'/$libraryId/$version/docs/framework': typeof LibraryIdVersionDocsFrameworkIndexRoute
654691
'/$libraryId/$version/docs/framework/$framework/$': typeof LibraryIdVersionDocsFrameworkFrameworkSplatRoute
692+
'/$libraryId/$version/docs/framework/$framework': typeof LibraryIdVersionDocsFrameworkFrameworkIndexRoute
655693
'/$libraryId/$version/docs/framework/$framework/examples/$': typeof LibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute
656694
}
657695

@@ -684,7 +722,9 @@ export interface FileRoutesByTo {
684722
'/store/$version': typeof LibrariesStoreVersionIndexRoute
685723
'/table/$version': typeof LibrariesTableVersionIndexRoute
686724
'/virtual/$version': typeof LibrariesVirtualVersionIndexRoute
725+
'/$libraryId/$version/docs/framework': typeof LibraryIdVersionDocsFrameworkIndexRoute
687726
'/$libraryId/$version/docs/framework/$framework/$': typeof LibraryIdVersionDocsFrameworkFrameworkSplatRoute
727+
'/$libraryId/$version/docs/framework/$framework': typeof LibraryIdVersionDocsFrameworkFrameworkIndexRoute
688728
'/$libraryId/$version/docs/framework/$framework/examples/$': typeof LibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute
689729
}
690730

@@ -722,7 +762,9 @@ export interface FileRoutesById {
722762
'/_libraries/store/$version/': typeof LibrariesStoreVersionIndexRoute
723763
'/_libraries/table/$version/': typeof LibrariesTableVersionIndexRoute
724764
'/_libraries/virtual/$version/': typeof LibrariesVirtualVersionIndexRoute
765+
'/$libraryId/$version/docs/framework/': typeof LibraryIdVersionDocsFrameworkIndexRoute
725766
'/$libraryId/$version/docs/framework/$framework/$': typeof LibraryIdVersionDocsFrameworkFrameworkSplatRoute
767+
'/$libraryId/$version/docs/framework/$framework/': typeof LibraryIdVersionDocsFrameworkFrameworkIndexRoute
726768
'/$libraryId/$version/docs/framework/$framework/examples/$': typeof LibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute
727769
}
728770

@@ -761,7 +803,9 @@ export interface FileRouteTypes {
761803
| '/store/$version'
762804
| '/table/$version'
763805
| '/virtual/$version'
806+
| '/$libraryId/$version/docs/framework'
764807
| '/$libraryId/$version/docs/framework/$framework/$'
808+
| '/$libraryId/$version/docs/framework/$framework'
765809
| '/$libraryId/$version/docs/framework/$framework/examples/$'
766810
fileRoutesByTo: FileRoutesByTo
767811
to:
@@ -793,7 +837,9 @@ export interface FileRouteTypes {
793837
| '/store/$version'
794838
| '/table/$version'
795839
| '/virtual/$version'
840+
| '/$libraryId/$version/docs/framework'
796841
| '/$libraryId/$version/docs/framework/$framework/$'
842+
| '/$libraryId/$version/docs/framework/$framework'
797843
| '/$libraryId/$version/docs/framework/$framework/examples/$'
798844
id:
799845
| '__root__'
@@ -829,7 +875,9 @@ export interface FileRouteTypes {
829875
| '/_libraries/store/$version/'
830876
| '/_libraries/table/$version/'
831877
| '/_libraries/virtual/$version/'
878+
| '/$libraryId/$version/docs/framework/'
832879
| '/$libraryId/$version/docs/framework/$framework/$'
880+
| '/$libraryId/$version/docs/framework/$framework/'
833881
| '/$libraryId/$version/docs/framework/$framework/examples/$'
834882
fileRoutesById: FileRoutesById
835883
}
@@ -968,7 +1016,9 @@ export const routeTree = rootRoute
9681016
"children": [
9691017
"/$libraryId/$version/docs/$",
9701018
"/$libraryId/$version/docs/",
1019+
"/$libraryId/$version/docs/framework/",
9711020
"/$libraryId/$version/docs/framework/$framework/$",
1021+
"/$libraryId/$version/docs/framework/$framework/",
9721022
"/$libraryId/$version/docs/framework/$framework/examples/$"
9731023
]
9741024
},
@@ -1031,10 +1081,18 @@ export const routeTree = rootRoute
10311081
"filePath": "_libraries/virtual.$version.index.tsx",
10321082
"parent": "/_libraries"
10331083
},
1084+
"/$libraryId/$version/docs/framework/": {
1085+
"filePath": "$libraryId/$version.docs.framework.index.tsx",
1086+
"parent": "/$libraryId/$version/docs"
1087+
},
10341088
"/$libraryId/$version/docs/framework/$framework/$": {
10351089
"filePath": "$libraryId/$version.docs.framework.$framework.$.tsx",
10361090
"parent": "/$libraryId/$version/docs"
10371091
},
1092+
"/$libraryId/$version/docs/framework/$framework/": {
1093+
"filePath": "$libraryId/$version.docs.framework.$framework.index.tsx",
1094+
"parent": "/$libraryId/$version/docs"
1095+
},
10381096
"/$libraryId/$version/docs/framework/$framework/examples/$": {
10391097
"filePath": "$libraryId/$version.docs.framework.$framework.examples.$.tsx",
10401098
"parent": "/$libraryId/$version/docs"

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { seo } from '~/utils/seo'
2+
import { createFileRoute, redirect } from '@tanstack/react-router'
3+
import { Doc } from '~/components/Doc'
4+
import { loadDocs } from '~/utils/docs'
5+
import {
6+
Framework,
7+
getBranch,
8+
getFrameworkOptions,
9+
getLibrary,
10+
} from '~/libraries'
11+
import { capitalize } from '~/utils/utils'
12+
import { DocContainer } from '~/components/DocContainer'
13+
import { DocTitle } from '~/components/DocTitle'
14+
import { twMerge } from 'tailwind-merge'
15+
16+
export const Route = createFileRoute(
17+
'/$libraryId/$version/docs/framework/$framework/'
18+
)({
19+
staleTime: 1000 * 60 * 5,
20+
loader: (ctx) => {
21+
const { framework, version, libraryId } = ctx.params
22+
23+
const [frameworkOption] = getFrameworkOptions([framework as Framework])
24+
25+
return {
26+
title: frameworkOption.label,
27+
}
28+
},
29+
head: (ctx) => {
30+
const library = getLibrary(ctx.params.libraryId)
31+
const tail = `${library.name} ${capitalize(ctx.params.framework)} Docs`
32+
33+
return {
34+
meta: seo({
35+
title: ctx.loaderData?.title
36+
? `${ctx.loaderData.title} | ${tail}`
37+
: tail,
38+
description: ctx.loaderData?.description,
39+
}),
40+
}
41+
},
42+
component: Comp,
43+
})
44+
45+
function Comp() {
46+
const { framework, version, libraryId } = Route.useParams()
47+
const library = getLibrary(libraryId)
48+
const [frameworkOption] = getFrameworkOptions([framework as Framework])
49+
50+
return (
51+
<DocContainer>
52+
<div
53+
className={twMerge(
54+
'w-full flex bg-white/70 dark:bg-black/40 mx-auto rounded-xl max-w-[936px]'
55+
)}
56+
>
57+
<div
58+
className={twMerge('flex overflow-auto flex-col w-full p-4 lg:p-6')}
59+
>
60+
<DocTitle>
61+
TanStack {frameworkOption.label}{' '}
62+
{library.name.replace('TanStack ', '')} Documentation
63+
</DocTitle>
64+
<div className="h-4" />
65+
<div className="h-px bg-gray-500 opacity-20" />
66+
<div className="h-4" />
67+
<div
68+
className={twMerge(
69+
'prose prose-gray prose-sm prose-p:leading-7 dark:prose-invert max-w-none',
70+
'styled-markdown-content'
71+
)}
72+
>
73+
Use the menu to select a documentation page.
74+
</div>
75+
<div className="h-24" />
76+
</div>
77+
</div>
78+
</DocContainer>
79+
)
80+
}

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { createFileRoute, Link } from '@tanstack/react-router'
2+
import { twMerge } from 'tailwind-merge'
3+
import { DocContainer } from '~/components/DocContainer'
4+
import { DocTitle } from '~/components/DocTitle'
5+
import { getFrameworkOptions, getLibrary } from '~/libraries'
6+
7+
export const Route = createFileRoute('/$libraryId/$version/docs/framework/')({
8+
component: RouteComponent,
9+
})
10+
11+
function RouteComponent() {
12+
const { libraryId } = Route.useParams()
13+
const library = getLibrary(libraryId)
14+
15+
const frameworks = getFrameworkOptions(library.frameworks)
16+
17+
return (
18+
<DocContainer>
19+
<div
20+
className={twMerge(
21+
'w-full flex bg-white/70 dark:bg-black/40 mx-auto rounded-xl max-w-[936px]'
22+
)}
23+
>
24+
<div
25+
className={twMerge('flex overflow-auto flex-col w-full p-4 lg:p-6')}
26+
>
27+
<DocTitle>Supported {library.name} Frameworks</DocTitle>
28+
<div className="h-4" />
29+
<div className="h-px bg-gray-500 opacity-20" />
30+
<div className="h-4" />
31+
<div
32+
className={twMerge(
33+
'prose prose-gray prose-sm prose-p:leading-7 dark:prose-invert max-w-none',
34+
'styled-markdown-content'
35+
)}
36+
>
37+
<ul className="text-lg">
38+
{frameworks.map((framework) => (
39+
<li key={framework.value}>
40+
<Link
41+
to={`./${framework.value}`}
42+
className="flex items-center gap-2"
43+
>
44+
<img
45+
src={framework.logo}
46+
alt={framework.label}
47+
className="w-4 h-4 p-0 m-0"
48+
/>
49+
TanStack {framework.label}{' '}
50+
{library.name.replace('TanStack ', '')}
51+
</Link>
52+
</li>
53+
))}
54+
</ul>
55+
</div>
56+
<div className="h-24" />
57+
</div>
58+
</div>
59+
</DocContainer>
60+
)
61+
}

0 commit comments

Comments
 (0)