mirror of
https://github.com/LukeHagar/jsdoc-cheatsheet.git
synced 2025-12-06 04:20:07 +00:00
82090541ed
Integrate react-syntax-highlighter for improved code example rendering and enhance the JSDoc cheatsheet layout with a new navigation structure and quick reference section.
233 lines
9.5 KiB
TypeScript
233 lines
9.5 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: "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 (
|
|
<div className="min-h-screen bg-background">
|
|
<Header />
|
|
<Sidebar />
|
|
<TableOfContents items={tocItems} />
|
|
|
|
<div className="lg:ml-64 xl:mr-72 px-6 py-8">
|
|
<div className="max-w-6xl mx-auto">
|
|
{/* 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>
|
|
|
|
{/* 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>
|
|
|
|
{/* 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>
|
|
)
|
|
} |