Hopefully final touches

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'))
 }

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 } })
       },

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<typeof loader> = ({ 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}
+    />
   )
 }

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')
   )
 }

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',
             })),