Skip to content

Commit

Permalink
feat: Migrate table docs to v2 layout (#149)
Browse files Browse the repository at this point in the history 
* Rework table docs

* Fix merge

* More code from store docs

* Fix docs path

* Remove non-null assertions

* Remove v8branch variable

* Unify useProjectDocsConfig hook

* Fix function name

* Replace hard-coded repo

* Derive `Framework` type

* Add shared useDocsConfig hook

* Remove 301 redirects

* Forgot to stage
  • Loading branch information
@lachlancollins
lachlancollins authored Jan 24, 2024
1 parent ac08936 commit 33ef71e
Show file tree
Hide file tree
Showing 20 changed files with 417 additions and 431 deletions.
130 changes: 12 additions & 118 deletions app/projects/form.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,11 @@
import { useMemo } from 'react'
import { Link, useMatches, useNavigate, useParams } from '@remix-run/react'
import { generatePath } from '~/utils/utils'
import { Link } from '@remix-run/react'
import reactLogo from '~/images/react-logo.svg'
import solidLogo from '~/images/solid-logo.svg'
import vueLogo from '~/images/vue-logo.svg'
import svelteLogo from '~/images/svelte-logo.svg'
import angularLogo from '~/images/angular-logo.svg'
import { FaDiscord, FaGithub } from 'react-icons/fa/index'
import type { AvailableOptions } from '~/components/Select'
import { useDocsConfig } from '~/utils/config'
import type { ConfigSchema, MenuItem } from '~/utils/config'

export type Framework = 'react' | 'svelte' | 'vue' | 'solid'

export const repo = 'tanstack/form'

export const latestBranch = 'main'
Expand All @@ -21,13 +15,13 @@ export const availableVersions = ['v0']
export const gradientText =
'inline-block text-transparent bg-clip-text bg-gradient-to-r from-yellow-500 to-yellow-600'

export const frameworks = {
const frameworks = {
react: { label: 'React', logo: reactLogo, value: 'react' },
solid: { label: 'Solid', logo: solidLogo, value: 'solid' },
vue: { label: 'Vue', logo: vueLogo, value: 'vue' },
svelte: { label: 'Svelte', logo: svelteLogo, value: 'svelte' },
angular: { label: 'Angular', logo: angularLogo, value: 'angular' },
}
} as const

export type Framework = keyof typeof frameworks

export const createLogo = (version?: string) => (
<>
Expand Down Expand Up @@ -76,110 +70,10 @@ export function getBranch(argVersion?: string) {
}

export const useFormDocsConfig = (config: ConfigSchema) => {
const matches = useMatches()
const match = matches[matches.length - 1]
const params = useParams()
const version = params.version!
const framework =
params.framework || localStorage.getItem('framework') || 'react'
const navigate = useNavigate()

const frameworkMenuItems =
config.frameworkMenus?.find((d) => d.framework === framework)?.menuItems ??
[]

const frameworkConfig = useMemo(() => {
if (!config.frameworkMenus) {
return undefined
}

const availableFrameworks = config.frameworkMenus?.reduce(
(acc: AvailableOptions, menuEntry) => {
if (menuEntry.framework in frameworks) {
acc[menuEntry.framework] =
frameworks[menuEntry.framework as keyof typeof frameworks]
}
return acc
},
{ react: frameworks['react'] }
)

return {
label: 'Framework',
selected: framework,
available: availableFrameworks,
onSelect: (option: { label: string; value: string }) => {
const url = generatePath(match.id, {
...match.params,
framework: option.value,
})

localStorage.setItem('framework', option.value)

navigate(url)
},
}
}, [config.frameworkMenus, framework, match, navigate])

const versionConfig = useMemo(() => {
const available = availableVersions.reduce(
(acc: AvailableOptions, version) => {
acc[version] = {
label: version,
value: version,
}
return acc
},
{
latest: {
label: 'Latest',
value: 'latest',
},
}
)

return {
label: 'Version',
selected: version!,
available,
onSelect: (option: { label: string; value: string }) => {
const url = generatePath(match.id, {
...match.params,
version: option.value,
})
navigate(url)
},
}
}, [version, match, navigate])

const docSearch: NonNullable<ConfigSchema['docSearch']> =
config.docSearch || {
appId: '',
apiKey: '',
indexName: '',
}

return {
...config,
docSearch,
menu: [
localMenu,
// Merge the two menus together based on their group labels
...config.menu.map((d) => {
const match = frameworkMenuItems.find((d2) => d2.label === d.label)
return {
label: d.label,
children: [
...d.children.map((d) => ({ ...d, badge: 'core' })),
...(match?.children ?? []).map((d) => ({ ...d, badge: framework })),
],
}
}),
...frameworkMenuItems.filter(
(d) => !config.menu.find((dd) => dd.label === d.label)
),
].filter(Boolean),
frameworkConfig,
versionConfig,
}
return useDocsConfig({
config,
frameworks,
localMenu,
availableVersions,
})
}
128 changes: 12 additions & 116 deletions app/projects/store.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,11 @@
import { useMemo } from 'react'
import { Link, useMatches, useNavigate, useParams } from '@remix-run/react'
import { generatePath } from '~/utils/utils'
import { Link } from '@remix-run/react'
import reactLogo from '~/images/react-logo.svg'
import solidLogo from '~/images/solid-logo.svg'
import vueLogo from '~/images/vue-logo.svg'
import svelteLogo from '~/images/svelte-logo.svg'
import angularLogo from '~/images/angular-logo.svg'
import { FaDiscord, FaGithub } from 'react-icons/fa/index'
import type { AvailableOptions } from '~/components/Select'
import { useDocsConfig } from '~/utils/config'
import type { ConfigSchema, MenuItem } from '~/utils/config'

export type Framework = 'angular' | 'react' | 'svelte' | 'vue' | 'solid'

export const repo = 'tanstack/store'

export const latestBranch = 'main'
Expand All @@ -21,13 +15,13 @@ export const availableVersions = ['v0']
export const gradientText =
'inline-block text-transparent bg-clip-text bg-gradient-to-r from-gray-500 to-gray-700'

export const frameworks = {
const frameworks = {
react: { label: 'React', logo: reactLogo, value: 'react' },
solid: { label: 'Solid', logo: solidLogo, value: 'solid' },
vue: { label: 'Vue', logo: vueLogo, value: 'vue' },
svelte: { label: 'Svelte', logo: svelteLogo, value: 'svelte' },
angular: { label: 'Angular', logo: angularLogo, value: 'angular' },
}
} as const

export type Framework = keyof typeof frameworks

export const createLogo = (version?: string) => (
<>
Expand Down Expand Up @@ -76,108 +70,10 @@ export function getBranch(argVersion?: string) {
}

export const useStoreDocsConfig = (config: ConfigSchema) => {
const matches = useMatches()
const match = matches[matches.length - 1]
const params = useParams()
const version = params.version!
const framework =
params.framework || localStorage.getItem('framework') || 'react'
const navigate = useNavigate()

const frameworkMenuItems =
config.frameworkMenus?.find((d) => d.framework === framework)?.menuItems ??
[]

const frameworkConfig = useMemo(() => {
if (!config.frameworkMenus) {
return undefined
}

const availableFrameworks = config.frameworkMenus?.reduce(
(acc: AvailableOptions, menuEntry) => {
acc[menuEntry.framework as string] =
frameworks[menuEntry.framework as keyof typeof frameworks]
return acc
},
{ react: frameworks['react'] }
)

return {
label: 'Framework',
selected: framework!,
available: availableFrameworks,
onSelect: (option: { label: string; value: string }) => {
const url = generatePath(match.id, {
...match.params,
framework: option.value,
})

localStorage.setItem('framework', option.value)

navigate(url)
},
}
}, [config.frameworkMenus, framework, match, navigate])

const versionConfig = useMemo(() => {
const available = availableVersions.reduce(
(acc: AvailableOptions, version) => {
acc[version] = {
label: version,
value: version,
}
return acc
},
{
latest: {
label: 'Latest',
value: 'latest',
},
}
)

return {
label: 'Version',
selected: version!,
available,
onSelect: (option: { label: string; value: string }) => {
const url = generatePath(match.id, {
...match.params,
version: option.value,
})
navigate(url)
},
}
}, [version, match, navigate])

const docSearch: NonNullable<ConfigSchema['docSearch']> =
config.docSearch || {
appId: '',
apiKey: '',
indexName: '',
}

return {
...config,
docSearch,
menu: [
localMenu,
// Merge the two menus together based on their group labels
...config.menu.map((d) => {
const match = frameworkMenuItems.find((d2) => d2.label === d.label)
return {
label: d.label,
children: [
...d.children.map((d) => ({ ...d, badge: 'core' })),
...(match?.children ?? []).map((d) => ({ ...d, badge: framework })),
],
}
}),
...frameworkMenuItems.filter(
(d) => !config.menu.find((dd) => dd.label === d.label)
),
].filter(Boolean),
frameworkConfig,
versionConfig,
}
return useDocsConfig({
config,
frameworks,
localMenu,
availableVersions,
})
}
77 changes: 76 additions & 1 deletion app/projects/table.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,81 @@
import { Link } from '@remix-run/react'
import reactLogo from '~/images/react-logo.svg'
import solidLogo from '~/images/solid-logo.svg'
import vueLogo from '~/images/vue-logo.svg'
import svelteLogo from '~/images/svelte-logo.svg'
import { FaDiscord, FaGithub } from 'react-icons/fa'
import { useDocsConfig } from '~/utils/config'
import type { ConfigSchema, MenuItem } from '~/utils/config'

export const repo = 'tanstack/table'

export const v8branch = 'main'
export const latestBranch = 'main'
export const latestVersion = 'v8'
export const availableVersions = ['v8']

export const gradientText =
'inline-block text-transparent bg-clip-text bg-gradient-to-r from-teal-500 to-blue-600'

const frameworks = {
react: { label: 'React', logo: reactLogo, value: 'react' },
solid: { label: 'Solid', logo: solidLogo, value: 'solid' },
svelte: { label: 'Svelte', logo: svelteLogo, value: 'svelte' },
vue: { label: 'Vue', logo: vueLogo, value: 'vue' },
} as const

export type Framework = keyof typeof frameworks

export function getBranch(argVersion?: string) {
const version = argVersion || latestVersion

return ['latest', latestVersion].includes(version) ? latestBranch : version
}

export const localMenu: MenuItem = {
label: 'Menu',
children: [
{
label: 'Home',
to: '..',
},
{
label: (
<div className="flex items-center gap-2">
GitHub <FaGithub className="text-lg opacity-20" />
</div>
),
to: `https://github.com/${repo}`,
},
{
label: (
<div className="flex items-center gap-2">
Discord <FaDiscord className="text-lg opacity-20" />
</div>
),
to: 'https://tlinz.com/discord',
},
],
}

export const createLogo = (version?: string) => (
<>
<Link to="/" className="font-light">
TanStack
</Link>
<Link to="../../" className={`font-bold`}>
<span className={`${gradientText}`}>Table</span>{' '}
<span className="text-sm align-super">
{version === 'latest' ? latestVersion : version}
</span>
</Link>
</>
)

export const useTableDocsConfig = (config: ConfigSchema) => {
return useDocsConfig({
config,
frameworks,
localMenu,
availableVersions,
})
}
2 changes: 1 addition & 1 deletion app/routes/form.$.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { redirect } from '@remix-run/node'

export const loader = () => {
return redirect(`/form/latest`, 301)
return redirect('/form/latest')
}
Loading

1 comment on commit 33ef71e

@vercel
Copy link

@vercel vercel bot commented on 33ef71e Jan 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

tanstack-com – ./

tanstack-com-git-main-tanstack.vercel.app
tanstack-com-tanstack.vercel.app
tanstack.com
tanstack-com.vercel.app

Please sign in to comment.