From 00133341cb3d5b2f4d24a0dd0b1647d6b89942c8 Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Fri, 26 Jan 2024 15:15:13 +1100
Subject: [PATCH 01/12] Update redirect banner,  remove unnecessary redirects,
 stackblitz iframe

---
 app/components/RedirectVersionBanner.tsx      |  68 +++++------
 app/routes/_index.tsx                         |   2 +-
 app/routes/form.$version._index.tsx           |  71 ++++-------
 ...n.docs.framework.$framework.examples.$.tsx |   9 +-
 app/routes/form.$version.tsx                  |  64 ++++------
 app/routes/query.$.tsx                        | 111 +-----------------
 app/routes/query.$version._index.tsx          |  22 ++--
 ...n.docs.framework.$framework.examples.$.tsx |   7 +-
 app/routes/query.$version.tsx                 |  52 ++++----
 app/routes/ranger.$version._index.tsx         |  17 ++-
 ...r.$version.docs.framework.$framework.$.tsx |   2 +-
 ...n.docs.framework.$framework.examples.$.tsx |   9 +-
 app/routes/ranger.$version.tsx                |  52 ++++----
 app/routes/router.$.tsx                       |  31 +----
 app/routes/router.$version._index.tsx         |  21 ++--
 ...n.docs.framework.$framework.examples.$.tsx |   9 +-
 app/routes/router.$version.tsx                |  52 ++++----
 app/routes/store.$version._index.tsx          |  12 +-
 app/routes/store.$version.tsx                 |  64 ++++------
 app/routes/table.$.tsx                        |  54 +--------
 app/routes/table.$version._index.tsx          |  15 +--
 app/routes/table.$version.tsx                 |  55 ++++-----
 app/routes/virtual.$.tsx                      |  35 +-----
 app/routes/virtual.$version._index.tsx        |  14 +--
 app/routes/virtual.$version.tsx               |  55 ++++-----
 25 files changed, 279 insertions(+), 624 deletions(-)

