mirror of
https://github.com/LukeHagar/jsdoc-cheatsheet.git
synced 2025-12-06 04:20:07 +00:00
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.
This commit is contained in:
Luke Hagar
242
app/page.tsx
242
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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user