docs-i18n 0.6.3 → 0.7.1

package/template/app/components/Dropdown.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { twMerge } from 'tailwind-merge'
+
+type DropdownProps = {
+  children: React.ReactNode
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  modal?: boolean
+}
+
+type DropdownTriggerProps = {
+  children: React.ReactNode
+  className?: string
+  asChild?: boolean
+}
+
+type DropdownContentProps = {
+  children: React.ReactNode
+  className?: string
+  align?: 'start' | 'center' | 'end'
+  sideOffset?: number
+}
+
+type DropdownItemProps = {
+  children: React.ReactNode
+  className?: string
+  onSelect?: () => void
+  asChild?: boolean
+}
+
+type DropdownSeparatorProps = {
+  className?: string
+}
+
+export function Dropdown({
+  children,
+  open,
+  onOpenChange,
+  modal = false,
+}: DropdownProps) {
+  return (
+    <DropdownMenu.Root open={open} onOpenChange={onOpenChange} modal={modal}>
+      {children}
+    </DropdownMenu.Root>
+  )
+}
+
+export function DropdownTrigger({
+  children,
+  className,
+  asChild = true,
+}: DropdownTriggerProps) {
+  return (
+    <DropdownMenu.Trigger asChild={asChild} className={className}>
+      {children}
+    </DropdownMenu.Trigger>
+  )
+}
+
+export function DropdownContent({
+  children,
+  className,
+  align = 'end',
+  sideOffset = 6,
+}: DropdownContentProps) {
+  return (
+    <DropdownMenu.Portal>
+      <DropdownMenu.Content
+        align={align}
+        sideOffset={sideOffset}
+        className={twMerge(
+          'dropdown-content z-[1000] min-w-48 rounded-lg p-1.5',
+          'border border-gray-200 dark:border-gray-700',
+          'bg-white dark:bg-gray-800',
+          'shadow-lg',
+          className,
+        )}
+      >
+        {children}
+      </DropdownMenu.Content>
+    </DropdownMenu.Portal>
+  )
+}
+
+export function DropdownItem({
+  children,
+  className,
+  onSelect,
+  asChild,
+}: DropdownItemProps) {
+  return (
+    <DropdownMenu.Item
+      asChild={asChild}
+      onSelect={onSelect}
+      className={twMerge(
+        'flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 outline-none',
+        'text-sm text-gray-700 dark:text-gray-300',
+        'hover:bg-gray-100 dark:hover:bg-gray-700/50',
+        'focus:bg-gray-100 dark:focus:bg-gray-700/50',
+        'transition-colors duration-150',
+        className,
+      )}
+    >
+      {children}
+    </DropdownMenu.Item>
+  )
+}
+
+export function DropdownSeparator({ className }: DropdownSeparatorProps) {
+  return (
+    <DropdownMenu.Separator
+      className={twMerge('my-1 h-px bg-gray-200 dark:bg-gray-700', className)}
+    />
+  )
+}

package/template/app/components/FallbackBanner.tsx

@@ -0,0 +1,36 @@
+type FallbackBannerProps = {
+  /** The display name of the requested locale (e.g., "Japanese", "Spanish") */
+  locale: string
+}
+
+/**
+ * Warning banner displayed when a page has not been translated to the requested locale.
+ * Uses the same styling as GitHub-style markdown alerts for visual consistency.
+ */
+export function FallbackBanner({ locale }: FallbackBannerProps) {
+  return (
+    <div className="markdown-alert markdown-alert-warning mb-4">
+      <div className="markdown-alert-title">
+        <svg
+          className="octicon octicon-info mr-2"
+          viewBox="0 0 16 16"
+          width="16"
+          height="16"
+          aria-hidden="true"
+        >
+          <path
+            fillRule="evenodd"
+            d="M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"
+          ></path>
+        </svg>
+        Translation Unavailable
+      </div>
+      <div className="markdown-alert-content">
+        <p>
+          This page has not been translated to {locale} yet. You are viewing the
+          English version.
+        </p>
+      </div>
+    </div>
+  )
+}

package/template/app/components/Footer.tsx

