Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix the framework picker for form #133

Merged
Prev Previous commit
Next Next commit
Fix the framework picker for the Store project too
fulopkovacs committed Jan 13, 2024
commit 3f94fecb037f89209398ec74993ebde98650f466
42 changes: 5 additions & 37 deletions app/routes/store.$version.docs.$.tsx
Original file line number Diff line number Diff line change
@@ -1,42 +1,10 @@
import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
import { repo, getBranch } from '~/routes/store'
import { DefaultErrorBoundary } from '~/components/DefaultErrorBoundary'
import { seo } from '~/utils/seo'
import { useLoaderData, useParams } from '@remix-run/react'
import { loadDocs } from '~/utils/docs'
import { Doc } from '~/components/Doc'
import { redirect, type LoaderFunctionArgs } from '@remix-run/node'

export const loader = async (context: LoaderFunctionArgs) => {
const { '*': docsPath, version } = context.params
const { '*': docsPath } = context.params

return loadDocs({
repo,
branch: getBranch(version),
docPath: `docs/${docsPath}`,
redirectPath: context.request.url.replace(/\/docs.*/, ``),
})
}

export const meta: MetaFunction = ({ data }) => {
return seo({
title: `${data?.title} | TanStack Store Docs`,
description: data?.description,
})
}

export const ErrorBoundary = DefaultErrorBoundary

export default function RouteDocs() {
const { title, code, filePath } = useLoaderData<typeof loader>()
const { version } = useParams()
const branch = getBranch(version)
return (
<Doc
title={title}
code={code}
repo={repo}
branch={branch}
filePath={filePath}
/>
throw redirect(
// By default we'll redirect to the React docs
context.request.url.replace(/\/docs.*/, `/docs/framework/react/${docsPath}`)
)
}
4 changes: 3 additions & 1 deletion app/routes/store.$version.docs._index.tsx
Original file line number Diff line number Diff line change
@@ -2,5 +2,7 @@ import type { LoaderFunctionArgs } from '@remix-run/node'
import { redirect } from '@remix-run/node'

export const loader = (context: LoaderFunctionArgs) => {
throw redirect(context.request.url.replace(/\/docs.*/, '/docs/overview'))
throw redirect(
context.request.url.replace(/\/docs.*/, '/docs/framework/react/overview')
)
}
49 changes: 43 additions & 6 deletions app/routes/store.$version.docs.framework.$framework.$.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,57 @@
import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
import type { GithubDocsConfig } from '~/routes/store'
import { repo, getBranch } from '~/routes/store'
import { DefaultErrorBoundary } from '~/components/DefaultErrorBoundary'
import { seo } from '~/utils/seo'
import { useLoaderData, useParams } from '@remix-run/react'
import { Doc } from '~/components/Doc'
import { loadDocs } from '~/utils/docs'
import { fetchRepoFile } from '~/utils/documents.server'

export const loader = async (context: LoaderFunctionArgs) => {
const { '*': docsPath, framework, version } = context.params
const branch = getBranch(context.params.version)
const config = await fetchRepoFile(repo, branch, `docs/config.json`)

return loadDocs({
repo,
branch: getBranch(version),
docPath: `docs/framework/${framework}/${docsPath}`,
redirectPath: context.request.url.replace(/\/docs.*/, ``),
})
if (!config) {
throw new Error('Repo docs/config.json not found!')
}

const parsedConfig = JSON.parse(config) as GithubDocsConfig

const frameworkDoc = `framework/${framework}/${docsPath}`
let docPath = `docs/${frameworkDoc}`

if (framework) {
const stringToDrop = `framework/${framework}/`

const frameworkDocPageIds = parsedConfig.frameworkMenus
.find((f) => f.framework === framework)
?.menuItems.flatMap((m) =>
m.children.map((c) => c.to.slice(stringToDrop.length))
)

if (
frameworkDocPageIds &&
docsPath &&
frameworkDocPageIds.includes(docsPath)
) {
return loadDocs({
repo,
branch: getBranch(version),
docPath,
redirectPath: context.request.url.replace(/\/docs.*/, ``),
})
} else {
// Assume that it's a "core" doc page
return loadDocs({
repo,
branch: getBranch(version),
docPath: `docs/${docsPath}`,
redirectPath: context.request.url.replace(/\/docs.*/, ``),
})
}
}
}

export const meta: MetaFunction = ({ data }) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think examples wasn't supposed to be a dynamic segment in this route, because store.$version.docs.framework.$framework.$examples._index.tsx matches /store/latest/docs/framework/react/quick-start ($examples: "quick-start") and all the other framework-related doc pages.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This fixes #129 (comment)

Copy link
Member

Choose a reason for hiding this comment

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

This is awesome, thank you!

File renamed without changes.
6 changes: 5 additions & 1 deletion app/routes/store.tsx
Original file line number Diff line number Diff line change
@@ -192,7 +192,11 @@ export const useReactStoreDocsConfig = () => {
return {
label: d.label,
children: [
...d.children.map((d) => ({ ...d, badge: 'core' })),
...d.children.map(({ to, ...d }) => ({
to: `framework/${framework}/${to}`,
...d,
badge: 'core',
})),
...(match?.children ?? []).map((d) => ({ ...d, badge: framework })),
],
}