refactor: Clean-up docs logic and layouts

.prettierignore

@@ -1,3 +1,4 @@
 **/api
+**/build
 **/public
 pnpm-lock.yaml

app/components/Docs.tsx → app/components/DocsLayout.tsx

@@ -29,7 +29,7 @@ export type DocsConfig = {
   }[]
 }
 
-export function Docs({
+export function DocsLayout({
   colorFrom,
   colorTo,
   textColor,

app/projects/form.tsx

@@ -75,7 +75,7 @@ export function getBranch(argVersion?: string) {
   return ['latest', latestVersion].includes(version) ? latestBranch : version
 }
 
-export const useReactFormDocsConfig = (config: ConfigSchema) => {
+export const useFormDocsConfig = (config: ConfigSchema) => {
   const matches = useMatches()
   const match = matches[matches.length - 1]
   const params = useParams()

app/projects/store.tsx

@@ -75,7 +75,7 @@ export function getBranch(argVersion?: string) {
   return ['latest', latestVersion].includes(version) ? latestBranch : version
 }
 
-export const useReactStoreDocsConfig = (config: ConfigSchema) => {
+export const useStoreDocsConfig = (config: ConfigSchema) => {
   const matches = useMatches()
   const match = matches[matches.length - 1]
   const params = useParams()

app/routes/form.$version.docs.$.tsx

@@ -8,12 +8,14 @@ import { Doc } from '~/components/Doc'
 
 export const loader = async (context: LoaderFunctionArgs) => {
   const { '*': docsPath, version } = context.params
+  const { url } = context.request
 
   return loadDocs({
     repo,
     branch: getBranch(version),
     docPath: `docs/${docsPath}`,
-    redirectPath: context.request.url.replace(/\/docs.*/, ``),
+    currentPath: url,
+    redirectPath: url.replace(/\/docs.*/, '/docs/overview'),
   })
 }
 

app/routes/form.$version.docs.framework.$framework.$.tsx

@@ -8,12 +8,14 @@ import { loadDocs } from '~/utils/docs'
 
 export const loader = async (context: LoaderFunctionArgs) => {
   const { '*': docsPath, framework, version } = context.params
+  const { url } = context.request
 
   return loadDocs({
     repo,
     branch: getBranch(version),
     docPath: `docs/framework/${framework}/${docsPath}`,
-    redirectPath: context.request.url.replace(/\/docs.*/, ``),
+    currentPath: url,
+    redirectPath: url.replace(/\/docs.*/, '/docs/overview'),
   })
 }
 

app/routes/form.$version.docs.framework.$framework._index.tsx

@@ -1,11 +1,6 @@
-export const loader = () => {
-  // When first path part after docs contain framework name, just redirect to overview
-  // if (
-  //   context.request.url.includes('/docs/react') ||
-  //   context.request.url.includes('/docs/solid') ||
-  //   context.request.url.includes('/docs/vue') ||
-  //   context.request.url.includes('/docs/svelte')
-  // ) {
-  //   throw redirect(context.request.url + '/overview')
-  // }
+import { redirect } from '@remix-run/node'
+import type { LoaderFunctionArgs } from '@remix-run/node'
+
+export const loader = async (context: LoaderFunctionArgs) => {
+  throw redirect(context.request.url.replace(/\/docs.*/, '/docs/overview'))
 }

app/routes/form.$version.docs.framework.$framework.examples.$.tsx

@@ -9,28 +9,28 @@ import { capitalize, slugToTitle } from '~/utils/utils'
 import { FaExternalLinkAlt } from 'react-icons/fa'
 
 export const loader = async (context: LoaderFunctionArgs) => {
-  const { framework: kind, '*': name } = context.params
+  const { framework, '*': name } = context.params
 
-  return json({ kind, name })
+  return json({ framework, name })
 }
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return seo({
-    title: `${capitalize(data.kind)} Form ${slugToTitle(
+    title: `${capitalize(data.framework)} Form ${slugToTitle(
       data.name
     )} Example | TanStack Form Docs`,
     description: `An example showing how to implement ${slugToTitle(
       data.name
-    )} in ${capitalize(data.kind)} Form`,
+    )} in ${capitalize(data.framework)} Form`,
   })
 }
 
 export default function RouteExamples() {
-  const { kind, name } = useLoaderData<typeof loader>()
+  const { framework, name } = useLoaderData<typeof loader>()
   const { version } = useParams()
   const branch = getBranch(version)
 
-  const examplePath = branch === 'v3' ? name : [kind, name].join('/')
+  const examplePath = [framework, name].join('/')
 
   const [isDark, setIsDark] = React.useState(true)
 
@@ -51,7 +51,7 @@ export default function RouteExamples() {
       <div className="p-4 lg:p-6">
         <DocTitle>
           <span>
-            {capitalize(kind)} Example: {slugToTitle(name)}
+            {capitalize(framework)} Example: {slugToTitle(name)}
           </span>
           <div className="flex items-center gap-4 flex-wrap font-normal text-xs">
             <a

app/routes/form.$version.docs.tsx

@@ -1,19 +1,14 @@
 import type { LoaderFunctionArgs } from '@remix-run/node'
 import { json } from '@remix-run/node'
 import { Outlet, useLoaderData } from '@remix-run/react'
-import { Docs } from '~/components/Docs'
-import {
-  createLogo,
-  getBranch,
-  repo,
-  useReactFormDocsConfig,
-} from '~/projects/form'
+import { DocsLayout } from '~/components/DocsLayout'
+import { createLogo, getBranch, repo, useFormDocsConfig } from '~/projects/form'
 import { getTanstackDocsConfig } from '~/utils/config'
 
 export const loader = async (context: LoaderFunctionArgs) => {
-  const branch = getBranch(context.params.version)
-  const tanstackDocsConfig = await getTanstackDocsConfig(repo, branch)
   const { version } = context.params
+  const branch = getBranch(version)
+  const tanstackDocsConfig = await getTanstackDocsConfig(repo, branch)
 
   return json({
     tanstackDocsConfig,
@@ -23,21 +18,19 @@ export const loader = async (context: LoaderFunctionArgs) => {
 
 export default function Component() {
   const { version, tanstackDocsConfig } = useLoaderData<typeof loader>()
-  let config = useReactFormDocsConfig(tanstackDocsConfig)
+  let config = useFormDocsConfig(tanstackDocsConfig)
   return (
-    <Docs
-      {...{
-        v2: true,
-        logo: createLogo(version),
-        colorFrom: 'from-rose-500',
-        colorTo: 'to-violet-500',
-        textColor: 'text-violet-500',
-        config,
-        framework: config.frameworkConfig,
-        version: config.versionConfig,
-      }}
+    <DocsLayout
+      v2={true}
+      logo={createLogo(version)}
+      colorFrom={'from-rose-500'}
+      colorTo={'to-violet-500'}
+      textColor={'text-violet-500'}
+      config={config}
+      framework={config.frameworkConfig}
+      version={config.versionConfig}
     >
       <Outlet />
-    </Docs>
+    </DocsLayout>
   )
 }

app/routes/query.$version.docs.$framework.tsx

@@ -9,8 +9,8 @@ import {
   useNavigate,
 } from '@remix-run/react'
 import { seo } from '~/utils/seo'
-import type { DocsConfig } from '~/components/Docs'
-import { Docs } from '~/components/Docs'
+import type { DocsConfig } from '~/components/DocsLayout'
+import { DocsLayout } from '~/components/DocsLayout'
 import { QueryGGBanner } from '~/components/QueryGGBanner'
 import {
   availableVersions,
@@ -29,9 +29,9 @@ import { generatePath } from '~/utils/utils'
 import { getTanstackDocsConfig, type MenuItem } from '~/utils/config'
 
 export const loader = async (context: LoaderFunctionArgs) => {
-  const branch = getBranch(context.params.version)
-  const tanstackDocsConfig = await getTanstackDocsConfig(repo, branch)
   const { version, framework } = context.params
+  const branch = getBranch(version)
+  const tanstackDocsConfig = await getTanstackDocsConfig(repo, branch)
 
   return json({
     tanstackDocsConfig,
@@ -177,16 +177,14 @@ export default function RouteFrameworkParam() {
   return (
     <>
       <QueryGGBanner />
-      <Docs
-        {...{
-          logo: logo(version),
-          colorFrom: 'from-rose-500',
-          colorTo: 'to-violet-500',
-          textColor: 'text-violet-500',
-          config: docsConfig!,
-          framework: frameworkConfig,
-          version: versionConfig,
-        }}
+      <DocsLayout
+        logo={logo(version)}
+        colorFrom={'from-rose-500'}
+        colorTo={'to-violet-500'}
+        textColor={'text-violet-500'}
+        config={docsConfig!}
+        framework={frameworkConfig}
+        version={versionConfig}
       />
     </>
   )

app/routes/ranger.v1.docs.tsx

@@ -4,7 +4,7 @@ import { Link, json, useLoaderData } from '@remix-run/react'
 import type { MetaFunction } from '@remix-run/node'
 import { gradientText, repo, v1branch } from '~/projects/ranger'
 import { seo } from '~/utils/seo'
-import { Docs } from '~/components/Docs'
+import { DocsLayout } from '~/components/DocsLayout'
 import { getTanstackDocsConfig } from '~/utils/config'
 
 export const loader = async () => {
@@ -72,14 +72,12 @@ export default function DocsRoute() {
   )
 
   return (
-    <Docs
-      {...{
-        logo,
-        colorFrom: 'from-lime-500',
-        colorTo: 'to-emerald-500',
-        textColor: 'text-emerald-500',
-        config,
-      }}
+    <DocsLayout
+      logo={logo}
+      colorFrom={'from-lime-500'}
+      colorTo={'to-emerald-500'}
+      textColor={'text-emerald-500'}
+      config={config}
     />
   )
 }

app/routes/router.v1.docs.tsx

@@ -3,7 +3,7 @@ import { Link, json, useLoaderData } from '@remix-run/react'
 import type { LoaderFunction, MetaFunction } from '@remix-run/node'
 import { gradientText, repo, v1branch } from '~/projects/router'
 import { seo } from '~/utils/seo'
-import { Docs } from '~/components/Docs'
+import { DocsLayout } from '~/components/DocsLayout'
 import { getTanstackDocsConfig } from '~/utils/config'
 
 export const loader: LoaderFunction = async () => {
@@ -67,14 +67,12 @@ export default function DocsRoute() {
   }
 
   return (
-    <Docs
-      {...{
-        logo,
-        colorFrom: 'from-lime-500',
-        colorTo: 'to-emerald-500',
-        textColor: 'text-emerald-500',
-        config,
-      }}
+    <DocsLayout
+      logo={logo}
+      colorFrom={'from-lime-500'}
+      colorTo={'to-emerald-500'}
+      textColor={'text-emerald-500'}
+      config={config}
     />
   )
 }

app/routes/store.$version.docs.$.tsx

@@ -8,12 +8,14 @@ import { Doc } from '~/components/Doc'
 
 export const loader = async (context: LoaderFunctionArgs) => {
   const { '*': docsPath, version } = context.params
+  const { url } = context.request
 
   return loadDocs({
     repo,
     branch: getBranch(version),
     docPath: `docs/${docsPath}`,
-    redirectPath: context.request.url.replace(/\/docs.*/, ``),
+    currentPath: url,
+    redirectPath: url.replace(/\/docs.*/, '/docs/overview'),
   })
 }
 

app/routes/store.$version.docs.framework.$framework.$.tsx

@@ -8,12 +8,14 @@ import { loadDocs } from '~/utils/docs'
 
 export const loader = async (context: LoaderFunctionArgs) => {
   const { '*': docsPath, framework, version } = context.params
+  const { url } = context.request
 
   return loadDocs({
     repo,
     branch: getBranch(version),
     docPath: `docs/framework/${framework}/${docsPath}`,
-    redirectPath: context.request.url.replace(/\/docs.*/, ``),
+    currentPath: url,
+    redirectPath: url.replace(/\/docs.*/, '/docs/overview'),
   })
 }
 

app/routes/store.$version.docs.framework.$framework._index.tsx

@@ -1,11 +1,6 @@
-export const loader = () => {
-  // When first path part after docs contain framework name, just redirect to overview
-  // if (
-  //   context.request.url.includes('/docs/react') ||
-  //   context.request.url.includes('/docs/solid') ||
-  //   context.request.url.includes('/docs/vue') ||
-  //   context.request.url.includes('/docs/svelte')
-  // ) {
-  //   throw redirect(context.request.url + '/overview')
-  // }
+import { redirect } from '@remix-run/node'
+import type { LoaderFunctionArgs } from '@remix-run/node'
+
+export const loader = async (context: LoaderFunctionArgs) => {
+  throw redirect(context.request.url.replace(/\/docs.*/, '/docs/overview'))
 }