mirror of
https://github.com/LukeHagar/jsdoc-cheatsheet.git
synced 2025-12-06 04:20:07 +00:00
d2c72f1250
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.
365 lines
20 KiB
TypeScript
365 lines
20 KiB
TypeScript
"use client"
|
|
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import { BookOpen, Code, FileText, Hash, Settings, Tag, ArrowRight, Info, Users } from "lucide-react"
|
|
import CodeHighlighter from "@/components/SyntaxHighlighter"
|
|
import Header from "@/components/Header"
|
|
import Sidebar from "@/components/Sidebar"
|
|
import TableOfContents from "@/components/TableOfContents"
|
|
import Link from "next/link"
|
|
import { jsdocData } from "@/lib/jsdoc-data"
|
|
|
|
const navigationSections = [
|
|
{
|
|
id: "basic-tags",
|
|
title: "Basic Tags",
|
|
description: "Essential JSDoc tags for documenting your code",
|
|
icon: Tag,
|
|
href: "/basic-tags",
|
|
},
|
|
{
|
|
id: "parameters",
|
|
title: "Parameters & Returns",
|
|
description: "Document function parameters, return values, and exceptions",
|
|
icon: Code,
|
|
href: "/parameters",
|
|
},
|
|
{
|
|
id: "type-definitions",
|
|
title: "Type Definitions",
|
|
description: "Define and document custom types and interfaces",
|
|
icon: Hash,
|
|
href: "/type-definitions",
|
|
},
|
|
{
|
|
id: "functions",
|
|
title: "Functions & Classes",
|
|
description: "Document functions, classes, constructors, and methods",
|
|
icon: Settings,
|
|
href: "/functions",
|
|
},
|
|
{
|
|
id: "modules",
|
|
title: "Modules & Namespaces",
|
|
description: "Organize code with modules, namespaces, and membership",
|
|
icon: FileText,
|
|
href: "/modules",
|
|
},
|
|
{
|
|
id: "advanced",
|
|
title: "Advanced Tags",
|
|
description: "Advanced JSDoc features for complex documentation needs",
|
|
icon: BookOpen,
|
|
href: "/advanced",
|
|
},
|
|
{
|
|
id: "objects",
|
|
title: "Objects & Interfaces",
|
|
description: "Document object structures, interfaces, and inheritance",
|
|
icon: Hash,
|
|
href: "/objects",
|
|
},
|
|
{
|
|
id: "documentation",
|
|
title: "Documentation Tags",
|
|
description: "Tags for linking, examples, and additional documentation",
|
|
icon: Info,
|
|
href: "/documentation",
|
|
},
|
|
{
|
|
id: "examples",
|
|
title: "Complete Examples",
|
|
description: "Real-world JSDoc documentation examples",
|
|
icon: Info,
|
|
href: "/examples",
|
|
},
|
|
{
|
|
id: "best-practices",
|
|
title: "Best Practices",
|
|
description: "Guidelines for writing effective JSDoc documentation",
|
|
icon: Users,
|
|
href: "/best-practices",
|
|
},
|
|
]
|
|
|
|
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 },
|
|
]
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<Header />
|
|
<Sidebar />
|
|
<TableOfContents items={tocItems} />
|
|
|
|
<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>
|
|
<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>
|
|
<CodeHighlighter code={jsdocData.kitchenSink.items[0].example} />
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Navigation Grid */}
|
|
<div id="navigation-grid" className="text-center mb-12">
|
|
<h2 className="text-3xl font-bold text-foreground mb-4">Explore JSDoc Sections</h2>
|
|
<p className="text-muted-foreground text-lg mb-8">
|
|
Choose a section to dive deeper into specific JSDoc features
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-16">
|
|
{navigationSections.map((section) => {
|
|
const Icon = section.icon
|
|
return (
|
|
<Link key={section.id} href={section.href}>
|
|
<Card className="h-full hover:shadow-lg transition-all duration-300 hover:border-primary/50 hover:shadow-primary/5 cursor-pointer group">
|
|
<CardHeader className="text-center">
|
|
<div className="mx-auto mb-4 p-3 rounded-full bg-primary/10 group-hover:bg-primary/20 transition-colors">
|
|
<Icon className="h-8 w-8 text-primary" />
|
|
</div>
|
|
<CardTitle className="text-xl text-foreground group-hover:text-primary transition-colors">
|
|
{section.title}
|
|
</CardTitle>
|
|
<CardDescription className="text-muted-foreground">
|
|
{section.description}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<Button variant="ghost" className="w-full group-hover:bg-primary/10 transition-colors">
|
|
Explore Section
|
|
<ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<footer className="border-t border-border bg-card/50 mt-16">
|
|
<div className="w-full px-6 py-8">
|
|
<div className="text-center text-muted-foreground">
|
|
<p className="mb-2">
|
|
For more information, visit the{" "}
|
|
<a
|
|
href="https://jsdoc.app/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary hover:underline"
|
|
>
|
|
official JSDoc documentation
|
|
</a>
|
|
</p>
|
|
<p className="text-sm">This cheatsheet covers the most commonly used JSDoc tags and patterns.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
)
|
|
} |