Skip to content

Commit 97a09b5

Browse files
peterjpeterj
authored
Merge pull request #215 from kagent-dev/peterj/addlablink
add a kagent/kmcp lab
2 parents 006729e + 41f0e0e commit 97a09b5

File tree

5 files changed

+137
-0
lines changed

5 files changed

+137
-0
lines changed

‎src/app/docs/DocsLayoutClient.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import { usePathname } from "next/navigation";
55
import { Button } from "@/components/ui/button";
66
import { Menu, X, ChevronDown, ChevronUp } from "lucide-react";
77
import { Background } from "@/components/background";
8+
import { LabCTA } from "@/components/mdx/lab-cta";
9+
import { LabsCarousel } from "@/components/mdx/labs-carousel";
10+
import labs from "@/data/labs.yaml";
811

912
interface NavItem {
1013
title: string;
@@ -190,6 +193,16 @@ export default function DocsLayoutClient({ navigation, children }: DocsLayoutCli
190193
{/* Main content */}
191194
<div className="prose-lg p-4 md:p-8 lg:p-16 flex-1 prose-li:marker:text-muted-foreground prose-ol:list-decimal prose-ul:list-disc prose-blockquote:border-l-4 prose-blockquote:border-primary prose-blockquote:italic overflow-x-hidden">
192195
{children}
196+
197+
{labs?.labs && labs.labs.length > 1 ? (
198+
<LabsCarousel labs={labs.labs} />
199+
) : labs?.labs?.length === 1 ? (
200+
<LabCTA
201+
title={labs.labs[0].title}
202+
description={labs.labs[0].description}
203+
href={labs.labs[0].href}
204+
/>
205+
) : null}
193206
</div>
194207
</div>
195208
</div>

‎src/components/mdx/lab-cta.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
5+
import { Button } from "@/components/ui/button"
6+
import KagentLogo from "@/components/icons/kagent-logo"
7+
8+
export interface LabCTAProps {
9+
title: string
10+
description: string
11+
href: string
12+
ctaLabel?: string
13+
}
14+
15+
export function LabCTA({ title, description, href, ctaLabel = "Start the Lab" }: LabCTAProps) {
16+
return (
17+
<Card className="relative mt-16 overflow-hidden bg-gradient-to-br from-primary/5 to-primary/10">
18+
<div className="pointer-events-none absolute -right-24 -top-24 h-64 w-64 rounded-full bg-primary/20 blur-3xl" />
19+
<CardHeader className="px-8 pt-14 pb-8">
20+
<div className="flex items-start gap-6">
21+
<div className="flex items-center justify-center text-primary">
22+
<KagentLogo animate width={100} height={75} aria-hidden="true" />
23+
</div>
24+
<div className="max-w-2xl">
25+
<CardTitle className="text-2xl leading-tight">{title}</CardTitle>
26+
<CardDescription className="mt-2 text-base leading-relaxed">
27+
{description}
28+
</CardDescription>
29+
<div className="mt-4 hidden sm:block">
30+
<Button size="lg" className="shadow-lg" asChild>
31+
<a href={href} target="_blank" rel="noopener noreferrer">
32+
{ctaLabel}
33+
</a>
34+
</Button>
35+
</div>
36+
</div>
37+
</div>
38+
</CardHeader>
39+
<CardContent className="px-8 pb-8 sm:hidden">
40+
<Button size="lg" className="w-full shadow-lg" asChild>
41+
<a href={href} target="_blank" rel="noopener noreferrer">
42+
{ctaLabel}
43+
</a>
44+
</Button>
45+
</CardContent>
46+
</Card>
47+
)
48+
}
49+
50+
export default LabCTA
51+
52+

‎src/components/mdx/labs-carousel.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import { LabCTA } from "@/components/mdx/lab-cta"
5+
import { Button } from "@/components/ui/button"
6+
import { ChevronLeft, ChevronRight } from "lucide-react"
7+
8+
interface LabItem {
9+
id: string
10+
title: string
11+
description: string
12+
href: string
13+
}
14+
15+
interface LabsCarouselProps {
16+
labs: LabItem[]
17+
}
18+
19+
export function LabsCarousel({ labs }: LabsCarouselProps) {
20+
const [index, setIndex] = React.useState(0)
21+
const hasMultiple = labs?.length > 1
22+
23+
const goPrev = () => setIndex((prev) => (prev - 1 + labs.length) % labs.length)
24+
const goNext = () => setIndex((prev) => (prev + 1) % labs.length)
25+
26+
if (!labs || labs.length === 0) return null
27+
28+
const current = labs[index]
29+
30+
return (
31+
<div className="mt-10">
32+
<div className="relative">
33+
{hasMultiple && (
34+
<div className="absolute -top-10 right-0 flex items-center gap-2">
35+
<Button variant="outline" size="icon" onClick={goPrev} aria-label="Previous lab">
36+
<ChevronLeft className="h-4 w-4" />
37+
</Button>
38+
<Button variant="outline" size="icon" onClick={goNext} aria-label="Next lab">
39+
<ChevronRight className="h-4 w-4" />
40+
</Button>
41+
</div>
42+
)}
43+
44+
<LabCTA title={current.title} description={current.description} href={current.href} />
45+
</div>
46+
47+
{hasMultiple && (
48+
<div className="mt-4 flex justify-center gap-2">
49+
{labs.map((_, i) => (
50+
<button
51+
key={i}
52+
aria-label={`Go to slide ${i + 1}`}
53+
onClick={() => setIndex(i)}
54+
className={`h-2 w-2 rounded-full transition-colors ${i === index ? 'bg-primary' : 'bg-muted-foreground/30 hover:bg-muted-foreground/60'}`}
55+
/>
56+
))}
57+
</div>
58+
)}
59+
</div>
60+
)
61+
}
62+
63+
export default LabsCarousel
64+
65+

‎src/data/labs.yaml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
labs:
2+
- id: kagent-kmcp-discover
3+
title: "Kagent Lab: Discover kagent and kmcp"
4+
description: "Free, on‑demand lab: build custom AI agents with kagent and integrate tools via kmcp on Kubernetes."
5+
href: "https://www.solo.io/resources/lab/kagent-lab-discover-kagent-kmcp/?utm_source=kagent-website&utm_medium=referral"

‎src/mdx-components.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { PlatformTabs } from "./components/mdx/platform-tabs";
44
import { Tabs } from "./components/mdx/tabs";
55
import SmartLink from "./components/mdx/smart-link";
66
import { CodeBlock } from "./components/mdx/code-block";
7+
import { LabCTA } from "./components/mdx/lab-cta";
78
import Image from "next/image";
89
import { generateAnchorId } from "@/lib/utils";
910

@@ -167,6 +168,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
167168
PlatformTabs,
168169
Tabs,
169170
YouTube,
171+
LabCTA,
170172
...components,
171173
}),
172174
[components]

0 commit comments

Comments
 (0)