feat: Migrate query docs to v2 layout (#151)

* feat: Migrate query docs to v2 layout

* Remove string literal

app/projects/query.tsx

@@ -1,37 +1,83 @@
+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 { useDocsConfig } from '~/utils/config'
+import { Link } from '@remix-run/react'
+import type { ConfigSchema, MenuItem } from '~/utils/config'
+
+export const repo = 'tanstack/query'
+
+export const latestBranch = 'main'
+export const latestVersion = 'v5'
+export const availableVersions = ['v5', 'v4', 'v3']
+
 export const gradientText =
   'inline-block text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-amber-500'
 
-export const repo = 'tanstack/query'
+export const frameworks = {
+  react: { label: 'React', logo: reactLogo, value: 'react' },
+  solid: { label: 'Solid', logo: solidLogo, value: 'solid' },
+  vue: { label: 'Vue', logo: vueLogo, value: 'vue' },
+  svelte: { label: 'Svelte', logo: svelteLogo, value: 'svelte' },
+  angular: { label: 'Angular', logo: angularLogo, value: 'angular' },
+} as const
 
-const latestBranch = 'main'
+export type Framework = keyof typeof frameworks
 
-export const latestVersion = 'v5'
+export const createLogo = (version?: string) => (
+  <>
+    <Link to="/" className="font-light">
+      TanStack
+    </Link>
+    <Link to=".." className="font-bold">
+      <span className={`${gradientText}`}>Query</span>{' '}
+      <span className="text-sm align-super">
+        {version === 'latest' ? latestVersion : version}
+      </span>
+    </Link>
+  </>
+)
 
-export const availableVersions = [
-  {
-    name: 'v5',
-    branch: latestBranch,
-  },
-  {
-    name: 'v4',
-    branch: 'v4',
-  },
-  {
-    name: 'v3',
-    branch: 'v3',
-  },
-] as const
+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
 
-  if (version === 'latest') {
-    return latestBranch
-  }
-
-  return (
-    availableVersions.find((v) => v.name === version)?.branch ?? latestBranch
-  )
+  return ['latest', latestVersion].includes(version) ? latestBranch : version
 }
 
-export type Framework = 'angular' | 'react' | 'svelte' | 'vue' | 'solid'
+export const useQueryDocsConfig = (config: ConfigSchema) => {
+  return useDocsConfig({
+    config,
+    frameworks,
+    localMenu,
+    availableVersions,
+  })
+}

app/routes/query.$.tsx

@@ -4,7 +4,7 @@ import type { LoaderFunctionArgs } from '@remix-run/node'
 export const loader = (context: LoaderFunctionArgs) => {
   handleRedirectsFromV3(context)
 
-  return redirect(`/query/latest`, 301)
+  return redirect(`/query/latest`)
 }
 
 function handleRedirectsFromV3(context: LoaderFunctionArgs) {
@@ -105,8 +105,7 @@ function handleRedirectsFromV3(context: LoaderFunctionArgs) {
   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}`,
-        301
+        `/query/latest/${item.to}?from=reactQueryV3&original=https://tanstack.com/query/v3/${item.to}`
       )
     }
   })

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

@@ -0,0 +1,44 @@
+import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
+import { repo, getBranch } from '~/projects/query'
+import { DefaultErrorBoundary } from '~/components/DefaultErrorBoundary'
+import { seo } from '~/utils/seo'
+import { useLoaderData, useParams } from '@remix-run/react'
+import { loadDocs } from '~/utils/docs'
+import { Doc } from '~/components/Doc'
+
+export const loader = async (context: LoaderFunctionArgs) => {
+  const { '*': docsPath, version } = context.params
+  const { url } = context.request
+
+  return loadDocs({
+    repo,
+    branch: getBranch(version),
+    docPath: `docs/${docsPath}`,
+    currentPath: url,
+    redirectPath: url.replace(/\/docs.*/, '/docs/framework/react/overview'),
+  })
+}
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  return seo({
+    title: `${data?.title} | TanStack Query Docs`,
+    description: data?.description,
+  })
+}
+
+export const ErrorBoundary = DefaultErrorBoundary
+
+export default function RouteDocs() {
+  const { title, content, filePath } = useLoaderData<typeof loader>()
+  const { version } = useParams()
+  const branch = getBranch(version)
+  return (
+    <Doc
+      title={title}
+      content={content}
+      repo={repo}
+      branch={branch}
+      filePath={filePath}
+    />
+  )
+}