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.
2025-12-08 04:20:12 +00:00 · 2025-09-18 02:57:02 +00:00
parent 26a4db0da8
commit 82090541ed
22 changed files with 3421 additions and 889 deletions
--- a/components/Content.tsx
+++ b/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>
+  )
+}