feat: enhance JSDoc cheatsheet with quick reference section and improve layout

Add a dedicated quick reference section to the JSDoc cheatsheet, streamline the layout for better readability, and adjust sidebar and table of contents styles for consistency.

app/page.tsx

@@ -87,9 +87,9 @@ const navigationSections = [
 export default function JSDocCheatsheet() {
   // TOC items for the homepage
   const tocItems = [
+    { id: "quick-reference", title: "Quick Reference", level: 1 },
     { id: "kitchen-sink", title: "Kitchen Sink Example", level: 1 },
     { id: "navigation-grid", title: "Explore JSDoc Sections", level: 1 },
-    { id: "quick-reference", title: "Quick Reference", level: 1 },
   ]
 
   return (
@@ -98,8 +98,193 @@ export default function JSDocCheatsheet() {
       <Sidebar />
       <TableOfContents items={tocItems} />
 
-      <div className="lg:ml-64 xl:mr-72 px-6 py-8">
+      <div className="lg:ml-64 xl:mr-72 p-2">
         <div className="max-w-6xl mx-auto">
+          {/* Quick Reference */}
+          <Card id="quick-reference" className="bg-muted/50 mb-4">
+            <CardHeader>
+              <CardTitle className="text-2xl text-foreground flex items-center gap-2">
+                <BookOpen className="h-6 w-6" />
+                Quick Reference
+              </CardTitle>
+              <CardDescription>
+                Essential JSDoc tags you'll use most frequently
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                <div className="space-y-2">
+                  <h4 className="font-semibold text-foreground">Basic Tags</h4>
+                  <div className="space-y-1 text-sm">
+                    <Link href="/basic-tags#description">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@description</code>
+                    </Link>
+                    <Link href="/basic-tags#author">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@author</code>
+                    </Link>
+                    <Link href="/basic-tags#version">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@version</code>
+                    </Link>
+                    <Link href="/basic-tags#since">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@since</code>
+                    </Link>
+                    <Link href="/basic-tags#deprecated">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@deprecated</code>
+                    </Link>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <h4 className="font-semibold text-foreground">Parameters & Returns</h4>
+                  <div className="space-y-1 text-sm">
+                    <Link href="/parameters#param">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@param</code>
+                    </Link>
+                    <Link href="/parameters#returns">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@returns</code>
+                    </Link>
+                    <Link href="/parameters#throws">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@throws</code>
+                    </Link>
+                    <Link href="/parameters#yields">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@yields</code>
+                    </Link>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <h4 className="font-semibold text-foreground">Types & Properties</h4>
+                  <div className="space-y-1 text-sm">
+                    <Link href="/type-definitions#typedef">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@typedef</code>
+                    </Link>
+                    <Link href="/type-definitions#property">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@property</code>
+                    </Link>
+                    <Link href="/type-definitions#type">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@type</code>
+                    </Link>
+                    <Link href="/type-definitions#enum">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@enum</code>
+                    </Link>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <h4 className="font-semibold text-foreground">Functions & Classes</h4>
+                  <div className="space-y-1 text-sm">
+                    <Link href="/functions#function">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@function</code>
+                    </Link>
+                    <Link href="/functions#class">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@class</code>
+                    </Link>
+                    <Link href="/functions#constructor">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@constructor</code>
+                    </Link>
+                    <Link href="/functions#method">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@method</code>
+                    </Link>
+                    <Link href="/functions#static">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@static</code>
+                    </Link>
+                    <Link href="/functions#override">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@override</code>
+                    </Link>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <h4 className="font-semibold text-foreground">Modules & Namespaces</h4>
+                  <div className="space-y-1 text-sm">
+                    <Link href="/modules#module">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@module</code>
+                    </Link>
+                    <Link href="/modules#namespace">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@namespace</code>
+                    </Link>
+                    <Link href="/modules#memberof">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@memberof</code>
+                    </Link>
+                    <Link href="/modules#exports">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@exports</code>
+                    </Link>
+                    <Link href="/modules#requires">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@requires</code>
+                    </Link>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <h4 className="font-semibold text-foreground">Objects & Interfaces</h4>
+                  <div className="space-y-1 text-sm">
+                    <Link href="/objects#interface">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@interface</code>
+                    </Link>
+                    <Link href="/objects#implements">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@implements</code>
+                    </Link>
+                    <Link href="/objects#extends">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@extends</code>
+                    </Link>
+                    <Link href="/objects#mixin">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@mixin</code>
+                    </Link>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <h4 className="font-semibold text-foreground">Events & Callbacks</h4>
+                  <div className="space-y-1 text-sm">
+                    <Link href="/advanced#callback">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@callback</code>
+                    </Link>
+                    <Link href="/advanced#event">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@event</code>
+                    </Link>
+                    <Link href="/advanced#fires">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@fires</code>
+                    </Link>
+                    <Link href="/advanced#listens">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@listens</code>
+                    </Link>
+                    <Link href="/advanced#mixes">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@mixes</code>
+                    </Link>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <h4 className="font-semibold text-foreground">Documentation & Links</h4>
+                  <div className="space-y-1 text-sm">
+                    <Link href="/documentation#example">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@example</code>
+                    </Link>
+                    <Link href="/documentation#see">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@see</code>
+                    </Link>
+                    <Link href="/documentation#link">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@link</code>
+                    </Link>
+                    <Link href="/documentation#tutorial">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@tutorial</code>
+                    </Link>
+                    <Link href="/documentation#todo">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@todo</code>
+                    </Link>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <h4 className="font-semibold text-foreground">Advanced Features</h4>
+                  <div className="space-y-1 text-sm">
+                    <Link href="/advanced#abstract">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@abstract</code>
+                    </Link>
+                    <Link href="/parameters#async">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@async</code>
+                    </Link>
+                    <Link href="/parameters#generator">
+                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@generator</code>
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
           {/* Kitchen Sink Example */}
           <Card id="kitchen-sink" className="border-primary/20 bg-gradient-to-br from-primary/5 to-primary/10 shadow-lg mb-12">
             <CardHeader>
@@ -153,59 +338,6 @@ export default function JSDocCheatsheet() {
               )
             })}
           </div>
-
-          {/* Quick Reference */}
-          <Card id="quick-reference" className="bg-muted/50">
-            <CardHeader>
-              <CardTitle className="text-2xl text-foreground flex items-center gap-2">
-                <BookOpen className="h-6 w-6" />
-                Quick Reference
-              </CardTitle>
-              <CardDescription>
-                Essential JSDoc tags you'll use most frequently
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
-                <div className="space-y-2">
-                  <h4 className="font-semibold text-foreground">Basic Tags</h4>
-                  <div className="space-y-1 text-sm">
-                    <code className="block bg-background px-2 py-1 rounded text-primary">@description</code>
-                    <code className="block bg-background px-2 py-1 rounded text-primary">@author</code>
-                    <code className="block bg-background px-2 py-1 rounded text-primary">@version</code>
-                    <code className="block bg-background px-2 py-1 rounded text-primary">@since</code>
-                  </div>
-                </div>
-                <div className="space-y-2">
-                  <h4 className="font-semibold text-foreground">Parameters</h4>
-                  <div className="space-y-1 text-sm">
-                    <code className="block bg-background px-2 py-1 rounded text-primary">@param</code>
-                    <code className="block bg-background px-2 py-1 rounded text-primary">@returns</code>
-                    <code className="block bg-background px-2 py-1 rounded text-primary">@throws</code>
-                    <code className="block bg-background px-2 py-1 rounded text-primary">@example</code>
-                  </div>
-                </div>
-                <div className="space-y-2">
-                  <h4 className="font-semibold text-foreground">Types & Classes</h4>
-                  <div className="space-y-1 text-sm">
-                    <code className="block bg-background px-2 py-1 rounded text-primary">@typedef</code>
-                    <code className="block bg-background px-2 py-1 rounded text-primary">@class</code>
-                    <code className="block bg-background px-2 py-1 rounded text-primary">@method</code>
-                    <code className="block bg-background px-2 py-1 rounded text-primary">@static</code>
-                  </div>
-                </div>
-                <div className="space-y-2">
-                  <h4 className="font-semibold text-foreground">Advanced</h4>
-                  <div className="space-y-1 text-sm">
-                    <code className="block bg-background px-2 py-1 rounded text-primary">@module</code>
-                    <code className="block bg-background px-2 py-1 rounded text-primary">@callback</code>
-                    <code className="block bg-background px-2 py-1 rounded text-primary">@interface</code>
-                    <code className="block bg-background px-2 py-1 rounded text-primary">@link</code>
-                  </div>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
         </div>
       </div>
 

components/Sidebar.tsx

@@ -8,7 +8,7 @@ import Link from "next/link"
 import { usePathname } from "next/navigation"
 
 const navigationItems = [
-  { name: "Kitchen Sink", href: "/", icon: Home },
+  { name: "Home", href: "/", icon: Home },
   { name: "Basic Tags", href: "/basic-tags", icon: Tag },
   { name: "Parameters", href: "/parameters", icon: Code },
   { name: "Types", href: "/type-definitions", icon: Hash },
@@ -25,9 +25,9 @@ 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">
+    <aside className="w-64 fixed left-0 top-16 h-[calc(100vh-4rem)] z-40 overflow-y-auto hidden lg:block">
-      <div className="p-6">
+      <div className="p-2">
-        <Card className="bg-card/80 border-border/30 shadow-lg backdrop-blur-sm">
+        <Card className="bg-card/80 border-border/30 shadow-2xl">
           <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">

components/SyntaxHighlighter.tsx

@@ -32,7 +32,7 @@ const CodeHighlighter = ({ code, language = "javascript" }: SyntaxHighlighterPro
         wrapLines={true}
         wrapLongLines={true}
         PreTag={({ children, ...props }) => (
-          <pre className="!m-0 !p-0" {...props}>
+          <pre className="!m-0 p-2" {...props}>
             {children}
           </pre>
         )}

components/TableOfContents.tsx

@@ -21,6 +21,27 @@ export default function TableOfContents({ items, className = "" }: TableOfConten
   const [activeId, setActiveId] = useState<string>("")
   const [isVisible, setIsVisible] = useState(false)
 
+  // Read initial hash from URL on mount
+  useEffect(() => {
+    const hash = window.location.hash.slice(1) // Remove the # symbol
+    if (hash && items.some(item => item.id === hash)) {
+      setActiveId(hash)
+    }
+  }, [items])
+
+  // Listen for hash changes
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.slice(1) // Remove the # symbol
+      if (hash && items.some(item => item.id === hash)) {
+        setActiveId(hash)
+      }
+    }
+
+    window.addEventListener('hashchange', handleHashChange)
+    return () => window.removeEventListener('hashchange', handleHashChange)
+  }, [items])
+
   useEffect(() => {
     if (items.length === 0) return
 
@@ -34,6 +55,10 @@ export default function TableOfContents({ items, className = "" }: TableOfConten
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
             setActiveId(entry.target.id)
+            // Update URL hash when scrolling to a section
+            if (window.location.hash !== `#${entry.target.id}`) {
+              window.history.replaceState(null, '', `#${entry.target.id}`)
+            }
           }
         })
       },
@@ -69,6 +94,10 @@ export default function TableOfContents({ items, className = "" }: TableOfConten
   const scrollToSection = (id: string) => {
     const element = document.getElementById(id)
     if (element) {
+      // Update URL hash immediately
+      window.history.pushState(null, '', `#${id}`)
+      setActiveId(id)
+      
       // Get the actual header height dynamically
       const header = document.querySelector('header')
       const headerHeight = header ? header.offsetHeight + 20 : 100 // 20px buffer
@@ -87,8 +116,8 @@ export default function TableOfContents({ items, className = "" }: TableOfConten
   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}`}>
+    <aside className={`w-72 fixed right-0 top-16 h-[calc(100vh-4rem)] z-40 overflow-y-auto hidden xl:block ${className}`}>
-      <div className="p-6">
+      <div className="p-2">
         <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">