docs-i18n 0.6.3 → 0.7.1

package/template/app/components/Navbar.tsx

@@ -0,0 +1,430 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+import {
+  Link,
+  useLocation,
+  useMatches,
+} from '@tanstack/react-router'
+import {
+  Menu,
+  X,
+  Grid2X2,
+} from 'lucide-react'
+import { ThemeToggle } from './ThemeToggle'
+import { SearchButton } from './SearchButton'
+import { siteConfig, findProject, isSingleProject } from '~/site.config'
+import type { ProjectConfig } from '~/types'
+import { useClickOutside } from '~/hooks/useClickOutside'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { DiscordIcon } from '~/components/icons/DiscordIcon'
+import { BrandXIcon } from '~/components/icons/BrandXIcon'
+import { BSkyIcon } from '~/components/icons/BSkyIcon'
+import { YouTubeIcon } from '~/components/icons/YouTubeIcon'
+import { LocaleSwitcher } from './LocaleSwitcher'
+import { Card } from '~/components/Card'
+
+type LogoProps = {
+  showMenu: boolean
+  setShowMenu: React.Dispatch<React.SetStateAction<boolean>>
+  menuButtonRef: React.RefObject<HTMLButtonElement | null>
+  title?: React.ComponentType<any> | null
+}
+
+const LogoSection = ({
+  showMenu,
+  setShowMenu,
+  menuButtonRef,
+  title,
+}: LogoProps) => {
+  const singleProject = isSingleProject()
+  const pointerInsideButtonRef = React.useRef(false)
+  const toggleMenu = () => {
+    setShowMenu((prev) => !prev)
+  }
+  return (
+    <>
+      {/* Hide project menu button for single-project sites */}
+      {!singleProject && (
+        <button
+          aria-label="Open Menu"
+          className={twMerge(
+            'flex items-center justify-center',
+            'transition-all duration-300 h-8 px-2 py-1 lg:px-0',
+            // At lg: only visible when Title exists (flyout mode)
+            // Below lg: always visible
+            title
+              ? 'lg:w-9 lg:opacity-100 lg:translate-x-0'
+              : 'lg:w-0 lg:opacity-0 lg:-translate-x-full',
+          )}
+          ref={menuButtonRef}
+          onClick={toggleMenu}
+          onPointerEnter={(e) => {
+            // Enable hover to open flyout at md+ (but not touch)
+            if (window.innerWidth < 768 || e.pointerType === 'touch') return
+            if (pointerInsideButtonRef.current) return
+            pointerInsideButtonRef.current = true
+            setShowMenu(true)
+          }}
+          onPointerLeave={() => {
+            pointerInsideButtonRef.current = false
+          }}
+        >
+          {showMenu ? <X /> : <Menu />}
+        </button>
+      )}
+      <Link
+        to="/"
+        className={twMerge(`inline-flex items-center gap-1.5 cursor-pointer`)}
+      >
+        <div>{siteConfig.name}</div>
+      </Link>
+    </>
+  )
+}
+
+const MobileCard = ({
+  children,
+  isActive,
+}: {
+  children: React.ReactNode
+  isActive?: boolean
+}) => (
+  <Card
+    className={twMerge(
+      'md:contents border-gray-200/50 dark:border-gray-700/50 shadow-sm',
+      isActive && 'ring-2 ring-gray-400/30 dark:ring-gray-500/30',
+    )}
+  >
+    {children}
+  </Card>
+)
+
+export function Navbar({ children }: { children: React.ReactNode }) {
+  const matches = useMatches()
+
+  const { Title, project } = React.useMemo(() => {
+    const match = [...matches].reverse().find((m) => m.staticData.Title)
+    const params = match?.params as { project?: string } | undefined
+    const projectId = params?.project
+
+    return {
+      Title: match?.staticData.Title ?? null,
+      project: projectId ? findProject(projectId) : null,
+    }
+  }, [matches])
+
+  const containerRef = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    const updateContainerHeight = () => {
+      if (containerRef.current) {
+        const height = containerRef.current.offsetHeight
+        document.documentElement.style.setProperty(
+          '--navbar-height',
+          `${height}px`,
+        )
+      }
+    }
+
+    updateContainerHeight() // Initial call to set the height
+
+    window.addEventListener('resize', updateContainerHeight)
+    return () => {
+      window.removeEventListener('resize', updateContainerHeight)
+    }
+  }, [])
+
+  const [showMenu, setShowMenu] = React.useState(false)
+  const largeMenuRef = React.useRef<HTMLDivElement>(null)
+  const menuButtonRef = React.useRef<HTMLButtonElement>(null)
+
+  // Close mobile menu when clicking outside
+  const smallMenuRef = useClickOutside<HTMLDivElement>({
+    enabled: showMenu,
+    onClickOutside: () => setShowMenu(false),
+    additionalRefs: [largeMenuRef, menuButtonRef],
+  })
+
+  const socialLinks = (
+    <div className="flex items-center [&_a]:p-1.5 [&_a]:opacity-50 [&_a:hover]:opacity-100 [&_a]:transition-opacity [&_svg]:text-sm">
+      <a
+        href={`https://github.com/${project?.repo ?? siteConfig.repo.replace('https://github.com/', '')}`}
+        aria-label={`Follow on GitHub`}
+      >
+        <GithubIcon />
+      </a>
+      <a href="https://x.com/tan_stack" aria-label="Follow TanStack on X.com">
+        <BrandXIcon />
+      </a>
+      <a
+        href="https://bsky.app/profile/tanstack.com"
+        aria-label="Follow TanStack on Besky"
+      >
+        <BSkyIcon />
+      </a>
+      <a
+        href="https://youtube.com/@tan_stack"
+        aria-label="Subscribe to TanStack on YouTube"
+      >
+        <YouTubeIcon />
+      </a>
+      <a href="https://tlinz.com/discord" aria-label="Join TanStack Discord">
+        <DiscordIcon />
+      </a>
+    </div>
+  )
+
+  const navbar = (
+    <div
+      className={twMerge(
+        'w-full p-2 fixed top-0 z-[100] bg-white/90 dark:bg-black/90 backdrop-blur-lg',
+        'flex items-center justify-between gap-4',
+        'border-b border-gray-500/20',
+      )}
+      ref={containerRef}
+    >
+      <div className="flex items-center min-w-0">
+        <div className="flex items-center gap-2 font-black text-xl uppercase min-w-0">
+          <div className={twMerge(`flex items-center group flex-shrink-0`)}>
+            <LogoSection
+              menuButtonRef={menuButtonRef}
+              setShowMenu={setShowMenu}
+              showMenu={showMenu}
+              title={Title}
+            />
+          </div>
+          {Title ? (
+            <div className="truncate">
+              <Title />
+            </div>
+          ) : null}
+        </div>
+      </div>
+      <div className="flex items-center gap-1.5 sm:gap-2">
+        <div className="hidden min-[750px]:block">{socialLinks}</div>
+        <div className="hidden sm:block">
+          <SearchButton />
+        </div>
+        <ThemeToggle />
+        <LocaleSwitcher />
+      </div>
+    </div>
+  )
+
+  const activeProject = useLocation({
+    select: (location) => {
+      return siteConfig.projects.find((p) => {
+        const projectPath = `/${siteConfig.defaultLocale}/${p.id}`
+        return location.pathname.includes(`/${p.id}/`)
+      })
+    },
+  })
+
+  const linkClasses = `flex items-center justify-between gap-2 group px-3 py-3 md:px-2 md:py-1 rounded-lg hover:bg-gray-500/10 font-bold text-base md:text-sm`
+
+  const items = (
+    <div className="contents md:block">
+      <div className="contents md:block">
+        {siteConfig.projects.map((proj, i) => {
+          const [_, name] = proj.name.includes(' ')
+            ? proj.name.split(' ')
+            : ['', proj.name]
+          const isActive = proj.id === activeProject?.id
+
+          return (
+            <div key={i} className="contents md:block">
+              <>
+                {/* Mobile: Direct link with Card */}
+                <MobileCard isActive={isActive}>
+                  <Link
+                    to={(siteConfig.hideLatestVersion ? `/${siteConfig.defaultLocale}/${proj.id}/docs` : `/${siteConfig.defaultLocale}/${proj.id}/${proj.latestVersion}`) as any}
+                    className={twMerge(
+                      linkClasses,
+                      'md:hidden',
+                      isActive ? 'bg-gray-500/5' : '',
+                    )}
+                  >
+                    <span
+                      className={twMerge(
+                        'w-4 h-4 md:w-3 md:h-3 rounded-sm',
+                        proj.bgStyle,
+                      )}
+                    />
+                    <span
+                      style={{
+                        viewTransitionName: `library-name-${proj.id}`,
+                      }}
+                      className={twMerge(
+                        'flex-1 text-left',
+                        isActive ? 'font-bold' : '',
+                      )}
+                    >
+                      {name}
+                    </span>
+                    {proj.badge ? (
+                      <span
+                        className={twMerge(
+                          `px-2 py-px uppercase font-black rounded-md text-[.65rem]`,
+                          'border-2 bg-transparent',
+                          proj.textStyle,
+                          proj.borderStyle,
+                        )}
+                      >
+                        {proj.badge}
+                      </span>
+                    ) : null}
+                  </Link>
+                </MobileCard>
+                {/* Desktop: Simple link */}
+                <Link
+                  to={(siteConfig.hideLatestVersion ? `/${siteConfig.defaultLocale}/${proj.id}/docs` : `/${siteConfig.defaultLocale}/${proj.id}/${proj.latestVersion}`) as any}
+                  className={twMerge(
+                    linkClasses,
+                    'hidden md:flex',
+                    isActive ? 'bg-gray-500/10 dark:bg-gray-500/30' : '',
+                  )}
+                >
+                  <span
+                    className={twMerge('w-3 h-3 rounded-sm', proj.bgStyle)}
+                  />
+                  <span
+                    style={{
+                      viewTransitionName: `library-name-${proj.id}`,
+                    }}
+                    className={twMerge(
+                      'flex-1 text-left',
+                      isActive ? 'font-bold' : '',
+                    )}
+                  >
+                    {name}
+                  </span>
+                  {proj.badge ? (
+                    <span
+                      className={twMerge(
+                        `px-2 py-px uppercase font-black rounded-md text-[.6rem]`,
+                        'border bg-transparent',
+                        'border-current text-current',
+                        'opacity-90 group-hover:opacity-100 transition-opacity',
+                        proj.textColor,
+                      )}
+                    >
+                      {proj.badge}
+                    </span>
+                  ) : null}
+                </Link>
+              </>
+            </div>
+          )
+        })}
+        <div className="py-2 hidden md:block col-span-2">
+          <div className="bg-gray-500/10 h-px" />
+        </div>
+      </div>
+      {/* Mobile separator */}
+      <div className="col-span-2 sm:col-span-3 py-3 md:hidden">
+        <div className="bg-gray-500/10 h-px" />
+      </div>
+    </div>
+  )
+
+  const smallMenu = showMenu ? (
+    <div
+      ref={smallMenuRef}
+      className="md:hidden bg-white/50 dark:bg-black/60 backdrop-blur-[20px] z-50
+    fixed top-[var(--navbar-height)] left-0 right-0 max-h-[calc(100dvh-var(--navbar-height))] overflow-y-auto
+    "
+    >
+      <div
+        className="flex flex-col whitespace-nowrap overflow-y-auto
+          border-t border-gray-500/20 text-lg bg-white/80 dark:bg-black/90"
+      >
+        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+        <div
+          onClick={(event) => {
+            const target = event.target as HTMLElement
+            if (target.closest('[data-collapsible-trigger]')) {
+              return
+            }
+            if (target.closest('a') || target.closest('button')) {
+              setShowMenu(false)
+            }
+          }}
+        >
+          <div className="px-3 pt-3 sm:hidden">
+            <SearchButton className="w-full py-3 text-base [&_svg]:w-5 [&_svg]:h-5" />
+          </div>
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 text-base p-3 border-b border-gray-500/20">
+            {items}
+          </div>
+          <div className="p-4 sm:hidden">{socialLinks}</div>
+        </div>
+      </div>
+    </div>
+  ) : null
+
+  const inlineMenu = !Title
+
+  const leaveTimer = React.useRef<NodeJS.Timeout | undefined>(undefined)
+
+  const largeMenu = (
+    <>
+      <div
+        ref={largeMenuRef}
+        className={twMerge(
+          `hidden md:flex flex-col
+      h-[calc(100dvh-var(--navbar-height))] z-20
+      bg-white/50 dark:bg-black/30 border-r border-gray-500/20`,
+          'transition-all duration-300',
+          'z-50',
+          // md breakpoint: always flyout
+          'md:fixed md:top-[var(--navbar-height)] md:bg-white md:dark:bg-black/90 md:backdrop-blur-lg md:shadow-xl',
+          !showMenu && 'md:-translate-x-full',
+          showMenu && 'md:translate-x-0',
+          // lg breakpoint: inline when no Title, flyout when Title
+          inlineMenu &&
+            'lg:sticky lg:top-[var(--navbar-height)] lg:translate-x-0 lg:bg-white/50 lg:dark:bg-black/30 lg:backdrop-blur-none lg:shadow-none',
+          !inlineMenu &&
+            'lg:fixed lg:top-[var(--navbar-height)] lg:bg-white lg:dark:bg-black/90 lg:backdrop-blur-lg lg:shadow-xl',
+          !inlineMenu && !showMenu && 'lg:-translate-x-full',
+          !inlineMenu && showMenu && 'lg:translate-x-0',
+        )}
+        onPointerEnter={(e) => {
+          if (e.pointerType === 'touch') return
+          clearTimeout(leaveTimer.current)
+        }}
+        onPointerLeave={(e) => {
+          if (e.pointerType === 'touch') return
+          leaveTimer.current = setTimeout(() => {
+            setShowMenu(false)
+          }, 300)
+        }}
+      >
+        <div className="flex-1 flex flex-col gap-4 whitespace-nowrap overflow-y-auto text-base pb-[50px] min-w-[220px]">
+          <div className="flex flex-col gap-1 text-sm p-2">{items}</div>
+        </div>
+      </div>
+    </>
+  )
+
+  const singleProject = isSingleProject()
+
+  return (
+    <>
+      {navbar}
+      <div
+        className={twMerge(
+          `min-h-[calc(100dvh-var(--navbar-height))] flex flex-col
+          min-w-0 md:flex-row w-full transition-all duration-300
+          pt-[var(--navbar-height)]`,
+        )}
+      >
+        {/* Hide project switcher menus for single-project sites */}
+        {!singleProject && smallMenu}
+        {!singleProject && largeMenu}
+        <div className="flex-1 min-w-0 flex flex-col w-full min-h-0">
+          {children}
+        </div>
+      </div>
+    </>
+  )
+}

