first commit
This commit is contained in:
Beyhan Oğur
6
ui/app/workspace/docs/layout.tsx
Normal file
6
ui/app/workspace/docs/layout.tsx
Normal file
@@ -0,0 +1,6 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import DocsPage from "./page";
|
||||
|
||||
export const Route = createFileRoute("/workspace/docs")({
|
||||
component: DocsPage,
|
||||
});
|
||||
201
ui/app/workspace/docs/page.tsx
Normal file
201
ui/app/workspace/docs/page.tsx
Normal file
@@ -0,0 +1,201 @@
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import GradientHeader from "@/components/ui/gradientHeader";
|
||||
import { BookOpen, Code, ExternalLink, FileText, GitBranch, Play, Shield, Users, Zap } from "lucide-react";
|
||||
|
||||
const docSections = [
|
||||
{
|
||||
title: "Quick Start",
|
||||
description: "Get Bifrost running in under 30 seconds",
|
||||
icon: Play,
|
||||
url: "https://github.com/maximhq/bifrost/tree/main/docs/quickstart",
|
||||
badge: "Popular",
|
||||
items: ["HTTP Transport Setup", "Go Package Usage", "Docker Guide"],
|
||||
},
|
||||
{
|
||||
title: "Architecture",
|
||||
description: "Deep dive into Bifrost's design and performance",
|
||||
icon: GitBranch,
|
||||
url: "https://github.com/maximhq/bifrost/tree/main/docs/architecture",
|
||||
items: ["System Overview", "Request Flow", "Concurrency Model", "Design Decisions"],
|
||||
},
|
||||
{
|
||||
title: "Usage Guides",
|
||||
description: "Complete API reference and configuration guides",
|
||||
icon: BookOpen,
|
||||
url: "https://github.com/maximhq/bifrost/tree/main/docs/usage",
|
||||
badge: "Comprehensive",
|
||||
items: ["Providers Setup", "Key Management", "Error Handling", "Memory & Networking"],
|
||||
},
|
||||
{
|
||||
title: "Contributing",
|
||||
description: "Help improve Bifrost for everyone",
|
||||
icon: Users,
|
||||
url: "https://github.com/maximhq/bifrost/tree/main/docs/contributing",
|
||||
items: ["Contributing Guide", "Adding Providers", "Plugin Development", "Code Conventions"],
|
||||
},
|
||||
{
|
||||
title: "Integration Examples",
|
||||
description: "Practical examples and testing code",
|
||||
icon: Code,
|
||||
url: "https://github.com/maximhq/bifrost/tree/main/docs/usage/http-transport/integrations",
|
||||
items: ["OpenAI Integration", "Anthropic Integration", "GenAI Integration", "Migration Guides"],
|
||||
},
|
||||
{
|
||||
title: "Benchmarks",
|
||||
description: "Performance metrics and guides",
|
||||
icon: Zap,
|
||||
url: "https://github.com/maximhq/bifrost/blob/main/docs/benchmarks.md",
|
||||
items: ["5K RPS Test Results", "Performance Metrics", "Configuration Tuning", "Hardware Comparisons"],
|
||||
},
|
||||
];
|
||||
|
||||
const featuredDocs = [
|
||||
{
|
||||
title: "MCP Documentation",
|
||||
description: "Comprehensive guide to Model Context Protocol integration",
|
||||
content: "Learn how to build sophisticated AI agents with MCP support, tool calling, and external integrations.",
|
||||
href: "https://github.com/maximhq/bifrost/blob/main/docs/mcp.md",
|
||||
icon: FileText,
|
||||
buttonText: "View MCP Guide",
|
||||
borderColor: "border-primary/20",
|
||||
backgroundColor: "bg-primary/5",
|
||||
iconColor: "text-primary",
|
||||
},
|
||||
{
|
||||
title: "Governance Plugin",
|
||||
description: "Complete access control, budgets, and rate limiting guide",
|
||||
content: "Master Virtual Keys, hierarchical budgets, rate limiting, and usage tracking for secure AI infrastructure.",
|
||||
href: "https://github.com/maximhq/bifrost/blob/main/docs/governance.md",
|
||||
icon: Shield,
|
||||
buttonText: "View Governance Guide",
|
||||
borderColor: "border-green-200 dark:border-green-800",
|
||||
backgroundColor: "bg-green-50 dark:bg-green-950/20",
|
||||
iconColor: "text-green-600",
|
||||
},
|
||||
];
|
||||
|
||||
export default function DocsPage() {
|
||||
return (
|
||||
<div className="dark:bg-card bg-white">
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<div className="space-y-8">
|
||||
{/* Header */}
|
||||
<div className="space-y-4 text-center">
|
||||
<div className="bg-primary/10 text-primary inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm">
|
||||
<BookOpen className="h-4 w-4" />
|
||||
<span className="font-semibold">Documentation</span>
|
||||
</div>
|
||||
<GradientHeader title="Power Up Your Bifrost Stack" />
|
||||
<p className="text-muted-foreground mx-auto max-w-2xl text-lg">
|
||||
Everything you need to know about building production AI applications with Bifrost
|
||||
</p>
|
||||
<div className="flex justify-center gap-4">
|
||||
<Button asChild>
|
||||
<a
|
||||
href="https://github.com/maximhq/bifrost/tree/main/docs"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
data-testid="docs-view-full-documentation-link"
|
||||
>
|
||||
<ExternalLink className="mr-2 h-4 w-4" />
|
||||
View Full Documentation
|
||||
</a>
|
||||
</Button>
|
||||
<Button variant="outline" asChild>
|
||||
<a
|
||||
href="https://github.com/maximhq/bifrost/tree/main/docs/quickstart"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
data-testid="docs-quick-start-guide-link"
|
||||
>
|
||||
<Play className="mr-2 h-4 w-4" />
|
||||
Quick Start Guide
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Documentation Sections */}
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{docSections.map((section) => {
|
||||
const Icon = section.icon;
|
||||
return (
|
||||
<Card key={section.title} className="group transition-all duration-200 hover:shadow-lg">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="bg-primary/10 group-hover:bg-primary/20 mb-4 flex h-12 w-12 items-center justify-center rounded-lg transition-colors">
|
||||
<Icon className="text-primary h-6 w-6" />
|
||||
</div>
|
||||
{section.badge && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{section.badge}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<CardTitle className="text-xl">{section.title}</CardTitle>
|
||||
<CardDescription className="leading-relaxed">{section.description}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex h-full flex-col justify-between gap-8">
|
||||
<div className="space-y-4">
|
||||
<ul className="space-y-2">
|
||||
{section.items.map((item, index) => (
|
||||
<li key={index} className="text-muted-foreground flex items-center gap-2 text-sm">
|
||||
<div className="bg-primary h-1.5 w-1.5 rounded-full" />
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<Button asChild variant="outline" className="w-full">
|
||||
<a
|
||||
href={section.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center gap-2"
|
||||
data-testid={`docs-read-more-${section.title.replace(/[^a-z0-9]+/gi, "-").toLowerCase()}`}
|
||||
>
|
||||
Read More
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</a>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Featured Documentation */}
|
||||
<div className="grid gap-6 pt-8 md:grid-cols-2">
|
||||
{featuredDocs.map((doc, index) => (
|
||||
<Card className={`${doc.borderColor} ${doc.backgroundColor}`} key={index}>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<doc.icon className={`h-5 w-5 ${doc.iconColor}`} />
|
||||
{doc.title}
|
||||
</CardTitle>
|
||||
<CardDescription>{doc.description}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-muted-foreground mb-4 text-sm">{doc.content}</p>
|
||||
<Button asChild className="w-full">
|
||||
<a
|
||||
href={doc.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
data-testid={`docs-featured-${doc.title.replace(/[^a-z0-9]+/gi, "-").toLowerCase()}`}
|
||||
>
|
||||
<doc.icon className="mr-2 h-4 w-4" />
|
||||
{doc.buttonText}
|
||||
</a>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user