forked from cardosofelipe/fast-next-template
**Docs and Code Enhancements:** Add CodeBlock component with copy functionality and syntax highlighting. Introduce /docs page as the central hub for design system documentation. Update MarkdownContent to support improved heading styles, enhanced links, optimized images with Next.js Image, and upgraded table, blockquote, and list styling for better readability and usability.
This commit is contained in:
303
frontend/src/app/docs/page.tsx
Normal file
303
frontend/src/app/docs/page.tsx
Normal file
@@ -0,0 +1,303 @@
|
||||
/**
|
||||
* Documentation Hub
|
||||
* Central hub for all design system documentation
|
||||
* Access: /docs
|
||||
*/
|
||||
|
||||
import Link from 'next/link';
|
||||
import { BookOpen, Sparkles, Layout, Palette, Code2, FileCode, Accessibility, Lightbulb, Search } from 'lucide-react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
|
||||
interface DocItem {
|
||||
title: string;
|
||||
description: string;
|
||||
href: string;
|
||||
icon: React.ReactNode;
|
||||
badge?: string;
|
||||
}
|
||||
|
||||
const gettingStartedDocs: DocItem[] = [
|
||||
{
|
||||
title: 'Quick Start',
|
||||
description: '5-minute crash course to get up and running with the design system',
|
||||
href: '/docs/design-system/00-quick-start',
|
||||
icon: <Sparkles className="h-5 w-5" />,
|
||||
badge: 'Start Here',
|
||||
},
|
||||
{
|
||||
title: 'README',
|
||||
description: 'Complete overview and learning paths for the design system',
|
||||
href: '/docs/design-system/README',
|
||||
icon: <BookOpen className="h-5 w-5" />,
|
||||
},
|
||||
];
|
||||
|
||||
const coreConceptsDocs: DocItem[] = [
|
||||
{
|
||||
title: 'Foundations',
|
||||
description: 'Colors (OKLCH), typography, spacing, and shadows',
|
||||
href: '/docs/design-system/01-foundations',
|
||||
icon: <Palette className="h-5 w-5" />,
|
||||
},
|
||||
{
|
||||
title: 'Components',
|
||||
description: 'shadcn/ui component library guide and usage patterns',
|
||||
href: '/docs/design-system/02-components',
|
||||
icon: <Code2 className="h-5 w-5" />,
|
||||
},
|
||||
{
|
||||
title: 'Layouts',
|
||||
description: 'Layout patterns with Grid vs Flex decision trees',
|
||||
href: '/docs/design-system/03-layouts',
|
||||
icon: <Layout className="h-5 w-5" />,
|
||||
},
|
||||
{
|
||||
title: 'Spacing Philosophy',
|
||||
description: 'Parent-controlled spacing strategy and best practices',
|
||||
href: '/docs/design-system/04-spacing-philosophy',
|
||||
icon: <FileCode className="h-5 w-5" />,
|
||||
},
|
||||
{
|
||||
title: 'Component Creation',
|
||||
description: 'When to create vs compose components',
|
||||
href: '/docs/design-system/05-component-creation',
|
||||
icon: <Code2 className="h-5 w-5" />,
|
||||
},
|
||||
{
|
||||
title: 'Forms',
|
||||
description: 'Form patterns with react-hook-form and Zod validation',
|
||||
href: '/docs/design-system/06-forms',
|
||||
icon: <FileCode className="h-5 w-5" />,
|
||||
},
|
||||
{
|
||||
title: 'Accessibility',
|
||||
description: 'WCAG AA compliance, keyboard navigation, and screen readers',
|
||||
href: '/docs/design-system/07-accessibility',
|
||||
icon: <Accessibility className="h-5 w-5" />,
|
||||
},
|
||||
];
|
||||
|
||||
const referencesDocs: DocItem[] = [
|
||||
{
|
||||
title: 'AI Guidelines',
|
||||
description: 'Rules and best practices for AI code generation',
|
||||
href: '/docs/design-system/08-ai-guidelines',
|
||||
icon: <Lightbulb className="h-5 w-5" />,
|
||||
badge: 'AI',
|
||||
},
|
||||
{
|
||||
title: 'Quick Reference',
|
||||
description: 'Cheat sheet for quick lookups and common patterns',
|
||||
href: '/docs/design-system/99-reference',
|
||||
icon: <Search className="h-5 w-5" />,
|
||||
},
|
||||
];
|
||||
|
||||
export default function DocsHub() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Header */}
|
||||
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div className="container mx-auto flex h-16 items-center justify-between px-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<BookOpen className="h-6 w-6 text-primary" />
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold">FastNext Documentation</h1>
|
||||
<p className="text-xs text-muted-foreground">Design System & Component Library</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/dev">
|
||||
<Button variant="outline" size="sm">
|
||||
Interactive Demos
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="border-b bg-gradient-to-b from-background to-muted/20 py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<h2 className="text-4xl font-bold tracking-tight mb-4">
|
||||
Design System Documentation
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground mb-8">
|
||||
Comprehensive guides, best practices, and references for building consistent,
|
||||
accessible, and maintainable user interfaces with the FastNext design system.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-3 justify-center">
|
||||
<Link href="/docs/design-system/00-quick-start">
|
||||
<Button size="lg" className="gap-2">
|
||||
<Sparkles className="h-4 w-4" />
|
||||
Get Started
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/docs/design-system/README">
|
||||
<Button variant="outline" size="lg" className="gap-2">
|
||||
<BookOpen className="h-4 w-4" />
|
||||
Full Documentation
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/dev">
|
||||
<Button variant="outline" size="lg" className="gap-2">
|
||||
<Code2 className="h-4 w-4" />
|
||||
View Examples
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="container mx-auto px-4 py-12">
|
||||
<div className="mx-auto max-w-6xl space-y-16">
|
||||
{/* Getting Started Section */}
|
||||
<section>
|
||||
<div className="mb-6">
|
||||
<h3 className="text-2xl font-semibold tracking-tight mb-2">Getting Started</h3>
|
||||
<p className="text-muted-foreground">
|
||||
New to the design system? Start here for a quick introduction.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{gettingStartedDocs.map((doc) => (
|
||||
<Link key={doc.href} href={doc.href} className="group">
|
||||
<Card className="h-full transition-all hover:shadow-lg hover:border-primary/50">
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="rounded-lg bg-primary/10 p-2.5 text-primary group-hover:bg-primary group-hover:text-primary-foreground transition-colors">
|
||||
{doc.icon}
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-xl">{doc.title}</CardTitle>
|
||||
{doc.badge && (
|
||||
<Badge variant="secondary" className="mt-1">
|
||||
{doc.badge}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription className="text-base">
|
||||
{doc.description}
|
||||
</CardDescription>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Core Concepts Section */}
|
||||
<section>
|
||||
<div className="mb-6">
|
||||
<h3 className="text-2xl font-semibold tracking-tight mb-2">Core Concepts</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Deep dive into the fundamental concepts and patterns of the design system.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{coreConceptsDocs.map((doc) => (
|
||||
<Link key={doc.href} href={doc.href} className="group">
|
||||
<Card className="h-full transition-all hover:shadow-lg hover:border-primary/50">
|
||||
<CardHeader>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="rounded-lg bg-primary/10 p-2.5 text-primary group-hover:bg-primary group-hover:text-primary-foreground transition-colors">
|
||||
{doc.icon}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<CardTitle className="text-lg">{doc.title}</CardTitle>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription>
|
||||
{doc.description}
|
||||
</CardDescription>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* References Section */}
|
||||
<section>
|
||||
<div className="mb-6">
|
||||
<h3 className="text-2xl font-semibold tracking-tight mb-2">References</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Quick references and specialized guides for specific use cases.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{referencesDocs.map((doc) => (
|
||||
<Link key={doc.href} href={doc.href} className="group">
|
||||
<Card className="h-full transition-all hover:shadow-lg hover:border-primary/50">
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="rounded-lg bg-primary/10 p-2.5 text-primary group-hover:bg-primary group-hover:text-primary-foreground transition-colors">
|
||||
{doc.icon}
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-xl">{doc.title}</CardTitle>
|
||||
{doc.badge && (
|
||||
<Badge variant="secondary" className="mt-1">
|
||||
{doc.badge}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription className="text-base">
|
||||
{doc.description}
|
||||
</CardDescription>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="mt-16 border-t py-8">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground mb-1">
|
||||
FastNext Design System
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Built with shadcn/ui, Tailwind CSS, and OKLCH colors
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<Link href="/dev">
|
||||
<Button variant="ghost" size="sm">
|
||||
Interactive Demos
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/docs/design-system/00-quick-start">
|
||||
<Button variant="ghost" size="sm">
|
||||
Quick Start
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user