docs-i18n 0.6.3 → 0.7.0

package/template/app/routes/$lang.$project.$version.docs.$.tsx

@@ -0,0 +1,128 @@
+import {
+  createFileRoute,
+  notFound,
+  redirect,
+  useLocation,
+} from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { siteConfig, findProject, isSingleProject } from '~/site.config'
+import { Doc } from '~/components/Doc'
+
+const fetchDoc = createServerFn({ method: 'GET' })
+  .inputValidator(
+    (data: { project: string; version: string; lang: string; slug: string }) =>
+      data,
+  )
+  .handler(async ({ data }) => {
+    const { loadDoc } = await import('~/utils/docs.server')
+    return loadDoc(data.project, data.version, data.lang, data.slug)
+  })
+
+export const Route = createFileRoute('/$lang/$project/$version/docs/$')({
+  staleTime: 1000 * 60 * 5,
+  beforeLoad: ({ params }) => {
+    // Redirect full URLs to simplified URLs for single-project sites
+    if (isSingleProject()) {
+      const { lang, _splat } = params
+      throw redirect({
+        to: '/$lang/docs/$',
+        params: { lang, _splat: _splat || '' },
+      })
+    }
+
+    // When hideLatestVersion is enabled, redirect latest version URLs to versionless
+    if (siteConfig.hideLatestVersion) {
+      const { lang, project: projectId, version, _splat } = params
+      const project = findProject(projectId)
+      if (project && (version === project.latestVersion || version === 'latest')) {
+        throw redirect({
+          to: '/$lang/$project/docs/$',
+          params: { lang, project: projectId, _splat: _splat || '' },
+        })
+      }
+    }
+  },
+  loader: async ({ params }) => {
+    const { lang, project, version, _splat: slug } = params
+    if (!slug) throw notFound()
+
+    try {
+      return await fetchDoc({ data: { project, version, lang, slug } })
+    } catch (error) {
+      throw notFound()
+    }
+  },
+  head: ({ loaderData, params }) => {
+    const project = findProject(params.project)
+    const title = loaderData?.meta?.title
+    const projectName = project?.name || siteConfig.name
+
+    return {
+      meta: [
+        {
+          title: title ? `${title} | ${projectName} Docs` : `${projectName} Docs`,
+        },
+        ...(loaderData?.meta?.description
+          ? [{ name: 'description', content: loaderData.meta.description }]
+          : []),
+      ],
+    }
+  },
+  headers: ({ params }) => {
+    const { version, project: projectId } = params
+    const project = findProject(projectId)
+
+    const isLatestVersion =
+      project &&
+      (version === 'latest' || version === project.latestVersion)
+
+    if (isLatestVersion) {
+      return {
+        'cache-control': 'public, max-age=60, must-revalidate',
+        'cdn-cache-control':
+          'max-age=600, stale-while-revalidate=3600, durable',
+        vary: 'Accept-Encoding',
+      }
+    } else {
+      return {
+        'cache-control': 'public, max-age=3600, must-revalidate',
+        'cdn-cache-control':
+          'max-age=86400, stale-while-revalidate=604800, durable',
+        vary: 'Accept-Encoding',
+      }
+    }
+  },
+  component: DocsPage,
+  errorComponent: DocNotFound,
+})
+
+function DocsPage() {
+  const loaderData = Route.useLoaderData()
+  const { project: projectId } = Route.useParams()
+  const project = findProject(projectId)
+  const location = useLocation()
+
+  return (
+    <Doc
+      title={loaderData.meta?.title || ''}
+      content={loaderData.content}
+      isFallback={loaderData.isFallback}
+      filePath={loaderData.filePath}
+      repo={project?.repo}
+      pagePath={location.pathname}
+    />
+  )
+}
+
+function DocNotFound() {
+  return (
+    <div className="flex-1 flex items-center justify-center py-20">
+      <div className="text-center">
+        <h1 className="text-2xl font-bold mb-2">Page Not Found</h1>
+        <p className="text-gray-500 dark:text-gray-400">
+          The document you are looking for does not exist.
+        </p>
+      </div>
+    </div>
+  )
+}

package/template/app/routes/$lang.$project.$version.docs.framework.$framework.$.tsx

