From 25149c167d6898d7eee47e723038342bdd137e51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?= Date: Mon, 1 Jan 2024 13:34:55 +0100 Subject: [PATCH 01/13] Make it possible to select a framework when viewing the framework-independent doc pages of the Form project --- app/routes/form.$version.docs.$.tsx | 42 ++-------------- app/routes/form.$version.docs._index.tsx | 2 +- ...m.$version.docs.framework.$framework.$.tsx | 49 ++++++++++++++++--- 3 files changed, 49 insertions(+), 44 deletions(-) diff --git a/app/routes/form.$version.docs.$.tsx b/app/routes/form.$version.docs.$.tsx index f08e2120..defeba90 100644 --- a/app/routes/form.$version.docs.$.tsx +++ b/app/routes/form.$version.docs.$.tsx @@ -1,42 +1,10 @@ -import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node' -import { repo, getBranch } from '~/routes/form' -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 Form Docs`, - description: data?.description, - }) -} - -export const ErrorBoundary = DefaultErrorBoundary - -export default function RouteDocs() { - const { title, code, filePath } = useLoaderData() - const { version } = useParams() - const branch = getBranch(version) - return ( - + throw redirect( + // By default we'll redirect to the react docs + context.request.url.replace(/\/docs.*/, `/docs/framework/react/${docsPath}`) ) } diff --git a/app/routes/form.$version.docs._index.tsx b/app/routes/form.$version.docs._index.tsx index f47ea079..5f5ed0c8 100644 --- a/app/routes/form.$version.docs._index.tsx +++ b/app/routes/form.$version.docs._index.tsx @@ -2,5 +2,5 @@ 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')) } diff --git a/app/routes/form.$version.docs.framework.$framework.$.tsx b/app/routes/form.$version.docs.framework.$framework.$.tsx index b20595c5..2e1541f2 100644 --- a/app/routes/form.$version.docs.framework.$framework.$.tsx +++ b/app/routes/form.$version.docs.framework.$framework.$.tsx @@ -1,20 +1,57 @@ import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node' +import type { GithubDocsConfig } from '~/routes/form' import { repo, getBranch } from '~/routes/form' 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 }) => { From d3e36604c38584379a09e8f1ee54690b389060c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?= Date: Mon, 1 Jan 2024 13:51:45 +0100 Subject: [PATCH 02/13] Do not default to React for the core docs of the Form, if another framework is selected --- app/routes/form.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/routes/form.tsx b/app/routes/form.tsx index 7e35a832..3d9f28bd 100644 --- a/app/routes/form.tsx +++ b/app/routes/form.tsx @@ -193,7 +193,11 @@ export const useReactFormDocsConfig = () => { 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 })), ], } From 3f94fecb037f89209398ec74993ebde98650f466 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?= Date: Mon, 1 Jan 2024 19:20:38 +0100 Subject: [PATCH 03/13] Fix the framework picker for the Store project too --- app/routes/store.$version.docs.$.tsx | 42 ++-------------- app/routes/store.$version.docs._index.tsx | 4 +- ...e.$version.docs.framework.$framework.$.tsx | 49 ++++++++++++++++--- ....docs.framework.$framework.examples.$.tsx} | 0 ....framework.$framework.examples._index.tsx} | 0 app/routes/store.tsx | 6 ++- 6 files changed, 56 insertions(+), 45 deletions(-) rename app/routes/{store.$version.docs.framework.$framework.$examples.$.tsx => store.$version.docs.framework.$framework.examples.$.tsx} (100%) rename app/routes/{store.$version.docs.framework.$framework.$examples._index.tsx => store.$version.docs.framework.$framework.examples._index.tsx} (100%) diff --git a/app/routes/store.$version.docs.$.tsx b/app/routes/store.$version.docs.$.tsx index 4e5f685a..8016d7ae 100644 --- a/app/routes/store.$version.docs.$.tsx +++ b/app/routes/store.$version.docs.$.tsx @@ -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() - const { version } = useParams() - const branch = getBranch(version) - return ( - + throw redirect( + // By default we'll redirect to the React docs + context.request.url.replace(/\/docs.*/, `/docs/framework/react/${docsPath}`) ) } diff --git a/app/routes/store.$version.docs._index.tsx b/app/routes/store.$version.docs._index.tsx index f47ea079..87944c92 100644 --- a/app/routes/store.$version.docs._index.tsx +++ b/app/routes/store.$version.docs._index.tsx @@ -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') + ) } diff --git a/app/routes/store.$version.docs.framework.$framework.$.tsx b/app/routes/store.$version.docs.framework.$framework.$.tsx index d83d2ea1..20c81746 100644 --- a/app/routes/store.$version.docs.framework.$framework.$.tsx +++ b/app/routes/store.$version.docs.framework.$framework.$.tsx @@ -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 }) => { diff --git a/app/routes/store.$version.docs.framework.$framework.$examples.$.tsx b/app/routes/store.$version.docs.framework.$framework.examples.$.tsx similarity index 100% rename from app/routes/store.$version.docs.framework.$framework.$examples.$.tsx rename to app/routes/store.$version.docs.framework.$framework.examples.$.tsx diff --git a/app/routes/store.$version.docs.framework.$framework.$examples._index.tsx b/app/routes/store.$version.docs.framework.$framework.examples._index.tsx similarity index 100% rename from app/routes/store.$version.docs.framework.$framework.$examples._index.tsx rename to app/routes/store.$version.docs.framework.$framework.examples._index.tsx diff --git a/app/routes/store.tsx b/app/routes/store.tsx index 2eda3267..769ee2cd 100644 --- a/app/routes/store.tsx +++ b/app/routes/store.tsx @@ -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 })), ], } From fb77b913d05ec4b3165b23c30d099843a920e61d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?= Date: Mon, 1 Jan 2024 19:37:56 +0100 Subject: [PATCH 04/13] Minor styling and wording updates --- app/routes/form.$version.docs.$.tsx | 2 +- app/routes/form.$version.docs._index.tsx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/app/routes/form.$version.docs.$.tsx b/app/routes/form.$version.docs.$.tsx index defeba90..8016d7ae 100644 --- a/app/routes/form.$version.docs.$.tsx +++ b/app/routes/form.$version.docs.$.tsx @@ -4,7 +4,7 @@ export const loader = async (context: LoaderFunctionArgs) => { const { '*': docsPath } = context.params throw redirect( - // By default we'll redirect to the react docs + // By default we'll redirect to the React docs context.request.url.replace(/\/docs.*/, `/docs/framework/react/${docsPath}`) ) } diff --git a/app/routes/form.$version.docs._index.tsx b/app/routes/form.$version.docs._index.tsx index 5f5ed0c8..87944c92 100644 --- a/app/routes/form.$version.docs._index.tsx +++ b/app/routes/form.$version.docs._index.tsx @@ -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/framework/react/overview')) + throw redirect( + context.request.url.replace(/\/docs.*/, '/docs/framework/react/overview') + ) } From 83bae65b19b5d8384d53c2fc254442280a688a8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?= Date: Thu, 11 Jan 2024 23:45:33 +0100 Subject: [PATCH 05/13] Use urlSearchParams to view the selected framework --- app/routes/form.$version.docs.$.tsx | 42 +++++++++++++++++++++++++---- app/routes/form.tsx | 22 ++++++++++----- 2 files changed, 52 insertions(+), 12 deletions(-) diff --git a/app/routes/form.$version.docs.$.tsx b/app/routes/form.$version.docs.$.tsx index 8016d7ae..cbae4dbc 100644 --- a/app/routes/form.$version.docs.$.tsx +++ b/app/routes/form.$version.docs.$.tsx @@ -1,10 +1,42 @@ -import { redirect, type LoaderFunctionArgs } from '@remix-run/node' +import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node' +import { repo, getBranch } from '~/routes/form' +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' export const loader = async (context: LoaderFunctionArgs) => { - const { '*': docsPath } = context.params + const { '*': docsPath, version } = context.params - throw redirect( - // By default we'll redirect to the React docs - context.request.url.replace(/\/docs.*/, `/docs/framework/react/${docsPath}`) + 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 Form Docs`, + description: data?.description, + }) +} + +export const ErrorBoundary = DefaultErrorBoundary + +export default function RouteDocs() { + const { title, code, filePath } = useLoaderData() + const { version } = useParams() + const branch = getBranch(version) + return ( + ) } diff --git a/app/routes/form.tsx b/app/routes/form.tsx index 3d9f28bd..7cf95583 100644 --- a/app/routes/form.tsx +++ b/app/routes/form.tsx @@ -5,6 +5,7 @@ import { useMatches, useNavigate, useParams, + useSearchParams, } from '@remix-run/react' import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node' import { redirect } from '@remix-run/node' @@ -118,8 +119,13 @@ export const useReactFormDocsConfig = () => { const match = matches[matches.length - 1] const params = useParams() const version = params.version! + const [searchParams] = useSearchParams() + const framework = - params.framework || localStorage.getItem('framework') || 'react' + params.framework || + searchParams.get('framework') || + localStorage.getItem('framework') || + 'react' const navigate = useNavigate() const config = useMatchesData(`/form/${version}`) as GithubDocsConfig @@ -143,11 +149,13 @@ export const useReactFormDocsConfig = () => { selected: framework!, available: availableFrameworks, onSelect: (option: { label: string; value: string }) => { - const url = generatePath(match.id, { - ...match.params, - framework: option.value, - }) - navigate(url) + const url = + generatePath(match.id, { + ...match.params, + framework: option.value, + }) + `?framework=${option.value}` + + navigate(url, { state: { framework } }) }, } }, [config.frameworkMenus, framework, match, navigate]) @@ -194,7 +202,7 @@ export const useReactFormDocsConfig = () => { label: d.label, children: [ ...d.children.map(({ to, ...d }) => ({ - to: `framework/${framework}/${to}`, + to: `${to}?framework=${framework}`, ...d, badge: 'core', })), From 34ec87561d02f52ab17efaf042a548ece657dd96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?= Date: Thu, 11 Jan 2024 23:47:53 +0100 Subject: [PATCH 06/13] Use local storage --- app/routes/form.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/app/routes/form.tsx b/app/routes/form.tsx index 7cf95583..c58f4f1a 100644 --- a/app/routes/form.tsx +++ b/app/routes/form.tsx @@ -149,11 +149,11 @@ export const useReactFormDocsConfig = () => { selected: framework!, available: availableFrameworks, onSelect: (option: { label: string; value: string }) => { - const url = - generatePath(match.id, { - ...match.params, - framework: option.value, - }) + `?framework=${option.value}` + const url = generatePath(match.id, { + ...match.params, + framework: option.value, + }) + localStorage.setItem('framework', option.value) navigate(url, { state: { framework } }) }, @@ -201,8 +201,7 @@ export const useReactFormDocsConfig = () => { return { label: d.label, children: [ - ...d.children.map(({ to, ...d }) => ({ - to: `${to}?framework=${framework}`, + ...d.children.map((d) => ({ ...d, badge: 'core', })), From 8e3e568c972d4fe1b97f14bcf971c9edfa98aabf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?= Date: Fri, 12 Jan 2024 22:45:48 +0100 Subject: [PATCH 07/13] Hopefully final touches --- app/routes/form.$version.docs._index.tsx | 4 +-- app/routes/form.tsx | 11 ++---- app/routes/store.$version.docs.$.tsx | 42 ++++++++++++++++++++--- app/routes/store.$version.docs._index.tsx | 2 +- app/routes/store.tsx | 9 ++--- 5 files changed, 47 insertions(+), 21 deletions(-) diff --git a/app/routes/form.$version.docs._index.tsx b/app/routes/form.$version.docs._index.tsx index 87944c92..f47ea079 100644 --- a/app/routes/form.$version.docs._index.tsx +++ b/app/routes/form.$version.docs._index.tsx @@ -2,7 +2,5 @@ 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/framework/react/overview') - ) + throw redirect(context.request.url.replace(/\/docs.*/, '/docs/overview')) } diff --git a/app/routes/form.tsx b/app/routes/form.tsx index c58f4f1a..e8e1a134 100644 --- a/app/routes/form.tsx +++ b/app/routes/form.tsx @@ -5,7 +5,6 @@ import { useMatches, useNavigate, useParams, - useSearchParams, } from '@remix-run/react' import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node' import { redirect } from '@remix-run/node' @@ -20,7 +19,7 @@ import { FaDiscord, FaGithub } from 'react-icons/fa' import type { AvailableOptions } from '~/components/Select' import { Scarf } from '~/components/Scarf' -// +const formLocalStorageKey = 'framework-form' export type FrameworkMenu = { framework: string @@ -119,13 +118,9 @@ export const useReactFormDocsConfig = () => { const match = matches[matches.length - 1] const params = useParams() const version = params.version! - const [searchParams] = useSearchParams() const framework = - params.framework || - searchParams.get('framework') || - localStorage.getItem('framework') || - 'react' + params.framework || localStorage.getItem(formLocalStorageKey) || 'react' const navigate = useNavigate() const config = useMatchesData(`/form/${version}`) as GithubDocsConfig @@ -153,7 +148,7 @@ export const useReactFormDocsConfig = () => { ...match.params, framework: option.value, }) - localStorage.setItem('framework', option.value) + localStorage.setItem(formLocalStorageKey, option.value) navigate(url, { state: { framework } }) }, diff --git a/app/routes/store.$version.docs.$.tsx b/app/routes/store.$version.docs.$.tsx index 8016d7ae..ad8026f4 100644 --- a/app/routes/store.$version.docs.$.tsx +++ b/app/routes/store.$version.docs.$.tsx @@ -1,10 +1,42 @@ -import { redirect, type LoaderFunctionArgs } from '@remix-run/node' +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' export const loader = async (context: LoaderFunctionArgs) => { - const { '*': docsPath } = context.params + const { '*': docsPath, version } = context.params - throw redirect( - // By default we'll redirect to the React docs - context.request.url.replace(/\/docs.*/, `/docs/framework/react/${docsPath}`) + 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() + const { version } = useParams() + const branch = getBranch(version) + return ( + ) } diff --git a/app/routes/store.$version.docs._index.tsx b/app/routes/store.$version.docs._index.tsx index 87944c92..9686781b 100644 --- a/app/routes/store.$version.docs._index.tsx +++ b/app/routes/store.$version.docs._index.tsx @@ -3,6 +3,6 @@ import { redirect } from '@remix-run/node' export const loader = (context: LoaderFunctionArgs) => { throw redirect( - context.request.url.replace(/\/docs.*/, '/docs/framework/react/overview') + context.request.url.replace(/\/docs.*/, '/docs/overview') ) } diff --git a/app/routes/store.tsx b/app/routes/store.tsx index 769ee2cd..58a9c8ec 100644 --- a/app/routes/store.tsx +++ b/app/routes/store.tsx @@ -18,7 +18,7 @@ import angularLogo from '~/images/angular-logo.svg' import { FaDiscord, FaGithub } from 'react-icons/fa' import type { AvailableOptions } from '~/components/Select' -// +const storeLocalStorageKey = 'framework-store' export type FrameworkMenu = { framework: string @@ -118,7 +118,7 @@ export const useReactStoreDocsConfig = () => { const params = useParams() const version = params.version! const framework = - params.framework || localStorage.getItem('framework') || 'react' + params.framework || localStorage.getItem(storeLocalStorageKey) || 'react' const navigate = useNavigate() const config = useMatchesData(`/store/${version}`) as GithubDocsConfig @@ -146,6 +146,8 @@ export const useReactStoreDocsConfig = () => { ...match.params, framework: option.value, }) + localStorage.setItem(storeLocalStorageKey, option.value) + navigate(url) }, } @@ -192,8 +194,7 @@ export const useReactStoreDocsConfig = () => { return { label: d.label, children: [ - ...d.children.map(({ to, ...d }) => ({ - to: `framework/${framework}/${to}`, + ...d.children.map(({ ...d }) => ({ ...d, badge: 'core', })), From fdf0becda292eeaa75ecf0bc4b1339c166d5c6c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?= Date: Fri, 12 Jan 2024 23:00:21 +0100 Subject: [PATCH 08/13] Revert some redundant changes --- ...m.$version.docs.framework.$framework.$.tsx | 53 +++---------------- ...e.$version.docs.framework.$framework.$.tsx | 53 +++---------------- 2 files changed, 16 insertions(+), 90 deletions(-) diff --git a/app/routes/form.$version.docs.framework.$framework.$.tsx b/app/routes/form.$version.docs.framework.$framework.$.tsx index 2e1541f2..29c9a0ae 100644 --- a/app/routes/form.$version.docs.framework.$framework.$.tsx +++ b/app/routes/form.$version.docs.framework.$framework.$.tsx @@ -1,62 +1,25 @@ import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node' -import type { GithubDocsConfig } from '~/routes/form' import { repo, getBranch } from '~/routes/form' 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`) - 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.*/, ``), - }) - } - } + return loadDocs({ + repo, + branch: getBranch(version), + docPath: `docs/framework/${framework}/${docsPath}`, + redirectPath: context.request.url.replace(/\/docs.*/, ``), + }) } -export const meta: MetaFunction = ({ data }) => { +export const meta: MetaFunction = ({ data }) => { return seo({ - title: `${data?.title} | TanStack Form Docs`, + title: `${data?.title} | TanStack Query Docs`, description: data?.description, }) } diff --git a/app/routes/store.$version.docs.framework.$framework.$.tsx b/app/routes/store.$version.docs.framework.$framework.$.tsx index 20c81746..118ace6a 100644 --- a/app/routes/store.$version.docs.framework.$framework.$.tsx +++ b/app/routes/store.$version.docs.framework.$framework.$.tsx @@ -1,62 +1,25 @@ 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`) - 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.*/, ``), - }) - } - } + return loadDocs({ + repo, + branch: getBranch(version), + docPath: `docs/framework/${framework}/${docsPath}`, + redirectPath: context.request.url.replace(/\/docs.*/, ``), + }) } -export const meta: MetaFunction = ({ data }) => { +export const meta: MetaFunction = ({ data }) => { return seo({ - title: `${data?.title} | TanStack Store Docs`, + title: `${data?.title} | TanStack Query Docs`, description: data?.description, }) } From 9d5488eea6382ef4d7a84649c860460d1f2a157c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?= Date: Fri, 12 Jan 2024 23:02:08 +0100 Subject: [PATCH 09/13] Fix an incorrect page title --- app/routes/store.$version.docs.framework.$framework.$.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/routes/store.$version.docs.framework.$framework.$.tsx b/app/routes/store.$version.docs.framework.$framework.$.tsx index 118ace6a..e36ab5e4 100644 --- a/app/routes/store.$version.docs.framework.$framework.$.tsx +++ b/app/routes/store.$version.docs.framework.$framework.$.tsx @@ -19,7 +19,7 @@ export const loader = async (context: LoaderFunctionArgs) => { export const meta: MetaFunction = ({ data }) => { return seo({ - title: `${data?.title} | TanStack Query Docs`, + title: `${data?.title} | TanStack Store Docs`, description: data?.description, }) } From d0ca90e49c161756b3aa7a55b117d101e6bc2eff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?= Date: Sat, 13 Jan 2024 15:00:05 +0100 Subject: [PATCH 10/13] Save the selected framework under the same key both in form and store --- app/routes/form.tsx | 4 +--- app/routes/store.tsx | 4 +--- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/app/routes/form.tsx b/app/routes/form.tsx index e8e1a134..8fc201bc 100644 --- a/app/routes/form.tsx +++ b/app/routes/form.tsx @@ -19,8 +19,6 @@ import { FaDiscord, FaGithub } from 'react-icons/fa' import type { AvailableOptions } from '~/components/Select' import { Scarf } from '~/components/Scarf' -const formLocalStorageKey = 'framework-form' - export type FrameworkMenu = { framework: string menuItems: MenuItem[] @@ -120,7 +118,7 @@ export const useReactFormDocsConfig = () => { const version = params.version! const framework = - params.framework || localStorage.getItem(formLocalStorageKey) || 'react' + params.framework || localStorage.getItem('framework') || 'react' const navigate = useNavigate() const config = useMatchesData(`/form/${version}`) as GithubDocsConfig diff --git a/app/routes/store.tsx b/app/routes/store.tsx index 58a9c8ec..15049484 100644 --- a/app/routes/store.tsx +++ b/app/routes/store.tsx @@ -18,8 +18,6 @@ import angularLogo from '~/images/angular-logo.svg' import { FaDiscord, FaGithub } from 'react-icons/fa' import type { AvailableOptions } from '~/components/Select' -const storeLocalStorageKey = 'framework-store' - export type FrameworkMenu = { framework: string menuItems: MenuItem[] @@ -118,7 +116,7 @@ export const useReactStoreDocsConfig = () => { const params = useParams() const version = params.version! const framework = - params.framework || localStorage.getItem(storeLocalStorageKey) || 'react' + params.framework || localStorage.getItem('framework') || 'react' const navigate = useNavigate() const config = useMatchesData(`/store/${version}`) as GithubDocsConfig From 10d0d15ae0999e31a118ff04a3b5ebf798f76f5f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?= Date: Sat, 13 Jan 2024 15:01:55 +0100 Subject: [PATCH 11/13] Typo --- app/routes/form.$version.docs.framework.$framework.$.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/routes/form.$version.docs.framework.$framework.$.tsx b/app/routes/form.$version.docs.framework.$framework.$.tsx index 29c9a0ae..0781222f 100644 --- a/app/routes/form.$version.docs.framework.$framework.$.tsx +++ b/app/routes/form.$version.docs.framework.$framework.$.tsx @@ -19,7 +19,7 @@ export const loader = async (context: LoaderFunctionArgs) => { export const meta: MetaFunction = ({ data }) => { return seo({ - title: `${data?.title} | TanStack Query Docs`, + title: `${data?.title} | TanStack Form Docs`, description: data?.description, }) } From 2e6efb056b298d1de69e01f487d7211f372c0e9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?= Date: Sat, 13 Jan 2024 15:08:42 +0100 Subject: [PATCH 12/13] Fix a Prettier warning --- app/routes/store.$version.docs._index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/app/routes/store.$version.docs._index.tsx b/app/routes/store.$version.docs._index.tsx index 9686781b..f47ea079 100644 --- a/app/routes/store.$version.docs._index.tsx +++ b/app/routes/store.$version.docs._index.tsx @@ -2,7 +2,5 @@ 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/overview')) } From 9c3047d932a1912863b35b3dc37a0d5509fe484a Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Mon, 15 Jan 2024 14:39:00 -0800 Subject: [PATCH 13/13] fix: dropdown picker no longer breaks --- app/routes/form.tsx | 2 +- app/routes/store.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/routes/form.tsx b/app/routes/form.tsx index 8fc201bc..bca2201f 100644 --- a/app/routes/form.tsx +++ b/app/routes/form.tsx @@ -146,7 +146,7 @@ export const useReactFormDocsConfig = () => { ...match.params, framework: option.value, }) - localStorage.setItem(formLocalStorageKey, option.value) + localStorage.setItem('framework', option.value) navigate(url, { state: { framework } }) }, diff --git a/app/routes/store.tsx b/app/routes/store.tsx index 15049484..6c364c52 100644 --- a/app/routes/store.tsx +++ b/app/routes/store.tsx @@ -144,7 +144,7 @@ export const useReactStoreDocsConfig = () => { ...match.params, framework: option.value, }) - localStorage.setItem(storeLocalStorageKey, option.value) + localStorage.setItem('framework', option.value) navigate(url) },