@@ -0,0 +1,29 @@
+import { Link } from '@tanstack/react-router'
+import { Card } from './Card'
+
+export function Footer() {
+  return (
+    <Card
+      className={`relative flex flex-col items-start justify-center gap-4 p-8
+      max-w-(--breakpoint-lg) mx-auto text-sm`}
+    >
+      <div className={`grid gap-1 sm:grid-cols-2 md:grid-cols-3`}>
+        <div>
+          <Link to="/">Home</Link>
+        </div>
+        <div>
+          <a
+            href="https://github.com/tanstack"
+            target="_blank"
+            rel="noreferrer"
+          >
+            GitHub
+          </a>
+        </div>
+      </div>
+      <div className={`text-center opacity-60`}>
+        &copy; {new Date().getFullYear()} TanStack
+      </div>
+    </Card>
+  )
+}

package/template/app/components/FrameworkSelect.tsx

@@ -0,0 +1,150 @@
+import * as React from 'react'
+import { create } from 'zustand'
+import { useNavigate, useParams } from '@tanstack/react-router'
+import { Select } from './Select'
+import {
+  type Framework,
+  type FrameworkOption,
+  getFrameworkOptions,
+} from '~/config/frameworks'
+
+export function FrameworkSelect({
+  frameworks,
+}: {
+  frameworks: Framework[]
+}) {
+  const frameworkConfig = useFrameworkConfig({
+    frameworks,
+  })
+  const selectedFramework = frameworkConfig.available.find(
+    (f) => f.value === frameworkConfig.selected,
+  )
+  return (
+    <Select
+      className="w-full"
+      icon={
+        selectedFramework?.logo ? (
+          <img
+            src={selectedFramework.logo}
+            alt={selectedFramework.label}
+            className="w-4 h-4"
+          />
+        ) : undefined
+      }
+      selected={frameworkConfig.selected}
+      available={frameworkConfig.available}
+      onSelect={frameworkConfig.onSelect}
+    />
+  )
+}
+
+// Let's use zustand to wrap the local storage logic. This way
+// we'll get subscriptions for free and we can use it in other
+// components if we need to.
+export const useLocalCurrentFramework = create<{
+  currentFramework?: string
+  setCurrentFramework: (framework: string) => void
+}>((set) => ({
+  currentFramework:
+    typeof document !== 'undefined'
+      ? localStorage.getItem('framework') || undefined
+      : undefined,
+  setCurrentFramework: (framework: string) => {
+    localStorage.setItem('framework', framework)
+    set({ currentFramework: framework })
+  },
+}))
+
+/**
+ * Get the stored framework preference from localStorage.
+ * Safe to call during SSR (returns undefined).
+ */
+export function getStoredFrameworkPreference(): string | undefined {
+  if (typeof window === 'undefined') return undefined
+  return localStorage.getItem('framework') || undefined
+}
+
+/**
+ * Hook to persist framework preference (localStorage only, no auth).
+ */
+export function usePersistFrameworkPreference() {
+  const localCurrentFramework = useLocalCurrentFramework()
+
+  return React.useCallback(
+    (framework: string) => {
+      localCurrentFramework.setCurrentFramework(framework)
+    },
+    [localCurrentFramework],
+  )
+}
+
+function useFrameworkConfig({ frameworks }: { frameworks: Framework[] }) {
+  const currentFramework = useCurrentFramework(frameworks)
+
+  const frameworkConfig = React.useMemo(() => {
+    return {
+      label: 'Framework',
+      selected: frameworks.includes(currentFramework.framework as Framework)
+        ? currentFramework.framework
+        : 'react',
+      available: getFrameworkOptions(frameworks),
+      onSelect: (option: { label: string; value: string }) => {
+        currentFramework.setFramework(option.value)
+      },
+    }
+  }, [frameworks, currentFramework])
+
+  return frameworkConfig
+}
+
+/**
+ * Use framework in URL path
+ * Otherwise use framework in localStorage if it exists
+ * Otherwise fallback to react
+ */
+export function useCurrentFramework(frameworks: Framework[]) {
+  const navigate = useNavigate()
+
+  const { framework: paramsFramework } = useParams({
+    strict: false,
+  })
+
+  const localCurrentFramework = useLocalCurrentFramework()
+
+  // Priority: URL params > localStorage > 'react'
+  let framework = (paramsFramework ||
+    localCurrentFramework.currentFramework ||
+    'react') as Framework
+
+  framework = frameworks.includes(framework) ? framework : 'react'
+
+  const setFramework = React.useCallback(
+    (framework: string) => {
+      navigate({
+        params: { framework } as any,
+      })
+      localCurrentFramework.setCurrentFramework(framework)
+    },
+    [localCurrentFramework, navigate],
+  )
+
+  React.useEffect(() => {
+    // Set the framework in localStorage if it doesn't exist
+    if (!localCurrentFramework.currentFramework) {
+      localCurrentFramework.setCurrentFramework(framework)
+    }
+
+    // Set the framework in localStorage if it doesn't match the URL
+    if (
+      paramsFramework &&
+      paramsFramework !== localCurrentFramework.currentFramework
+    ) {
+      localCurrentFramework.setCurrentFramework(paramsFramework)
+    }
+  })
+
+  return {
+    framework,
+    setFramework,
+  }
+}