diff --git a/app/components/RedirectVersionBanner.tsx b/app/components/RedirectVersionBanner.tsx
index 8be0b7d1..e9eb8fbe 100644
--- a/app/components/RedirectVersionBanner.tsx
+++ b/app/components/RedirectVersionBanner.tsx
@@ -1,12 +1,13 @@
-import { Link, useLocation } from '@remix-run/react'
+import { Link } from '@remix-run/react'
 import { useLocalStorage } from '~/utils/useLocalStorage'
 import { useClientOnlyRender } from '~/utils/useClientOnlyRender'
 
 export function RedirectVersionBanner(props: {
-  currentVersion: string
+  version: string
   latestVersion: string
+  redirectUrl: string
 }) {
-  const location = useLocation()
+  const { version, latestVersion, redirectUrl } = props
 
   // After user clicks hide, do not show modal for a month, and then remind users that there is a new version!
   const [showModal, setShowModal] = useLocalStorage(
@@ -15,44 +16,35 @@ export function RedirectVersionBanner(props: {
     1000 * 60 * 24 * 30
   )
 
-  const isLowerVersion =
-    Number(props.currentVersion) < Number(props.latestVersion[1])
-  const redirectTarget = location.pathname.replace(
-    `v${props.currentVersion}`,
-    'latest'
-  )
-
   if (!useClientOnlyRender()) {
     return null
   }
 
-  return (
-    <>
-      {isLowerVersion && showModal ? (
-        <div className="p-4 bg-blue-500 text-white flex items-center justify-center gap-4">
-          <div>
-            You are currently reading <strong>v{props.currentVersion}</strong>{' '}
-            docs. Redirect to{' '}
-            <a href={redirectTarget} className="font-bold underline">
-              latest
-            </a>{' '}
-            version?
-          </div>
-          <Link
-            to={redirectTarget}
-            replace
-            className="bg-white text-black py-1 px-2 rounded-md uppercase font-black text-xs"
-          >
-            Latest
-          </Link>
-          <button
-            onClick={() => setShowModal(false)}
-            className="bg-white text-black py-1 px-2 rounded-md uppercase font-black text-xs"
-          >
-            Hide
-          </button>
+  if (![latestVersion, 'latest'].includes(version) && showModal) {
+    return (
+      <div className="p-4 bg-blue-500 text-white flex items-center justify-center gap-4">
+        <div>
+          You are currently reading <strong>v{version}</strong> docs. Redirect
+          to{' '}
+          <a href={redirectUrl} className="font-bold underline">
+            latest
+          </a>{' '}
+          version?
         </div>
-      ) : null}
-    </>
-  )
+        <Link
+          to={redirectUrl}
+          replace
+          className="bg-white text-black py-1 px-2 rounded-md uppercase font-black text-xs"
+        >
+          Latest
+        </Link>
+        <button
+          onClick={() => setShowModal(false)}
+          className="bg-white text-black py-1 px-2 rounded-md uppercase font-black text-xs"
+        >
+          Hide
+        </button>
+      </div>
+    )
+  }
 }
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index b80795ec..cf685927 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -559,7 +559,7 @@ export default function Index() {
             right-0 top-0 -translate-y-1/3 translate-x-1/3
             sm:opacity-20`}
           >
-            <img src={discordImage} width={300} height={300} />
+            <img alt="Discord" src={discordImage} width={300} height={300} />
           </div>
           <div className={`sm:col-span-2`}>
             <h3 className={`text-3xl`}>TanStack on Discord</h3>
diff --git a/app/routes/form.$version._index.tsx b/app/routes/form.$version._index.tsx
index f1ddc7b1..3fd6c0f1 100644
--- a/app/routes/form.$version._index.tsx
+++ b/app/routes/form.$version._index.tsx
@@ -11,7 +11,7 @@ import {
   FaTshirt,
 } from 'react-icons/fa'
 import { json } from '@remix-run/node'
-import { Link, useLoaderData, useParams } from '@remix-run/react'
+import { Link, useLoaderData } from '@remix-run/react'
 import { Carbon } from '~/components/Carbon'
 import { Footer } from '~/components/Footer'
 import { VscPreview, VscWand } from 'react-icons/vsc'
@@ -27,6 +27,7 @@ import {
 import { Logo } from '~/components/Logo'
 import { getSponsorsForSponsorPack } from '~/server/sponsors'
 import type { Framework } from '~/projects/form'
+import type { LoaderFunctionArgs } from '@remix-run/node'
 
 const menu = [
   {
@@ -79,17 +80,18 @@ const menu = [
   },
 ]
 
-export const loader = async () => {
+export const loader = async (context: LoaderFunctionArgs) => {
+  const { version } = context.params
   const sponsors = await getSponsorsForSponsorPack()
 
   return json({
     sponsors,
+    version,
   })
 }
 
 export default function RouteVersion() {
-  const { sponsors } = useLoaderData<typeof loader>()
-  const { version } = useParams()
+  const { sponsors, version } = useLoaderData<typeof loader>()
   const branch = getBranch(version)
   const [framework, setFramework] = React.useState<Framework>('react')
   const [isDark, setIsDark] = React.useState(true)
@@ -373,15 +375,7 @@ export default function RouteVersion() {
                       ? 'bg-yellow-500'
                       : 'bg-gray-300 dark:bg-gray-700 hover:bg-yellow-400'
                   }`}
-                  onClick={
-                    () => setFramework(item.value)
-                    // setParams(new URLSearchParams({ framework: item.value }), {
-                    //   replace: true,
-                    //   state: {
-                    //     scroll: false,
-                    //   },
-                    // })
-                  }
+                  onClick={() => setFramework(item.value)}
                 >
                   {item.label}
                 </button>
@@ -390,40 +384,23 @@ export default function RouteVersion() {
           </div>
         </div>
 
-        {[].includes(framework) ? (
-          <div className="px-2">
-            <div className="p-8 text-center text-lg w-full max-w-screen-lg mx-auto bg-black text-white rounded-xl">
-              Looking for the <strong>@tanstack/{framework}-form</strong>{' '}
-              example? We could use your help to build the{' '}
-              <strong>@tanstack/{framework}-form</strong> adapter! Join the{' '}
-              <a
-                href="https://tlinz.com/discord"
-                className="text-teal-500 font-bold"
-              >
-                TanStack Discord Server
-              </a>{' '}
-              and let's get to work!
-            </div>
-          </div>
-        ) : (
-          <div className="bg-white dark:bg-black">
-            <iframe
-              key={framework}
-              src={`https://codesandbox.io/embed/github/${repo}/tree/${branch}/examples/${framework}/simple?autoresize=1&fontsize=16&theme=${
-                isDark ? 'dark' : 'light'
-              }`}
-              title={`tanstack//${framework}-form: simple`}
-              sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-              className="shadow-2xl max-h-[800px]"
-              loading="lazy"
-              style={{
-                width: '100%',
-                height: '80vh',
-                border: '0',
-              }}
-            ></iframe>
-          </div>
-        )}
+        <div className="bg-white dark:bg-black">
+          <iframe
+            key={framework}
+            src={`https://stackblitz.com/github/${repo}/tree/${branch}/examples/${framework}/simple?embed=1&theme=${
+              isDark ? 'dark' : 'light'
+            }`}
+            title={`tanstack//${framework}-form: simple`}
+            sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+            className="shadow-2xl max-h-[800px]"
+            loading="lazy"
+            style={{
+              width: '100%',
+              height: '80vh',
+              border: '0',
+            }}
+          ></iframe>
+        </div>
 
         <div className="flex flex-col gap-4 items-center">
           <div className="font-extrabold text-xl lg:text-2xl">
diff --git a/app/routes/form.$version.docs.framework.$framework.examples.$.tsx b/app/routes/form.$version.docs.framework.$framework.examples.$.tsx
index ca4613c3..6e376ab0 100644
--- a/app/routes/form.$version.docs.framework.$framework.examples.$.tsx
+++ b/app/routes/form.$version.docs.framework.$framework.examples.$.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
 import { json } from '@remix-run/node'
-import { useLoaderData, useParams } from '@remix-run/react'
+import { useLoaderData } from '@remix-run/react'
 import { DocTitle } from '~/components/DocTitle'
 import { repo, getBranch } from '~/projects/form'
 import { seo } from '~/utils/seo'
@@ -9,9 +9,9 @@ import { capitalize, slugToTitle } from '~/utils/utils'
 import { FaExternalLinkAlt } from 'react-icons/fa'
 
 export const loader = async (context: LoaderFunctionArgs) => {
-  const { framework, '*': name } = context.params
+  const { version, framework, '*': name } = context.params
 
-  return json({ framework, name })
+  return json({ version, framework, name })
 }
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
@@ -26,8 +26,7 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
 }
 
 export default function RouteExamples() {
-  const { framework, name } = useLoaderData<typeof loader>()
-  const { version } = useParams()
+  const { version, framework, name } = useLoaderData<typeof loader>()
   const branch = getBranch(version)
 
   const examplePath = [framework, name].join('/')
diff --git a/app/routes/form.$version.tsx b/app/routes/form.$version.tsx
index 77831c2a..010f9890 100644
--- a/app/routes/form.$version.tsx
+++ b/app/routes/form.$version.tsx
@@ -1,23 +1,29 @@
-import { Link, Outlet, useLocation } from '@remix-run/react'
+import { Outlet, json, redirect, useLoaderData } from '@remix-run/react'
 import { DefaultErrorBoundary } from '~/components/DefaultErrorBoundary'
-import { useLocalStorage } from '~/utils/useLocalStorage'
 import { useClientOnlyRender } from '~/utils/useClientOnlyRender'
-import { latestVersion } from '~/projects/form'
+import { availableVersions, latestVersion } from '~/projects/form'
+import type { LoaderFunctionArgs } from '@remix-run/node'
+import { RedirectVersionBanner } from '~/components/RedirectVersionBanner'
+
+export const loader = async (context: LoaderFunctionArgs) => {
+  const { version } = context.params
+
+  const redirectUrl = context.request.url.replace(version!, 'latest')
+
+  if (!availableVersions.concat('latest').includes(version!)) {
+    throw redirect(redirectUrl)
+  }
+
+  return json({
+    version,
+    redirectUrl,
+  })
+}
 
 export const ErrorBoundary = DefaultErrorBoundary
 
 export default function RouteVersionParam() {
-  // After user clicks hide, do not show modal for a month, and then remind users that there is a new version!
-  const [showModal, setShowModal] = useLocalStorage(
-    'showRedirectToLatestModal',
-    true,
-    1000 * 60 * 24 * 30
-  )
-  const location = useLocation()
-
-  const version = location.pathname.match(/\/form\/v(\d)/)?.[1] || '999'
-  const isLowerVersion = Number(version) < Number(latestVersion[1])
-  const redirectTarget = location.pathname.replace(`v${version}`, 'latest')
+  const { version, redirectUrl } = useLoaderData<typeof loader>()
 
   if (!useClientOnlyRender()) {
     return null
@@ -25,31 +31,11 @@ export default function RouteVersionParam() {
 
   return (
     <>
-      {isLowerVersion && showModal ? (
-        <div className="p-4 bg-blue-500 text-white flex items-center justify-center gap-4">
-          <div>
-            You are currently reading <strong>v{version}</strong> docs. Redirect
-            to{' '}
-            <a href={redirectTarget} className="font-bold underline">
-              latest
-            </a>{' '}
-            version?
-          </div>
-          <Link
-            to={redirectTarget}
-            replace
-            className="bg-white text-black py-1 px-2 rounded-md uppercase font-black text-xs"
-          >
-            Latest
-          </Link>
-          <button
-            onClick={() => setShowModal(false)}
-            className="bg-white text-black py-1 px-2 rounded-md uppercase font-black text-xs"
-          >
-            Hide
-          </button>
-        </div>
-      ) : null}
+      <RedirectVersionBanner
+        version={version!}
+        latestVersion={latestVersion}
+        redirectUrl={redirectUrl}
+      />
       <Outlet />
     </>
   )
diff --git a/app/routes/query.$.tsx b/app/routes/query.$.tsx
index 506a1fc7..5b5d97d2 100644
--- a/app/routes/query.$.tsx
+++ b/app/routes/query.$.tsx
@@ -1,112 +1,5 @@
 import { redirect } from '@remix-run/node'
-import type { LoaderFunctionArgs } from '@remix-run/node'
 
-export const loader = (context: LoaderFunctionArgs) => {
-  handleRedirectsFromV3(context)
-
-  return redirect(`/query/latest`)
-}
-
-function handleRedirectsFromV3(context: LoaderFunctionArgs) {
-  const url = new URL(context.request.url)
-
-  // Redirect old query v3 docs
-  // prettier-ignore
-  const reactQueryv3List = [
-    // {from: 'api/overview',to: 'docs/guide/overview',},
-    {from: "overview", to: "docs/overview"},
-    {from: "installation", to: "docs/installation"},
-    {from: "quick-start", to: "docs/quick-start"},
-    {from: "devtools", to: "docs/devtools"},
-    {from: "videos", to: "docs/videos"},
-    {from: "comparison", to: "docs/comparison"},
-    {from: "typescript", to: "docs/typescript"},
-    {from: "graphql", to: "docs/graphql"},
-    {from: "react-native", to: "docs/react-native"},
-    {from: "guides/important-defaults", to: "docs/guides/important-defaults"},
-    {from: "guides/queries", to: "docs/guides/queries"},
-    {from: "guides/query-keys", to: "docs/guides/query-keys"},
-    {from: "guides/query-functions", to: "docs/guides/query-functions"},
-    {from: "guides/network-mode", to: "docs/guides/network-mode"},
-    {from: "guides/parallel-queries", to: "docs/guides/parallel-queries"},
-    {from: "guides/dependent-queries", to: "docs/guides/dependent-queries"},
-    {from: "guides/background-fetching-indicators", to: "docs/guides/background-fetching-indicators"},
-    {from: "guides/window-focus-refetching", to: "docs/guides/window-focus-refetching"},
-    {from: "guides/disabling-queries", to: "docs/guides/disabling-queries"},
-    {from: "guides/query-retries", to: "docs/guides/query-retries"},
-    {from: "guides/paginated-queries", to: "docs/guides/paginated-queries"},
-    {from: "guides/infinite-queries", to: "docs/guides/infinite-queries"},
-    {from: "guides/placeholder-query-data", to: "docs/guides/placeholder-query-data"},
-    {from: "guides/initial-query-data", to: "docs/guides/initial-query-data"},
-    {from: "guides/prefetching", to: "docs/guides/prefetching"},
-    {from: "guides/mutations", to: "docs/guides/mutations"},
-    {from: "guides/query-invalidation", to: "docs/guides/query-invalidation"},
-    {from: "guides/invalidations-from-mutations", to: "docs/guides/invalidations-from-mutations"},
-    {from: "guides/updates-from-mutation-responses", to: "docs/guides/updates-from-mutation-responses"},
-    {from: "guides/optimistic-updates", to: "docs/guides/optimistic-updates"},
-    {from: "guides/query-cancellation", to: "docs/guides/query-cancellation"},
-    {from: "guides/scroll-restoration", to: "docs/guides/scroll-restoration"},
-    {from: "guides/filters", to: "docs/guides/filters"},
-    {from: "guides/ssr", to: "docs/guides/ssr"},
-    {from: "guides/caching", to: "docs/guides/caching"},
-    {from: "guides/default-query-function", to: "docs/guides/default-query-function"},
-    {from: "guides/suspense", to: "docs/guides/suspense"},
-    {from: "guides/custom-logger", to: "docs/guides/custom-logger"},
-    {from: "guides/testing", to: "docs/guides/testing"},
-    {from: "guides/does-this-replace-client-state", to: "docs/guides/does-this-replace-client-state"},
-    {from: "guides/migrating-to-react-query-3", to: "docs/guides/migrating-to-react-query-3"},
-    {from: "guides/migrating-to-react-query-4", to: "docs/guides/migrating-to-react-query-4"},
-    {from: "community/tkdodos-blog", to: "docs/community/tkdodos-blog"},
-    {from: "examples/simple", to: "docs/examples/react/simple"},
-    {from: "examples/basic", to: "docs/examples/react/basic"},
-    {from: "examples/basic-graphql-request", to: "docs/examples/react/basic-graphql-request"},
-    {from: "examples/custom-hooks", to: "docs/examples/react/custom-hooks"},
-    {from: "examples/auto-refetching", to: "docs/examples/react/auto-refetching"},
-    {from: "examples/focus-refetching", to: "docs/examples/react/focus-refetching"},
-    {from: "examples/optimistic-updates", to: "docs/examples/react/optimistic-updates-typescript"},
-    {from: "examples/optimistic-updates-typescript", to: "docs/examples/react/optimistic-updates-typescript"},
-    {from: "examples/pagination", to: "docs/examples/react/pagination"},
-    {from: "examples/load-more-infinite-scroll", to: "docs/examples/react/load-more-infinite-scroll"},
-    {from: "examples/suspense", to: "docs/examples/react/suspense"},
-    {from: "examples/default-query-function", to: "docs/examples/react/default-query-function"},
-    {from: "examples/playground", to: "docs/examples/react/playground"},
-    {from: "examples/prefetching", to: "docs/examples/react/prefetching"},
-    {from: "examples/star-wars", to: "docs/examples/react/star-wars"},
-    {from: "examples/rick-morty", to: "docs/examples/react/rick-morty"},
-    {from: "examples/nextjs", to: "docs/examples/react/nextjs"},
-    {from: "examples/react-native", to: "docs/examples/react/react-native"},
-    {from: "examples/offline", to: "docs/examples/react/offline"},
-    {from: "plugins/persistQueryClient", to: "docs/plugins/persistQueryClient"},
-    {from: "plugins/createWebStoragePersister", to: "docs/plugins/createWebStoragePersister"},
-    {from: "plugins/createAsyncStoragePersister", to: "docs/plugins/createAsyncStoragePersister"},
-    {from: "plugins/broadcastQueryClient", to: "docs/plugins/broadcastQueryClient"},
-    {from: "reference/useQuery", to: "docs/reference/useQuery"},
-    {from: "reference/useQueries", to: "docs/reference/useQueries"},
-    {from: "reference/useInfiniteQuery", to: "docs/reference/useInfiniteQuery"},
-    {from: "reference/useMutation", to: "docs/reference/useMutation"},
-    {from: "reference/useIsFetching", to: "docs/reference/useIsFetching"},
-    {from: "reference/useIsMutating", to: "docs/reference/useIsMutating"},
-    {from: "reference/QueryClient", to: "docs/reference/QueryClient"},
-    {from: "reference/QueryClientProvider", to: "docs/reference/QueryClientProvider"},
-    {from: "reference/useQueryClient", to: "docs/reference/useQueryClient"},
-    {from: "reference/QueryCache", to: "docs/reference/QueryCache"},
-    {from: "reference/MutationCache", to: "docs/reference/MutationCache"},
-    {from: "reference/QueryObserver", to: "docs/reference/QueryObserver"},
-    {from: "reference/InfiniteQueryObserver", to: "docs/reference/InfiniteQueryObserver"},
-    {from: "reference/QueriesObserver", to: "docs/reference/QueriesObserver"},
-    {from: "reference/QueryErrorResetBoundary", to: "docs/reference/QueryErrorResetBoundary"},
-    {from: "reference/useQueryErrorResetBoundary", to: "docs/reference/useQueryErrorResetBoundary"},
-    {from: "reference/focusManager", to: "docs/reference/focusManager"},
-    {from: "reference/onlineManager", to: "docs/reference/onlineManager"},
-    {from: "reference/hydration", to: "docs/reference/hydration"},
-    // {from: '',to: ''},
-  ]
-
-  reactQueryv3List.forEach((item) => {
-    if (url.pathname.startsWith(`/query/v3/${item.from}`)) {
-      throw redirect(
-        `/query/latest/${item.to}?from=reactQueryV3&original=https://tanstack.com/query/v3/${item.to}`
-      )
-    }
-  })
+export const loader = () => {
+  return redirect('/query/latest')
 }
diff --git a/app/routes/query.$version._index.tsx b/app/routes/query.$version._index.tsx
index ad73ad52..9b7b92f7 100644
--- a/app/routes/query.$version._index.tsx
+++ b/app/routes/query.$version._index.tsx
@@ -11,7 +11,7 @@ import {
   FaTshirt,
 } from 'react-icons/fa'
 import { json } from '@remix-run/node'
-import { Link, useLoaderData, useParams } from '@remix-run/react'
+import { Link, useLoaderData } from '@remix-run/react'
 import { Carbon } from '~/components/Carbon'
 import { Footer } from '~/components/Footer'
 import { VscPreview, VscWand } from 'react-icons/vsc'
@@ -29,6 +29,7 @@ import { Logo } from '~/components/Logo'
 import { LogoQueryGG } from '~/components/LogoQueryGG'
 import { getSponsorsForSponsorPack } from '~/server/sponsors'
 import type { Framework } from '~/projects/query'
+import type { LoaderFunctionArgs } from '@remix-run/node'
 
 const menu = [
   {
@@ -81,17 +82,18 @@ const menu = [
   },
 ]
 
-export const loader = async () => {
+export const loader = async (context: LoaderFunctionArgs) => {
+  const { version } = context.params
   const sponsors = await getSponsorsForSponsorPack()
 
   return json({
     sponsors,
+    version,
   })
 }
 
 export default function RouteVersion() {
-  const { sponsors } = useLoaderData<typeof loader>()
-  const { version } = useParams()
+  const { sponsors, version } = useLoaderData<typeof loader>()
   const branch = getBranch(version)
   const [framework, setFramework] = React.useState<Framework>('react')
   const [isDark, setIsDark] = React.useState(true)
@@ -497,15 +499,7 @@ export default function RouteVersion() {
                       ? 'bg-red-500'
                       : 'bg-gray-300 dark:bg-gray-700 hover:bg-red-300'
                   }`}
-                  onClick={
-                    () => setFramework(item.value)
-                    // setParams(new URLSearchParams({ framework: item.value }), {
-                    //   replace: true,
-                    //   state: {
-                    //     scroll: false,
-                    //   },
-                    // })
-                  }
+                  onClick={() => setFramework(item.value)}
                 >
                   {item.label}
                 </button>
@@ -533,7 +527,7 @@ export default function RouteVersion() {
           <div className="bg-white dark:bg-black">
             <iframe
               key={framework}
-              src={`https://codesandbox.io/embed/github/${repo}/tree/${branch}/examples/${framework}/basic?autoresize=1&fontsize=16&theme=${
+              src={`https://stackblitz.com/github/${repo}/tree/${branch}/examples/${framework}/simple?embed=1&theme=${
                 isDark ? 'dark' : 'light'
               }`}
               title={`tannerlinsley/${framework}-query: basic`}
diff --git a/app/routes/query.$version.docs.framework.$framework.examples.$.tsx b/app/routes/query.$version.docs.framework.$framework.examples.$.tsx
index 180f5b7f..2742efae 100644
--- a/app/routes/query.$version.docs.framework.$framework.examples.$.tsx
+++ b/app/routes/query.$version.docs.framework.$framework.examples.$.tsx
@@ -9,9 +9,9 @@ import { capitalize, slugToTitle } from '~/utils/utils'
 import { FaExternalLinkAlt } from 'react-icons/fa'
 
 export const loader = async (context: LoaderFunctionArgs) => {
-  const { framework, '*': name } = context.params
+  const { version, framework, '*': name } = context.params
 
-  return json({ framework, name })
+  return json({ version, framework, name })
 }
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
@@ -26,8 +26,7 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
 }
 
 export default function RouteExamples() {
-  const { framework, name } = useLoaderData<typeof loader>()
-  const { version } = useParams()
+  const { version, framework, name } = useLoaderData<typeof loader>()
   const branch = getBranch(version)
 
   const examplePath = [framework, name].join('/')
diff --git a/app/routes/query.$version.tsx b/app/routes/query.$version.tsx
index c4ab044d..7166b987 100644
--- a/app/routes/query.$version.tsx
+++ b/app/routes/query.$version.tsx
@@ -1,19 +1,29 @@
-import { Link, Outlet, useLocation, useSearchParams } from '@remix-run/react'
+import { Outlet, json, redirect, useLoaderData } from '@remix-run/react'
 import { DefaultErrorBoundary } from '~/components/DefaultErrorBoundary'
-import { latestVersion } from '~/projects/query'
+import { availableVersions, latestVersion } from '~/projects/query'
 import { RedirectVersionBanner } from '~/components/RedirectVersionBanner'
 import { useClientOnlyRender } from '~/utils/useClientOnlyRender'
+import type { LoaderFunctionArgs } from '@remix-run/node'
 
-export const ErrorBoundary = DefaultErrorBoundary
+export const loader = async (context: LoaderFunctionArgs) => {
+  const { version } = context.params
 
-export default function RouteVersionParam() {
-  const location = useLocation()
-  const [params] = useSearchParams()
+  const redirectUrl = context.request.url.replace(version!, 'latest')
+
+  if (!availableVersions.concat('latest').includes(version!)) {
+    throw redirect(redirectUrl)
+  }
 
-  const showV3Redirect = params.get('from') === 'reactQueryV3'
-  const original = params.get('original')
+  return json({
+    version,
+    redirectUrl,
+  })
+}
+
+export const ErrorBoundary = DefaultErrorBoundary
 
-  const version = location.pathname.match(/\/query\/v(\d)/)?.[1] || '999'
+export default function RouteVersionParam() {
+  const { version, redirectUrl } = useLoaderData<typeof loader>()
 
   if (!useClientOnlyRender()) {
     return null
@@ -21,30 +31,10 @@ export default function RouteVersionParam() {
 
   return (
     <>
-      {showV3Redirect ? (
-        <div className="p-4 bg-blue-500 text-white flex items-center justify-center gap-4">
-          <div>
-            Looking for the{' '}
-            <a
-              href={original || '/query/latest'}
-              className="font-bold underline"
-            >
-              React Query v3 documentation
-            </a>
-            ?
-          </div>
-          <Link
-            to={location.pathname}
-            replace
-            className="bg-white text-black py-1 px-2 rounded-md uppercase font-black text-xs"
-          >
-            Hide
-          </Link>
-        </div>
-      ) : null}
       <RedirectVersionBanner
-        currentVersion={version}
+        version={version!}
         latestVersion={latestVersion}
+        redirectUrl={redirectUrl}
       />
       <Outlet />
     </>
diff --git a/app/routes/ranger.$version._index.tsx b/app/routes/ranger.$version._index.tsx
index 74d27090..cb4bf506 100644
--- a/app/routes/ranger.$version._index.tsx
+++ b/app/routes/ranger.$version._index.tsx
@@ -7,17 +7,18 @@ import {
   FaGithub,
   FaTshirt,
 } from 'react-icons/fa'
-import { Link, useLoaderData, useParams } from '@remix-run/react'
+import { Link, useLoaderData } from '@remix-run/react'
 import { json } from '@remix-run/node'
 import { TbHeartHandshake, TbZoomQuestion } from 'react-icons/tb'
 import { VscPreview } from 'react-icons/vsc'
 import { RiLightbulbFlashLine } from 'react-icons/ri'
-import { colorFrom, colorTo, getBranch } from '~/projects/ranger'
+import { colorFrom, colorTo, getBranch, repo } from '~/projects/ranger'
 import { Carbon } from '~/components/Carbon'
 import { Footer } from '~/components/Footer'
 import SponsorPack from '~/components/SponsorPack'
 import { getSponsorsForSponsorPack } from '~/server/sponsors'
 import type { Framework } from '~/projects/ranger'
+import type { LoaderFunctionArgs } from '@remix-run/node'
 
 const menu = [
   {
@@ -70,17 +71,15 @@ const menu = [
   },
 ]
 
-export const loader = async () => {
+export const loader = async (context: LoaderFunctionArgs) => {
+  const { version } = context.params
   const sponsors = await getSponsorsForSponsorPack()
 
-  return json({
-    sponsors,
-  })
+  return json({ sponsors, version })
 }
 
 export default function TanStackRouterRoute() {
-  const { sponsors } = useLoaderData<typeof loader>()
-  const { version } = useParams()
+  const { sponsors, version } = useLoaderData<typeof loader>()
   const branch = getBranch(version)
   const [framework] = React.useState<Framework>('react')
   const [isDark, setIsDark] = React.useState(true)
@@ -318,7 +317,7 @@ export default function TanStackRouterRoute() {
       <div className="bg-white dark:bg-black">
         <iframe
           key={framework}
-          src={`https://codesandbox.io/embed/github/tanstack/ranger/tree/${branch}/examples/${framework}/basic?autoresize=1&fontsize=16&theme=${
+          src={`https://stackblitz.com/github/${repo}/tree/${branch}/examples/${framework}/simple?embed=1&theme=${
             isDark ? 'dark' : 'light'
           }`}
           title="tannerlinsley/react-ranger: basic"
diff --git a/app/routes/ranger.$version.docs.framework.$framework.$.tsx b/app/routes/ranger.$version.docs.framework.$framework.$.tsx
index 7ecf2eea..3898e0c9 100644
--- a/app/routes/ranger.$version.docs.framework.$framework.$.tsx
+++ b/app/routes/ranger.$version.docs.framework.$framework.$.tsx
@@ -7,7 +7,7 @@ import { Doc } from '~/components/Doc'
 import { loadDocs } from '~/utils/docs'
 
 export const loader = async (context: LoaderFunctionArgs) => {
-  const { '*': docsPath, framework, version } = context.params
+  const { version, framework, '*': docsPath } = context.params
   const { url } = context.request
 
   return loadDocs({
diff --git a/app/routes/ranger.$version.docs.framework.$framework.examples.$.tsx b/app/routes/ranger.$version.docs.framework.$framework.examples.$.tsx
index 586087b4..1ea1bbc1 100644
--- a/app/routes/ranger.$version.docs.framework.$framework.examples.$.tsx
+++ b/app/routes/ranger.$version.docs.framework.$framework.examples.$.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
 import { json } from '@remix-run/node'
-import { useLoaderData, useParams } from '@remix-run/react'
+import { useLoaderData } from '@remix-run/react'
 import { DocTitle } from '~/components/DocTitle'
 import { repo, getBranch } from '~/projects/ranger'
 import { seo } from '~/utils/seo'
@@ -9,9 +9,9 @@ import { capitalize, slugToTitle } from '~/utils/utils'
 import { FaExternalLinkAlt } from 'react-icons/fa'
 
 export const loader = async (context: LoaderFunctionArgs) => {
-  const { framework, '*': name } = context.params
+  const { version, framework, '*': name } = context.params
 
-  return json({ framework, name })
+  return json({ version, framework, name })
 }
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
@@ -26,8 +26,7 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
 }
 
 export default function RouteReactRangerDocs() {
-  const { framework, name } = useLoaderData<typeof loader>()
-  const { version } = useParams()
+  const { version, framework, name } = useLoaderData<typeof loader>()
   const branch = getBranch(version)
 
   const examplePath = [framework, name].join('/')
diff --git a/app/routes/ranger.$version.tsx b/app/routes/ranger.$version.tsx
index 99ceab97..5d887264 100644
--- a/app/routes/ranger.$version.tsx
+++ b/app/routes/ranger.$version.tsx
@@ -1,15 +1,29 @@
-import { Link, Outlet, useLocation, useSearchParams } from '@remix-run/react'
+import { Outlet, json, redirect, useLoaderData } from '@remix-run/react'
 import { DefaultErrorBoundary } from '~/components/DefaultErrorBoundary'
+import { availableVersions, latestVersion } from '~/projects/ranger'
 import { useClientOnlyRender } from '~/utils/useClientOnlyRender'
+import { RedirectVersionBanner } from '~/components/RedirectVersionBanner'
+import type { LoaderFunctionArgs } from '@remix-run/node'
+
+export const loader = async (context: LoaderFunctionArgs) => {
+  const { version } = context.params
+
+  const redirectUrl = context.request.url.replace(version!, 'latest')
+
+  if (!availableVersions.concat('latest').includes(version!)) {
+    throw redirect(redirectUrl)
+  }
+
+  return json({
+    version,
+    redirectUrl,
+  })
+}
 
 export const ErrorBoundary = DefaultErrorBoundary
 
 export default function RouteReactRouter() {
-  const [params] = useSearchParams()
-  const location = useLocation()
-
-  const show = params.get('from') === 'reactLocationV2'
-  const original = params.get('original')
+  const { version, redirectUrl } = useLoaderData<typeof loader>()
 
   if (!useClientOnlyRender()) {
     return null
@@ -17,27 +31,11 @@ export default function RouteReactRouter() {
 
   return (
     <>
-      {show ? (
-        <div className="p-4 bg-blue-500 text-white flex items-center justify-center gap-4">
-          <div>
-            Looking for the{' '}
-            <a
-              href={original || 'https://react-ranger-v1.tanstack.com'}
-              className="font-bold underline"
-            >
-              React Location v2 documentation
-            </a>
-            ?
-          </div>
-          <Link
-            to={location.pathname}
-            replace
-            className="bg-white text-black py-1 px-2 rounded-md uppercase font-black text-xs"
-          >
-            Hide
-          </Link>
-        </div>
-      ) : null}
+      <RedirectVersionBanner
+        version={version!}
+        latestVersion={latestVersion}
+        redirectUrl={redirectUrl}
+      />
       <Outlet />
     </>
   )
diff --git a/app/routes/router.$.tsx b/app/routes/router.$.tsx
index 10c22c08..b01a01f0 100644
--- a/app/routes/router.$.tsx
+++ b/app/routes/router.$.tsx
@@ -1,34 +1,5 @@
-import type { LoaderFunction } from '@remix-run/node'
 import { redirect } from '@remix-run/node'
 
-export const loader: LoaderFunction = (context) => {
-  handleRedirects(context)
-
+export const loader = () => {
   return redirect('/router/latest')
 }
-
-function handleRedirects(context: Parameters<LoaderFunction>[0]) {
-  const url = new URL(context.request.url)
-  // prettier-ignore
-  const reactLocationv2List = [
-    {from: 'docs/overview',to: 'docs/guide/introduction',},
-    {from: 'docs/installation',to: 'docs/guide/installation',},
-    {from: 'docs/api',to: 'docs/api/virtualizer',},
-    {from: 'examples/fixed',to: 'docs/examples/react/fixed',},
-    {from: 'examples/variable',to: 'docs/examples/react/variable',},
-    {from: 'examples/dynamic',to: 'docs/examples/react/dynamic',},
-    {from: 'examples/infinite-scroll',to: 'docs/examples/react/infinite-scroll',},
-    {from: 'examples/padding',to: 'docs/examples/react/padding',},
-    {from: 'examples/smooth-scroll',to: 'docs/examples/react/smooth-scroll',},
-    {from: 'examples/sticky',to: 'docs/examples/react/sticky',},
-    {from: '',to: '',},
-  ]
-
-  reactLocationv2List.forEach((item) => {
-    if (url.pathname.startsWith(`/router/react-location/${item.from}`)) {
-      throw redirect(
-        `/router/v1/${item.to}?from=reactLocationV2&original=https://react-location-v2.tanstack.com/${item.from}`
-      )
-    }
-  })
-}
diff --git a/app/routes/router.$version._index.tsx b/app/routes/router.$version._index.tsx
index 5f3d0b75..ad55044b 100644
--- a/app/routes/router.$version._index.tsx
+++ b/app/routes/router.$version._index.tsx
@@ -7,7 +7,7 @@ import {
   FaGithub,
   FaTshirt,
 } from 'react-icons/fa'
-import { Link, useLoaderData, useParams } from '@remix-run/react'
+import { Link, useLoaderData } from '@remix-run/react'
 import { json } from '@remix-run/node'
 import { TbHeartHandshake, TbZoomQuestion } from 'react-icons/tb'
 import { VscPreview } from 'react-icons/vsc'
@@ -18,7 +18,7 @@ import { Footer } from '~/components/Footer'
 import SponsorPack from '~/components/SponsorPack'
 import { Logo } from '~/components/Logo'
 import { getSponsorsForSponsorPack } from '~/server/sponsors'
-import type { LoaderFunction } from '@remix-run/node'
+import type { LoaderFunctionArgs } from '@remix-run/node'
 import type { Framework } from '~/projects/router'
 
 const menu = [
@@ -72,17 +72,18 @@ const menu = [
   },
 ]
 
-export const loader: LoaderFunction = async () => {
+export const loader = async (context: LoaderFunctionArgs) => {
+  const { version } = context.params
   const sponsors = await getSponsorsForSponsorPack()
 
   return json({
     sponsors,
+    version,
   })
 }
 
 export default function TanStackRouterRoute() {
-  const { sponsors } = useLoaderData<typeof loader>()
-  const { version } = useParams()
+  const { sponsors, version } = useLoaderData<typeof loader>()
   const branch = getBranch(version)
   const [framework] = React.useState<Framework>('react')
   const [isDark, setIsDark] = React.useState(true)
@@ -304,15 +305,7 @@ export default function TanStackRouterRoute() {
                     ? 'bg-teal-500'
                     : 'bg-gray-300 dark:bg-gray-700 hover:bg-teal-300'
                 }`}
-                onClick={
-                  () => setFramework(item.value)
-                  // setParams(new URLSearchParams({ framework: item.value }), {
-                  //   replace: true,
-                  //   state: {
-                  //     scroll: false,
-                  //   },
-                  // })
-                }
+                onClick={() => setFramework(item.value)}
               >
                 {item.label}
               </button>
diff --git a/app/routes/router.$version.docs.framework.$framework.examples.$.tsx b/app/routes/router.$version.docs.framework.$framework.examples.$.tsx
index 2a3451c3..61767be2 100644
--- a/app/routes/router.$version.docs.framework.$framework.examples.$.tsx
+++ b/app/routes/router.$version.docs.framework.$framework.examples.$.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
 import { json } from '@remix-run/node'
-import { useLoaderData, useParams } from '@remix-run/react'
+import { useLoaderData } from '@remix-run/react'
 import { DocTitle } from '~/components/DocTitle'
 import { repo, getBranch } from '~/projects/router'
 import { seo } from '~/utils/seo'
@@ -9,9 +9,9 @@ import { capitalize, slugToTitle } from '~/utils/utils'
 import { FaExternalLinkAlt } from 'react-icons/fa'
 
 export const loader = async (context: LoaderFunctionArgs) => {
-  const { framework, '*': name } = context.params
+  const { version, framework, '*': name } = context.params
 
-  return json({ framework, name })
+  return json({ version, framework, name })
 }
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
@@ -26,8 +26,7 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
 }
 
 export default function RouteReactTableDocs() {
-  const { framework, name } = useLoaderData<typeof loader>()
-  const { version } = useParams()
+  const { version, framework, name } = useLoaderData<typeof loader>()
   const branch = getBranch(version)
 
   const examplePath = [framework, name].join('/')
diff --git a/app/routes/router.$version.tsx b/app/routes/router.$version.tsx
index 71adef64..647cc6db 100644
--- a/app/routes/router.$version.tsx
+++ b/app/routes/router.$version.tsx
@@ -1,15 +1,29 @@
-import { Link, Outlet, useLocation, useSearchParams } from '@remix-run/react'
+import { Outlet, json, redirect, useLoaderData } from '@remix-run/react'
 import { DefaultErrorBoundary } from '~/components/DefaultErrorBoundary'
+import { RedirectVersionBanner } from '~/components/RedirectVersionBanner'
+import { availableVersions, latestVersion } from '~/projects/router'
 import { useClientOnlyRender } from '~/utils/useClientOnlyRender'
+import type { LoaderFunctionArgs } from '@remix-run/node'
+
+export const loader = async (context: LoaderFunctionArgs) => {
+  const { version } = context.params
+
+  const redirectUrl = context.request.url.replace(version!, 'latest')
+
+  if (!availableVersions.concat('latest').includes(version!)) {
+    throw redirect(redirectUrl)
+  }
+
+  return json({
+    version,
+    redirectUrl,
+  })
+}
 
 export const ErrorBoundary = DefaultErrorBoundary
 
 export default function RouteReactRouter() {
-  const [params] = useSearchParams()
-  const location = useLocation()
-
-  const show = params.get('from') === 'reactLocationV2'
-  const original = params.get('original')
+  const { version, redirectUrl } = useLoaderData<typeof loader>()
 
   if (!useClientOnlyRender()) {
     return null
@@ -17,27 +31,11 @@ export default function RouteReactRouter() {
 
   return (
     <>
-      {show ? (
-        <div className="p-4 bg-blue-500 text-white flex items-center justify-center gap-4">
-          <div>
-            Looking for the{' '}
-            <a
-              href={original || 'https://react-router-v2.tanstack.com'}
-              className="font-bold underline"
-            >
-              React Location v2 documentation
-            </a>
-            ?
-          </div>
-          <Link
-            to={location.pathname}
-            replace
-            className="bg-white text-black py-1 px-2 rounded-md uppercase font-black text-xs"
-          >
-            Hide
-          </Link>
-        </div>
-      ) : null}
+      <RedirectVersionBanner
+        version={version!}
+        latestVersion={latestVersion}
+        redirectUrl={redirectUrl}
+      />
       <Outlet />
     </>
   )
diff --git a/app/routes/store.$version._index.tsx b/app/routes/store.$version._index.tsx
index 04add8d6..7440a4f5 100644
--- a/app/routes/store.$version._index.tsx
+++ b/app/routes/store.$version._index.tsx
@@ -349,15 +349,7 @@ export default function RouteVersion() {
                       ? 'bg-gray-500'
                       : 'bg-gray-300 dark:bg-gray-700 hover:bg-gray-400'
                   }`}
-                  onClick={
-                    () => setFramework(item.value)
-                    // setParams(new URLSearchParams({ framework: item.value }), {
-                    //   replace: true,
-                    //   state: {
-                    //     scroll: false,
-                    //   },
-                    // })
-                  }
+                  onClick={() => setFramework(item.value)}
                 >
                   {item.label}
                 </button>
@@ -385,7 +377,7 @@ export default function RouteVersion() {
           <div className="bg-white dark:bg-black">
             <iframe
               key={framework}
-              src={`https://codesandbox.io/embed/github/${repo}/tree/${branch}/examples/${framework}/simple?autoresize=1&fontsize=16&theme=${
+              src={`https://stackblitz.com/github/${repo}/tree/${branch}/examples/${framework}/simple?embed=1&theme=${
                 isDark ? 'dark' : 'light'
               }`}
               title={`tanstack//${framework}-form: simple`}
diff --git a/app/routes/store.$version.tsx b/app/routes/store.$version.tsx
index 64cbbb8f..c3d0d16f 100644
--- a/app/routes/store.$version.tsx
+++ b/app/routes/store.$version.tsx
@@ -1,23 +1,29 @@
-import { Link, Outlet, useLocation } from '@remix-run/react'
+import { Outlet, json, redirect, useLoaderData } from '@remix-run/react'
 import { DefaultErrorBoundary } from '~/components/DefaultErrorBoundary'
-import { useLocalStorage } from '~/utils/useLocalStorage'
 import { useClientOnlyRender } from '~/utils/useClientOnlyRender'
-import { latestVersion } from '~/projects/store'
+import { availableVersions, latestVersion } from '~/projects/store'
+import { RedirectVersionBanner } from '~/components/RedirectVersionBanner'
+import type { LoaderFunctionArgs } from '@remix-run/node'
+
+export const loader = async (context: LoaderFunctionArgs) => {
+  const { version } = context.params
+
+  const redirectUrl = context.request.url.replace(version!, 'latest')
+
+  if (!availableVersions.concat('latest').includes(version!)) {
+    throw redirect(redirectUrl)
+  }
+
+  return json({
+    version,
+    redirectUrl,
+  })
+}
 
 export const ErrorBoundary = DefaultErrorBoundary
 
 export default function RouteVersionParam() {
-  // After user clicks hide, do not show modal for a month, and then remind users that there is a new version!
-  const [showModal, setShowModal] = useLocalStorage(
-    'showRedirectToLatestModal',
-    true,
-    1000 * 60 * 24 * 30
-  )
-  const location = useLocation()
-
-  const version = location.pathname.match(/\/store\/v(\d)/)?.[1] || '999'
-  const isLowerVersion = Number(version) < Number(latestVersion[1])
-  const redirectTarget = location.pathname.replace(`v${version}`, 'latest')
+  const { version, redirectUrl } = useLoaderData<typeof loader>()
 
   if (!useClientOnlyRender()) {
     return null
@@ -25,31 +31,11 @@ export default function RouteVersionParam() {
 
   return (
     <>
-      {isLowerVersion && showModal ? (
-        <div className="p-4 bg-blue-500 text-white flex items-center justify-center gap-4">
-          <div>
-            You are currently reading <strong>v{version}</strong> docs. Redirect
-            to{' '}
-            <a href={redirectTarget} className="font-bold underline">
-              latest
-            </a>{' '}
-            version?
-          </div>
-          <Link
-            to={redirectTarget}
-            replace
-            className="bg-white text-black py-1 px-2 rounded-md uppercase font-black text-xs"
-          >
-            Latest
-          </Link>
-          <button
-            onClick={() => setShowModal(false)}
-            className="bg-white text-black py-1 px-2 rounded-md uppercase font-black text-xs"
-          >
-            Hide
-          </button>
-        </div>
-      ) : null}
+      <RedirectVersionBanner
+        version={version!}
+        latestVersion={latestVersion}
+        redirectUrl={redirectUrl}
+      />
       <Outlet />
     </>
   )
diff --git a/app/routes/table.$.tsx b/app/routes/table.$.tsx
index 76403cf5..57bd5d4d 100644
--- a/app/routes/table.$.tsx
+++ b/app/routes/table.$.tsx
@@ -1,57 +1,5 @@
-import type { LoaderFunctionArgs } from '@remix-run/node'
 import { redirect } from '@remix-run/node'
 
-export const loader = (context: LoaderFunctionArgs) => {
-  handleRedirects(context)
-
+export const loader = () => {
   return redirect('/table/latest')
 }
-
-function handleRedirects(context: LoaderFunctionArgs) {
-  const url = new URL(context.request.url)
-  // prettier-ignore
-  const reactTablev7List = [
-    {from: 'docs/api/overview',to: 'docs/guide/overview',},
-    {from: 'docs/api/useColumnOrder',to: 'docs/api/features/column-ordering',},
-    {from: 'docs/api/useExpanded',to: 'docs/api/features/expanding',},
-    {from: 'docs/api/useFilters',to: 'docs/api/features/filters',},
-    {from: 'docs/api/useGlobalFilter',to: 'docs/api/features/filters',},
-    {from: 'docs/api/useGroupBy',to: 'docs/api/features/grouping',},
-    {from: 'docs/api/usePagination',to: 'docs/api/features/pagination',},
-    {from: 'docs/api/useResizeColumns',to: 'docs/api/features/column-sizing',},
-    {from: 'docs/api/useRowSelect',to: 'docs/api/features/row-selection',},
-    {from: 'docs/api/useSortBy',to: 'docs/api/features/sorting',},
-    {from: 'docs/api/useTable',to: 'docs/guide/tables',},
-    {from: 'docs/examples/basic',to: 'docs/examples/react/basic',},
-    {from: 'docs/examples/filtering',to: 'docs/examples/react/filters',},
-    {from: 'docs/examples/footers',to: 'docs/examples/react/basic',},
-    {from: 'docs/examples/grouping',to: 'docs/examples/react/grouping',},
-    {from: 'docs/examples/pagination',to: 'docs/examples/react/pagination',},
-    {from: 'docs/examples/sorting',to: 'docs/examples/react/sorting',},
-    {from: 'docs/examples/row-selection',to: 'docs/examples/react/row-selection',},
-    {from: 'docs/examples/row-selection-with-pagination',to: 'docs/examples/react/row-selection',},
-    {from: 'docs/examples/expanding',to: 'docs/examples/react/expanding',},
-    {from: 'docs/examples/editable-data',to: 'docs/examples/react/editable-data',},
-    {from: 'docs/examples/column-ordering',to: 'docs/examples/react/column-ordering',},
-    {from: 'docs/examples/column-hiding',to: 'docs/examples/react/column-visibility',},
-    {from: 'docs/examples/column-resizing',to: 'docs/examples/react/column-sizing',},
-    {from: 'docs/examples/pagination-controlled',to: 'docs/examples/react/pagination-controlled',},
-    {from: 'docs/examples/pagination-controlled',to: 'docs/examples/react/pagination-controlled',},
-    {from: 'docs/installation',to: 'docs/guide/installation',},
-    {from: 'docs/overview',to: 'docs/introduction',},
-    {from: 'docs/quick-start',to: 'docs/guide/overview',},
-    {from: '',to: '',},
-  ]
-
-  reactTablev7List.forEach((item) => {
-    if (url.pathname.startsWith(`/table/v7/${item.from}`)) {
-      throw redirect(
-        `/table/v8/${
-          item.to
-        }?from=reactTableV7&original=https://github.com/TanStack/table/tree/v7/docs/src/pages/${
-          item.from
-        }${item.from ? '.md' : ''}`
-      )
-    }
-  })
-}
diff --git a/app/routes/table.$version._index.tsx b/app/routes/table.$version._index.tsx
index 19a5eea4..1f146190 100644
--- a/app/routes/table.$version._index.tsx
+++ b/app/routes/table.$version._index.tsx
@@ -11,7 +11,7 @@ import {
 } from 'react-icons/fa'
 import { Link, useLoaderData } from '@remix-run/react'
 import { json } from '@remix-run/node'
-import { colorFrom, colorTo, getBranch } from '~/projects/table'
+import { colorFrom, colorTo, getBranch, repo } from '~/projects/table'
 import { Carbon } from '~/components/Carbon'
 import { Footer } from '~/components/Footer'
 import { IoIosBody } from 'react-icons/io'
@@ -335,6 +335,7 @@ export default function ReactTableRoute() {
             rel="noreferrer"
           >
             <img
+              alt="AG Grid"
               src={agGridImage}
               className="w-full mx-auto max-w-[300px]"
               width="300"
@@ -419,15 +420,7 @@ export default function ReactTableRoute() {
                     ? 'bg-rose-500'
                     : 'bg-gray-300 dark:bg-gray-700 hover:bg-rose-300'
                 }`}
-                onClick={
-                  () => setFramework(item.value)
-                  // setParams(new URLSearchParams({ framework: item.value }), {
-                  //   replace: true,
-                  //   state: {
-                  //     scroll: false,
-                  //   },
-                  // })
-                }
+                onClick={() => setFramework(item.value)}
               >
                 {item.label}
               </button>
@@ -439,7 +432,7 @@ export default function ReactTableRoute() {
       <div className="bg-white dark:bg-black">
         <iframe
           key={framework}
-          src={`https://codesandbox.io/embed/github/tanstack/table/tree/${branch}/examples/${framework}/basic?autoresize=1&fontsize=16&theme=${
+          src={`https://stackblitz.com/github/${repo}/tree/${branch}/examples/${framework}/simple?embed=1&theme=${
             isDark ? 'dark' : 'light'
           }`}
           title="tannerlinsley/react-table: basic"
diff --git a/app/routes/table.$version.tsx b/app/routes/table.$version.tsx
index e230eca2..8957d7da 100644
--- a/app/routes/table.$version.tsx
+++ b/app/routes/table.$version.tsx
@@ -1,15 +1,29 @@
-import { Link, Outlet, useLocation, useSearchParams } from '@remix-run/react'
+import { Outlet, json, redirect, useLoaderData } from '@remix-run/react'
 import { DefaultErrorBoundary } from '~/components/DefaultErrorBoundary'
 import { useClientOnlyRender } from '~/utils/useClientOnlyRender'
+import { availableVersions, latestVersion } from '~/projects/table'
+import { RedirectVersionBanner } from '~/components/RedirectVersionBanner'
+import type { LoaderFunctionArgs } from '@remix-run/node'
+
+export const loader = async (context: LoaderFunctionArgs) => {
+  const { version } = context.params
+
+  const redirectUrl = context.request.url.replace(version!, 'latest')
+
+  if (!availableVersions.concat('latest').includes(version!)) {
+    throw redirect(redirectUrl)
+  }
+
+  return json({
+    version,
+    redirectUrl,
+  })
+}
 
 export const ErrorBoundary = DefaultErrorBoundary
 
 export default function RouteReactTable() {
-  const [params] = useSearchParams()
-  const location = useLocation()
-
-  const show = params.get('from') === 'reactTableV7'
-  const original = params.get('original')
+  const { version, redirectUrl } = useLoaderData<typeof loader>()
 
   if (!useClientOnlyRender()) {
     return null
@@ -17,30 +31,11 @@ export default function RouteReactTable() {
 
   return (
     <>
-      {show ? (
-        <div className="p-4 bg-blue-500 text-white flex items-center justify-center gap-4">
-          <div>
-            Looking for the{' '}
-            <a
-              href={
-                original ||
-                'https://github.com/TanStack/table/tree/v7/docs/src/pages/docs/'
-              }
-              className="font-bold underline"
-            >
-              React Table v7 documentation
-            </a>
-            ?
-          </div>
-          <Link
-            to={location.pathname}
-            replace
-            className="bg-white text-black py-1 px-2 rounded-md uppercase font-black text-xs"
-          >
-            Hide
-          </Link>
-        </div>
-      ) : null}
+      <RedirectVersionBanner
+        version={version!}
+        latestVersion={latestVersion}
+        redirectUrl={redirectUrl}
+      />
       <Outlet />
     </>
   )
diff --git a/app/routes/virtual.$.tsx b/app/routes/virtual.$.tsx
index 97a2eab8..6a8a3760 100644
--- a/app/routes/virtual.$.tsx
+++ b/app/routes/virtual.$.tsx
@@ -1,38 +1,5 @@
-import type { LoaderFunctionArgs } from '@remix-run/node'
 import { redirect } from '@remix-run/node'
 
-export const loader = (context: LoaderFunctionArgs) => {
-  handleRedirects(context)
-
+export const loader = () => {
   return redirect('/virtual/latest')
 }
-
-function handleRedirects(context: LoaderFunctionArgs) {
-  const url = new URL(context.request.url)
-  // prettier-ignore
-  const reactVirtualv2List = [
-    {from: 'docs/overview',to: 'docs/guide/introduction',},
-    {from: 'docs/installation',to: 'docs/guide/installation',},
-    {from: 'docs/api',to: 'docs/api/virtualizer',},
-    {from: 'examples/fixed',to: 'docs/examples/react/fixed',},
-    {from: 'examples/variable',to: 'docs/examples/react/variable',},
-    {from: 'examples/dynamic',to: 'docs/examples/react/dynamic',},
-    {from: 'examples/infinite-scroll',to: 'docs/examples/react/infinite-scroll',},
-    {from: 'examples/padding',to: 'docs/examples/react/padding',},
-    {from: 'examples/smooth-scroll',to: 'docs/examples/react/smooth-scroll',},
-    {from: 'examples/sticky',to: 'docs/examples/react/sticky',},
-    {from: '',to: '',},
-  ]
-
-  reactVirtualv2List.forEach((item) => {
-    if (url.pathname.startsWith(`/virtual/v2/${item.from}`)) {
-      throw redirect(
-        `/virtual/v3/${
-          item.to
-        }?from=reactVirtualV2&original=https://github.com/TanStack/virtual/tree/v2/docs/src/pages/${
-          item.from
-        }${item.from ? '.md' : ''}`
-      )
-    }
-  })
-}
diff --git a/app/routes/virtual.$version._index.tsx b/app/routes/virtual.$version._index.tsx
index 46e7956d..72f7c2c3 100644
--- a/app/routes/virtual.$version._index.tsx
+++ b/app/routes/virtual.$version._index.tsx
@@ -12,7 +12,7 @@ import {
 } from 'react-icons/fa'
 import { Link, useLoaderData } from '@remix-run/react'
 import { json } from '@remix-run/node'
-import { colorFrom, colorTo, getBranch } from '~/projects/virtual'
+import { colorFrom, colorTo, getBranch, repo } from '~/projects/virtual'
 import { Carbon } from '~/components/Carbon'
 import { Footer } from '~/components/Footer'
 import { IoIosBody } from 'react-icons/io'
@@ -395,15 +395,7 @@ export default function ReactTableRoute() {
                     ? 'bg-teal-500'
                     : 'bg-gray-300 dark:bg-gray-700 hover:bg-teal-300'
                 }`}
-                onClick={
-                  () => setFramework(item.value)
-                  // setParams(new URLSearchParams({ framework: item.value }), {
-                  //   replace: true,
-                  //   state: {
-                  //     scroll: false,
-                  //   },
-                  // })
-                }
+                onClick={() => setFramework(item.value)}
               >
                 {item.label}
               </button>
@@ -431,7 +423,7 @@ export default function ReactTableRoute() {
         <div className="bg-white dark:bg-black">
           <iframe
             key={framework}
-            src={`https://codesandbox.io/embed/github/tanstack/virtual/tree/${branch}/examples/${framework}/dynamic?autoresize=1&fontsize=16&theme=${
+            src={`https://stackblitz.com/github/${repo}/tree/${branch}/examples/${framework}/simple?embed=1&theme=${
               isDark ? 'dark' : 'light'
             }`}
             title="tannerlinsley/react-table: dynamic"
diff --git a/app/routes/virtual.$version.tsx b/app/routes/virtual.$version.tsx
index ccb63032..b5392ba8 100644
--- a/app/routes/virtual.$version.tsx
+++ b/app/routes/virtual.$version.tsx
@@ -1,15 +1,29 @@
-import { Link, Outlet, useLocation, useSearchParams } from '@remix-run/react'
+import { Outlet, json, redirect, useLoaderData } from '@remix-run/react'
 import { DefaultErrorBoundary } from '~/components/DefaultErrorBoundary'
 import { useClientOnlyRender } from '~/utils/useClientOnlyRender'
+import { RedirectVersionBanner } from '~/components/RedirectVersionBanner'
+import type { LoaderFunctionArgs } from '@remix-run/node'
+import { availableVersions, latestVersion } from '~/projects/virtual'
+
+export const loader = async (context: LoaderFunctionArgs) => {
+  const { version } = context.params
+
+  const redirectUrl = context.request.url.replace(version!, 'latest')
+
+  if (!availableVersions.concat('latest').includes(version!)) {
+    throw redirect(redirectUrl)
+  }
+
+  return json({
+    version,
+    redirectUrl,
+  })
+}
 
 export const ErrorBoundary = DefaultErrorBoundary
 
 export default function RouteReactVirtual() {
-  const [params] = useSearchParams()
-  const location = useLocation()
-
-  const show = params.get('from') === 'reactVirtualV2'
-  const original = params.get('original')
+  const { version, redirectUrl } = useLoaderData<typeof loader>()
 
   if (!useClientOnlyRender()) {
     return null
@@ -17,30 +31,11 @@ export default function RouteReactVirtual() {
 
   return (
     <>
-      {show ? (
-        <div className="p-4 bg-blue-500 text-white flex items-center justify-center gap-4">
-          <div>
-            Looking for the{' '}
-            <a
-              href={
-                original ||
-                'https://github.com/TanStack/virtual/tree/v2/docs/src/pages/docs'
-              }
-              className="font-bold underline"
-            >
-              React Virtual v2 documentation
-            </a>
-            ?
-          </div>
-          <Link
-            to={location.pathname}
-            replace
-            className="bg-white text-black py-1 px-2 rounded-md uppercase font-black text-xs"
-          >
-            Hide
-          </Link>
-        </div>
-      ) : null}
+      <RedirectVersionBanner
+        version={version!}
+        latestVersion={latestVersion}
+        redirectUrl={redirectUrl}
+      />
       <Outlet />
     </>
   )

From 065116e60027505370eb7ef25592d0358d2ee76a Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Fri, 26 Jan 2024 15:19:42 +1100
Subject: [PATCH 02/12] Remove unnecessary redirect

---
 app/components/RedirectVersionBanner.tsx | 3 +--
 app/routes/form.$version.docs.tsx        | 7 +------
 app/routes/query.$version.docs.tsx       | 8 +-------
 app/routes/ranger.$version.docs.tsx      | 8 +-------
 app/routes/router.$version.docs.tsx      | 7 +------
 app/routes/store.$version.docs.tsx       | 7 +------
 app/routes/table.$version.docs.tsx       | 7 +------
 app/routes/virtual.$version.docs.tsx     | 7 +------
 8 files changed, 8 insertions(+), 46 deletions(-)

diff --git a/app/components/RedirectVersionBanner.tsx b/app/components/RedirectVersionBanner.tsx
index e9eb8fbe..d8a4305c 100644
--- a/app/components/RedirectVersionBanner.tsx
+++ b/app/components/RedirectVersionBanner.tsx
@@ -24,8 +24,7 @@ export function RedirectVersionBanner(props: {
     return (
       <div className="p-4 bg-blue-500 text-white flex items-center justify-center gap-4">
         <div>
-          You are currently reading <strong>v{version}</strong> docs. Redirect
-          to{' '}
+          You are currently reading <strong>{version}</strong> docs. Redirect to{' '}
           <a href={redirectUrl} className="font-bold underline">
             latest
           </a>{' '}
diff --git a/app/routes/form.$version.docs.tsx b/app/routes/form.$version.docs.tsx
index 8490874f..9a526332 100644
--- a/app/routes/form.$version.docs.tsx
+++ b/app/routes/form.$version.docs.tsx
@@ -1,9 +1,8 @@
 import type { LoaderFunctionArgs } from '@remix-run/node'
-import { json, redirect } from '@remix-run/node'
+import { json } from '@remix-run/node'
 import { Outlet, useLoaderData } from '@remix-run/react'
 import { DocsLayout } from '~/components/DocsLayout'
 import {
-  availableVersions,
   colorFrom,
   colorTo,
   getBranch,
@@ -18,10 +17,6 @@ export const loader = async (context: LoaderFunctionArgs) => {
   const { version } = context.params
   const branch = getBranch(version)
 
-  if (!availableVersions.concat('latest').includes(version!)) {
-    throw redirect(context.request.url.replace(version!, 'latest'))
-  }
-
   const tanstackDocsConfig = await getTanstackDocsConfig(repo, branch)
 
   return json({
diff --git a/app/routes/query.$version.docs.tsx b/app/routes/query.$version.docs.tsx
index 63a672b9..27e85b22 100644
--- a/app/routes/query.$version.docs.tsx
+++ b/app/routes/query.$version.docs.tsx
@@ -1,6 +1,5 @@
-import * as React from 'react'
 import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
-import { Outlet, json, redirect, useLoaderData } from '@remix-run/react'
+import { Outlet, json, useLoaderData } from '@remix-run/react'
 import { seo } from '~/utils/seo'
 import { DocsLayout } from '~/components/DocsLayout'
 import { QueryGGBanner } from '~/components/QueryGGBanner'
@@ -11,7 +10,6 @@ import {
   textColor,
   repo,
   useQueryDocsConfig,
-  availableVersions,
   latestVersion,
 } from '~/projects/query'
 import { getTanstackDocsConfig } from '~/utils/config'
@@ -20,10 +18,6 @@ export const loader = async (context: LoaderFunctionArgs) => {
   const { version } = context.params
   const branch = getBranch(version)
 
-  if (!availableVersions.concat('latest').includes(version!)) {
-    throw redirect(context.request.url.replace(version!, 'latest'))
-  }
-
   const tanstackDocsConfig = await getTanstackDocsConfig(repo, branch)
 
   return json({
diff --git a/app/routes/ranger.$version.docs.tsx b/app/routes/ranger.$version.docs.tsx
index 049bb207..ee24345c 100644
--- a/app/routes/ranger.$version.docs.tsx
+++ b/app/routes/ranger.$version.docs.tsx
@@ -1,7 +1,5 @@
-import * as React from 'react'
-import { Outlet, json, redirect, useLoaderData } from '@remix-run/react'
+import { Outlet, json, useLoaderData } from '@remix-run/react'
 import {
-  availableVersions,
   useRangerDocsConfig,
   repo,
   getBranch,
@@ -19,10 +17,6 @@ export const loader = async (context: LoaderFunctionArgs) => {
   const { version } = context.params
   const branch = getBranch(version)
 
-  if (!availableVersions.concat('latest').includes(version!)) {
-    throw redirect(context.request.url.replace(version!, 'latest'))
-  }
-
   const tanstackDocsConfig = await getTanstackDocsConfig(repo, branch)
 
   return json({
diff --git a/app/routes/router.$version.docs.tsx b/app/routes/router.$version.docs.tsx
index 46d3e6d5..5b3a11f2 100644
--- a/app/routes/router.$version.docs.tsx
+++ b/app/routes/router.$version.docs.tsx
@@ -1,10 +1,9 @@
-import { Outlet, json, redirect, useLoaderData } from '@remix-run/react'
+import { Outlet, json, useLoaderData } from '@remix-run/react'
 import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
 import {
   repo,
   getBranch,
   useRouterDocsConfig,
-  availableVersions,
   latestVersion,
   colorFrom,
   colorTo,
@@ -18,10 +17,6 @@ export const loader = async (context: LoaderFunctionArgs) => {
   const { version } = context.params
   const branch = getBranch(version)
 
-  if (!availableVersions.concat('latest').includes(version!)) {
-    throw redirect(context.request.url.replace(version!, 'latest'))
-  }
-
   const tanstackDocsConfig = await getTanstackDocsConfig(repo, branch)
 
   return json({
diff --git a/app/routes/store.$version.docs.tsx b/app/routes/store.$version.docs.tsx
index 6901598c..46e0192e 100644
--- a/app/routes/store.$version.docs.tsx
+++ b/app/routes/store.$version.docs.tsx
@@ -1,8 +1,7 @@
-import { type LoaderFunctionArgs, json, redirect } from '@remix-run/node'
+import { type LoaderFunctionArgs, json } from '@remix-run/node'
 import { Outlet, useLoaderData } from '@remix-run/react'
 import { DocsLayout } from '~/components/DocsLayout'
 import {
-  availableVersions,
   getBranch,
   latestVersion,
   repo,
@@ -17,10 +16,6 @@ export const loader = async (context: LoaderFunctionArgs) => {
   const { version } = context.params
   const branch = getBranch(version)
 
-  if (!availableVersions.concat('latest').includes(version!)) {
-    throw redirect(context.request.url.replace(version!, 'latest'))
-  }
-
   const tanstackDocsConfig = await getTanstackDocsConfig(repo, branch)
 
   return json({
diff --git a/app/routes/table.$version.docs.tsx b/app/routes/table.$version.docs.tsx
index 0e786235..fa755f0d 100644
--- a/app/routes/table.$version.docs.tsx
+++ b/app/routes/table.$version.docs.tsx
@@ -1,9 +1,8 @@
-import { Outlet, json, redirect, useLoaderData } from '@remix-run/react'
+import { Outlet, json, useLoaderData } from '@remix-run/react'
 import {
   getBranch,
   repo,
   useTableDocsConfig,
-  availableVersions,
   latestVersion,
   colorFrom,
   colorTo,
@@ -19,10 +18,6 @@ export const loader = async (context: LoaderFunctionArgs) => {
   const version = context.params.version
   const branch = getBranch(version)
 
-  if (!availableVersions.concat('latest').includes(version!)) {
-    throw redirect(context.request.url.replace(version!, 'latest'))
-  }
-
   const tanstackDocsConfig = await getTanstackDocsConfig(repo, branch)
 
   return json({
diff --git a/app/routes/virtual.$version.docs.tsx b/app/routes/virtual.$version.docs.tsx
index b9bc9d32..d57b18f1 100644
--- a/app/routes/virtual.$version.docs.tsx
+++ b/app/routes/virtual.$version.docs.tsx
@@ -1,6 +1,5 @@
-import { Outlet, json, redirect, useLoaderData } from '@remix-run/react'
+import { Outlet, json, useLoaderData } from '@remix-run/react'
 import {
-  availableVersions,
   getBranch,
   latestVersion,
   repo,
@@ -18,10 +17,6 @@ export const loader = async (context: LoaderFunctionArgs) => {
   const version = context.params.version
   const branch = getBranch(version)
 
-  if (!availableVersions.concat('latest').includes(version!)) {
-    throw redirect(context.request.url.replace(version!, 'latest'))
-  }
-
   const tanstackDocsConfig = await getTanstackDocsConfig(repo, branch)
 
   return json({

From 96de509f2436a7680ffa7ccaa2007020ab88d384 Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Fri, 26 Jan 2024 15:24:40 +1100
Subject: [PATCH 03/12] Use LoaderFunctionArgs

---
 app/routes/ranger.$version.docs._index.tsx                    | 4 ++--
 ...ger.$version.docs.framework.$framework.examples._index.tsx | 4 ++--
 app/routes/router.$version.docs._index.tsx                    | 4 ++--
 ...ter.$version.docs.framework.$framework.examples._index.tsx | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/routes/ranger.$version.docs._index.tsx b/app/routes/ranger.$version.docs._index.tsx
index d49d255c..f47ea079 100644
--- a/app/routes/ranger.$version.docs._index.tsx
+++ b/app/routes/ranger.$version.docs._index.tsx
@@ -1,6 +1,6 @@
-import type { LoaderFunction } from '@remix-run/node'
+import type { LoaderFunctionArgs } from '@remix-run/node'
 import { redirect } from '@remix-run/node'
 
-export const loader: LoaderFunction = (context) => {
+export const loader = (context: LoaderFunctionArgs) => {
   throw redirect(context.request.url.replace(/\/docs.*/, '/docs/overview'))
 }
diff --git a/app/routes/ranger.$version.docs.framework.$framework.examples._index.tsx b/app/routes/ranger.$version.docs.framework.$framework.examples._index.tsx
index e99fb415..fad54a88 100644
--- a/app/routes/ranger.$version.docs.framework.$framework.examples._index.tsx
+++ b/app/routes/ranger.$version.docs.framework.$framework.examples._index.tsx
@@ -1,6 +1,6 @@
 import { redirect } from '@remix-run/node'
-import type { LoaderFunction } from '@remix-run/node'
+import type { LoaderFunctionArgs } from '@remix-run/node'
 
-export const loader: LoaderFunction = (context) => {
+export const loader = (context: LoaderFunctionArgs) => {
   throw redirect(context.request.url.replace(/\/examples.*/, '/examples/basic'))
 }
diff --git a/app/routes/router.$version.docs._index.tsx b/app/routes/router.$version.docs._index.tsx
index 2eb3d22a..87944c92 100644
--- a/app/routes/router.$version.docs._index.tsx
+++ b/app/routes/router.$version.docs._index.tsx
@@ -1,7 +1,7 @@
-import type { LoaderFunction } from '@remix-run/node'
+import type { LoaderFunctionArgs } from '@remix-run/node'
 import { redirect } from '@remix-run/node'
 
-export const loader: LoaderFunction = (context) => {
+export const loader = (context: LoaderFunctionArgs) => {
   throw redirect(
     context.request.url.replace(/\/docs.*/, '/docs/framework/react/overview')
   )
diff --git a/app/routes/router.$version.docs.framework.$framework.examples._index.tsx b/app/routes/router.$version.docs.framework.$framework.examples._index.tsx
index e99fb415..fad54a88 100644
--- a/app/routes/router.$version.docs.framework.$framework.examples._index.tsx
+++ b/app/routes/router.$version.docs.framework.$framework.examples._index.tsx
@@ -1,6 +1,6 @@
 import { redirect } from '@remix-run/node'
-import type { LoaderFunction } from '@remix-run/node'
+import type { LoaderFunctionArgs } from '@remix-run/node'
 
-export const loader: LoaderFunction = (context) => {
+export const loader = (context: LoaderFunctionArgs) => {
   throw redirect(context.request.url.replace(/\/examples.*/, '/examples/basic'))
 }

From 1c55efe7f68d47a19c55c0758008f76b6b8eb57c Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Fri, 26 Jan 2024 15:30:49 +1100
Subject: [PATCH 04/12] Remove unused import

---
 .../query.$version.docs.framework.$framework.examples.$.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/routes/query.$version.docs.framework.$framework.examples.$.tsx b/app/routes/query.$version.docs.framework.$framework.examples.$.tsx
index 2742efae..4acd9236 100644
--- a/app/routes/query.$version.docs.framework.$framework.examples.$.tsx
+++ b/app/routes/query.$version.docs.framework.$framework.examples.$.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
 import { json } from '@remix-run/node'
-import { useLoaderData, useParams } from '@remix-run/react'
+import { useLoaderData } from '@remix-run/react'
 import { DocTitle } from '~/components/DocTitle'
 import { repo, getBranch } from '~/projects/query'
 import { seo } from '~/utils/seo'

From 7d48c4c20da80970c168e3e323e7a78e79ff31fb Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Fri, 26 Jan 2024 15:31:56 +1100
Subject: [PATCH 05/12] Mark HTMLProps as type import

---
 app/components/MarkdownLink.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/MarkdownLink.tsx b/app/components/MarkdownLink.tsx
index b27ba7d5..df29b0e9 100644
--- a/app/components/MarkdownLink.tsx
+++ b/app/components/MarkdownLink.tsx
@@ -1,5 +1,5 @@
-import { HTMLProps } from 'react'
 import { Link } from '@remix-run/react'
+import type { HTMLProps } from 'react'
 
 export function MarkdownLink(props: HTMLProps<HTMLAnchorElement>) {
   if ((props as { href: string }).href?.startsWith('http')) {

From 0624edee7bfe772686e69f7b8ea4048031039df5 Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Sun, 28 Jan 2024 08:47:22 +1100
Subject: [PATCH 06/12] Move useDocsConfig into DocsLayout

---
 app/components/DocsLayout.tsx        | 146 +++++++++++++++++++++++++--
 app/projects/form.tsx                |  14 +--
 app/projects/query.tsx               |  12 +--
 app/projects/ranger.tsx              |  16 +--
 app/projects/router.tsx              |  14 +--
 app/projects/store.tsx               |  14 +--
 app/projects/table.tsx               |  14 +--
 app/projects/virtual.tsx             |  13 +--
 app/routes/form.$version.docs.tsx    |  15 ++-
 app/routes/query.$version.docs.tsx   |  14 ++-
 app/routes/ranger.$version.docs.tsx  |  15 ++-
 app/routes/router.$version.docs.tsx  |  14 ++-
 app/routes/store.$version.docs.tsx   |  14 ++-
 app/routes/table.$version.docs.tsx   |  14 ++-
 app/routes/virtual.$version.docs.tsx |  14 ++-
 app/utils/config.ts                  | 119 ----------------------
 16 files changed, 214 insertions(+), 248 deletions(-)

diff --git a/app/components/DocsLayout.tsx b/app/components/DocsLayout.tsx
index c181ae0f..45f96ef1 100644
--- a/app/components/DocsLayout.tsx
+++ b/app/components/DocsLayout.tsx
@@ -2,8 +2,7 @@ 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, useMatches } from '@remix-run/react'
-import { last } from '~/utils/utils'
+import { NavLink, useMatches, useNavigate, useParams } from '@remix-run/react'
 import { Carbon } from '~/components/Carbon'
 import { LinkOrA } from '~/components/LinkOrA'
 import { Search } from '~/components/Search'
@@ -12,7 +11,125 @@ import { useLocalStorage } from '~/utils/useLocalStorage'
 import { DocsCalloutQueryGG } from '~/components/DocsCalloutQueryGG'
 import { DocsCalloutBytes } from '~/components/DocsCalloutBytes'
 import { DocsLogo } from '~/components/DocsLogo'
-import type { DocsConfig } from '~/utils/config'
+import { generatePath, last } from '~/utils/utils'
+import type { AvailableOptions } from '~/components/Select'
+import type { ConfigSchema, MenuItem } from '~/utils/config'
+
+/**
+ * Use framework in URL path
+ * Otherwise use framework in localStorage if it exists for this project
+ * Otherwise fallback to react
+ */
+function useCurrentFramework(frameworks: AvailableOptions) {
+  const { framework: paramsFramework } = useParams()
+  const localStorageFramework = localStorage.getItem('framework')
+
+  return paramsFramework
+    ? paramsFramework
+    : localStorageFramework
+    ? frameworks[localStorageFramework]
+      ? localStorageFramework
+      : 'react'
+    : 'react'
+}
+
+const useDocsConfig = ({
+  config,
+  frameworks,
+  availableVersions,
+  localMenu,
+}: {
+  config: ConfigSchema
+  frameworks: AvailableOptions
+  availableVersions: string[]
+  localMenu: MenuItem
+}) => {
+  const matches = useMatches()
+  const match = matches[matches.length - 1]
+  const params = useParams()
+  const version = params.version!
+  const framework = useCurrentFramework(frameworks)
+  const navigate = useNavigate()
+
+  const frameworkMenuItems =
+    config.frameworkMenus.find((d) => d.framework === framework)?.menuItems ??
+    []
+
+  console.log(frameworkMenuItems)
+
+  const frameworkConfig = React.useMemo(() => {
+    return {
+      label: 'Framework',
+      selected: frameworks[framework] ? framework : 'react',
+      available: frameworks,
+      onSelect: (option: { label: string; value: string }) => {
+        const url = generatePath(match.id, {
+          ...match.params,
+          framework: option.value,
+        })
+
+        localStorage.setItem('framework', option.value)
+
+        navigate(url)
+      },
+    }
+  }, [frameworks, framework, match, navigate])
+
+  const versionConfig = React.useMemo(() => {
+    const available = availableVersions.reduce(
+      (acc: AvailableOptions, version) => {
+        acc[version] = {
+          label: version,
+          value: version,
+        }
+        return acc
+      },
+      {
+        latest: {
+          label: 'Latest',
+          value: 'latest',
+        },
+      }
+    )
+
+    return {
+      label: 'Version',
+      selected: version,
+      available,
+      onSelect: (option: { label: string; value: string }) => {
+        const url = generatePath(match.id, {
+          ...match.params,
+          version: option.value,
+        })
+        navigate(url)
+      },
+    }
+  }, [version, match, navigate, availableVersions])
+
+  return {
+    ...config,
+    menu: [
+      localMenu,
+      // Merge the two menus together based on their group labels
+      ...config.menu.map((d) => {
+        const match = frameworkMenuItems.find((d2) => d2.label === d.label)
+        console.log(match)
+        return {
+          label: d.label,
+          children: [
+            ...d.children.map((d) => ({ ...d, badge: 'core' })),
+            ...(match?.children ?? []).map((d) => ({ ...d, badge: framework })),
+          ],
+        }
+      }),
+      ...frameworkMenuItems.filter(
+        (d) => !config.menu.find((dd) => dd.label === d.label)
+      ),
+    ].filter(Boolean),
+    frameworkConfig,
+    versionConfig,
+  }
+}
 
 export function DocsLayout({
   name,
@@ -21,6 +138,9 @@ export function DocsLayout({
   colorTo,
   textColor,
   config,
+  frameworks,
+  availableVersions,
+  localMenu,
   children,
 }: {
   name: string
@@ -28,11 +148,18 @@ export function DocsLayout({
   colorFrom: string
   colorTo: string
   textColor: string
-  config: DocsConfig
+  config: ConfigSchema
+  frameworks: AvailableOptions
+  availableVersions: string[]
+  localMenu: MenuItem
   children: React.ReactNode
 }) {
-  const frameworkConfig = config.frameworkConfig
-  const versionConfig = config.versionConfig
+  const { frameworkConfig, versionConfig, menu } = useDocsConfig({
+    config,
+    frameworks,
+    localMenu,
+    availableVersions,
+  })
   const matches = useMatches()
   const lastMatch = last(matches)
 
@@ -40,10 +167,7 @@ export function DocsLayout({
 
   const detailsRef = React.useRef<HTMLElement>(null!)
 
-  const flatMenu = React.useMemo(
-    () => config.menu.flatMap((d) => d.children),
-    [config.menu]
-  )
+  const flatMenu = React.useMemo(() => menu.flatMap((d) => d.children), [menu])
 
   const docsMatch = matches.find((d) => d.pathname.includes('/docs'))
 
@@ -58,7 +182,7 @@ export function DocsLayout({
 
   const [showBytes, setShowBytes] = useLocalStorage('showBytes', true)
 
-  const menuItems = config.menu.map((group, i) => {
+  const menuItems = menu.map((group, i) => {
     return (
       <div key={i}>
         <div className="text-[.9em] uppercase font-black">{group.label}</div>
diff --git a/app/projects/form.tsx b/app/projects/form.tsx
index 898445bb..6c8ea8f0 100644
--- a/app/projects/form.tsx
+++ b/app/projects/form.tsx
@@ -2,8 +2,7 @@ import reactLogo from '~/images/react-logo.svg'
 import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
 import { FaDiscord, FaGithub } from 'react-icons/fa/index'
-import { useDocsConfig } from '~/utils/config'
-import type { ConfigSchema, MenuItem } from '~/utils/config'
+import type { MenuItem } from '~/utils/config'
 
 export const repo = 'tanstack/form'
 
@@ -15,7 +14,7 @@ export const colorFrom = 'from-yellow-500'
 export const colorTo = 'to-yellow-600'
 export const textColor = 'text-yellow-600'
 
-const frameworks = {
+export const frameworks = {
   react: { label: 'React', logo: reactLogo, value: 'react' },
   solid: { label: 'Solid', logo: solidLogo, value: 'solid' },
   vue: { label: 'Vue', logo: vueLogo, value: 'vue' },
@@ -54,12 +53,3 @@ export function getBranch(argVersion?: string) {
 
   return ['latest', latestVersion].includes(version) ? latestBranch : version
 }
-
-export const useFormDocsConfig = (config: ConfigSchema) => {
-  return useDocsConfig({
-    config,
-    frameworks,
-    localMenu,
-    availableVersions,
-  })
-}
diff --git a/app/projects/query.tsx b/app/projects/query.tsx
index f8a8f1ec..d9177504 100644
--- a/app/projects/query.tsx
+++ b/app/projects/query.tsx
@@ -4,8 +4,7 @@ import solidLogo from '~/images/solid-logo.svg'
 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 type { ConfigSchema, MenuItem } from '~/utils/config'
+import type { MenuItem } from '~/utils/config'
 
 export const repo = 'tanstack/query'
 
@@ -58,12 +57,3 @@ export function getBranch(argVersion?: string) {
 
   return ['latest', latestVersion].includes(version) ? latestBranch : version
 }
-
-export const useQueryDocsConfig = (config: ConfigSchema) => {
-  return useDocsConfig({
-    config,
-    frameworks,
-    localMenu,
-    availableVersions,
-  })
-}
diff --git a/app/projects/ranger.tsx b/app/projects/ranger.tsx
index ed7671bd..e1b3f5fb 100644
--- a/app/projects/ranger.tsx
+++ b/app/projects/ranger.tsx
@@ -1,7 +1,6 @@
 import reactLogo from '~/images/react-logo.svg'
 import { FaDiscord, FaGithub } from 'react-icons/fa/index'
-import { useDocsConfig } from '~/utils/config'
-import type { ConfigSchema, MenuItem } from '~/utils/config'
+import type { MenuItem } from '~/utils/config'
 
 export const repo = 'tanstack/ranger'
 
@@ -13,13 +12,13 @@ export const colorFrom = 'from-lime-500'
 export const colorTo = 'to-emerald-500'
 export const textColor = 'text-emerald-500'
 
-const frameworks = {
+export const frameworks = {
   react: { label: 'React', logo: reactLogo, value: 'react' },
 } as const
 
 export type Framework = keyof typeof frameworks
 
-const localMenu: MenuItem = {
+export const localMenu: MenuItem = {
   label: 'Menu',
   children: [
     {
@@ -50,12 +49,3 @@ export function getBranch(argVersion?: string) {
 
   return ['latest', latestVersion].includes(version) ? latestBranch : version
 }
-
-export const useRangerDocsConfig = (config: ConfigSchema) => {
-  return useDocsConfig({
-    config,
-    frameworks,
-    localMenu,
-    availableVersions,
-  })
-}
diff --git a/app/projects/router.tsx b/app/projects/router.tsx
index 61584026..0685619c 100644
--- a/app/projects/router.tsx
+++ b/app/projects/router.tsx
@@ -1,7 +1,6 @@
 import reactLogo from '~/images/react-logo.svg'
 import { FaDiscord, FaGithub } from 'react-icons/fa/index'
-import { useDocsConfig } from '~/utils/config'
-import type { ConfigSchema, MenuItem } from '~/utils/config'
+import type { MenuItem } from '~/utils/config'
 
 export const repo = 'tanstack/router'
 
@@ -13,7 +12,7 @@ export const colorFrom = 'from-lime-500'
 export const colorTo = 'to-emerald-500'
 export const textColor = 'text-emerald-500'
 
-const frameworks = {
+export const frameworks = {
   react: { label: 'React', logo: reactLogo, value: 'react' },
 } as const
 
@@ -50,12 +49,3 @@ export function getBranch(argVersion?: string) {
 
   return ['latest', latestVersion].includes(version) ? latestBranch : version
 }
-
-export const useRouterDocsConfig = (config: ConfigSchema) => {
-  return useDocsConfig({
-    config,
-    frameworks,
-    localMenu,
-    availableVersions,
-  })
-}
diff --git a/app/projects/store.tsx b/app/projects/store.tsx
index 31639b80..23be4934 100644
--- a/app/projects/store.tsx
+++ b/app/projects/store.tsx
@@ -2,8 +2,7 @@ import reactLogo from '~/images/react-logo.svg'
 import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
 import { FaDiscord, FaGithub } from 'react-icons/fa/index'
-import { useDocsConfig } from '~/utils/config'
-import type { ConfigSchema, MenuItem } from '~/utils/config'
+import type { MenuItem } from '~/utils/config'
 
 export const repo = 'tanstack/store'
 
@@ -15,7 +14,7 @@ export const colorFrom = 'from-gray-500'
 export const colorTo = 'to-gray-700'
 export const textColor = 'text-gray-700'
 
-const frameworks = {
+export const frameworks = {
   react: { label: 'React', logo: reactLogo, value: 'react' },
   solid: { label: 'Solid', logo: solidLogo, value: 'solid' },
   vue: { label: 'Vue', logo: vueLogo, value: 'vue' },
@@ -54,12 +53,3 @@ export function getBranch(argVersion?: string) {
 
   return ['latest', latestVersion].includes(version) ? latestBranch : version
 }
-
-export const useStoreDocsConfig = (config: ConfigSchema) => {
-  return useDocsConfig({
-    config,
-    frameworks,
-    localMenu,
-    availableVersions,
-  })
-}
diff --git a/app/projects/table.tsx b/app/projects/table.tsx
index 6918c63a..8753a225 100644
--- a/app/projects/table.tsx
+++ b/app/projects/table.tsx
@@ -3,8 +3,7 @@ import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
 import svelteLogo from '~/images/svelte-logo.svg'
 import { FaDiscord, FaGithub } from 'react-icons/fa'
-import { useDocsConfig } from '~/utils/config'
-import type { ConfigSchema, MenuItem } from '~/utils/config'
+import type { MenuItem } from '~/utils/config'
 
 export const repo = 'tanstack/table'
 
@@ -16,7 +15,7 @@ export const colorFrom = 'from-teal-500'
 export const colorTo = 'to-blue-600'
 export const textColor = 'text-blue-600'
 
-const frameworks = {
+export const frameworks = {
   react: { label: 'React', logo: reactLogo, value: 'react' },
   solid: { label: 'Solid', logo: solidLogo, value: 'solid' },
   svelte: { label: 'Svelte', logo: svelteLogo, value: 'svelte' },
@@ -56,12 +55,3 @@ export const localMenu: MenuItem = {
     },
   ],
 }
-
-export const useTableDocsConfig = (config: ConfigSchema) => {
-  return useDocsConfig({
-    config,
-    frameworks,
-    localMenu,
-    availableVersions,
-  })
-}
diff --git a/app/projects/virtual.tsx b/app/projects/virtual.tsx
index bfbfa72c..27df6a7b 100644
--- a/app/projects/virtual.tsx
+++ b/app/projects/virtual.tsx
@@ -3,7 +3,7 @@ import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
 import svelteLogo from '~/images/svelte-logo.svg'
 import { FaDiscord, FaGithub } from 'react-icons/fa'
-import { useDocsConfig, type ConfigSchema, type MenuItem } from '~/utils/config'
+import type { MenuItem } from '~/utils/config'
 
 export const repo = 'tanstack/virtual'
 
@@ -15,7 +15,7 @@ export const colorFrom = 'from-rose-500'
 export const colorTo = 'to-violet-600'
 export const textColor = 'text-violet-600'
 
-const frameworks = {
+export const frameworks = {
   react: { label: 'React', logo: reactLogo, value: 'react' },
   solid: { label: 'Solid', logo: solidLogo, value: 'solid' },
   svelte: { label: 'Svelte', logo: svelteLogo, value: 'svelte' },
@@ -55,12 +55,3 @@ export const localMenu: MenuItem = {
     },
   ],
 }
-
-export const useVirtualDocsConfig = (config: ConfigSchema) => {
-  return useDocsConfig({
-    config,
-    frameworks,
-    localMenu,
-    availableVersions,
-  })
-}
diff --git a/app/routes/form.$version.docs.tsx b/app/routes/form.$version.docs.tsx
index 9a526332..14d84be7 100644
--- a/app/routes/form.$version.docs.tsx
+++ b/app/routes/form.$version.docs.tsx
@@ -3,13 +3,15 @@ import { json } from '@remix-run/node'
 import { Outlet, useLoaderData } from '@remix-run/react'
 import { DocsLayout } from '~/components/DocsLayout'
 import {
+  availableVersions,
   colorFrom,
   colorTo,
+  frameworks,
   getBranch,
   latestVersion,
+  localMenu,
   repo,
   textColor,
-  useFormDocsConfig,
 } from '~/projects/form'
 import { getTanstackDocsConfig } from '~/utils/config'
 
@@ -17,17 +19,17 @@ export const loader = async (context: LoaderFunctionArgs) => {
   const { version } = context.params
   const branch = getBranch(version)
 
-  const tanstackDocsConfig = await getTanstackDocsConfig(repo, branch)
+  const config = await getTanstackDocsConfig(repo, branch)
 
   return json({
-    tanstackDocsConfig,
+    config,
     version,
   })
 }
 
 export default function Component() {
-  const { version, tanstackDocsConfig } = useLoaderData<typeof loader>()
-  let config = useFormDocsConfig(tanstackDocsConfig)
+  const { version, config } = useLoaderData<typeof loader>()
+
   return (
     <DocsLayout
       name="Form"
@@ -36,6 +38,9 @@ export default function Component() {
       colorTo={colorTo}
       textColor={textColor}
       config={config}
+      frameworks={frameworks}
+      availableVersions={availableVersions}
+      localMenu={localMenu}
     >
       <Outlet />
     </DocsLayout>
diff --git a/app/routes/query.$version.docs.tsx b/app/routes/query.$version.docs.tsx
index 27e85b22..7be5c69a 100644
--- a/app/routes/query.$version.docs.tsx
+++ b/app/routes/query.$version.docs.tsx
@@ -9,8 +9,10 @@ import {
   colorTo,
   textColor,
   repo,
-  useQueryDocsConfig,
   latestVersion,
+  availableVersions,
+  frameworks,
+  localMenu,
 } from '~/projects/query'
 import { getTanstackDocsConfig } from '~/utils/config'
 
@@ -18,10 +20,10 @@ export const loader = async (context: LoaderFunctionArgs) => {
   const { version } = context.params
   const branch = getBranch(version)
 
-  const tanstackDocsConfig = await getTanstackDocsConfig(repo, branch)
+  const config = await getTanstackDocsConfig(repo, branch)
 
   return json({
-    tanstackDocsConfig,
+    config,
     version,
   })
 }
@@ -34,8 +36,7 @@ export const meta: MetaFunction = () => {
 }
 
 export default function RouteFrameworkParam() {
-  const { tanstackDocsConfig, version } = useLoaderData<typeof loader>()
-  let config = useQueryDocsConfig(tanstackDocsConfig)
+  const { config, version } = useLoaderData<typeof loader>()
 
   return (
     <>
@@ -47,6 +48,9 @@ export default function RouteFrameworkParam() {
         colorTo={colorTo}
         textColor={textColor}
         config={config}
+        frameworks={frameworks}
+        availableVersions={availableVersions}
+        localMenu={localMenu}
       >
         <Outlet />
       </DocsLayout>
diff --git a/app/routes/ranger.$version.docs.tsx b/app/routes/ranger.$version.docs.tsx
index ee24345c..a69a0a75 100644
--- a/app/routes/ranger.$version.docs.tsx
+++ b/app/routes/ranger.$version.docs.tsx
@@ -1,12 +1,14 @@
 import { Outlet, json, useLoaderData } from '@remix-run/react'
 import {
-  useRangerDocsConfig,
   repo,
   getBranch,
   colorTo,
   latestVersion,
   colorFrom,
   textColor,
+  availableVersions,
+  localMenu,
+  frameworks,
 } from '~/projects/ranger'
 import { seo } from '~/utils/seo'
 import { DocsLayout } from '~/components/DocsLayout'
@@ -17,10 +19,10 @@ export const loader = async (context: LoaderFunctionArgs) => {
   const { version } = context.params
   const branch = getBranch(version)
 
-  const tanstackDocsConfig = await getTanstackDocsConfig(repo, branch)
+  const config = await getTanstackDocsConfig(repo, branch)
 
   return json({
-    tanstackDocsConfig,
+    config,
     version,
   })
 }
@@ -33,8 +35,8 @@ export const meta: MetaFunction = () => {
 }
 
 export default function DocsRoute() {
-  const { version, tanstackDocsConfig } = useLoaderData<typeof loader>()
-  let config = useRangerDocsConfig(tanstackDocsConfig)
+  const { version, config } = useLoaderData<typeof loader>()
+
   return (
     <DocsLayout
       name="Ranger"
@@ -43,6 +45,9 @@ export default function DocsRoute() {
       colorTo={colorTo}
       textColor={textColor}
       config={config}
+      frameworks={frameworks}
+      availableVersions={availableVersions}
+      localMenu={localMenu}
     >
       <Outlet />
     </DocsLayout>
diff --git a/app/routes/router.$version.docs.tsx b/app/routes/router.$version.docs.tsx
index 5b3a11f2..e4f109e2 100644
--- a/app/routes/router.$version.docs.tsx
+++ b/app/routes/router.$version.docs.tsx
@@ -3,11 +3,13 @@ import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
 import {
   repo,
   getBranch,
-  useRouterDocsConfig,
   latestVersion,
   colorFrom,
   colorTo,
   textColor,
+  availableVersions,
+  localMenu,
+  frameworks,
 } from '~/projects/router'
 import { seo } from '~/utils/seo'
 import { DocsLayout } from '~/components/DocsLayout'
@@ -17,10 +19,10 @@ export const loader = async (context: LoaderFunctionArgs) => {
   const { version } = context.params
   const branch = getBranch(version)
 
-  const tanstackDocsConfig = await getTanstackDocsConfig(repo, branch)
+  const config = await getTanstackDocsConfig(repo, branch)
 
   return json({
-    tanstackDocsConfig,
+    config,
     version,
   })
 }
@@ -33,8 +35,7 @@ export const meta: MetaFunction = () => {
 }
 
 export default function DocsRoute() {
-  const { tanstackDocsConfig, version } = useLoaderData<typeof loader>()
-  let config = useRouterDocsConfig(tanstackDocsConfig)
+  const { config, version } = useLoaderData<typeof loader>()
 
   return (
     <DocsLayout
@@ -44,6 +45,9 @@ export default function DocsRoute() {
       colorTo={colorTo}
       textColor={textColor}
       config={config}
+      frameworks={frameworks}
+      availableVersions={availableVersions}
+      localMenu={localMenu}
     >
       <Outlet />
     </DocsLayout>
diff --git a/app/routes/store.$version.docs.tsx b/app/routes/store.$version.docs.tsx
index 46e0192e..ba38a1c7 100644
--- a/app/routes/store.$version.docs.tsx
+++ b/app/routes/store.$version.docs.tsx
@@ -8,7 +8,9 @@ import {
   textColor,
   colorFrom,
   colorTo,
-  useStoreDocsConfig,
+  availableVersions,
+  localMenu,
+  frameworks,
 } from '~/projects/store'
 import { getTanstackDocsConfig } from '~/utils/config'
 
@@ -16,17 +18,16 @@ export const loader = async (context: LoaderFunctionArgs) => {
   const { version } = context.params
   const branch = getBranch(version)
 
-  const tanstackDocsConfig = await getTanstackDocsConfig(repo, branch)
+  const config = await getTanstackDocsConfig(repo, branch)
 
   return json({
-    tanstackDocsConfig,
+    config,
     version,
   })
 }
 
 export default function Component() {
-  const { tanstackDocsConfig, version } = useLoaderData<typeof loader>()
-  let config = useStoreDocsConfig(tanstackDocsConfig)
+  const { config, version } = useLoaderData<typeof loader>()
 
   return (
     <DocsLayout
@@ -36,6 +37,9 @@ export default function Component() {
       colorTo={colorTo}
       textColor={textColor}
       config={config}
+      frameworks={frameworks}
+      availableVersions={availableVersions}
+      localMenu={localMenu}
     >
       <Outlet />
     </DocsLayout>
diff --git a/app/routes/table.$version.docs.tsx b/app/routes/table.$version.docs.tsx
index fa755f0d..a7eb0bf4 100644
--- a/app/routes/table.$version.docs.tsx
+++ b/app/routes/table.$version.docs.tsx
@@ -2,11 +2,13 @@ import { Outlet, json, useLoaderData } from '@remix-run/react'
 import {
   getBranch,
   repo,
-  useTableDocsConfig,
   latestVersion,
   colorFrom,
   colorTo,
   textColor,
+  availableVersions,
+  localMenu,
+  frameworks,
 } from '~/projects/table'
 import { seo } from '~/utils/seo'
 import { DocsLayout } from '~/components/DocsLayout'
@@ -18,10 +20,10 @@ export const loader = async (context: LoaderFunctionArgs) => {
   const version = context.params.version
   const branch = getBranch(version)
 
-  const tanstackDocsConfig = await getTanstackDocsConfig(repo, branch)
+  const config = await getTanstackDocsConfig(repo, branch)
 
   return json({
-    tanstackDocsConfig,
+    config,
     version,
   })
 }
@@ -38,8 +40,7 @@ export const meta: MetaFunction = () => {
 export const ErrorBoundary = DefaultErrorBoundary
 
 export default function RouteReactTable() {
-  const { version, tanstackDocsConfig } = useLoaderData<typeof loader>()
-  let config = useTableDocsConfig(tanstackDocsConfig)
+  const { version, config } = useLoaderData<typeof loader>()
 
   return (
     <DocsLayout
@@ -49,6 +50,9 @@ export default function RouteReactTable() {
       colorTo={colorTo}
       textColor={textColor}
       config={config}
+      frameworks={frameworks}
+      availableVersions={availableVersions}
+      localMenu={localMenu}
     >
       <Outlet />
     </DocsLayout>
diff --git a/app/routes/virtual.$version.docs.tsx b/app/routes/virtual.$version.docs.tsx
index d57b18f1..564a2db6 100644
--- a/app/routes/virtual.$version.docs.tsx
+++ b/app/routes/virtual.$version.docs.tsx
@@ -3,10 +3,12 @@ import {
   getBranch,
   latestVersion,
   repo,
-  useVirtualDocsConfig,
   colorFrom,
   colorTo,
   textColor,
+  availableVersions,
+  localMenu,
+  frameworks,
 } from '~/projects/virtual'
 import { seo } from '~/utils/seo'
 import { DocsLayout } from '~/components/DocsLayout'
@@ -17,10 +19,10 @@ export const loader = async (context: LoaderFunctionArgs) => {
   const version = context.params.version
   const branch = getBranch(version)
 
-  const tanstackDocsConfig = await getTanstackDocsConfig(repo, branch)
+  const config = await getTanstackDocsConfig(repo, branch)
 
   return json({
-    tanstackDocsConfig,
+    config,
     version,
   })
 }
@@ -35,8 +37,7 @@ export const meta: MetaFunction = () => {
 }
 
 export default function RouteVirtual() {
-  const { version, tanstackDocsConfig } = useLoaderData<typeof loader>()
-  let config = useVirtualDocsConfig(tanstackDocsConfig)
+  const { version, config } = useLoaderData<typeof loader>()
 
   return (
     <DocsLayout
@@ -46,6 +47,9 @@ export default function RouteVirtual() {
       colorTo={colorTo}
       textColor={textColor}
       config={config}
+      frameworks={frameworks}
+      availableVersions={availableVersions}
+      localMenu={localMenu}
     >
       <Outlet />
     </DocsLayout>
diff --git a/app/utils/config.ts b/app/utils/config.ts
index 504d7be4..ab1e5b16 100644
--- a/app/utils/config.ts
+++ b/app/utils/config.ts
@@ -1,9 +1,5 @@
-import { useMemo } from 'react'
-import { useMatches, useNavigate, useParams } from '@remix-run/react'
 import { z } from 'zod'
 import { fetchRepoFile } from './documents.server'
-import { generatePath } from '~/utils/utils'
-import type { AvailableOptions } from '~/components/Select'
 
 export type FrameworkMenu = {
   framework: string
@@ -73,118 +69,3 @@ export async function getTanstackDocsConfig(repo: string, branch: string) {
     throw new Error('Invalid docs/config.json file')
   }
 }
-
-/**
- * Use framework in URL path
- * Otherwise use framework in localStorage if it exists for this project
- * Otherwise fallback to react
- */
-export function useCurrentFramework(frameworks: AvailableOptions) {
-  const { framework: paramsFramework } = useParams()
-  const localStorageFramework = localStorage.getItem('framework')
-
-  return paramsFramework
-    ? paramsFramework
-    : localStorageFramework
-    ? frameworks[localStorageFramework]
-      ? localStorageFramework
-      : 'react'
-    : 'react'
-}
-
-export const useDocsConfig = ({
-  config,
-  frameworks,
-  availableVersions,
-  localMenu,
-}: {
-  config: ConfigSchema
-  frameworks: AvailableOptions
-  availableVersions: string[]
-  localMenu: MenuItem
-}) => {
-  const matches = useMatches()
-  const match = matches[matches.length - 1]
-  const params = useParams()
-  const version = params.version!
-  const framework = useCurrentFramework(frameworks)
-  const navigate = useNavigate()
-
-  const frameworkMenuItems =
-    config.frameworkMenus.find((d) => d.framework === framework)?.menuItems ??
-    []
-
-  const frameworkConfig = useMemo(() => {
-    return {
-      label: 'Framework',
-      selected: frameworks[framework] ? framework : 'react',
-      available: frameworks,
-      onSelect: (option: { label: string; value: string }) => {
-        const url = generatePath(match.id, {
-          ...match.params,
-          framework: option.value,
-        })
-
-        localStorage.setItem('framework', option.value)
-
-        navigate(url)
-      },
-    }
-  }, [frameworks, framework, match, navigate])
-
-  const versionConfig = useMemo(() => {
-    const available = availableVersions.reduce(
-      (acc: AvailableOptions, version) => {
-        acc[version] = {
-          label: version,
-          value: version,
-        }
-        return acc
-      },
-      {
-        latest: {
-          label: 'Latest',
-          value: 'latest',
-        },
-      }
-    )
-
-    return {
-      label: 'Version',
-      selected: version,
-      available,
-      onSelect: (option: { label: string; value: string }) => {
-        const url = generatePath(match.id, {
-          ...match.params,
-          version: option.value,
-        })
-        navigate(url)
-      },
-    }
-  }, [version, match, navigate, availableVersions])
-
-  return {
-    ...config,
-    menu: [
-      localMenu,
-      // Merge the two menus together based on their group labels
-      ...config.menu.map((d) => {
-        const match = frameworkMenuItems.find((d2) => d2.label === d.label)
-        return {
-          label: d.label,
-          children: [
-            ...d.children.map((d) => ({ ...d, badge: 'core' })),
-            ...(match?.children ?? []).map((d) => ({ ...d, badge: framework })),
-          ],
-        }
-      }),
-      ...frameworkMenuItems.filter(
-        (d) => !config.menu.find((dd) => dd.label === d.label)
-      ),
-    ].filter(Boolean),
-    frameworkConfig,
-    versionConfig,
-  }
-}
-
-export type DocsConfig = ReturnType<typeof useDocsConfig>

From 205e87f745e817bbf40979536c53de6622505f15 Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Sun, 28 Jan 2024 08:53:08 +1100
Subject: [PATCH 07/12] Add back old version redirects

---
 app/routes/query.$.tsx   | 109 ++++++++++++++++++++++++++++++++++++++-
 app/routes/router.$.tsx  |  29 ++++++++++-
 app/routes/table.$.tsx   |  48 ++++++++++++++++-
 app/routes/virtual.$.tsx |  30 ++++++++++-
 4 files changed, 211 insertions(+), 5 deletions(-)

diff --git a/app/routes/query.$.tsx b/app/routes/query.$.tsx
index 5b5d97d2..a07bc07d 100644
--- a/app/routes/query.$.tsx
+++ b/app/routes/query.$.tsx
@@ -1,5 +1,110 @@
 import { redirect } from '@remix-run/node'
+import type { LoaderFunctionArgs } from '@remix-run/node'
 
-export const loader = () => {
-  return redirect('/query/latest')
+export const loader = (context: LoaderFunctionArgs) => {
+  handleRedirectsFromV3(context)
+
+  return redirect(`/query/latest`)
+}
+
+function handleRedirectsFromV3(context: LoaderFunctionArgs) {
+  const url = new URL(context.request.url)
+
+  // Redirect old query v3 docs
+  // prettier-ignore
+  const reactQueryV3List = [
+    // {from: 'api/overview',to: 'docs/guide/overview',},
+    {from: "overview", to: "docs/overview"},
+    {from: "installation", to: "docs/installation"},
+    {from: "quick-start", to: "docs/quick-start"},
+    {from: "devtools", to: "docs/devtools"},
+    {from: "videos", to: "docs/videos"},
+    {from: "comparison", to: "docs/comparison"},
+    {from: "typescript", to: "docs/typescript"},
+    {from: "graphql", to: "docs/graphql"},
+    {from: "react-native", to: "docs/react-native"},
+    {from: "guides/important-defaults", to: "docs/guides/important-defaults"},
+    {from: "guides/queries", to: "docs/guides/queries"},
+    {from: "guides/query-keys", to: "docs/guides/query-keys"},
+    {from: "guides/query-functions", to: "docs/guides/query-functions"},
+    {from: "guides/network-mode", to: "docs/guides/network-mode"},
+    {from: "guides/parallel-queries", to: "docs/guides/parallel-queries"},
+    {from: "guides/dependent-queries", to: "docs/guides/dependent-queries"},
+    {from: "guides/background-fetching-indicators", to: "docs/guides/background-fetching-indicators"},
+    {from: "guides/window-focus-refetching", to: "docs/guides/window-focus-refetching"},
+    {from: "guides/disabling-queries", to: "docs/guides/disabling-queries"},
+    {from: "guides/query-retries", to: "docs/guides/query-retries"},
+    {from: "guides/paginated-queries", to: "docs/guides/paginated-queries"},
+    {from: "guides/infinite-queries", to: "docs/guides/infinite-queries"},
+    {from: "guides/placeholder-query-data", to: "docs/guides/placeholder-query-data"},
+    {from: "guides/initial-query-data", to: "docs/guides/initial-query-data"},
+    {from: "guides/prefetching", to: "docs/guides/prefetching"},
+    {from: "guides/mutations", to: "docs/guides/mutations"},
+    {from: "guides/query-invalidation", to: "docs/guides/query-invalidation"},
+    {from: "guides/invalidations-from-mutations", to: "docs/guides/invalidations-from-mutations"},
+    {from: "guides/updates-from-mutation-responses", to: "docs/guides/updates-from-mutation-responses"},
+    {from: "guides/optimistic-updates", to: "docs/guides/optimistic-updates"},
+    {from: "guides/query-cancellation", to: "docs/guides/query-cancellation"},
+    {from: "guides/scroll-restoration", to: "docs/guides/scroll-restoration"},
+    {from: "guides/filters", to: "docs/guides/filters"},
+    {from: "guides/ssr", to: "docs/guides/ssr"},
+    {from: "guides/caching", to: "docs/guides/caching"},
+    {from: "guides/default-query-function", to: "docs/guides/default-query-function"},
+    {from: "guides/suspense", to: "docs/guides/suspense"},
+    {from: "guides/custom-logger", to: "docs/guides/custom-logger"},
+    {from: "guides/testing", to: "docs/guides/testing"},
+    {from: "guides/does-this-replace-client-state", to: "docs/guides/does-this-replace-client-state"},
+    {from: "guides/migrating-to-react-query-3", to: "docs/guides/migrating-to-react-query-3"},
+    {from: "guides/migrating-to-react-query-4", to: "docs/guides/migrating-to-react-query-4"},
+    {from: "community/tkdodos-blog", to: "docs/community/tkdodos-blog"},
+    {from: "examples/simple", to: "docs/examples/react/simple"},
+    {from: "examples/basic", to: "docs/examples/react/basic"},
+    {from: "examples/basic-graphql-request", to: "docs/examples/react/basic-graphql-request"},
+    {from: "examples/custom-hooks", to: "docs/examples/react/custom-hooks"},
+    {from: "examples/auto-refetching", to: "docs/examples/react/auto-refetching"},
+    {from: "examples/focus-refetching", to: "docs/examples/react/focus-refetching"},
+    {from: "examples/optimistic-updates", to: "docs/examples/react/optimistic-updates-typescript"},
+    {from: "examples/optimistic-updates-typescript", to: "docs/examples/react/optimistic-updates-typescript"},
+    {from: "examples/pagination", to: "docs/examples/react/pagination"},
+    {from: "examples/load-more-infinite-scroll", to: "docs/examples/react/load-more-infinite-scroll"},
+    {from: "examples/suspense", to: "docs/examples/react/suspense"},
+    {from: "examples/default-query-function", to: "docs/examples/react/default-query-function"},
+    {from: "examples/playground", to: "docs/examples/react/playground"},
+    {from: "examples/prefetching", to: "docs/examples/react/prefetching"},
+    {from: "examples/star-wars", to: "docs/examples/react/star-wars"},
+    {from: "examples/rick-morty", to: "docs/examples/react/rick-morty"},
+    {from: "examples/nextjs", to: "docs/examples/react/nextjs"},
+    {from: "examples/react-native", to: "docs/examples/react/react-native"},
+    {from: "examples/offline", to: "docs/examples/react/offline"},
+    {from: "plugins/persistQueryClient", to: "docs/plugins/persistQueryClient"},
+    {from: "plugins/createWebStoragePersister", to: "docs/plugins/createWebStoragePersister"},
+    {from: "plugins/createAsyncStoragePersister", to: "docs/plugins/createAsyncStoragePersister"},
+    {from: "plugins/broadcastQueryClient", to: "docs/plugins/broadcastQueryClient"},
+    {from: "reference/useQuery", to: "docs/reference/useQuery"},
+    {from: "reference/useQueries", to: "docs/reference/useQueries"},
+    {from: "reference/useInfiniteQuery", to: "docs/reference/useInfiniteQuery"},
+    {from: "reference/useMutation", to: "docs/reference/useMutation"},
+    {from: "reference/useIsFetching", to: "docs/reference/useIsFetching"},
+    {from: "reference/useIsMutating", to: "docs/reference/useIsMutating"},
+    {from: "reference/QueryClient", to: "docs/reference/QueryClient"},
+    {from: "reference/QueryClientProvider", to: "docs/reference/QueryClientProvider"},
+    {from: "reference/useQueryClient", to: "docs/reference/useQueryClient"},
+    {from: "reference/QueryCache", to: "docs/reference/QueryCache"},
+    {from: "reference/MutationCache", to: "docs/reference/MutationCache"},
+    {from: "reference/QueryObserver", to: "docs/reference/QueryObserver"},
+    {from: "reference/InfiniteQueryObserver", to: "docs/reference/InfiniteQueryObserver"},
+    {from: "reference/QueriesObserver", to: "docs/reference/QueriesObserver"},
+    {from: "reference/QueryErrorResetBoundary", to: "docs/reference/QueryErrorResetBoundary"},
+    {from: "reference/useQueryErrorResetBoundary", to: "docs/reference/useQueryErrorResetBoundary"},
+    {from: "reference/focusManager", to: "docs/reference/focusManager"},
+    {from: "reference/onlineManager", to: "docs/reference/onlineManager"},
+    {from: "reference/hydration", to: "docs/reference/hydration"},
+    // {from: '',to: ''},
+  ]
+
+  reactQueryV3List.forEach((item) => {
+    if (url.pathname.startsWith(`/query/v3/${item.from}`)) {
+      throw redirect(`/query/latest/${item.to}?from=reactQueryV3`)
+    }
+  })
 }
diff --git a/app/routes/router.$.tsx b/app/routes/router.$.tsx
index b01a01f0..7b38f9dc 100644
--- a/app/routes/router.$.tsx
+++ b/app/routes/router.$.tsx
@@ -1,5 +1,32 @@
 import { redirect } from '@remix-run/node'
+import type { LoaderFunctionArgs } from '@remix-run/node'
+
+export const loader = (context: LoaderFunctionArgs) => {
+  handleRedirects(context)
 
-export const loader = () => {
   return redirect('/router/latest')
 }
+
+function handleRedirects(context: LoaderFunctionArgs) {
+  const url = new URL(context.request.url)
+  // prettier-ignore
+  const reactLocationV2List = [
+    {from: 'docs/overview',to: 'docs/guide/introduction',},
+    {from: 'docs/installation',to: 'docs/guide/installation',},
+    {from: 'docs/api',to: 'docs/api/virtualizer',},
+    {from: 'examples/fixed',to: 'docs/examples/react/fixed',},
+    {from: 'examples/variable',to: 'docs/examples/react/variable',},
+    {from: 'examples/dynamic',to: 'docs/examples/react/dynamic',},
+    {from: 'examples/infinite-scroll',to: 'docs/examples/react/infinite-scroll',},
+    {from: 'examples/padding',to: 'docs/examples/react/padding',},
+    {from: 'examples/smooth-scroll',to: 'docs/examples/react/smooth-scroll',},
+    {from: 'examples/sticky',to: 'docs/examples/react/sticky',},
+    {from: '',to: '',},
+  ]
+
+  reactLocationV2List.forEach((item) => {
+    if (url.pathname.startsWith(`/router/react-location/${item.from}`)) {
+      throw redirect(`/router/v1/${item.to}?from=reactLocationV2`)
+    }
+  })
+}
diff --git a/app/routes/table.$.tsx b/app/routes/table.$.tsx
index 57bd5d4d..2906ccff 100644
--- a/app/routes/table.$.tsx
+++ b/app/routes/table.$.tsx
@@ -1,5 +1,51 @@
 import { redirect } from '@remix-run/node'
+import type { LoaderFunctionArgs } from '@remix-run/node'
+
+export const loader = (context: LoaderFunctionArgs) => {
+  handleRedirects(context)
 
-export const loader = () => {
   return redirect('/table/latest')
 }
+
+function handleRedirects(context: LoaderFunctionArgs) {
+  const url = new URL(context.request.url)
+  // prettier-ignore
+  const reactTableV7List = [
+    {from: 'docs/api/overview',to: 'docs/guide/overview',},
+    {from: 'docs/api/useColumnOrder',to: 'docs/api/features/column-ordering',},
+    {from: 'docs/api/useExpanded',to: 'docs/api/features/expanding',},
+    {from: 'docs/api/useFilters',to: 'docs/api/features/filters',},
+    {from: 'docs/api/useGlobalFilter',to: 'docs/api/features/filters',},
+    {from: 'docs/api/useGroupBy',to: 'docs/api/features/grouping',},
+    {from: 'docs/api/usePagination',to: 'docs/api/features/pagination',},
+    {from: 'docs/api/useResizeColumns',to: 'docs/api/features/column-sizing',},
+    {from: 'docs/api/useRowSelect',to: 'docs/api/features/row-selection',},
+    {from: 'docs/api/useSortBy',to: 'docs/api/features/sorting',},
+    {from: 'docs/api/useTable',to: 'docs/guide/tables',},
+    {from: 'docs/examples/basic',to: 'docs/examples/react/basic',},
+    {from: 'docs/examples/filtering',to: 'docs/examples/react/filters',},
+    {from: 'docs/examples/footers',to: 'docs/examples/react/basic',},
+    {from: 'docs/examples/grouping',to: 'docs/examples/react/grouping',},
+    {from: 'docs/examples/pagination',to: 'docs/examples/react/pagination',},
+    {from: 'docs/examples/sorting',to: 'docs/examples/react/sorting',},
+    {from: 'docs/examples/row-selection',to: 'docs/examples/react/row-selection',},
+    {from: 'docs/examples/row-selection-with-pagination',to: 'docs/examples/react/row-selection',},
+    {from: 'docs/examples/expanding',to: 'docs/examples/react/expanding',},
+    {from: 'docs/examples/editable-data',to: 'docs/examples/react/editable-data',},
+    {from: 'docs/examples/column-ordering',to: 'docs/examples/react/column-ordering',},
+    {from: 'docs/examples/column-hiding',to: 'docs/examples/react/column-visibility',},
+    {from: 'docs/examples/column-resizing',to: 'docs/examples/react/column-sizing',},
+    {from: 'docs/examples/pagination-controlled',to: 'docs/examples/react/pagination-controlled',},
+    {from: 'docs/examples/pagination-controlled',to: 'docs/examples/react/pagination-controlled',},
+    {from: 'docs/installation',to: 'docs/guide/installation',},
+    {from: 'docs/overview',to: 'docs/introduction',},
+    {from: 'docs/quick-start',to: 'docs/guide/overview',},
+    {from: '',to: '',},
+  ]
+
+  reactTableV7List.forEach((item) => {
+    if (url.pathname.startsWith(`/table/v7/${item.from}`)) {
+      throw redirect(`/table/v8/${item.to}?from=reactTableV7`)
+    }
+  })
+}
diff --git a/app/routes/virtual.$.tsx b/app/routes/virtual.$.tsx
index 6a8a3760..b79e7782 100644
--- a/app/routes/virtual.$.tsx
+++ b/app/routes/virtual.$.tsx
@@ -1,5 +1,33 @@
 import { redirect } from '@remix-run/node'
+import type { LoaderFunctionArgs } from '@remix-run/node'
+
+export const loader = (context: LoaderFunctionArgs) => {
+  handleRedirects(context)
 
-export const loader = () => {
   return redirect('/virtual/latest')
 }
+
+function handleRedirects(context: LoaderFunctionArgs) {
+  const url = new URL(context.request.url)
+
+  // prettier-ignore
+  const reactVirtualV2List = [
+    {from: 'docs/overview',to: 'docs/guide/introduction',},
+    {from: 'docs/installation',to: 'docs/guide/installation',},
+    {from: 'docs/api',to: 'docs/api/virtualizer',},
+    {from: 'examples/fixed',to: 'docs/examples/react/fixed',},
+    {from: 'examples/variable',to: 'docs/examples/react/variable',},
+    {from: 'examples/dynamic',to: 'docs/examples/react/dynamic',},
+    {from: 'examples/infinite-scroll',to: 'docs/examples/react/infinite-scroll',},
+    {from: 'examples/padding',to: 'docs/examples/react/padding',},
+    {from: 'examples/smooth-scroll',to: 'docs/examples/react/smooth-scroll',},
+    {from: 'examples/sticky',to: 'docs/examples/react/sticky',},
+    {from: '',to: '',},
+  ]
+
+  reactVirtualV2List.forEach((item) => {
+    if (url.pathname.startsWith(`/virtual/v2/${item.from}`)) {
+      throw redirect(`/virtual/v3/${item.to}?from=reactVirtualV2`)
+    }
+  })
+}

From 50c6a93146fc5da286c985fa86a3321f9b255a65 Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Sun, 28 Jan 2024 09:03:47 +1100
Subject: [PATCH 08/12] Refactor useDocsConfig

---
 app/components/DocsLayout.tsx | 108 +++++++++++++++++++---------------
 1 file changed, 62 insertions(+), 46 deletions(-)

diff --git a/app/components/DocsLayout.tsx b/app/components/DocsLayout.tsx
index 45f96ef1..cbcd2f4f 100644
--- a/app/components/DocsLayout.tsx
+++ b/app/components/DocsLayout.tsx
@@ -33,29 +33,49 @@ function useCurrentFramework(frameworks: AvailableOptions) {
     : 'react'
 }
 
-const useDocsConfig = ({
+const useMenuConfig = ({
   config,
   frameworks,
-  availableVersions,
   localMenu,
 }: {
   config: ConfigSchema
   frameworks: AvailableOptions
-  availableVersions: string[]
   localMenu: MenuItem
 }) => {
-  const matches = useMatches()
-  const match = matches[matches.length - 1]
-  const params = useParams()
-  const version = params.version!
   const framework = useCurrentFramework(frameworks)
-  const navigate = useNavigate()
 
   const frameworkMenuItems =
     config.frameworkMenus.find((d) => d.framework === framework)?.menuItems ??
     []
 
-  console.log(frameworkMenuItems)
+  return [
+    localMenu,
+    // Merge the two menus together based on their group labels
+    ...config.menu.map((d) => {
+      const match = frameworkMenuItems.find((d2) => d2.label === d.label)
+      return {
+        label: d.label,
+        children: [
+          ...d.children.map((d) => ({ ...d, badge: 'core' })),
+          ...(match?.children ?? []).map((d) => ({ ...d, badge: framework })),
+        ],
+      }
+    }),
+    ...frameworkMenuItems.filter(
+      (d) => !config.menu.find((dd) => dd.label === d.label)
+    ),
+  ].filter(Boolean)
+}
+
+const useFrameworkConfig = ({
+  frameworks,
+}: {
+  frameworks: AvailableOptions
+}) => {
+  const matches = useMatches()
+  const match = matches[matches.length - 1]
+  const framework = useCurrentFramework(frameworks)
+  const navigate = useNavigate()
 
   const frameworkConfig = React.useMemo(() => {
     return {
@@ -75,6 +95,20 @@ const useDocsConfig = ({
     }
   }, [frameworks, framework, match, navigate])
 
+  return frameworkConfig
+}
+
+const useVersionConfig = ({
+  availableVersions,
+}: {
+  availableVersions: string[]
+}) => {
+  const matches = useMatches()
+  const match = matches[matches.length - 1]
+  const params = useParams()
+  const version = params.version!
+  const navigate = useNavigate()
+
   const versionConfig = React.useMemo(() => {
     const available = availableVersions.reduce(
       (acc: AvailableOptions, version) => {
@@ -106,29 +140,20 @@ const useDocsConfig = ({
     }
   }, [version, match, navigate, availableVersions])
 
-  return {
-    ...config,
-    menu: [
-      localMenu,
-      // Merge the two menus together based on their group labels
-      ...config.menu.map((d) => {
-        const match = frameworkMenuItems.find((d2) => d2.label === d.label)
-        console.log(match)
-        return {
-          label: d.label,
-          children: [
-            ...d.children.map((d) => ({ ...d, badge: 'core' })),
-            ...(match?.children ?? []).map((d) => ({ ...d, badge: framework })),
-          ],
-        }
-      }),
-      ...frameworkMenuItems.filter(
-        (d) => !config.menu.find((dd) => dd.label === d.label)
-      ),
-    ].filter(Boolean),
-    frameworkConfig,
-    versionConfig,
-  }
+  return versionConfig
+}
+
+type DocsLayoutProps = {
+  name: string
+  version: string
+  colorFrom: string
+  colorTo: string
+  textColor: string
+  config: ConfigSchema
+  frameworks: AvailableOptions
+  availableVersions: string[]
+  localMenu: MenuItem
+  children: React.ReactNode
 }
 
 export function DocsLayout({
@@ -142,24 +167,15 @@ export function DocsLayout({
   availableVersions,
   localMenu,
   children,
-}: {
-  name: string
-  version: string
-  colorFrom: string
-  colorTo: string
-  textColor: string
-  config: ConfigSchema
-  frameworks: AvailableOptions
-  availableVersions: string[]
-  localMenu: MenuItem
-  children: React.ReactNode
-}) {
-  const { frameworkConfig, versionConfig, menu } = useDocsConfig({
+}: DocsLayoutProps) {
+  const frameworkConfig = useFrameworkConfig({ frameworks })
+  const versionConfig = useVersionConfig({ availableVersions })
+  const menu = useMenuConfig({
     config,
     frameworks,
     localMenu,
-    availableVersions,
   })
+
   const matches = useMatches()
   const lastMatch = last(matches)
 

From 9db058134325ee77559a3fef6f343e7b23187f4c Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Sun, 28 Jan 2024 09:08:07 +1100
Subject: [PATCH 09/12] Use useCurrentFramework once

---
 app/components/DocsLayout.tsx | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/components/DocsLayout.tsx b/app/components/DocsLayout.tsx
index cbcd2f4f..58fa0ea2 100644
--- a/app/components/DocsLayout.tsx
+++ b/app/components/DocsLayout.tsx
@@ -35,15 +35,13 @@ function useCurrentFramework(frameworks: AvailableOptions) {
 
 const useMenuConfig = ({
   config,
-  frameworks,
+  framework,
   localMenu,
 }: {
   config: ConfigSchema
-  frameworks: AvailableOptions
+  framework: string
   localMenu: MenuItem
 }) => {
-  const framework = useCurrentFramework(frameworks)
-
   const frameworkMenuItems =
     config.frameworkMenus.find((d) => d.framework === framework)?.menuItems ??
     []
@@ -68,13 +66,14 @@ const useMenuConfig = ({
 }
 
 const useFrameworkConfig = ({
+  framework,
   frameworks,
 }: {
+  framework: string
   frameworks: AvailableOptions
 }) => {
   const matches = useMatches()
   const match = matches[matches.length - 1]
-  const framework = useCurrentFramework(frameworks)
   const navigate = useNavigate()
 
   const frameworkConfig = React.useMemo(() => {
@@ -168,11 +167,12 @@ export function DocsLayout({
   localMenu,
   children,
 }: DocsLayoutProps) {
-  const frameworkConfig = useFrameworkConfig({ frameworks })
+  const framework = useCurrentFramework(frameworks)
+  const frameworkConfig = useFrameworkConfig({ framework, frameworks })
   const versionConfig = useVersionConfig({ availableVersions })
-  const menu = useMenuConfig({
+  const menuConfig = useMenuConfig({
     config,
-    frameworks,
+    framework,
     localMenu,
   })
 
@@ -183,7 +183,10 @@ export function DocsLayout({
 
   const detailsRef = React.useRef<HTMLElement>(null!)
 
-  const flatMenu = React.useMemo(() => menu.flatMap((d) => d.children), [menu])
+  const flatMenu = React.useMemo(
+    () => menuConfig.flatMap((d) => d.children),
+    [menuConfig]
+  )
 
   const docsMatch = matches.find((d) => d.pathname.includes('/docs'))
 
@@ -198,7 +201,7 @@ export function DocsLayout({
 
   const [showBytes, setShowBytes] = useLocalStorage('showBytes', true)
 
-  const menuItems = menu.map((group, i) => {
+  const menuItems = menuConfig.map((group, i) => {
     return (
       <div key={i}>
         <div className="text-[.9em] uppercase font-black">{group.label}</div>

From 0735cc15caa56b4829fc80560fed0350392fd823 Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Sun, 28 Jan 2024 09:15:18 +1100
Subject: [PATCH 10/12] Refactor localMenu

---
 app/components/DocsLayout.tsx        | 48 ++++++++++++++++++++++------
 app/projects/form.tsx                | 28 ----------------
 app/projects/query.tsx               | 28 ----------------
 app/projects/ranger.tsx              | 28 ----------------
 app/projects/router.tsx              | 28 ----------------
 app/projects/store.tsx               | 28 ----------------
 app/projects/table.tsx               | 28 ----------------
 app/projects/virtual.tsx             | 28 ----------------
 app/routes/form.$version.docs.tsx    |  3 +-
 app/routes/query.$version.docs.tsx   |  3 +-
 app/routes/ranger.$version.docs.tsx  |  3 +-
 app/routes/router.$version.docs.tsx  |  3 +-
 app/routes/store.$version.docs.tsx   |  3 +-
 app/routes/table.$version.docs.tsx   |  3 +-
 app/routes/virtual.$version.docs.tsx |  3 +-
 15 files changed, 45 insertions(+), 220 deletions(-)

diff --git a/app/components/DocsLayout.tsx b/app/components/DocsLayout.tsx
index 58fa0ea2..4a353568 100644
--- a/app/components/DocsLayout.tsx
+++ b/app/components/DocsLayout.tsx
@@ -1,7 +1,13 @@
 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 {
+  FaArrowLeft,
+  FaArrowRight,
+  FaDiscord,
+  FaGithub,
+  FaTimes,
+} from 'react-icons/fa'
 import { NavLink, useMatches, useNavigate, useParams } from '@remix-run/react'
 import { Carbon } from '~/components/Carbon'
 import { LinkOrA } from '~/components/LinkOrA'
@@ -36,16 +42,42 @@ function useCurrentFramework(frameworks: AvailableOptions) {
 const useMenuConfig = ({
   config,
   framework,
-  localMenu,
+  repo,
 }: {
   config: ConfigSchema
   framework: string
-  localMenu: MenuItem
+  repo: string
 }) => {
   const frameworkMenuItems =
     config.frameworkMenus.find((d) => d.framework === framework)?.menuItems ??
     []
 
+  const localMenu: MenuItem = {
+    label: 'Menu',
+    children: [
+      {
+        label: 'Home',
+        to: '..',
+      },
+      {
+        label: (
+          <div className="flex items-center gap-2">
+            GitHub <FaGithub className="text-lg opacity-20" />
+          </div>
+        ),
+        to: `https://github.com/${repo}`,
+      },
+      {
+        label: (
+          <div className="flex items-center gap-2">
+            Discord <FaDiscord className="text-lg opacity-20" />
+          </div>
+        ),
+        to: 'https://tlinz.com/discord',
+      },
+    ],
+  }
+
   return [
     localMenu,
     // Merge the two menus together based on their group labels
@@ -151,7 +183,7 @@ type DocsLayoutProps = {
   config: ConfigSchema
   frameworks: AvailableOptions
   availableVersions: string[]
-  localMenu: MenuItem
+  repo: string
   children: React.ReactNode
 }
 
@@ -164,17 +196,13 @@ export function DocsLayout({
   config,
   frameworks,
   availableVersions,
-  localMenu,
+  repo,
   children,
 }: DocsLayoutProps) {
   const framework = useCurrentFramework(frameworks)
   const frameworkConfig = useFrameworkConfig({ framework, frameworks })
   const versionConfig = useVersionConfig({ availableVersions })
-  const menuConfig = useMenuConfig({
-    config,
-    framework,
-    localMenu,
-  })
+  const menuConfig = useMenuConfig({ config, framework, repo })
 
   const matches = useMatches()
   const lastMatch = last(matches)
diff --git a/app/projects/form.tsx b/app/projects/form.tsx
index 6c8ea8f0..e41edfae 100644
--- a/app/projects/form.tsx
+++ b/app/projects/form.tsx
@@ -1,8 +1,6 @@
 import reactLogo from '~/images/react-logo.svg'
 import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
-import { FaDiscord, FaGithub } from 'react-icons/fa/index'
-import type { MenuItem } from '~/utils/config'
 
 export const repo = 'tanstack/form'
 
@@ -22,32 +20,6 @@ export const frameworks = {
 
 export type Framework = keyof typeof frameworks
 
-export const localMenu: MenuItem = {
-  label: 'Menu',
-  children: [
-    {
-      label: 'Home',
-      to: '..',
-    },
-    {
-      label: (
-        <div className="flex items-center gap-2">
-          GitHub <FaGithub className="text-lg opacity-20" />
-        </div>
-      ),
-      to: `https://github.com/${repo}`,
-    },
-    {
-      label: (
-        <div className="flex items-center gap-2">
-          Discord <FaDiscord className="text-lg opacity-20" />
-        </div>
-      ),
-      to: 'https://tlinz.com/discord',
-    },
-  ],
-}
-
 export function getBranch(argVersion?: string) {
   const version = argVersion || latestVersion
 
diff --git a/app/projects/query.tsx b/app/projects/query.tsx
index d9177504..dbfef42a 100644
--- a/app/projects/query.tsx
+++ b/app/projects/query.tsx
@@ -1,10 +1,8 @@
-import { FaDiscord, FaGithub } from 'react-icons/fa'
 import reactLogo from '~/images/react-logo.svg'
 import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
 import svelteLogo from '~/images/svelte-logo.svg'
 import angularLogo from '~/images/angular-logo.svg'
-import type { MenuItem } from '~/utils/config'
 
 export const repo = 'tanstack/query'
 
@@ -26,32 +24,6 @@ export const frameworks = {
 
 export type Framework = keyof typeof frameworks
 
-export const localMenu: MenuItem = {
-  label: 'Menu',
-  children: [
-    {
-      label: 'Home',
-      to: '..',
-    },
-    {
-      label: (
-        <div className="flex items-center gap-2">
-          GitHub <FaGithub className="text-lg opacity-20" />
-        </div>
-      ),
-      to: `https://github.com/${repo}`,
-    },
-    {
-      label: (
-        <div className="flex items-center gap-2">
-          Discord <FaDiscord className="text-lg opacity-20" />
-        </div>
-      ),
-      to: 'https://tlinz.com/discord',
-    },
-  ],
-}
-
 export function getBranch(argVersion?: string) {
   const version = argVersion || latestVersion
 
diff --git a/app/projects/ranger.tsx b/app/projects/ranger.tsx
index e1b3f5fb..5132c982 100644
--- a/app/projects/ranger.tsx
+++ b/app/projects/ranger.tsx
@@ -1,6 +1,4 @@
 import reactLogo from '~/images/react-logo.svg'
-import { FaDiscord, FaGithub } from 'react-icons/fa/index'
-import type { MenuItem } from '~/utils/config'
 
 export const repo = 'tanstack/ranger'
 
@@ -18,32 +16,6 @@ export const frameworks = {
 
 export type Framework = keyof typeof frameworks
 
-export const localMenu: MenuItem = {
-  label: 'Menu',
-  children: [
-    {
-      label: 'Home',
-      to: '..',
-    },
-    {
-      label: (
-        <div className="flex items-center gap-2">
-          GitHub <FaGithub className="text-lg opacity-20" />
-        </div>
-      ),
-      to: 'https://github.com/tanstack/ranger',
-    },
-    {
-      label: (
-        <div className="flex items-center gap-2">
-          Discord <FaDiscord className="text-lg opacity-20" />
-        </div>
-      ),
-      to: 'https://tlinz.com/discord',
-    },
-  ],
-}
-
 export function getBranch(argVersion?: string) {
   const version = argVersion || latestVersion
 
diff --git a/app/projects/router.tsx b/app/projects/router.tsx
index 0685619c..593db9f8 100644
--- a/app/projects/router.tsx
+++ b/app/projects/router.tsx
@@ -1,6 +1,4 @@
 import reactLogo from '~/images/react-logo.svg'
-import { FaDiscord, FaGithub } from 'react-icons/fa/index'
-import type { MenuItem } from '~/utils/config'
 
 export const repo = 'tanstack/router'
 
@@ -18,32 +16,6 @@ export const frameworks = {
 
 export type Framework = keyof typeof frameworks
 
-export const localMenu: MenuItem = {
-  label: 'Menu',
-  children: [
-    {
-      label: 'Home',
-      to: '..',
-    },
-    {
-      label: (
-        <div className="flex items-center gap-2">
-          GitHub <FaGithub className="text-lg opacity-20" />
-        </div>
-      ),
-      to: 'https://github.com/tanstack/router',
-    },
-    {
-      label: (
-        <div className="flex items-center gap-2">
-          Discord <FaDiscord className="text-lg opacity-20" />
-        </div>
-      ),
-      to: 'https://tlinz.com/discord',
-    },
-  ],
-}
-
 export function getBranch(argVersion?: string) {
   const version = argVersion || latestVersion
 
diff --git a/app/projects/store.tsx b/app/projects/store.tsx
index 23be4934..1f773cad 100644
--- a/app/projects/store.tsx
+++ b/app/projects/store.tsx
@@ -1,8 +1,6 @@
 import reactLogo from '~/images/react-logo.svg'
 import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
-import { FaDiscord, FaGithub } from 'react-icons/fa/index'
-import type { MenuItem } from '~/utils/config'
 
 export const repo = 'tanstack/store'
 
@@ -22,32 +20,6 @@ export const frameworks = {
 
 export type Framework = keyof typeof frameworks
 
-export const localMenu: MenuItem = {
-  label: 'Menu',
-  children: [
-    {
-      label: 'Home',
-      to: '..',
-    },
-    {
-      label: (
-        <div className="flex items-center gap-2">
-          GitHub <FaGithub className="text-lg opacity-20" />
-        </div>
-      ),
-      to: `https://github.com/${repo}`,
-    },
-    {
-      label: (
-        <div className="flex items-center gap-2">
-          Discord <FaDiscord className="text-lg opacity-20" />
-        </div>
-      ),
-      to: 'https://tlinz.com/discord',
-    },
-  ],
-}
-
 export function getBranch(argVersion?: string) {
   const version = argVersion || latestVersion
 
diff --git a/app/projects/table.tsx b/app/projects/table.tsx
index 8753a225..8b66c1e7 100644
--- a/app/projects/table.tsx
+++ b/app/projects/table.tsx
@@ -2,8 +2,6 @@ import reactLogo from '~/images/react-logo.svg'
 import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
 import svelteLogo from '~/images/svelte-logo.svg'
-import { FaDiscord, FaGithub } from 'react-icons/fa'
-import type { MenuItem } from '~/utils/config'
 
 export const repo = 'tanstack/table'
 
@@ -29,29 +27,3 @@ export function getBranch(argVersion?: string) {
 
   return ['latest', latestVersion].includes(version) ? latestBranch : version
 }
-
-export const localMenu: MenuItem = {
-  label: 'Menu',
-  children: [
-    {
-      label: 'Home',
-      to: '..',
-    },
-    {
-      label: (
-        <div className="flex items-center gap-2">
-          GitHub <FaGithub className="text-lg opacity-20" />
-        </div>
-      ),
-      to: `https://github.com/${repo}`,
-    },
-    {
-      label: (
-        <div className="flex items-center gap-2">
-          Discord <FaDiscord className="text-lg opacity-20" />
-        </div>
-      ),
-      to: 'https://tlinz.com/discord',
-    },
-  ],
-}
diff --git a/app/projects/virtual.tsx b/app/projects/virtual.tsx
index 27df6a7b..fbb05b69 100644
--- a/app/projects/virtual.tsx
+++ b/app/projects/virtual.tsx
@@ -2,8 +2,6 @@ import reactLogo from '~/images/react-logo.svg'
 import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
 import svelteLogo from '~/images/svelte-logo.svg'
-import { FaDiscord, FaGithub } from 'react-icons/fa'
-import type { MenuItem } from '~/utils/config'
 
 export const repo = 'tanstack/virtual'
 
@@ -29,29 +27,3 @@ export function getBranch(argVersion?: string) {
 
   return ['latest', latestVersion].includes(version) ? latestBranch : version
 }
-
-export const localMenu: MenuItem = {
-  label: 'Menu',
-  children: [
-    {
-      label: 'Home',
-      to: '..',
-    },
-    {
-      label: (
-        <div className="flex items-center gap-2">
-          GitHub <FaGithub className="text-lg opacity-20" />
-        </div>
-      ),
-      to: 'https://github.com/tanstack/virtual',
-    },
-    {
-      label: (
-        <div className="flex items-center gap-2">
-          Discord <FaDiscord className="text-lg opacity-20" />
-        </div>
-      ),
-      to: 'https://tlinz.com/discord',
-    },
-  ],
-}
diff --git a/app/routes/form.$version.docs.tsx b/app/routes/form.$version.docs.tsx
index 14d84be7..edb1b17a 100644
--- a/app/routes/form.$version.docs.tsx
+++ b/app/routes/form.$version.docs.tsx
@@ -9,7 +9,6 @@ import {
   frameworks,
   getBranch,
   latestVersion,
-  localMenu,
   repo,
   textColor,
 } from '~/projects/form'
@@ -40,7 +39,7 @@ export default function Component() {
       config={config}
       frameworks={frameworks}
       availableVersions={availableVersions}
-      localMenu={localMenu}
+      repo={repo}
     >
       <Outlet />
     </DocsLayout>
diff --git a/app/routes/query.$version.docs.tsx b/app/routes/query.$version.docs.tsx
index 7be5c69a..1d1acb07 100644
--- a/app/routes/query.$version.docs.tsx
+++ b/app/routes/query.$version.docs.tsx
@@ -12,7 +12,6 @@ import {
   latestVersion,
   availableVersions,
   frameworks,
-  localMenu,
 } from '~/projects/query'
 import { getTanstackDocsConfig } from '~/utils/config'
 
@@ -50,7 +49,7 @@ export default function RouteFrameworkParam() {
         config={config}
         frameworks={frameworks}
         availableVersions={availableVersions}
-        localMenu={localMenu}
+        repo={repo}
       >
         <Outlet />
       </DocsLayout>
diff --git a/app/routes/ranger.$version.docs.tsx b/app/routes/ranger.$version.docs.tsx
index a69a0a75..05fa3d09 100644
--- a/app/routes/ranger.$version.docs.tsx
+++ b/app/routes/ranger.$version.docs.tsx
@@ -7,7 +7,6 @@ import {
   colorFrom,
   textColor,
   availableVersions,
-  localMenu,
   frameworks,
 } from '~/projects/ranger'
 import { seo } from '~/utils/seo'
@@ -47,7 +46,7 @@ export default function DocsRoute() {
       config={config}
       frameworks={frameworks}
       availableVersions={availableVersions}
-      localMenu={localMenu}
+      repo={repo}
     >
       <Outlet />
     </DocsLayout>
diff --git a/app/routes/router.$version.docs.tsx b/app/routes/router.$version.docs.tsx
index e4f109e2..f415c022 100644
--- a/app/routes/router.$version.docs.tsx
+++ b/app/routes/router.$version.docs.tsx
@@ -8,7 +8,6 @@ import {
   colorTo,
   textColor,
   availableVersions,
-  localMenu,
   frameworks,
 } from '~/projects/router'
 import { seo } from '~/utils/seo'
@@ -47,7 +46,7 @@ export default function DocsRoute() {
       config={config}
       frameworks={frameworks}
       availableVersions={availableVersions}
-      localMenu={localMenu}
+      repo={repo}
     >
       <Outlet />
     </DocsLayout>
diff --git a/app/routes/store.$version.docs.tsx b/app/routes/store.$version.docs.tsx
index ba38a1c7..01133428 100644
--- a/app/routes/store.$version.docs.tsx
+++ b/app/routes/store.$version.docs.tsx
@@ -9,7 +9,6 @@ import {
   colorFrom,
   colorTo,
   availableVersions,
-  localMenu,
   frameworks,
 } from '~/projects/store'
 import { getTanstackDocsConfig } from '~/utils/config'
@@ -39,7 +38,7 @@ export default function Component() {
       config={config}
       frameworks={frameworks}
       availableVersions={availableVersions}
-      localMenu={localMenu}
+      repo={repo}
     >
       <Outlet />
     </DocsLayout>
diff --git a/app/routes/table.$version.docs.tsx b/app/routes/table.$version.docs.tsx
index a7eb0bf4..62e6e5b6 100644
--- a/app/routes/table.$version.docs.tsx
+++ b/app/routes/table.$version.docs.tsx
@@ -7,7 +7,6 @@ import {
   colorTo,
   textColor,
   availableVersions,
-  localMenu,
   frameworks,
 } from '~/projects/table'
 import { seo } from '~/utils/seo'
@@ -52,7 +51,7 @@ export default function RouteReactTable() {
       config={config}
       frameworks={frameworks}
       availableVersions={availableVersions}
-      localMenu={localMenu}
+      repo={repo}
     >
       <Outlet />
     </DocsLayout>
diff --git a/app/routes/virtual.$version.docs.tsx b/app/routes/virtual.$version.docs.tsx
index 564a2db6..8f94f6c9 100644
--- a/app/routes/virtual.$version.docs.tsx
+++ b/app/routes/virtual.$version.docs.tsx
@@ -7,7 +7,6 @@ import {
   colorTo,
   textColor,
   availableVersions,
-  localMenu,
   frameworks,
 } from '~/projects/virtual'
 import { seo } from '~/utils/seo'
@@ -49,7 +48,7 @@ export default function RouteVirtual() {
       config={config}
       frameworks={frameworks}
       availableVersions={availableVersions}
-      localMenu={localMenu}
+      repo={repo}
     >
       <Outlet />
     </DocsLayout>

From 5d1ce52dd5186b5c0d88693e3dc16889c2c131b6 Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Sun, 28 Jan 2024 09:16:07 +1100
Subject: [PATCH 11/12] Change extension to .ts

---
 app/projects/{form.tsx => form.ts}       | 0
 app/projects/{query.tsx => query.ts}     | 0
 app/projects/{ranger.tsx => ranger.ts}   | 0
 app/projects/{router.tsx => router.ts}   | 0
 app/projects/{store.tsx => store.ts}     | 0
 app/projects/{table.tsx => table.ts}     | 0
 app/projects/{virtual.tsx => virtual.ts} | 0
 7 files changed, 0 insertions(+), 0 deletions(-)
 rename app/projects/{form.tsx => form.ts} (100%)
 rename app/projects/{query.tsx => query.ts} (100%)
 rename app/projects/{ranger.tsx => ranger.ts} (100%)
 rename app/projects/{router.tsx => router.ts} (100%)
 rename app/projects/{store.tsx => store.ts} (100%)
 rename app/projects/{table.tsx => table.ts} (100%)
 rename app/projects/{virtual.tsx => virtual.ts} (100%)

diff --git a/app/projects/form.tsx b/app/projects/form.ts
similarity index 100%
rename from app/projects/form.tsx
rename to app/projects/form.ts
diff --git a/app/projects/query.tsx b/app/projects/query.ts
similarity index 100%
rename from app/projects/query.tsx
rename to app/projects/query.ts
diff --git a/app/projects/ranger.tsx b/app/projects/ranger.ts
similarity index 100%
rename from app/projects/ranger.tsx
rename to app/projects/ranger.ts
diff --git a/app/projects/router.tsx b/app/projects/router.ts
similarity index 100%
rename from app/projects/router.tsx
rename to app/projects/router.ts
diff --git a/app/projects/store.tsx b/app/projects/store.ts
similarity index 100%
rename from app/projects/store.tsx
rename to app/projects/store.ts
diff --git a/app/projects/table.tsx b/app/projects/table.ts
similarity index 100%
rename from app/projects/table.tsx
rename to app/projects/table.ts
diff --git a/app/projects/virtual.tsx b/app/projects/virtual.ts
similarity index 100%
rename from app/projects/virtual.tsx
rename to app/projects/virtual.ts

From 003ddd8962dc6fe7e48984e36753e2d070cb388a Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Sun, 28 Jan 2024 09:27:34 +1100
Subject: [PATCH 12/12] Commit suggestion

---
 app/components/DocsLayout.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/app/components/DocsLayout.tsx b/app/components/DocsLayout.tsx
index 4a353568..dee92ee0 100644
--- a/app/components/DocsLayout.tsx
+++ b/app/components/DocsLayout.tsx
@@ -30,13 +30,12 @@ function useCurrentFramework(frameworks: AvailableOptions) {
   const { framework: paramsFramework } = useParams()
   const localStorageFramework = localStorage.getItem('framework')
 
-  return paramsFramework
-    ? paramsFramework
-    : localStorageFramework
-    ? frameworks[localStorageFramework]
+  return (
+    paramsFramework ||
+    (localStorageFramework && localStorageFramework in frameworks
       ? localStorageFramework
-      : 'react'
-    : 'react'
+      : 'react')
+  )
 }
 
 const useMenuConfig = ({