feat: Migrate virtual docs to v2 layout (#152)

* feat: Migrate virtual docs to v2 layout

* Remove reference to v3branch

* Fix redirect

* Remove useless string literal

app/projects/virtual.tsx

@@ -1,6 +1,80 @@
+import { Link } from '@remix-run/react'
+import reactLogo from '~/images/react-logo.svg'
+import solidLogo from '~/images/solid-logo.svg'
+import vueLogo from '~/images/vue-logo.svg'
+import svelteLogo from '~/images/svelte-logo.svg'
+import { FaDiscord, FaGithub } from 'react-icons/fa'
+import { useDocsConfig, type ConfigSchema, type MenuItem } from '~/utils/config'
+
 export const repo = 'tanstack/virtual'
 
-export const v3branch = 'main'
+export const latestBranch = 'main'
+export const latestVersion = 'v3'
+export const availableVersions = ['v3']
 
 export const gradientText =
   'inline-block text-transparent bg-clip-text bg-gradient-to-r from-rose-500 to-violet-600'
+
+const frameworks = {
+  react: { label: 'React', logo: reactLogo, value: 'react' },
+  solid: { label: 'Solid', logo: solidLogo, value: 'solid' },
+  svelte: { label: 'Svelte', logo: svelteLogo, value: 'svelte' },
+  vue: { label: 'Vue', logo: vueLogo, value: 'vue' },
+} as const
+
+export type Framework = keyof typeof frameworks
+
+export function getBranch(argVersion?: string) {
+  const version = argVersion || latestVersion
+
+  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',
+    },
+  ],
+}
+
+export const createLogo = (version?: string) => (
+  <>
+    <Link to="/" className="font-light">
+      TanStack
+    </Link>
+    <Link to=".." className="font-bold">
+      <span className={`${gradientText}`}>Virtual</span>{' '}
+      <span className="text-sm align-super">
+        {version === 'latest' ? latestVersion : version}
+      </span>
+    </Link>
+  </>
+)
+
+export const useVirtualDocsConfig = (config: ConfigSchema) => {
+  return useDocsConfig({
+    config,
+    frameworks,
+    localMenu,
+    availableVersions,
+  })
+}

app/routes/virtual.$.tsx

@@ -4,7 +4,7 @@ import { redirect } from '@remix-run/node'
 export const loader = (context: LoaderFunctionArgs) => {
   handleRedirects(context)
 
-  return redirect('/virtual/v3')
+  return redirect('/virtual/latest')
 }
 
 function handleRedirects(context: LoaderFunctionArgs) {
@@ -31,8 +31,7 @@ function handleRedirects(context: LoaderFunctionArgs) {
           item.to
         }?from=reactVirtualV2&original=https://github.com/TanStack/virtual/tree/v2/docs/src/pages/${
           item.from
-        }${item.from ? '.md' : ''}`,
-        301
+        }${item.from ? '.md' : ''}`
       )
     }
   })

app/routes/virtual.v3._index.tsx → 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 { gradientText, v3branch } from '~/projects/virtual'
+import { gradientText, getBranch } from '~/projects/virtual'
 import { Carbon } from '~/components/Carbon'
 import { Footer } from '~/components/Footer'
 import { IoIosBody } from 'react-icons/io'
@@ -21,6 +21,8 @@ import { TbHeartHandshake } from 'react-icons/tb'
 import { VscPreview } from 'react-icons/vsc'
 import { Logo } from '~/components/Logo'
 import { getSponsorsForSponsorPack } from '~/server/sponsors'