package/template/app/components/LibraryCard.tsx

@@ -0,0 +1,178 @@
+import { Link } from '@tanstack/react-router'
+import { twMerge } from 'tailwind-merge'
+import type { ProjectConfig } from '~/types'
+import { siteConfig, isSingleProject } from '~/site.config'
+
+export default function LibraryCard({
+  project,
+  index = 0,
+}: {
+  project: ProjectConfig
+  index?: number
+}) {
+  // Use simplified URL for single-project sites
+  const singleProject = isSingleProject()
+  const to = singleProject
+    ? '/$lang/docs/$'
+    : siteConfig.hideLatestVersion
+      ? '/$lang/$project/docs/$'
+      : '/$lang/$project/$version/docs/$'
+
+  const params = singleProject
+    ? {
+        lang: siteConfig.defaultLocale,
+        _splat: project.defaultDocs || 'overview',
+      }
+    : siteConfig.hideLatestVersion
+      ? {
+          lang: siteConfig.defaultLocale,
+          project: project.id,
+          _splat: project.defaultDocs || 'overview',
+        }
+      : {
+          lang: siteConfig.defaultLocale,
+          project: project.id,
+          version: project.latestVersion,
+          _splat: project.defaultDocs || 'overview',
+        }
+
+  return (
+    <Link
+      to={to}
+      params={params as any}
+      className={twMerge(
+        // General
+        'p-8 relative group z-0 min-h-[250px] xl:min-h-[220px] shadow-sm hover:shadow-none bg-white dark:bg-gray-900',
+
+        // Transition
+        'transition-all duration-300 ease-out',
+
+        // Border
+        'rounded-xl border border-gray-200 dark:border-gray-800 hover:border-current/50',
+
+        // Shadow / Glow (behind everything)
+        'before:bg-current',
+        'before:content-[""] before:absolute before:inset-0 before:blur-xl before:opacity-0 hover:before:opacity-20 before:transition-all before:duration-300 before:ease-out',
+
+        // Card Background (behind content, front of shadow)
+        'after:absolute after:inset-0 after:-z-10 after:bg-white dark:after:bg-gray-900 after:backdrop-blur-sm after:rounded-xl',
+
+        // Transform
+        'hover:-translate-y-1',
+        project.textColor,
+      )}
+      style={{
+        zIndex: index,
+        willChange: 'transform',
+      }}
+    >
+      {/* Background content that will blur on hover */}
+      <div className="z-0 relative group-hover:blur-[0.5px] transition-[filter] duration-300 ease-out">
+        <div className="flex gap-2 justify-between items-center">
+          <div
+            className={twMerge(
+              `flex items-center gap-2 text-[1.2rem] font-extrabold uppercase [letter-spacing:-.04em]`,
+            )}
+          >
+            <span
+              className={twMerge(
+                'rounded-lg leading-none flex items-center',
+                'bg-current',
+              )}
+            >
+              <span className="text-white dark:text-black text-xs leading-none p-1.5 px-2 uppercase">
+                {siteConfig.name}
+              </span>
+            </span>
+            <span className="text-current">{project.name}</span>
+          </div>
+        </div>
+        {project.tagline && (
+          <div
+            className={twMerge(
+              `text-sm italic font-medium mt-3`,
+              'text-current',
+            )}
+          >
+            {project.tagline}
+          </div>
+        )}
+
+        {/* Description preview with ellipsis */}
+        {project.description && (
+          <div
+            className={`text-sm mt-3 text-gray-600 dark:text-gray-400 line-clamp-3 leading-relaxed`}
+          >
+            {project.description}
+          </div>
+        )}
+      </div>
+
+      {/* Foreground content that appears on hover */}
+      <div
+        className="absolute inset-0 z-30 bg-white/95 dark:bg-black/95 p-6 rounded-xl
+                    backdrop-blur-sm flex flex-col justify-center opacity-0 group-hover:opacity-100
+                    transition-opacity duration-300 ease-out pointer-events-none group-hover:pointer-events-auto"
+      >
+        <div
+          className={`text-sm text-gray-800 dark:text-gray-200 leading-relaxed`}
+        >
+          {project.description}
+        </div>
+        {project.frameworks && project.frameworks.length > 0 && (
+          <div className="flex flex-wrap gap-2 mt-4">
+            {project.frameworks.map((fw) => (
+              <span
+                key={fw}
+                className="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-800 rounded-full text-gray-600 dark:text-gray-400"
+              >
+                {fw.charAt(0).toUpperCase() + fw.slice(1)}
+              </span>
+            ))}
+          </div>
+        )}
+        <div className="mt-6 text-center">
+          <span
+            className="inline-flex items-center gap-2 px-4 py-2 bg-black/5 dark:bg-white/10
+                        rounded-full text-sm font-medium text-gray-900 dark:text-white"
+          >
+            Click to learn more
+            <svg
+              className="w-4 h-4 transform transition-transform duration-200 group-hover:translate-x-0.5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+      {/* Badge */}
+      {project.badge ? (
+        <div
+          className={twMerge(
+            `absolute -top-2 -right-2 z-40 px-2 py-1 rounded-md`,
+            'bg-gradient-to-r',
+            project.colorFrom,
+            project.colorTo,
+            'uppercase font-black italic text-xs',
+            'text-white',
+          )}
+          style={{
+            animation: 'pulseScale 3s infinite',
+            animationTimingFunction: 'ease-in-out',
+            animationDelay: `${index * 0.5}s`,
+          }}
+        >
+          <span>{project.badge}</span>
+        </div>
+      ) : null}
+    </Link>
+  )
+}