@@ -0,0 +1,106 @@
+import {
+  createFileRoute,
+  redirect,
+  useLocation,
+} from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { siteConfig, findProject } from '~/site.config'
+import { Doc } from '~/components/Doc'
+
+const fetchFrameworkDoc = createServerFn({ method: 'GET' })
+  .inputValidator(
+    (data: {
+      project: string
+      version: string
+      lang: string
+      framework: string
+      slug: string
+    }) => data,
+  )
+  .handler(async ({ data }) => {
+    const { loadDoc } = await import('~/utils/docs.server')
+    return loadDoc(
+      data.project,
+      data.version,
+      data.lang,
+      `framework/${data.framework}/${data.slug}`,
+    )
+  })
+
+export const Route = createFileRoute(
+  '/$lang/$project/$version/docs/framework/$framework/$',
+)({
+  staleTime: 1000 * 60 * 5,
+  loader: async ({ params }) => {
+    const { lang, project, version, framework, _splat: slug } = params
+
+    try {
+      return await fetchFrameworkDoc({
+        data: { project, version, lang, framework, slug: slug || '' },
+      })
+    } catch (error) {
+      // If doc not found, redirect to framework index
+      throw redirect({
+        to: '/$lang/$project/$version/docs/framework/$framework',
+        params: { lang, project, version, framework },
+      })
+    }
+  },
+  head: ({ loaderData, params }) => {
+    const project = findProject(params.project)
+    const projectName = project?.name || siteConfig.name
+    const framework =
+      params.framework.charAt(0).toUpperCase() + params.framework.slice(1)
+    const title = loaderData?.meta?.title
+
+    return {
+      meta: [
+        {
+          title: title
+            ? `${title} | ${projectName} ${framework} Docs`
+            : `${projectName} ${framework} Docs`,
+        },
+      ],
+    }
+  },
+  headers: ({ params }) => {
+    const project = findProject(params.project)
+    const isLatest =
+      project &&
+      (params.version === 'latest' || params.version === project.latestVersion)
+
+    return isLatest
+      ? {
+          'cache-control': 'public, max-age=60, must-revalidate',
+          'cdn-cache-control':
+            'max-age=600, stale-while-revalidate=3600, durable',
+          vary: 'Accept-Encoding',
+        }
+      : {
+          'cache-control': 'public, max-age=3600, must-revalidate',
+          'cdn-cache-control':
+            'max-age=86400, stale-while-revalidate=604800, durable',
+          vary: 'Accept-Encoding',
+        }
+  },
+  component: FrameworkDocsPage,
+})
+
+function FrameworkDocsPage() {
+  const loaderData = Route.useLoaderData()
+  const { project: projectId, framework } = Route.useParams()
+  const project = findProject(projectId)
+  const location = useLocation()
+
+  return (
+    <Doc
+      title={loaderData.meta?.title || ''}
+      content={loaderData.content}
+      isFallback={loaderData.isFallback}
+      filePath={loaderData.filePath}
+      repo={project?.repo}
+      pagePath={location.pathname}
+      framework={framework}
+    />
+  )
+}

package/template/app/routes/$lang.$project.$version.docs.framework.$framework.index.tsx

@@ -0,0 +1,27 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { findProject } from '~/site.config'
+
+export const Route = createFileRoute(
+  '/$lang/$project/$version/docs/framework/$framework/',
+)({
+  component: FrameworkIndex,
+})
+
+function FrameworkIndex() {
+  const { project: projectId, framework } = Route.useParams()
+  const project = findProject(projectId)
+  const frameworkLabel =
+    framework.charAt(0).toUpperCase() + framework.slice(1)
+
+  return (
+    <div className="py-8 max-w-3xl mx-auto">
+      <h1 className="text-3xl font-bold mb-4">
+        {project?.name} {frameworkLabel} Documentation
+      </h1>
+      <div className="h-px bg-gray-200 dark:bg-gray-700 mb-6" />
+      <p className="text-gray-600 dark:text-gray-400">
+        Use the sidebar to select a documentation page.
+      </p>
+    </div>
+  )
+}

package/template/app/routes/$lang.$project.$version.docs.framework.index.tsx

