improvement(docs): overhaul docs (#1680)

* improvement(docs): overhaul docs * lint * light mode * more light mode * added llms.txt and llms-full.txt and sitemap * fixed mobile styling and position for zoom in out * finished styling * improvement(docs): overhaul docs * lint * remove dups * renaming components * cleanup
2026-09-24 15:45:35 +08:00 · 2025-10-17 22:29:55 -07:00
parent 90c34b2c46
commit d1c08daaf4
35 changed files with 1268 additions and 599 deletions
@@ -0,0 +1,134 @@
+'use client'
+
+import { type ReactNode, useState } from 'react'
+import type { PageTree } from 'fumadocs-core/server'
+import { ChevronRight } from 'lucide-react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { cn } from '@/lib/utils'
+
+function isActive(url: string, pathname: string, nested = true): boolean {
+  return url === pathname || (nested && pathname.startsWith(`${url}/`))
+}
+
+export function SidebarItem({ item }: { item: PageTree.Item }) {
+  const pathname = usePathname()
+  const active = isActive(item.url, pathname, false)
+
+  return (
+    <li className='mb-[0.0625rem] list-none'>
+      <Link
+        href={item.url}
+        className={cn(
+          'block rounded-md px-2.5 py-1.5 font-normal text-[13px] leading-tight transition-colors',
+          'text-gray-600 dark:text-gray-400',
+          !active && 'hover:bg-gray-100/60 dark:hover:bg-gray-800/40',
+          active &&
+            'bg-purple-50/80 font-medium text-purple-600 dark:bg-purple-900/15 dark:text-purple-400'
+        )}
+      >
+        {item.name}
+      </Link>
+    </li>
+  )
+}
+
+export function SidebarFolder({
+  item,
+  level,
+  children,
+}: {
+  item: PageTree.Folder
+  level: number
+  children: ReactNode
+}) {
+  const pathname = usePathname()
+  const hasActiveChild = checkHasActiveChild(item, pathname)
+  const [open, setOpen] = useState(hasActiveChild)
+
+  return (
+    <li className='mb-[0.0625rem] list-none'>
+      {item.index ? (
+        <div className='flex items-center gap-0.5'>
+          <Link
+            href={item.index.url}
+            className={cn(
+              'block flex-1 rounded-md px-2.5 py-1.5 font-medium text-[13px] leading-tight transition-colors',
+              'text-gray-800 dark:text-gray-200',
+              !isActive(item.index.url, pathname, false) &&
+                'hover:bg-gray-100/60 dark:hover:bg-gray-800/40',
+              isActive(item.index.url, pathname, false) &&
+                'bg-purple-50/80 text-purple-600 dark:bg-purple-900/15 dark:text-purple-400'
+            )}
+          >
+            {item.name}
+          </Link>
+          <button
+            onClick={() => setOpen(!open)}
+            className='rounded p-1 transition-colors hover:bg-gray-100/60 dark:hover:bg-gray-800/40'
+            aria-label={open ? 'Collapse' : 'Expand'}
+          >
+            <ChevronRight
+              className={cn(
+                'h-3 w-3 text-gray-400 transition-transform duration-200 ease-in-out dark:text-gray-500',
+                open && 'rotate-90'
+              )}
+            />
+          </button>
+        </div>
+      ) : (
+        <button
+          onClick={() => setOpen(!open)}
+          className={cn(
+            'flex w-full items-center justify-between rounded-md px-2.5 py-1.5 text-left font-medium text-[13px] leading-tight transition-colors',
+            'hover:bg-gray-100/60 dark:hover:bg-gray-800/40',
+            'text-gray-800 dark:text-gray-200'
+          )}
+        >
+          <span>{item.name}</span>
+          <ChevronRight
+            className={cn(
+              'ml-auto h-3 w-3 flex-shrink-0 text-gray-400 transition-transform duration-200 ease-in-out dark:text-gray-500',
+              open && 'rotate-90'
+            )}
+          />
+        </button>
+      )}
+      <div
+        className={cn(
+          'overflow-hidden transition-all duration-200 ease-in-out',
+          open ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0'
+        )}
+      >
+        <ul className='mt-0.5 ml-2 space-y-[0.0625rem] border-gray-200/60 border-l pl-2.5 dark:border-gray-700/60'>
+          {children}
+        </ul>
+      </div>
+    </li>
+  )
+}
+
+export function SidebarSeparator({ item }: { item: PageTree.Separator }) {
+  return (
+    <p className='mt-4 mb-1.5 px-2.5 font-semibold text-[10px] text-gray-500/80 uppercase tracking-wide dark:text-gray-500'>
+      {item.name}
+    </p>
+  )
+}
+
+function checkHasActiveChild(node: PageTree.Folder, pathname: string): boolean {
+  if (node.index && isActive(node.index.url, pathname)) {
+    return true
+  }
+
+  for (const child of node.children) {
+    if (child.type === 'page' && isActive(child.url, pathname)) {
+      return true
+    }
+    if (child.type === 'folder' && checkHasActiveChild(child, pathname)) {
+      return true
+    }
+  }
+
+  return false
+}
@@ -0,0 +1,67 @@
+'use client'
+
+import Image from 'next/image'
+import Link from 'next/link'
+import { LanguageDropdown } from '@/components/ui/language-dropdown'
+import { SearchTrigger } from '@/components/ui/search-trigger'
+import { ThemeToggle } from '@/components/ui/theme-toggle'
+
+export function Navbar() {
+  return (
+    <nav
+      className='sticky top-0 z-50 border-border/50 border-b'
+      style={{
+        backgroundColor: 'hsla(0, 0%, 7.04%, 0.92)',
+        backdropFilter: 'blur(25px) saturate(180%) brightness(0.6)',
+        WebkitBackdropFilter: 'blur(25px) saturate(180%) brightness(0.6)',
+      }}
+    >
+      {/* Desktop: Single row layout */}
+      <div className='hidden h-16 w-full items-center lg:flex'>
+        <div
+          className='grid w-full grid-cols-[auto_1fr_auto] items-center'
+          style={{
+            paddingLeft: 'calc(var(--sidebar-offset) + 20px)',
+            paddingRight: 'calc(var(--toc-offset) + 20px)',
+          }}
+        >
+          {/* Left cluster: translate by sidebar delta to align with sidebar edge */}
+          <div className='flex items-center'>
+            <Link href='/' className='flex min-w-[100px] items-center'>
+              <Image
+                src='/static/logo.png'
+                alt='Sim'
+                width={72}
+                height={28}
+                className='h-7 w-auto'
+              />
+            </Link>
+          </div>
+
+          {/* Center cluster: search */}
+          <div className='flex flex-1 items-center justify-center'>
+            <SearchTrigger />
+          </div>
+
+          {/* Right cluster aligns with TOC edge using the same right gutter */}
+          <div className='flex items-center gap-4'>
+            <Link
+              href='https://sim.ai'
+              target='_blank'
+              rel='noopener noreferrer'
+              className='rounded-xl px-3 py-2 font-normal text-[0.9375rem] text-foreground/60 leading-[1.4] transition-colors hover:bg-foreground/8 hover:text-foreground'
+              style={{
+                fontFamily:
+                  '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+              }}
+            >
+              Platform
+            </Link>
+            <LanguageDropdown />
+            <ThemeToggle />
+          </div>
+        </div>
+      </div>
+    </nav>
+  )
+}
@@ -88,7 +88,7 @@ export function StructuredData({
      },
      'query-input': 'required name=search_term_string',
    },
-    inLanguage: ['en', 'fr', 'zh'],
+    inLanguage: ['en', 'es', 'fr', 'de', 'ja', 'zh'],
  }

  const faqStructuredData = title.toLowerCase().includes('faq') && {
@@ -0,0 +1,50 @@
+'use client'
+
+import { useState } from 'react'
+import { CodeBlock as FumadocsCodeBlock } from 'fumadocs-ui/components/codeblock'
+import { Check, Copy } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+export function CodeBlock(props: React.ComponentProps<typeof FumadocsCodeBlock>) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async (text: string) => {
+    await navigator.clipboard.writeText(text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <FumadocsCodeBlock
+      {...props}
+      Actions={({ children, className }) => (
+        <div className={cn('empty:hidden', className)}>
+          {/* Custom copy button */}
+          <button
+            type='button'
+            aria-label={copied ? 'Copied Text' : 'Copy Text'}
+            onClick={(e) => {
+              const pre = (e.currentTarget as HTMLElement)
+                .closest('.nd-codeblock')
+                ?.querySelector('pre')
+              if (pre) handleCopy(pre.textContent || '')
+            }}
+            className={cn(
+              'rounded-md p-2 transition-all',
+              'border border-border bg-background/80 hover:bg-muted',
+              'backdrop-blur-sm'
+            )}
+          >
+            <span className='flex items-center justify-center'>
+              {copied ? (
+                <Check size={16} className='text-green-600 dark:text-green-400' />
+              ) : (
+                <Copy size={16} className='text-muted-foreground' />
+              )}
+            </span>
+          </button>
+        </div>
+      )}
+    />
+  )
+}
@@ -1,7 +1,7 @@
 'use client'

 import { useEffect, useState } from 'react'
-import { Check, ChevronDown } from 'lucide-react'
+import { Check, ChevronRight } from 'lucide-react'
 import { useParams, usePathname, useRouter } from 'next/navigation'

 const languages = {
@@ -82,15 +82,14 @@ export function LanguageDropdown() {
        aria-haspopup='listbox'
        aria-expanded={isOpen}
        aria-controls='language-menu'
-        className='flex items-center gap-1.5 rounded-lg border border-border/30 bg-muted/40 px-2.5 py-1.5 text-sm shadow-sm backdrop-blur-sm transition-colors hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+        className='flex items-center gap-1.5 rounded-xl px-3 py-2 font-normal text-[0.9375rem] text-foreground/60 leading-[1.4] transition-colors hover:bg-foreground/8 hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+        style={{
+          fontFamily:
+            '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        }}
      >
-        <span className='text-sm'>{languages[currentLang as keyof typeof languages]?.flag}</span>
-        <span className='font-medium text-foreground'>
-          {languages[currentLang as keyof typeof languages]?.name}
-        </span>
-        <ChevronDown
-          className={`h-3 w-3 text-muted-foreground transition-transform ${isOpen ? 'rotate-180' : ''}`}
-        />
+        <span>{languages[currentLang as keyof typeof languages]?.name}</span>
+        <ChevronRight className='h-3.5 w-3.5' />
      </button>

      {isOpen && (
@@ -99,7 +98,7 @@ export function LanguageDropdown() {
          <div
            id='language-menu'
            role='listbox'
-            className='absolute top-full left-0 z-[1001] mt-1 max-h-[75vh] w-56 overflow-auto rounded-xl border border-border/50 bg-white shadow-2xl md:w-44 md:bg-background/95 md:backdrop-blur-md dark:bg-neutral-950 md:dark:bg-background/95'
+            className='absolute top-full right-0 z-[1001] mt-1 max-h-[75vh] w-56 overflow-auto rounded-xl border border-border/50 bg-white shadow-2xl md:w-44 md:bg-background/95 md:backdrop-blur-md dark:bg-neutral-950 md:dark:bg-background/95'
          >
            {Object.entries(languages).map(([code, lang]) => (
              <button
@@ -0,0 +1,38 @@
+'use client'
+
+import { Search } from 'lucide-react'
+
+export function SearchTrigger() {
+  const handleClick = () => {
+    const event = new KeyboardEvent('keydown', {
+      key: 'k',
+      metaKey: true,
+      bubbles: true,
+    })
+    document.dispatchEvent(event)
+  }
+
+  return (
+    <button
+      type='button'
+      className='flex h-10 w-[500px] items-center gap-2 rounded-xl border border-border/50 px-3 py-2 text-sm backdrop-blur-xl transition-colors hover:border-border'
+      style={{
+        backgroundColor: 'hsla(0, 0%, 5%, 0.85)',
+        backdropFilter: 'blur(33px) saturate(180%)',
+        WebkitBackdropFilter: 'blur(33px) saturate(180%)',
+        color: 'rgba(255, 255, 255, 0.6)',
+      }}
+      onClick={handleClick}
+    >
+      <Search className='h-4 w-4' />
+      <span>Search...</span>
+      <kbd
+        className='ml-auto flex items-center gap-0.5 font-medium'
+        style={{ color: 'rgba(255, 255, 255, 0.6)' }}
+      >
+        <span style={{ fontSize: '15px', lineHeight: '1' }}>⌘</span>
+        <span style={{ fontSize: '13px', lineHeight: '1' }}>K</span>
+      </kbd>
+    </button>
+  )
+}
@@ -0,0 +1,32 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return (
+      <button className='flex items-center justify-center rounded-md p-1 text-muted-foreground'>
+        <Moon className='h-4 w-4' />
+      </button>
+    )
+  }
+
+  return (
+    <button
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+      className='flex items-center justify-center rounded-md p-1 text-muted-foreground transition-colors hover:text-foreground'
+      aria-label='Toggle theme'
+    >
+      {theme === 'dark' ? <Moon className='h-4 w-4' /> : <Sun className='h-4 w-4' />}
+    </button>
+  )
+}