package/template/app/components/PostNotFound.tsx

@@ -0,0 +1,20 @@
+import { Link } from '@tanstack/react-router'
+
+export function PostNotFound() {
+  return (
+    <div className="flex-1 p-4 flex flex-col items-center justify-center gap-6">
+      <h1 className="opacity-10 flex flex-col text-center font-black">
+        <div className="text-7xl leading-none">404</div>
+        <div className="text-3xl leading-none">Not Found</div>
+      </h1>
+      <div className="text-lg">Post not found.</div>
+      <Link
+        to="/$lang/blog"
+        params={(prev: Record<string, string>) => ({ lang: prev.lang || 'en' })}
+        className="px-4 py-2 rounded-lg bg-gray-600 text-white hover:bg-gray-700 transition-colors"
+      >
+        Blog Home
+      </Link>
+    </div>
+  )
+}

package/template/app/components/SearchButton.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react'
+import { Command, Search } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import { useSearchContext } from '~/contexts/SearchContext'
+
+interface SearchButtonProps {
+  className?: string
+  children?: React.ReactNode
+}
+
+export function SearchButton({ className }: SearchButtonProps) {
+  const { openSearch } = useSearchContext()
+
+  return (
+    <button
+      onClick={openSearch}
+      className={twMerge(
+        'flex items-center gap-2 px-2 py-1 rounded-md text-sm',
+        'bg-gray-500/5 dark:bg-gray-500/30',
+        'hover:bg-gray-500/10 dark:hover:bg-gray-500/40',
+        'transition-colors duration-200',
+        className,
+      )}
+    >
+      <Search className="w-3.5 h-3.5" />
+      <span>Search...</span>
+      <div className="flex items-center bg-gray-500/10 dark:bg-gray-500/30 rounded px-1 py-0.5 gap-0.5 text-[10px] whitespace-nowrap">
+        <Command className="w-2.5 h-2.5" /> K
+      </div>
+    </button>
+  )
+}