@@ -0,0 +1,44 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { findProject } from '~/site.config'
+
+export const Route = createFileRoute(
+  '/$lang/$project/$version/docs/framework/',
+)({
+  component: FrameworkSelectionPage,
+})
+
+function FrameworkSelectionPage() {
+  const { lang, project: projectId, version } = Route.useParams()
+  const project = findProject(projectId)
+  const frameworks = project?.frameworks || []
+
+  return (
+    <div className="py-8 max-w-3xl mx-auto">
+      <h1 className="text-3xl font-bold mb-4">
+        {project?.name} Frameworks
+      </h1>
+      <div className="h-px bg-gray-200 dark:bg-gray-700 mb-6" />
+
+      {frameworks.length > 0 ? (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {frameworks.map((fw) => (
+            <Link
+              key={fw}
+              to="/$lang/$project/$version/docs/framework/$framework"
+              params={{ lang, project: projectId, version, framework: fw }}
+              className="p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+            >
+              <span className="text-lg font-medium">
+                {fw.charAt(0).toUpperCase() + fw.slice(1)}
+              </span>
+            </Link>
+          ))}
+        </div>
+      ) : (
+        <p className="text-gray-600 dark:text-gray-400">
+          No frameworks are configured for this project.
+        </p>
+      )}
+    </div>
+  )
+}

package/template/app/routes/$lang.$project.$version.docs.index.tsx

@@ -0,0 +1,27 @@
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { getProject, isSingleProject } from '~/site.config'
+
+export const Route = createFileRoute('/$lang/$project/$version/docs/')({
+  beforeLoad: ({ params }) => {
+    const project = getProject(params.project)
+
+    // Redirect to simplified URL for single-project sites
+    if (isSingleProject()) {
+      throw redirect({
+        to: '/$lang/docs/$',
+        params: {
+          lang: params.lang,
+          _splat: project.defaultDocs || 'overview',
+        },
+      })
+    }
+
+    throw redirect({
+      from: '/$lang/$project/$version/docs',
+      to: './$',
+      params: {
+        _splat: project.defaultDocs || 'overview',
+      },
+    })
+  },
+})

package/template/app/routes/$lang.$project.$version.docs.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react'
+import {
+  createFileRoute,
+  Outlet,
+} from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { siteConfig, findProject } from '~/site.config'
+import { DocsLayout } from '~/components/DocsLayout'
+import { frameworkOptions } from '~/config/frameworks'
+import type { Framework } from '~/config/frameworks'
+
+const fetchDocsConfig = createServerFn({ method: 'GET' })
+  .inputValidator((data: { project: string; version: string }) => data)
+  .handler(async ({ data }) => {
+    const { loadDocsConfig } = await import('~/utils/docs.server')
+    return loadDocsConfig(data.project, data.version)
+  })
+
+export const Route = createFileRoute('/$lang/$project/$version/docs')({
+  staleTime: 1000 * 60 * 5,
+  loader: async ({ params }) => {
+    const config = await fetchDocsConfig({
+      data: { project: params.project, version: params.version },
+    })
+    return { config }
+  },
+  component: DocsLayoutRoute,
+  head: ({ params }) => {
+    const project = findProject(params.project)
+    return {
+      meta: [{ title: project ? `${project.name} Docs` : siteConfig.name }],
+    }
+  },
+  headers: () => ({
+    'cache-control': 'public, max-age=0, must-revalidate',
+    'cdn-cache-control': 'max-age=300, stale-while-revalidate=300, durable',
+  }),
+})
+
+function DocsLayoutRoute() {
+  const { project: projectId, version } = Route.useParams()
+  const { config } = Route.useLoaderData()
+  const project = findProject(projectId)
+
+  if (!project) {
+    return <div>Project not found: {projectId}</div>
+  }
+
+  // Map string framework IDs to Framework type
+  const frameworks: Framework[] = (project.frameworks ?? []).filter(
+    (f): f is Framework =>
+      frameworkOptions.some((opt) => opt.value === f),
+  )
+
+  return (
+    <DocsLayout
+      name={project.name}
+      version={version}
+      colorFrom={project.colorFrom}
+      colorTo={project.colorTo}
+      textColor={project.textColor ?? ''}
+      config={config}
+      frameworks={frameworks}
+      versions={project.availableVersions}
+      repo={project.repo}
+    >
+      <Outlet />
+    </DocsLayout>
+  )
+}

package/template/app/routes/$lang.$project.$version.tsx