+import type { LoaderFunctionArgs } from '@remix-run/node'
+import type { Framework } from '~/projects/virtual'
 
 const menu = [
   {
@@ -73,23 +75,20 @@ const menu = [
   },
 ]
 
-export const loader = async () => {
+export const loader = async (context: LoaderFunctionArgs) => {
   const sponsors = await getSponsorsForSponsorPack()
+  const { version } = context.params
 
   return json({
     sponsors,
+    version,
   })
 }
 
 export default function ReactTableRoute() {
-  const { sponsors } = useLoaderData<typeof loader>()
-  // const config = useReactTableV8Config()
-  // const [params, setParams] = useSearchParams()
-  // const framework = params.get('framework') ?? 'react'
-  const [framework, setFramework] = React.useState<
-    'react' | 'svelte' | 'vue' | 'solid'
-  >('react')
-
+  const { sponsors, version } = useLoaderData<typeof loader>()
+  const [framework, setFramework] = React.useState<Framework>('react')
+  const branch = getBranch(version)
   const [isDark, setIsDark] = React.useState(true)
 
   React.useEffect(() => {
@@ -430,7 +429,7 @@ export default function ReactTableRoute() {
         <div className="bg-white dark:bg-black">
           <iframe
             key={framework}
-            src={`https://codesandbox.io/embed/github/tanstack/virtual/tree/${v3branch}/examples/${framework}/dynamic?autoresize=1&fontsize=16&theme=${
+            src={`https://codesandbox.io/embed/github/tanstack/virtual/tree/${branch}/examples/${framework}/dynamic?autoresize=1&fontsize=16&theme=${
               isDark ? 'dark' : 'light'
             }`}
             title="tannerlinsley/react-table: dynamic"

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

@@ -0,0 +1,44 @@
+import { useLoaderData, useParams } from '@remix-run/react'
+import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
+import { repo, getBranch } from '~/projects/virtual'
+import { DefaultErrorBoundary } from '~/components/DefaultErrorBoundary'
+import { seo } from '~/utils/seo'
+import { Doc } from '~/components/Doc'
+import { loadDocs } from '~/utils/docs'
+
+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/introduction'),
+  })
+}
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  return seo({
+    title: `${data?.title ?? 'Docs'} | TanStack Virtual Docs`,
+    description: data?.description,
+  })
+}
+
+export const ErrorBoundary = DefaultErrorBoundary
+
+export default function RouteReactTableDocs() {
+  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}
+    />
+  )
+}

app/routes/virtual.v3.docs._index.tsx → app/routes/virtual.$version.docs._index.tsx

@@ -2,7 +2,5 @@ import { redirect } from '@remix-run/node'
 import type { LoaderFunctionArgs } from '@remix-run/node'
 
 export const loader = (context: LoaderFunctionArgs) => {
-  throw redirect(
-    context.request.url.replace(/\/docs.*/, '/docs/guide/introduction')
-  )
+  throw redirect(context.request.url.replace(/\/docs.*/, '/docs/introduction'))
 }

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

@@ -0,0 +1,45 @@
+import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
+import { repo, getBranch } from '~/projects/virtual'
+import { DefaultErrorBoundary } from '~/components/DefaultErrorBoundary'
+import { seo } from '~/utils/seo'
+import { useLoaderData, useParams } from '@remix-run/react'
+import { Doc } from '~/components/Doc'
+import { loadDocs } from '~/utils/docs'
+
+export const loader = async (context: LoaderFunctionArgs) => {
+  const { '*': docsPath, framework, version } = context.params
+  const { url } = context.request
+
+  return loadDocs({
+    repo,
+    branch: getBranch(version),
+    docPath: `docs/framework/${framework}/${docsPath}`,
+    currentPath: url,
+    redirectPath: url.replace(/\/docs.*/, '/docs/introduction'),
+  })
+}
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  return seo({
+    title: `${data?.title} | TanStack Virtual 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}
+    />
+  )
+}

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

@@ -0,0 +1,6 @@
+import { redirect } from '@remix-run/node'
+import type { LoaderFunctionArgs } from '@remix-run/node'
+
+export const loader = async (context: LoaderFunctionArgs) => {
+  throw redirect(context.request.url.replace(/\/docs.*/, '/docs/introduction'))
+}

app/routes/virtual.v3.docs.examples.$.tsx → app/routes/virtual.$version.docs.framework.$framework.examples.$.tsx

@@ -1,48 +1,48 @@
 import * as React from 'react'
 import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
 import { json } from '@remix-run/node'
-import { useLoaderData } from '@remix-run/react'
+import { useLoaderData, useParams } from '@remix-run/react'
 import { DocTitle } from '~/components/DocTitle'
-import { repo, v3branch } from '~/projects/virtual'
+import { getBranch, repo } from '~/projects/virtual'
 import { seo } from '~/utils/seo'
 import { capitalize, slugToTitle } from '~/utils/utils'
 import { FaExternalLinkAlt } from 'react-icons/fa'
 
 export const loader = async (context: LoaderFunctionArgs) => {
-  const { '*': examplePath } = context.params
-  const [kind, _name] = (examplePath ?? '').split('/')
-  const [name, search] = _name.split('?')
+  const { framework, '*': name } = context.params
 
-  return json({ kind, name, search: search ?? '' })
+  return json({ framework, name })
 }
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return seo({
-    title: `${capitalize(data.kind)} Virtual ${slugToTitle(
+    title: `${capitalize(data.framework)} Virtual ${slugToTitle(
       data.name
     )} Example | TanStack Virtual Docs`,
     description: `An example showing how to implement ${slugToTitle(
       data.name
-    )} in ${capitalize(data.kind)} Virtual`,
+    )} in ${capitalize(data.framework)} Virtual`,
   })
 }
 
 export default function RouteReactTableDocs() {
-  const { kind, name, search } = useLoaderData<typeof loader>()
+  const { framework, name } = useLoaderData<typeof loader>()
+  const { version } = useParams()
+  const branch = getBranch(version)
 
-  const examplePath = [kind, name].join('/')
+  const examplePath = [framework, name].join('/')
 
   const [isDark, setIsDark] = React.useState(true)
 
   React.useEffect(() => {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])
 
-  const githubUrl = `https://github.com/${repo}/tree/${v3branch}/examples/${examplePath}`
-  const stackBlitzUrl = `https://stackblitz.com/github/${repo}/tree/${v3branch}/examples/${examplePath}?${search}embed=1&theme=${
+  const githubUrl = `https://github.com/${repo}/tree/${branch}/examples/${examplePath}`
+  const stackBlitzUrl = `https://stackblitz.com/github/${repo}/tree/${branch}/examples/${examplePath}?embed=1&theme=${
     isDark ? 'dark' : 'light'
   }`
-  const codesandboxUrl = `https://codesandbox.io/s/github/${repo}/tree/${v3branch}/examples/${examplePath}?${search}embed=1&theme=${
+  const codesandboxUrl = `https://codesandbox.io/s/github/${repo}/tree/${branch}/examples/${examplePath}?embed=1&theme=${
     isDark ? 'dark' : 'light'
   }`
 
@@ -51,7 +51,7 @@ export default function RouteReactTableDocs() {
       <div className="p-4 lg:p-6">
         <DocTitle>
           <span>
-            {capitalize(kind)} Example: {slugToTitle(name)}
+            {capitalize(framework)} Example: {slugToTitle(name)}
           </span>
           <div className="flex items-center gap-4 flex-wrap font-normal text-xs">
             <a

app/routes/virtual.v3.docs.examples._index.tsx → app/routes/virtual.$version.docs.framework.$framework.examples._index.tsx

@@ -2,7 +2,5 @@ import type { LoaderFunctionArgs } from '@remix-run/node'
 import { redirect } from '@remix-run/node'
 
 export const loader = (context: LoaderFunctionArgs) => {
-  throw redirect(
-    context.request.url.replace(/\/examples.*/, '/examples/react/fixed')
-  )
+  throw redirect(context.request.url.replace(/\/examples.*/, '/examples/basic'))
 }

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

@@ -0,0 +1,51 @@
+import { Outlet, json, useLoaderData } from '@remix-run/react'
+import {
+  createLogo,
+  getBranch,
+  repo,
+  useVirtualDocsConfig,
+} from '~/projects/virtual'
+import { seo } from '~/utils/seo'
+import { DocsLayout } from '~/components/DocsLayout'
+import { getTanstackDocsConfig } from '~/utils/config'
+import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
+
+export const loader = async (context: LoaderFunctionArgs) => {
+  const version = context.params.version
+  const branch = getBranch(version)
+  const tanstackDocsConfig = await getTanstackDocsConfig(repo, branch)
+
+  return json({
+    tanstackDocsConfig,
+    version,
+  })
+}
+
+export const meta: MetaFunction = () => {
+  return seo({
+    title:
+      'TanStack Virtual Docs | React Virtual, Solid Virtual, Svelte Virtual, Vue Virtual',
+    description:
+      'Headless UI for virtualizing long scrollable lists with TS/JS, React, Solid, Svelte and Vue',
+  })
+}
+
+export default function RouteVirtual() {
+  const { version, tanstackDocsConfig } = useLoaderData<typeof loader>()
+  let config = useVirtualDocsConfig(tanstackDocsConfig)
+
+  return (
+    <DocsLayout
+      v2={true}
+      logo={createLogo(version)}
+      colorFrom={'from-rose-500'}
+      colorTo={'to-violet-500'}
+      textColor={'text-violet-500'}
+      config={config}
+      framework={config.frameworkConfig}
+      version={config.versionConfig}
+    >
+      <Outlet />
+    </DocsLayout>
+  )
+}