phoenix-oss/llama-stack-mirror
0
0
Fork 1
mirror of https://github.com/meta-llama/llama-stack.git synced 2025-10-03 19:57:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: frontpage update (#3620)

Browse source 
# What does this PR do?
* Adds canonical project information and links to client SDK / k8s
operator / app examples repos to the front page
* Fixes some button rendering errors

Closes #3618  

## Test Plan
Local rebuild of the documentation server
This commit is contained in:
Alexey Rybak 2025-09-30 14:11:00 -07:00 • committed by GitHub
parent 606f4cf281
commit c4c980b056
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 138 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

55
docs/src/pages/index.js
View file

@ -108,6 +108,60 @@ response = client.chat.completions.create(
);
}
function Ecosystem() {
return (
<section className={styles.ecosystem}>
<div className="container">
<div className="text--center">
<h2 className={styles.sectionTitle}>Llama Stack Ecosystem</h2>
<p className={styles.sectionDescription}>
Complete toolkit for building AI applications with Llama Stack
</p>
</div>
<div className="row margin-top--lg">
<div className="col col--4">
<div className={styles.ecosystemCard}>
<div className={styles.ecosystemIcon}>🛠️</div>
<h3>SDKs & Clients</h3>
<p>Official client libraries for multiple programming languages</p>
<div className={styles.linkGroup}>
<a href="https://github.com/llamastack/llama-stack-client-python" target="_blank" rel="noopener noreferrer">Python SDK</a>
<a href="https://github.com/llamastack/llama-stack-client-typescript" target="_blank" rel="noopener noreferrer">TypeScript SDK</a>
<a href="https://github.com/llamastack/llama-stack-client-kotlin" target="_blank" rel="noopener noreferrer">Kotlin SDK</a>
<a href="https://github.com/llamastack/llama-stack-client-swift" target="_blank" rel="noopener noreferrer">Swift SDK</a>
<a href="https://github.com/llamastack/llama-stack-client-go" target="_blank" rel="noopener noreferrer">Go SDK</a>
</div>
</div>
</div>
<div className="col col--4">
<div className={styles.ecosystemCard}>
<div className={styles.ecosystemIcon}>🚀</div>
<h3>Example Applications</h3>
<p>Ready-to-run examples to jumpstart your AI projects</p>
<div className={styles.linkGroup}>
<a href="https://github.com/llamastack/llama-stack-apps" target="_blank" rel="noopener noreferrer">Browse Example Apps</a>
</div>
</div>
</div>
<div className="col col--4">
<div className={styles.ecosystemCard}>
<div className={styles.ecosystemIcon}>☸️</div>
<h3>Kubernetes Operator</h3>
<p>Deploy and manage Llama Stack on Kubernetes clusters</p>
<div className={styles.linkGroup}>
<a href="https://github.com/llamastack/llama-stack-k8s-operator" target="_blank" rel="noopener noreferrer">K8s Operator</a>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
function CommunityLinks() {
return (
<section className={styles.community}>
@ -156,6 +210,7 @@ export default function Home() {
<HomepageHeader />
<main>
<QuickStart />
<Ecosystem />
<CommunityLinks />
</main>
</Layout>

83
docs/src/pages/index.module.css
View file

@ -185,6 +185,67 @@
line-height: 1.5;
}
/* Ecosystem Section */
.ecosystem {
padding: 4rem 0;
background: var(--ifm-background-color);
}
.ecosystemCard {
padding: 2rem;
border-radius: 12px;
background: var(--ifm-color-gray-50);
border: 1px solid var(--ifm-color-gray-200);
text-align: center;
height: 100%;
transition: all 0.3s ease;
}
.ecosystemCard:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
border-color: var(--ifm-color-primary-lighter);
}
.ecosystemIcon {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
}
.ecosystemCard h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: var(--ifm-color-emphasis-800);
}
.ecosystemCard p {
color: var(--ifm-color-emphasis-600);
margin-bottom: 1.5rem;
line-height: 1.5;
}
.linkGroup {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.linkGroup a {
color: var(--ifm-color-primary);
text-decoration: none;
font-weight: 500;
padding: 0.5rem;
border-radius: 6px;
transition: all 0.2s ease;
}
.linkGroup a:hover {
background: var(--ifm-color-primary-lightest);
color: var(--ifm-color-primary-darker);
}
/* Community Section */
.community {
padding: 3rem 0;
@ -211,11 +272,16 @@
gap: 0.5rem;
font-weight: 600;
transition: all 0.3s ease;
color: var(--ifm-color-primary) !important;
border-color: var(--ifm-color-primary) !important;
}
.communityButton:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
background: var(--ifm-color-primary) !important;
color: white !important;
border-color: var(--ifm-color-primary) !important;
}
.communityIcon {
@ -258,6 +324,15 @@
width: 200px;
justify-content: center;
}
.ecosystem {
padding: 3rem 0;
}
.ecosystemCard {
margin-bottom: 2rem;
padding: 1.5rem;
}
}
@media screen and (max-width: 768px) {
@ -280,4 +355,12 @@
.feature {
padding: 0.75rem;
}
.ecosystemCard {
padding: 1.25rem;
}
.ecosystemIcon {
font-size: 2.5rem;
}
}