@@ -0,0 +1,69 @@
+import {
+  createFileRoute,
+  notFound,
+  redirect,
+  Outlet,
+  Link,
+} from '@tanstack/react-router'
+import { findProject, siteConfig, isSingleProject } from '~/site.config'
+
+export const Route = createFileRoute('/$lang/$project/$version')({
+  staleTime: 1000 * 60 * 5,
+  beforeLoad: ({ params }) => {
+    const { lang, project: projectId, version } = params
+    const project = findProject(projectId)
+
+    if (!project) {
+      throw notFound()
+    }
+
+    // Redirect "latest" to actual latest version (skip if latestVersion is literally 'latest')
+    if (version === 'latest' && project.latestVersion !== 'latest') {
+      throw redirect({
+        params: { ...params, version: project.latestVersion } as never,
+      })
+    }
+
+    // Validate version
+    if (version !== 'latest' && !project.availableVersions.includes(version)) {
+      throw redirect({
+        params: { ...params, version: project.latestVersion } as never,
+      })
+    }
+  },
+  component: () => <Outlet />,
+  staticData: {
+    Title: () => {
+      const { project: projectId, version, lang } = Route.useParams()
+      const project = findProject(projectId)
+
+      if (!project) {
+        return null
+      }
+
+      const projectName = project.name
+      const resolvedVersion =
+        version === 'latest' ? project.latestVersion : version!
+      const gradientText = `inline-block text-transparent bg-clip-text bg-linear-to-r ${project.colorFrom} ${project.colorTo}`
+      return (
+        <Link
+          to={`/$lang/$project`}
+          params={{ lang, project: projectId }}
+          className="relative whitespace-nowrap"
+        >
+          <span className={`${gradientText}`}>{projectName}</span>{' '}
+          {resolvedVersion && resolvedVersion !== 'latest' && (
+            <>
+              <span className="text-sm absolute right-0 top-0 font-normal normal-case">
+                {resolvedVersion}
+              </span>
+              <span className="text-sm opacity-0 normal-case">
+                {resolvedVersion}
+              </span>
+            </>
+          )}
+        </Link>
+      )
+    },
+  },
+})

package/template/app/routes/$lang.$project.docs.$.tsx

@@ -0,0 +1,104 @@
+import {
+  createFileRoute,
+  notFound,
+} from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { siteConfig, findProject } from '~/site.config'
+import { Doc } from '~/components/Doc'
+
+const fetchDoc = createServerFn({ method: 'GET' })
+  .inputValidator(
+    (data: { project: string; version: string; lang: string; slug: string }) =>
+      data,
+  )
+  .handler(async ({ data }) => {
+    const { loadDoc } = await import('~/utils/docs.server')
+    return loadDoc(data.project, data.version, data.lang, data.slug)
+  })
+
+export const Route = createFileRoute('/$lang/$project/docs/$')({
+  staleTime: 1000 * 60 * 5,
+  beforeLoad: ({ params }) => {
+    const project = findProject(params.project)
+
+    // This route only works when hideLatestVersion is enabled
+    if (!project || !siteConfig.hideLatestVersion) {
+      throw notFound()
+    }
+  },
+  loader: async ({ params }) => {
+    const { lang, project: projectId, _splat: slug } = params
+    if (!slug) throw notFound()
+
+    const project = findProject(projectId)!
+
+    try {
+      return await fetchDoc({
+        data: {
+          project: projectId,
+          version: project.latestVersion,
+          lang,
+          slug,
+        },
+      })
+    } catch (error) {
+      throw notFound()
+    }
+  },
+  head: ({ loaderData, params }) => {
+    const project = findProject(params.project)
+    const title = loaderData?.meta?.title
+    const projectName = project?.name || siteConfig.name
+
+    return {
+      meta: [
+        {
+          title: title ? `${title} | ${projectName} Docs` : `${projectName} Docs`,
+        },
+        ...(loaderData?.meta?.description
+          ? [{ name: 'description', content: loaderData.meta.description }]
+          : []),
+      ],
+    }
+  },
+  headers: () => {
+    return {
+      'cache-control': 'public, max-age=60, must-revalidate',
+      'cdn-cache-control':
+        'max-age=600, stale-while-revalidate=3600, durable',
+      vary: 'Accept-Encoding',
+    }
+  },
+  component: VersionlessDocsPage,
+  errorComponent: DocNotFound,
+})
+
+function VersionlessDocsPage() {
+  const loaderData = Route.useLoaderData()
+  const { project: projectId } = Route.useParams()
+  const project = findProject(projectId)!
+
+  return (
+    <Doc
+      title={loaderData.meta?.title || ''}
+      content={loaderData.content}
+      isFallback={loaderData.isFallback}
+      filePath={loaderData.filePath}
+      repo={project.repo}
+      branch={project.latestBranch}
+    />
+  )
+}
+
+function DocNotFound() {
+  return (
+    <div className="flex-1 flex items-center justify-center py-20">
+      <div className="text-center">
+        <h1 className="text-2xl font-bold mb-2">Page Not Found</h1>
+        <p className="text-gray-500 dark:text-gray-400">
+          The document you are looking for does not exist.
+        </p>
+      </div>
+    </div>
+  )
+}

