refactor: Simplify docs logic, fix loading framework from localStorage

app/components/DocsLayout.tsx

@@ -2,54 +2,37 @@ import { DocSearch } from '@docsearch/react'
 import * as React from 'react'
 import { CgClose, CgMenuLeft } from 'react-icons/cg'
 import { FaArrowLeft, FaArrowRight, FaTimes } from 'react-icons/fa'
-import { NavLink, Outlet, useMatches } from '@remix-run/react'
+import { NavLink, useMatches } from '@remix-run/react'
 import { last } from '~/utils/utils'
 import { Carbon } from '~/components/Carbon'
 import { LinkOrA } from '~/components/LinkOrA'
 import { Search } from '~/components/Search'
-import type { SelectProps } from '~/components/Select'
 import { Select } from '~/components/Select'
 import { useLocalStorage } from '~/utils/useLocalStorage'
 import { DocsCalloutQueryGG } from '~/components/DocsCalloutQueryGG'
 import { DocsCalloutBytes } from '~/components/DocsCalloutBytes'
-
-export type DocsConfig = {
-  docSearch: {
-    appId: string
-    indexName: string
-    apiKey: string
-  }
-  menu: {
-    label: string | React.ReactNode
-    children: {
-      label: string | React.ReactNode
-      to: string
-      badge?: string
-    }[]
-  }[]
-}
+import { DocsLogo } from '~/components/DocsLogo'
+import type { DocsConfig } from '~/utils/config'
 
 export function DocsLayout({
+  name,
+  version,
   colorFrom,
   colorTo,
   textColor,
-  logo,
   config,
-  framework,
-  version,
   children,
-  v2,
 }: {
+  name: string
+  version: string
   colorFrom: string
   colorTo: string
   textColor: string
-  logo: React.ReactNode
   config: DocsConfig
-  framework?: SelectProps
-  version?: SelectProps
-  children?: any
-  v2?: boolean
+  children: React.ReactNode
 }) {
+  const frameworkConfig = config.frameworkConfig
+  const versionConfig = config.versionConfig
   const matches = useMatches()
   const lastMatch = last(matches)
 
@@ -92,7 +75,7 @@ export function DocsLayout({
                   </a>
                 ) : (
                   <NavLink
-                    to={v2 ? child.to : framework ? '../' + child.to : child.to}
+                    to={child.to}
                     onClick={() => {
                       detailsRef.current.removeAttribute('open')
                     }}
@@ -142,6 +125,15 @@ export function DocsLayout({
     )
   })
 
+  const logo = (
+    <DocsLogo
+      name={name}
+      version={version}
+      colorFrom={colorFrom}
+      colorTo={colorTo}
+    />
+  )
+
   const smallMenu = (
     <div
       className="lg:hidden bg-white sticky top-0 z-20
@@ -166,20 +158,20 @@ export function DocsLayout({
           dark:bg-gray-900"
         >
           <div className="flex gap-4">
-            {framework?.selected ? (
+            {frameworkConfig?.selected ? (
               <Select
-                label={framework.label}
-                selected={framework.selected}
-                available={framework.available}
-                onSelect={framework.onSelect}
+                label={frameworkConfig.label}
+                selected={frameworkConfig.selected}
+                available={frameworkConfig.available}
+                onSelect={frameworkConfig.onSelect}
               />
             ) : null}
-            {version?.selected ? (
+            {versionConfig?.selected ? (
               <Select
-                label={version.label}
-                selected={version.selected}
-                available={version.available}
-                onSelect={version.onSelect}
+                label={versionConfig.label}
+                selected={versionConfig.selected}
+                available={versionConfig.available}
+                onSelect={versionConfig.onSelect}
               />
             ) : null}
           </div>
@@ -200,22 +192,22 @@ export function DocsLayout({
         />
       </div>
       <div className="flex gap-2 px-4">
-        {framework?.selected ? (
+        {frameworkConfig?.selected ? (
           <Select
             className="flex-[3_1_0%]"
-            label={framework.label}
-            selected={framework.selected}
-            available={framework.available}
-            onSelect={framework.onSelect}
+            label={frameworkConfig.label}
+            selected={frameworkConfig.selected}
+            available={frameworkConfig.available}
+            onSelect={frameworkConfig.onSelect}
           />
         ) : null}
-        {version?.selected ? (
+        {versionConfig?.selected ? (
           <Select
             className="flex-[2_1_0%]"
-            label={version.label}
-            selected={version.selected}
-            available={version.available}
-            onSelect={version.onSelect}
+            label={versionConfig.label}
+            selected={versionConfig.selected}
+            available={versionConfig.available}
+            onSelect={versionConfig.onSelect}
           />
         ) : null}
       </div>
@@ -238,21 +230,15 @@ export function DocsLayout({
       {largeMenu}
       <div className="flex w-full lg:w-[calc(100%-250px)] flex-1">
         <div className="min-w-0 min-h-0 flex relative justify-center flex-1">
-          {children || <Outlet />}
+          {children}
           <div
             className="fixed bottom-0 left-0 right-0
                         lg:pl-[250px] z-10"
           >
             <div className="p-4 flex justify-center gap-4">
               {prevItem ? (
                 <LinkOrA
-                  to={
-                    v2
-                      ? prevItem.to
-                      : framework
-                      ? `../${prevItem.to}`
-                      : prevItem.to
-                  }
+                  to={prevItem.to}
                   className="flex gap-2 items-center py-1 px-2 text-sm self-start rounded-md
                 bg-white text-gray-600 dark:bg-black dark:text-gray-400
                 shadow-lg dark:border dark:border-gray-800
@@ -263,13 +249,7 @@ export function DocsLayout({
               ) : null}
               {nextItem ? (
                 <LinkOrA
-                  to={
-                    v2
-                      ? nextItem.to
-                      : framework
-                      ? `../${nextItem.to}`
-                      : nextItem.to
-                  }
+                  to={nextItem.to}
                   className="py-1 px-2 text-sm self-end rounded-md
                   bg-white dark:bg-black
                   shadow-lg dark:border dark:border-gray-800

app/components/DocsLogo.tsx

@@ -0,0 +1,26 @@
+import { Link } from '@remix-run/react'
+
+type Props = {
+  name: string
+  version: string
+  colorFrom: string
+  colorTo: string
+}
+
+export const DocsLogo = (props: Props) => {
+  const { name, version, colorFrom, colorTo } = props
+
+  const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${colorFrom} ${colorTo}`
+
+  return (
+    <>
+      <Link to="/" className="font-light">
+        TanStack
+      </Link>
+      <Link to="../../" className={`font-bold`}>
+        <span className={`${gradientText}`}>{name}</span>{' '}
+        <span className="text-sm align-super">{version}</span>
+      </Link>
+    </>
+  )
+}

app/projects/form.tsx

@@ -1,4 +1,3 @@
-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'
@@ -12,8 +11,9 @@ export const latestBranch = 'main'
 export const latestVersion = 'v0'
 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 colorFrom = 'from-yellow-500'
+export const colorTo = 'to-yellow-600'
+export const textColor = 'text-yellow-600'
 
 const frameworks = {
   react: { label: 'React', logo: reactLogo, value: 'react' },
@@ -23,20 +23,6 @@ const frameworks = {
 
 export type Framework = keyof typeof frameworks
 
-export const createLogo = (version?: string) => (
-  <>
-    <Link to="/" className="font-light">
-      TanStack
-    </Link>
-    <Link to="../../" className={`font-bold`}>
-      <span className={`${gradientText}`}>Form</span>{' '}
-      <span className="text-sm align-super">
-        {version === 'latest' ? latestVersion : version}
-      </span>
-    </Link>
-  </>
-)
-
 export const localMenu: MenuItem = {
   label: 'Menu',
   children: [

app/projects/query.tsx

@@ -5,7 +5,6 @@ import vueLogo from '~/images/vue-logo.svg'
 import svelteLogo from '~/images/svelte-logo.svg'
 import angularLogo from '~/images/angular-logo.svg'
 import { useDocsConfig } from '~/utils/config'
-import { Link } from '@remix-run/react'
 import type { ConfigSchema, MenuItem } from '~/utils/config'
 
 export const repo = 'tanstack/query'
@@ -14,8 +13,9 @@ export const latestBranch = 'main'
 export const latestVersion = 'v5'
 export const availableVersions = ['v5', 'v4', 'v3']
 
-export const gradientText =
-  'inline-block text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-amber-500'
+export const colorFrom = 'from-red-500'
+export const colorTo = 'to-amber-500'
+export const textColor = 'text-amber-500'
 
 export const frameworks = {
   react: { label: 'React', logo: reactLogo, value: 'react' },
@@ -27,20 +27,6 @@ export const frameworks = {
 
 export type Framework = keyof typeof frameworks
 
-export const createLogo = (version?: string) => (
-  <>
-    <Link to="/" className="font-light">
-      TanStack
-    </Link>
-    <Link to=".." className="font-bold">
-      <span className={`${gradientText}`}>Query</span>{' '}
-      <span className="text-sm align-super">
-        {version === 'latest' ? latestVersion : version}
-      </span>
-    </Link>
-  </>
-)
-
 export const localMenu: MenuItem = {
   label: 'Menu',
   children: [

app/projects/ranger.tsx

@@ -1,4 +1,3 @@
-import { Link } from '@remix-run/react'
 import reactLogo from '~/images/react-logo.svg'
 import { FaDiscord, FaGithub } from 'react-icons/fa/index'
 import { useDocsConfig } from '~/utils/config'
@@ -10,29 +9,16 @@ export const latestBranch = 'main'
 export const latestVersion = 'v0'
 export const availableVersions = ['v0']
 
-export const gradientText =
-  'inline-block text-transparent bg-clip-text bg-gradient-to-r from-lime-500 to-emerald-500'
+export const colorFrom = 'from-lime-500'
+export const colorTo = 'to-emerald-500'
+export const textColor = 'text-emerald-500'
 
 const frameworks = {
   react: { label: 'React', logo: reactLogo, value: 'react' },
 } as const
 
 export type Framework = keyof typeof frameworks
 
-export const createLogo = (version?: string) => (
-  <>
-    <Link to="/" className="font-light">
-      TanStack
-    </Link>
-    <Link to=".." className="font-bold">
-      <span className={`${gradientText}`}>Ranger</span>{' '}
-      <span className="text-sm align-super">
-        {version === 'latest' ? latestVersion : version}
-      </span>
-    </Link>
-  </>
-)
-
 const localMenu: MenuItem = {
   label: 'Menu',
   children: [

app/projects/router.tsx

@@ -1,4 +1,3 @@
-import { Link } from '@remix-run/react'
 import reactLogo from '~/images/react-logo.svg'
 import { FaDiscord, FaGithub } from 'react-icons/fa/index'
 import { useDocsConfig } from '~/utils/config'
@@ -10,29 +9,16 @@ export const latestBranch = 'main'
 export const latestVersion = 'v1'
 export const availableVersions = ['v1']
 
-export const gradientText =
-  'inline-block text-transparent bg-clip-text bg-gradient-to-r from-lime-500 to-emerald-500'
+export const colorFrom = 'from-lime-500'
+export const colorTo = 'to-emerald-500'
+export const textColor = 'text-emerald-500'
 
 const frameworks = {
   react: { label: 'React', logo: reactLogo, value: 'react' },
 } as const
 
 export type Framework = keyof typeof frameworks
 
-export const createLogo = (version?: string) => (
-  <>
-    <Link to="/" className="font-light">
-      TanStack
-    </Link>
-    <Link to=".." className="font-bold">
-      <span className={`${gradientText}`}>Router</span>
-      <span className="text-sm align-super">
-        {version === 'latest' ? latestVersion : version}
-      </span>
-    </Link>
-  </>
-)
-
 export const localMenu: MenuItem = {
   label: 'Menu',
   children: [