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

apps/docs/components/ui/code-block.tsx

@@ -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>
+      )}
+    />
+  )
+}

apps/docs/components/ui/language-dropdown.tsx

@@ -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

apps/docs/components/ui/search-trigger.tsx

@@ -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>
+  )
+}

apps/docs/components/ui/theme-toggle.tsx

@@ -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>
+  )
+}