package/template/app/routes/$lang.$project.docs.index.tsx

@@ -0,0 +1,20 @@
+import { createFileRoute, notFound, redirect } from '@tanstack/react-router'
+import { siteConfig, findProject } from '~/site.config'
+
+export const Route = createFileRoute('/$lang/$project/docs/')({
+  beforeLoad: ({ params }) => {
+    const project = findProject(params.project)
+
+    if (!project || !siteConfig.hideLatestVersion) {
+      throw notFound()
+    }
+
+    throw redirect({
+      from: '/$lang/$project/docs',
+      to: './$',
+      params: {
+        _splat: project.defaultDocs || 'overview',
+      },
+    })
+  },
+})

package/template/app/routes/$lang.$project.docs.tsx

@@ -0,0 +1,79 @@
+import {
+  createFileRoute,
+  notFound,
+  Outlet,
+} from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { siteConfig, findProject } from '~/site.config'
+import { DocsLayout } from '~/components/DocsLayout'
+import { frameworkOptions } from '~/config/frameworks'
+import type { Framework } from '~/config/frameworks'
+
+const fetchDocsConfig = createServerFn({ method: 'GET' })
+  .inputValidator((data: { project: string; version: string }) => data)
+  .handler(async ({ data }) => {
+    const { loadDocsConfig } = await import('~/utils/docs.server')
+    return loadDocsConfig(data.project, data.version)
+  })
+
+export const Route = createFileRoute('/$lang/$project/docs')({
+  staleTime: 1000 * 60 * 5,
+  beforeLoad: ({ params }) => {
+    const project = findProject(params.project)
+
+    // This route only works when hideLatestVersion is enabled
+    if (!project || !siteConfig.hideLatestVersion) {
+      throw notFound()
+    }
+  },
+  loader: async ({ params }) => {
+    const project = findProject(params.project)!
+    const config = await fetchDocsConfig({
+      data: { project: project.id, version: project.latestVersion },
+    })
+    return { config }
+  },
+  component: VersionlessDocsLayout,
+  head: ({ params }) => {
+    const project = findProject(params.project)
+    return {
+      meta: [{ title: project ? `${project.name} Docs` : siteConfig.name }],
+    }
+  },
+  headers: () => ({
+    'cache-control': 'public, max-age=0, must-revalidate',
+    'cdn-cache-control': 'max-age=300, stale-while-revalidate=300, durable',
+  }),
+})
+
+function VersionlessDocsLayout() {
+  const { project: projectId } = Route.useParams()
+  const { config } = Route.useLoaderData()
+  const project = findProject(projectId)
+
+  if (!project) {
+    return <div>Project not found: {projectId}</div>
+  }
+
+  const frameworks: Framework[] = (project.frameworks ?? []).filter(
+    (f): f is Framework =>
+      frameworkOptions.some((opt) => opt.value === f),
+  )
+
+  return (
+    <DocsLayout
+      name={project.name}
+      version={project.latestVersion}
+      colorFrom={project.colorFrom}
+      colorTo={project.colorTo}
+      textColor={project.textColor ?? ''}
+      config={config}
+      frameworks={frameworks}
+      versions={project.availableVersions}
+      repo={project.repo}
+      docsBasePath="/$lang/$project/docs"
+    >
+      <Outlet />
+    </DocsLayout>
+  )
+}