package/template/app/components/LocaleSwitcher.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import { useNavigate, useParams } from '@tanstack/react-router'
+import { Globe } from 'lucide-react'
+import { siteConfig } from '~/site.config'
+import { Select, type SelectOption } from './Select'
+
+export function LocaleSwitcher() {
+  const params = useParams({ strict: false }) as {
+    lang?: string
+    _splat?: string
+  }
+  const navigate = useNavigate()
+  const currentLang = params.lang || siteConfig.defaultLocale
+
+  const localeOptions: SelectOption[] = React.useMemo(
+    () =>
+      Object.entries(siteConfig.supportedLocales).map(([code, name]) => ({
+        label: name,
+        value: code,
+      })),
+    [],
+  )
+
+  const handleSelect = React.useCallback(
+    (option: SelectOption) => {
+      const newLang = option.value
+      const pathname = window.location.pathname
+      const newPath = pathname.replace(/^\/[^/]+/, `/${newLang}`)
+      navigate({ to: newPath })
+    },
+    [navigate],
+  )
+
+  return (
+    <Select
+      className="w-full"
+      icon={<Globe className="w-3.5 h-3.5 opacity-60" />}
+      selected={currentLang}
+      available={localeOptions}
+      onSelect={handleSelect}
+    />
+  )
+}