package/template/app/components/Select.tsx

@@ -0,0 +1,103 @@
+import { ReactNode } from 'react'
+import { Check, ChevronsUpDown } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownContent,
+  DropdownItem,
+} from './Dropdown'
+
+export type SelectOption = {
+  label: string
+  value: string
+  logo?: string
+}
+
+export type SelectProps<T extends SelectOption> = {
+  className?: string
+  icon?: ReactNode
+  selected: string
+  available: T[]
+  onSelect: (selected: T) => void
+}
+
+export function Select<T extends SelectOption>({
+  className = '',
+  icon,
+  selected,
+  available,
+  onSelect,
+}: SelectProps<T>) {
+  if (available.length === 0) {
+    return null
+  }
+
+  const selectedOption = available.find(({ value }) => selected === value)
+
+  if (!selectedOption) {
+    return null
+  }
+
+  return (
+    <div className={twMerge('w-full', className)}>
+      <Dropdown>
+        <DropdownTrigger>
+          <button className="relative items-center w-full gap-2 flex hover:bg-gray-500/10 cursor-pointer rounded-md py-1.5 px-2 text-left focus:outline-none text-sm">
+            {icon ? (
+              <span className="flex items-center justify-center w-6 h-6 rounded border border-gray-500/20">
+                {icon}
+              </span>
+            ) : selectedOption.logo ? (
+              <span className="flex items-center justify-center w-6 h-6 rounded border border-gray-500/20">
+                <img
+                  height={16}
+                  width={16}
+                  src={selectedOption.logo}
+                  alt={`${selectedOption.label} logo`}
+                />
+              </span>
+            ) : null}
+            <span className="truncate font-medium">{selectedOption.label}</span>
+            <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+              <ChevronsUpDown
+                className="h-4 w-4 opacity-40"
+                aria-hidden="true"
+              />
+            </span>
+          </button>
+        </DropdownTrigger>
+        <DropdownContent align="start" className="max-h-60 overflow-auto">
+          {available.map((option) => (
+            <DropdownItem
+              key={option.value}
+              onSelect={() => onSelect(option)}
+              className={twMerge(
+                'pr-8',
+                option.logo ? 'pl-2' : '',
+                selected === option.value ? 'font-medium' : 'font-normal',
+              )}
+            >
+              {option.logo ? (
+                <img
+                  height={18}
+                  width={18}
+                  src={option.logo}
+                  alt={`${option.label} logo`}
+                  className="flex-shrink-0"
+                />
+              ) : null}
+              <span className="truncate">{option.label}</span>
+              {selected === option.value ? (
+                <Check
+                  className="h-4 w-4 absolute right-2 text-gray-800 dark:text-gray-400"
+                  aria-hidden="true"
+                />
+              ) : null}
+            </DropdownItem>
+          ))}
+        </DropdownContent>
+      </Dropdown>
+    </div>
+  )
+}

package/template/app/components/Spinner.tsx

@@ -0,0 +1,18 @@
+import { twMerge } from 'tailwind-merge'
+import { Loader2 } from 'lucide-react'
+
+interface SpinnerProps {
+  className?: string
+}
+
+export function Spinner({ className }: SpinnerProps) {
+  return (
+    <Loader2
+      className={twMerge(
+        'animate-spin text-gray-900 dark:text-white text-2xl',
+        className,
+      )}
+      aria-label="Loading"
+    />
+  )
+}