feat: add react-syntax-highlighter and update JSDoc cheatsheet layout

Integrate react-syntax-highlighter for improved code example rendering and enhance the JSDoc cheatsheet layout with a new navigation structure and quick reference section.

components/Content.tsx

@@ -0,0 +1,139 @@
+'use client'
+
+import React from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Separator } from "@/components/ui/separator"
+import CustomSyntaxHighlighter from "@/components/SyntaxHighlighter"
+import { ExternalLink } from "lucide-react"
+
+interface Source {
+  name: string
+  url: string
+  description: string
+}
+
+interface JSDocItem {
+  tag: string
+  syntax: string
+  example: string
+  description: string
+  sources?: Source[]
+}
+
+interface JSDocSection {
+  title: string
+  description: string
+  items: JSDocItem[]
+}
+
+interface ContentProps {
+  activeSection: string
+  jsdocData: Record<string, JSDocSection>
+}
+
+export default function Content({ activeSection, jsdocData }: ContentProps) {
+  const currentSection = jsdocData[activeSection]
+
+  return (
+    <main className="flex-1 min-w-0 ml-60">
+      <div className="space-y-6">
+        {/* Kitchen Sink Example */}
+        {activeSection === 'kitchen-sink' && (
+          <Card className="border-primary/20 bg-gradient-to-br from-primary/5 to-primary/10 shadow-lg">
+            <CardHeader>
+              <CardTitle className="text-2xl text-foreground flex items-center gap-2">
+                <Badge variant="default" className="bg-primary text-primary-foreground">
+                  Kitchen Sink Example
+                </Badge>
+              </CardTitle>
+              <CardDescription className="text-base">
+                A comprehensive example showcasing multiple JSDoc features in one code block
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <CustomSyntaxHighlighter code={currentSection?.items[0]?.example || ''} />
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Section Header */}
+        <div className="text-center mb-8">
+          <h2 className="text-3xl font-bold text-foreground mb-2">
+            {currentSection?.title || "Section"}
+          </h2>
+          <p className="text-muted-foreground text-lg">
+            {currentSection?.description || "Documentation section"}
+          </p>
+        </div>
+
+        {/* Content Cards */}
+        <div className="grid gap-6" id={`section-${activeSection}`}>
+          {currentSection?.items.map((item, index) => (
+            <Card
+              key={index}
+              id={item.tag.replace("@", "").replace(/[^a-zA-Z0-9]/g, "-")}
+              className="border-border hover:shadow-lg transition-all duration-300 hover:border-primary/50 hover:shadow-primary/5"
+            >
+              <CardHeader className="pb-3">
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-xl text-foreground flex items-center gap-2">
+                    <Badge variant="secondary" className="bg-primary text-primary-foreground font-mono">
+                      {item.tag}
+                    </Badge>
+                  </CardTitle>
+                </div>
+                <CardDescription className="text-muted-foreground text-base">{item.description}</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {/* Syntax */}
+                <div>
+                  <h4 className="font-semibold text-foreground mb-2">Syntax:</h4>
+                  <code className="block bg-muted text-muted-foreground p-3 rounded-md text-sm font-mono border border-border">
+                    {item.syntax}
+                  </code>
+                </div>
+
+                <Separator />
+
+                {/* Example with Syntax Highlighting */}
+                <div>
+                  <h4 className="font-semibold text-foreground mb-2">Example:</h4>
+                  <CustomSyntaxHighlighter code={item.example} />
+                </div>
+
+                {/* Source Links */}
+                {item.sources && item.sources.length > 0 && (
+                  <>
+                    <Separator />
+                    <div>
+                      <h4 className="font-semibold text-foreground mb-2">Sources & References:</h4>
+                      <div className="space-y-2">
+                        {item.sources.map((source, sourceIndex) => (
+                          <div key={sourceIndex} className="flex items-start gap-2 p-2 bg-muted/50 rounded-md">
+                            <ExternalLink className="h-4 w-4 text-muted-foreground mt-0.5 flex-shrink-0" />
+                            <div className="flex-1 min-w-0">
+                              <a
+                                href={source.url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-primary hover:underline font-medium"
+                              >
+                                {source.name}
+                              </a>
+                              <p className="text-sm text-muted-foreground mt-1">{source.description}</p>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </>
+                )}
+              </CardContent>
+            </Card>
+          )) || []}
+        </div>
+      </div>
+    </main>
+  )
+}

components/Header.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+import { BookOpen } from "lucide-react"
+import Link from "next/link"
+
+export default function Header() {
+  return (
+    <header className="border-b border-border bg-card/50 backdrop-blur-sm sticky top-0 z-50">
+      <div className="w-full px-6 py-4">
+        <div className="flex items-center">
+          <Link href="/" className="flex items-center gap-2">
+            <BookOpen className="h-6 w-6 text-primary" />
+            <h1 className="text-2xl font-bold text-foreground">JSDoc Cheatsheet</h1>
+          </Link>
+        </div>
+      </div>
+    </header>
+  )
+}

components/Sidebar.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { BookOpen, Code, FileText, Hash, Settings, Tag, Info, Users, Navigation, ChevronRight, Home } from "lucide-react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+const navigationItems = [
+  { name: "Kitchen Sink", href: "/", icon: Home },
+  { name: "Basic Tags", href: "/basic-tags", icon: Tag },
+  { name: "Parameters", href: "/parameters", icon: Code },
+  { name: "Types", href: "/type-definitions", icon: Hash },
+  { name: "Functions", href: "/functions", icon: Settings },
+  { name: "Modules", href: "/modules", icon: FileText },
+  { name: "Advanced", href: "/advanced", icon: BookOpen },
+  { name: "Objects", href: "/objects", icon: Hash },
+  { name: "Docs", href: "/documentation", icon: Info },
+  { name: "Examples", href: "/examples", icon: Info },
+  { name: "Best Practices", href: "/best-practices", icon: Users },
+]
+
+export default function Sidebar() {
+  const pathname = usePathname()
+
+  return (
+    <aside className="w-64 bg-gradient-to-b from-card/95 to-card/90 backdrop-blur-sm border-r border-border/50 fixed left-0 top-16 h-[calc(100vh-4rem)] z-40 overflow-y-auto hidden lg:block shadow-2xl">
+      <div className="p-6">
+        <Card className="bg-card/80 border-border/30 shadow-lg backdrop-blur-sm">
+          <CardHeader className="pb-4 border-b border-border/20">
+            <CardTitle className="text-base text-foreground flex items-center gap-3 font-semibold">
+              <div className="p-2 rounded-lg bg-primary/10">
+                <Navigation className="h-4 w-4 text-primary" />
+              </div>
+              <div>
+                <div>Navigation</div>
+                <div className="text-xs text-muted-foreground font-normal mt-1">
+                  {navigationItems.length} {navigationItems.length === 1 ? 'section' : 'sections'}
+                </div>
+              </div>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="p-0">
+            <nav className="space-y-1 p-4">
+              {navigationItems.map((item, index) => {
+                const Icon = item.icon
+                const isActive = pathname === item.href
+                
+                return (
+                  <div key={item.href} className="group">
+                    <Link href={item.href}>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className={`w-full justify-start gap-3 text-sm transition-all duration-300 group-hover:translate-x-1 ${
+                          isActive
+                            ? "bg-primary text-primary-foreground hover:bg-primary/90 shadow-md"
+                            : "hover:bg-primary/5 text-muted-foreground hover:text-foreground"
+                        } h-10 px-3`}
+                      >
+                        <div className="flex items-center gap-2 flex-1 min-w-0">
+                          {isActive ? (
+                            <div className="w-2 h-2 rounded-full bg-primary-foreground flex-shrink-0" />
+                          ) : (
+                            <Icon className="h-3 w-3 flex-shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
+                          )}
+                          <span className="truncate font-medium">{item.name}</span>
+                        </div>
+                        {isActive && (
+                          <ChevronRight className="h-3 w-3 flex-shrink-0 animate-pulse" />
+                        )}
+                      </Button>
+                    </Link>
+                    {index < navigationItems.length - 1 && (
+                      <div className="h-px bg-border/30 mx-3 my-1" />
+                    )}
+                  </div>
+                )
+              })}
+            </nav>
+          </CardContent>
+        </Card>
+      </div>
+    </aside>
+  )
+}

components/SyntaxHighlighter.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'
+
+interface SyntaxHighlighterProps {
+  code: string
+  language?: string
+}
+
+const CodeHighlighter = ({ code, language = "javascript" }: SyntaxHighlighterProps) => {
+  return (
+    <div className="rounded-lg overflow-hidden border border-slate-700">
+      <SyntaxHighlighter
+        language={language}
+        style={vscDarkPlus}
+        customStyle={{
+          background: '#0f172a',
+          borderRadius: '0.5rem',
+          fontSize: '0.875rem',
+          lineHeight: '1.6',
+          border: 'none',
+          margin: 0,
+          padding: '1rem',
+        }}
+        codeTagProps={{
+          style: {
+            fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
+          }
+        }}
+        showLineNumbers={false}
+        wrapLines={true}
+        wrapLongLines={true}
+        PreTag={({ children, ...props }) => (
+          <pre className="!m-0 !p-0" {...props}>
+            {children}
+          </pre>
+        )}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
+  )
+}
+
+export default CodeHighlighter

components/TableOfContents.tsx

@@ -0,0 +1,148 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { List, ChevronRight, Hash } from "lucide-react"
+
+interface TOCItem {
+  id: string
+  title: string
+  level: number
+}
+
+interface TableOfContentsProps {
+  items: TOCItem[]
+  className?: string
+}
+
+export default function TableOfContents({ items, className = "" }: TableOfContentsProps) {
+  const [activeId, setActiveId] = useState<string>("")
+  const [isVisible, setIsVisible] = useState(false)
+
+  useEffect(() => {
+    if (items.length === 0) return
+
+    // Calculate header height dynamically
+    const header = document.querySelector('header')
+    const headerHeight = header ? header.offsetHeight + 20 : 100 // 20px buffer
+    const rootMargin = `-${headerHeight}px 0% -35% 0%`
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id)
+          }
+        })
+      },
+      {
+        rootMargin,
+        threshold: 0.1,
+      }
+    )
+
+    // Observe all TOC items
+    items.forEach((item) => {
+      const element = document.getElementById(item.id)
+      if (element) {
+        observer.observe(element)
+      }
+    })
+
+    return () => {
+      items.forEach((item) => {
+        const element = document.getElementById(item.id)
+        if (element) {
+          observer.unobserve(element)
+        }
+      })
+    }
+  }, [items])
+
+  useEffect(() => {
+    // Show TOC if there are items
+    setIsVisible(items.length > 0)
+  }, [items])
+
+  const scrollToSection = (id: string) => {
+    const element = document.getElementById(id)
+    if (element) {
+      // Get the actual header height dynamically
+      const header = document.querySelector('header')
+      const headerHeight = header ? header.offsetHeight + 20 : 100 // 20px buffer
+      const elementPosition = element.offsetTop - headerHeight
+      
+      // Add a small delay to ensure smooth scrolling
+      setTimeout(() => {
+        window.scrollTo({
+          top: Math.max(0, elementPosition), // Ensure we don't scroll to negative position
+          behavior: "smooth"
+        })
+      }, 10)
+    }
+  }
+
+  if (!isVisible) return null
+
+  return (
+    <aside className={`w-72 bg-gradient-to-b from-card/95 to-card/90 backdrop-blur-sm border-l border-border/50 fixed right-0 top-16 h-[calc(100vh-4rem)] z-40 overflow-y-auto hidden xl:block shadow-2xl ${className}`}>
+      <div className="p-6">
+        <Card className="bg-card/80 border-border/30 shadow-lg backdrop-blur-sm">
+          <CardHeader className="pb-4 border-b border-border/20">
+            <CardTitle className="text-base text-foreground flex items-center gap-3 font-semibold">
+              <div className="p-2 rounded-lg bg-primary/10">
+                <List className="h-4 w-4 text-primary" />
+              </div>
+              <div>
+                <div>Table of Contents</div>
+                <div className="text-xs text-muted-foreground font-normal mt-1">
+                  {items.length} {items.length === 1 ? 'section' : 'sections'}
+                </div>
+              </div>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="p-0">
+            <nav className="space-y-1 p-4">
+              {items.map((item, index) => {
+                const isActive = activeId === item.id
+                const indentClass = item.level > 1 ? `ml-${(item.level - 1) * 6}` : ""
+
+                return (
+                  <div key={item.id} className="group">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className={`w-full justify-start gap-3 text-sm transition-all duration-300 group-hover:translate-x-1 ${
+                        isActive
+                          ? "bg-primary text-primary-foreground hover:bg-primary/90 shadow-md"
+                          : "hover:bg-primary/5 text-muted-foreground hover:text-foreground"
+                      } ${indentClass} h-10 px-3`}
+                      onClick={() => scrollToSection(item.id)}
+                    >
+                      <div className={`flex items-center gap-2 flex-1 min-w-0`}>
+                        {isActive ? (
+                          <div className="w-2 h-2 rounded-full bg-primary-foreground flex-shrink-0" />
+                        ) : (
+                          <Hash className="h-3 w-3 flex-shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
+                        )}
+                        <span className="truncate font-medium">{item.title}</span>
+                      </div>
+                      {isActive && (
+                        <ChevronRight className="h-3 w-3 flex-shrink-0 animate-pulse" />
+                      )}
+                    </Button>
+                    {index < items.length - 1 && (
+                      <div className="h-px bg-border/30 mx-3 my-1" />
+                    )}
+                  </div>
+                )
+              })}
+            </nav>
+          </CardContent>
+        </Card>
+      </div>
+    </aside>
+  )
+}