mirror of
https://github.com/meta-llama/llama-stack.git
synced 2025-10-03 19:57:35 +00:00
docs: static content migration (#3535)
# What does this PR do? - Migrates static content from Sphinx to Docusaurus <!-- Provide a short summary of what this PR does and why. Link to relevant issues if applicable. --> <!-- If resolving an issue, uncomment and update the line below --> <!-- Closes #[issue-number] --> ## Test Plan <!-- Describe the tests you ran to verify your changes with result summaries. *Provide clear instructions so the plan can be easily re-executed.* -->
This commit is contained in:
Alexey Rybak
GitHub
parent
c71ce8df61
commit
610526d6d7
21 changed files with 719 additions and 382 deletions
136
docs/_static/css/my_theme.css
vendored
136
docs/_static/css/my_theme.css
vendored
|
|
@ -1,136 +0,0 @@
|
|||
@import url("theme.css");
|
||||
|
||||
/* Horizontal Navigation Bar */
|
||||
.horizontal-nav {
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1050;
|
||||
height: 50px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .horizontal-nav {
|
||||
background-color: #1a1a1a;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.horizontal-nav .nav-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.horizontal-nav .nav-brand {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .horizontal-nav .nav-brand {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.horizontal-nav .nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.horizontal-nav .nav-links a {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.horizontal-nav .nav-links a:hover,
|
||||
.horizontal-nav .nav-links a.active {
|
||||
color: #333;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.horizontal-nav .nav-links a.active {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .horizontal-nav .nav-links a {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .horizontal-nav .nav-links a:hover,
|
||||
[data-theme="dark"] .horizontal-nav .nav-links a.active {
|
||||
color: #fff;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.horizontal-nav .nav-links .github-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.horizontal-nav .nav-links .github-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/* Adjust main content to account for fixed nav */
|
||||
.wy-nav-side {
|
||||
top: 50px;
|
||||
height: calc(100vh - 50px);
|
||||
}
|
||||
|
||||
.wy-nav-content-wrap {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.wy-nav-content {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.wy-nav-side {
|
||||
/* background: linear-gradient(45deg, #2980B9, #16A085); */
|
||||
background: linear-gradient(90deg, #332735, #1b263c);
|
||||
}
|
||||
|
||||
.wy-side-nav-search {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.hide-title h1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h2, h3, h4 {
|
||||
font-weight: normal;
|
||||
}
|
||||
html[data-theme="dark"] .rst-content div[class^="highlight"] {
|
||||
background-color: #0b0b0b;
|
||||
}
|
||||
pre {
|
||||
white-space: pre-wrap !important;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .mermaid {
|
||||
background-color: #f4f4f6 !important;
|
||||
border-radius: 6px;
|
||||
padding: 0.5em;
|
||||
}
|
||||
32
docs/_static/js/detect_theme.js
vendored
32
docs/_static/js/detect_theme.js
vendored
|
|
@ -1,32 +0,0 @@
|
|||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
const htmlElement = document.documentElement;
|
||||
|
||||
// Check if theme is saved in localStorage
|
||||
const savedTheme = localStorage.getItem("sphinx-rtd-theme");
|
||||
|
||||
if (savedTheme) {
|
||||
// Use the saved theme preference
|
||||
htmlElement.setAttribute("data-theme", savedTheme);
|
||||
document.body.classList.toggle("dark", savedTheme === "dark");
|
||||
} else {
|
||||
// Fall back to system preference
|
||||
const theme = prefersDark ? "dark" : "light";
|
||||
htmlElement.setAttribute("data-theme", theme);
|
||||
document.body.classList.toggle("dark", theme === "dark");
|
||||
// Save initial preference
|
||||
localStorage.setItem("sphinx-rtd-theme", theme);
|
||||
}
|
||||
|
||||
// Listen for theme changes from the existing toggle
|
||||
const observer = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(function(mutation) {
|
||||
if (mutation.attributeName === "data-theme") {
|
||||
const currentTheme = htmlElement.getAttribute("data-theme");
|
||||
localStorage.setItem("sphinx-rtd-theme", currentTheme);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(htmlElement, { attributes: true });
|
||||
});
|
||||
44
docs/_static/js/horizontal_nav.js
vendored
44
docs/_static/js/horizontal_nav.js
vendored
|
|
@ -1,44 +0,0 @@
|
|||
// Horizontal Navigation Bar for Llama Stack Documentation
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Create the horizontal navigation HTML
|
||||
const navHTML = `
|
||||
<nav class="horizontal-nav">
|
||||
<div class="nav-container">
|
||||
<a href="/" class="nav-brand">Llama Stack</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="/">Docs</a></li>
|
||||
<li><a href="/references/api_reference/">API Reference</a></li>
|
||||
<li><a href="https://github.com/meta-llama/llama-stack" target="_blank" class="github-link">
|
||||
<svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
|
||||
</svg>
|
||||
GitHub
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
`;
|
||||
|
||||
// Insert the navigation at the beginning of the body
|
||||
document.body.insertAdjacentHTML('afterbegin', navHTML);
|
||||
|
||||
// Update navigation links based on current page
|
||||
updateActiveNav();
|
||||
});
|
||||
|
||||
function updateActiveNav() {
|
||||
const currentPath = window.location.pathname;
|
||||
const navLinks = document.querySelectorAll('.horizontal-nav .nav-links a');
|
||||
|
||||
navLinks.forEach(link => {
|
||||
// Remove any existing active classes
|
||||
link.classList.remove('active');
|
||||
|
||||
// Add active class based on current path
|
||||
if (currentPath === '/' && link.getAttribute('href') === '/') {
|
||||
link.classList.add('active');
|
||||
} else if (currentPath.includes('/references/api_reference/') && link.getAttribute('href').includes('api_reference')) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
14
docs/_static/js/keyboard_shortcuts.js
vendored
14
docs/_static/js/keyboard_shortcuts.js
vendored
|
|
@ -1,14 +0,0 @@
|
|||
document.addEventListener('keydown', function(event) {
|
||||
// command+K or ctrl+K
|
||||
if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
|
||||
event.preventDefault();
|
||||
document.querySelector('.search-input, .search-field, input[name="q"]').focus();
|
||||
}
|
||||
|
||||
// forward slash
|
||||
if (event.key === '/' &&
|
||||
!event.target.matches('input, textarea, select')) {
|
||||
event.preventDefault();
|
||||
document.querySelector('.search-input, .search-field, input[name="q"]').focus();
|
||||
}
|
||||
});
|
||||
|
|
@ -1,156 +0,0 @@
|
|||
# Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
# All rights reserved.
|
||||
#
|
||||
# This source code is licensed under the terms described in the LICENSE file in
|
||||
# the root directory of this source tree.
|
||||
|
||||
# Configuration file for the Sphinx documentation builder.
|
||||
#
|
||||
# For the full list of built-in configuration values, see the documentation:
|
||||
# https://www.sphinx-doc.org/en/master/usage/configuration.html
|
||||
|
||||
# -- Project information -----------------------------------------------------
|
||||
# https://www.sphinx-doc.org/en/master/usage/configuration.html#project-information
|
||||
|
||||
import json
|
||||
from datetime import datetime
|
||||
from pathlib import Path
|
||||
|
||||
import requests
|
||||
from docutils import nodes
|
||||
|
||||
# Read version from pyproject.toml
|
||||
with Path(__file__).parent.parent.parent.joinpath("pyproject.toml").open("rb") as f:
|
||||
pypi_url = "https://pypi.org/pypi/llama-stack/json"
|
||||
headers = {
|
||||
'User-Agent': 'pip/23.0.1 (python 3.11)', # Mimic pip's user agent
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
version_tag = json.loads(requests.get(pypi_url, headers=headers).text)["info"]["version"]
|
||||
print(f"{version_tag=}")
|
||||
|
||||
# generate the full link including text and url here
|
||||
llama_stack_version_url = (
|
||||
f"https://github.com/meta-llama/llama-stack/releases/tag/v{version_tag}"
|
||||
)
|
||||
llama_stack_version_link = f"<a href='{llama_stack_version_url}'>release notes</a>"
|
||||
|
||||
project = "llama-stack"
|
||||
copyright = f"{datetime.now().year}, Meta"
|
||||
author = "Meta"
|
||||
|
||||
# -- General configuration ---------------------------------------------------
|
||||
# https://www.sphinx-doc.org/en/master/usage/configuration.html#general-configuration
|
||||
|
||||
extensions = [
|
||||
"myst_parser",
|
||||
"sphinx_copybutton",
|
||||
"sphinx_design",
|
||||
"sphinx_rtd_theme",
|
||||
"sphinx_rtd_dark_mode",
|
||||
"sphinx_tabs.tabs",
|
||||
"sphinxcontrib.redoc",
|
||||
"sphinxcontrib.mermaid",
|
||||
"sphinxcontrib.video",
|
||||
"sphinx_reredirects"
|
||||
]
|
||||
|
||||
redirects = {
|
||||
"providers/post_training/index": "../../advanced_apis/post_training/index.html",
|
||||
"providers/eval/index": "../../advanced_apis/eval/index.html",
|
||||
"providers/scoring/index": "../../advanced_apis/scoring/index.html",
|
||||
"playground/index": "../../building_applications/playground/index.html",
|
||||
"openai/index": "../../providers/index.html#openai-api-compatibility",
|
||||
"introduction/index": "../concepts/index.html#llama-stack-architecture"
|
||||
}
|
||||
|
||||
myst_enable_extensions = ["colon_fence"]
|
||||
|
||||
html_theme = "sphinx_rtd_theme"
|
||||
html_use_relative_paths = True
|
||||
templates_path = ["_templates"]
|
||||
exclude_patterns = ["_build", "Thumbs.db", ".DS_Store"]
|
||||
|
||||
myst_enable_extensions = [
|
||||
"amsmath",
|
||||
"attrs_inline",
|
||||
"attrs_block",
|
||||
"colon_fence",
|
||||
"deflist",
|
||||
"dollarmath",
|
||||
"fieldlist",
|
||||
"html_admonition",
|
||||
"html_image",
|
||||
# "linkify",
|
||||
"replacements",
|
||||
"smartquotes",
|
||||
"strikethrough",
|
||||
"substitution",
|
||||
"tasklist",
|
||||
]
|
||||
|
||||
myst_substitutions = {
|
||||
"docker_hub": "https://hub.docker.com/repository/docker/llamastack",
|
||||
"llama_stack_version": version_tag,
|
||||
"llama_stack_version_link": llama_stack_version_link,
|
||||
}
|
||||
|
||||
suppress_warnings = ["myst.header"]
|
||||
|
||||
# Copy button settings
|
||||
copybutton_prompt_text = "$ " # for bash prompts
|
||||
copybutton_prompt_is_regexp = True
|
||||
copybutton_remove_prompts = True
|
||||
copybutton_line_continuation_character = "\\"
|
||||
|
||||
# Source suffix
|
||||
source_suffix = {
|
||||
".rst": "restructuredtext",
|
||||
".md": "markdown",
|
||||
}
|
||||
|
||||
# -- Options for HTML output -------------------------------------------------
|
||||
# https://www.sphinx-doc.org/en/master/usage/configuration.html#options-for-html-output
|
||||
|
||||
# html_theme = "alabaster"
|
||||
html_theme_options = {
|
||||
"canonical_url": "https://github.com/meta-llama/llama-stack",
|
||||
"collapse_navigation": False,
|
||||
# "style_nav_header_background": "#c3c9d4",
|
||||
'display_version': True,
|
||||
'version_selector': True,
|
||||
}
|
||||
|
||||
default_dark_mode = False
|
||||
|
||||
html_static_path = ["../_static"]
|
||||
# html_logo = "../_static/llama-stack-logo.png"
|
||||
# html_style = "../_static/css/my_theme.css"
|
||||
|
||||
|
||||
def setup(app):
|
||||
app.add_css_file("css/my_theme.css")
|
||||
app.add_js_file("js/detect_theme.js")
|
||||
app.add_js_file("js/horizontal_nav.js")
|
||||
app.add_js_file("js/keyboard_shortcuts.js")
|
||||
|
||||
def dockerhub_role(name, rawtext, text, lineno, inliner, options={}, content=[]):
|
||||
url = f"https://hub.docker.com/r/llamastack/{text}"
|
||||
node = nodes.reference(rawtext, text, refuri=url, **options)
|
||||
return [node], []
|
||||
|
||||
def repopath_role(name, rawtext, text, lineno, inliner, options={}, content=[]):
|
||||
parts = text.split("::")
|
||||
if len(parts) == 2:
|
||||
link_text = parts[0]
|
||||
url_path = parts[1]
|
||||
else:
|
||||
link_text = text
|
||||
url_path = text
|
||||
|
||||
url = f"https://github.com/meta-llama/llama-stack/tree/main/{url_path}"
|
||||
node = nodes.reference(rawtext, link_text, refuri=url, **options)
|
||||
return [node], []
|
||||
|
||||
app.add_role("dockerhub", dockerhub_role)
|
||||
app.add_role("repopath", repopath_role)
|
||||
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 68 KiB |
|
Before Width: | Height: | Size: 249 KiB After Width: | Height: | Size: 249 KiB |
|
Before Width: | Height: | Size: 145 KiB After Width: | Height: | Size: 145 KiB |
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 70 KiB |
|
Before Width: | Height: | Size: 196 KiB After Width: | Height: | Size: 196 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 204 KiB After Width: | Height: | Size: 204 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
64
docs/static/src/components/HomepageFeatures/index.js
vendored
Normal file
64
docs/static/src/components/HomepageFeatures/index.js
vendored
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import styles from './styles.module.css';
|
||||
|
||||
const FeatureList = [
|
||||
{
|
||||
title: 'Easy to Use',
|
||||
Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
|
||||
description: (
|
||||
<>
|
||||
Docusaurus was designed from the ground up to be easily installed and
|
||||
used to get your website up and running quickly.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Focus on What Matters',
|
||||
Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
|
||||
description: (
|
||||
<>
|
||||
Docusaurus lets you focus on your docs, and we'll do the chores. Go
|
||||
ahead and move your docs into the <code>docs</code> directory.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Powered by React',
|
||||
Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
|
||||
description: (
|
||||
<>
|
||||
Extend or customize your website layout by reusing React. Docusaurus can
|
||||
be extended while reusing the same header and footer.
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
function Feature({Svg, title, description}) {
|
||||
return (
|
||||
<div className={clsx('col col--4')}>
|
||||
<div className="text--center">
|
||||
<Svg className={styles.featureSvg} role="img" />
|
||||
</div>
|
||||
<div className="text--center padding-horiz--md">
|
||||
<h3>{title}</h3>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomepageFeatures() {
|
||||
return (
|
||||
<section className={styles.features}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
{FeatureList.map((props, idx) => (
|
||||
<Feature key={idx} {...props} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
11
docs/static/src/components/HomepageFeatures/styles.module.css
vendored
Normal file
11
docs/static/src/components/HomepageFeatures/styles.module.css
vendored
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
.features {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.featureSvg {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
191
docs/static/src/css/custom.css
vendored
Normal file
191
docs/static/src/css/custom.css
vendored
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
/**
|
||||
* Any CSS included here will be global. The classic template
|
||||
* bundles Infima by default. Infima is a CSS framework designed to
|
||||
* work well for content-centric websites.
|
||||
*/
|
||||
|
||||
/* You can override the default Infima variables here. */
|
||||
:root {
|
||||
/* Llama Stack Original Theme - Based on llamastack.github.io */
|
||||
--ifm-color-primary: #4a4a68;
|
||||
--ifm-color-primary-dark: #3a3a52;
|
||||
--ifm-color-primary-darker: #332735;
|
||||
--ifm-color-primary-darkest: #2b2129;
|
||||
--ifm-color-primary-light: #5a5a7e;
|
||||
--ifm-color-primary-lighter: #6a6a94;
|
||||
--ifm-color-primary-lightest: #8080aa;
|
||||
|
||||
/* Additional theme colors */
|
||||
--ifm-color-secondary: #1b263c;
|
||||
--ifm-color-info: #2980b9;
|
||||
--ifm-color-success: #16a085;
|
||||
--ifm-color-warning: #f39c12;
|
||||
--ifm-color-danger: #e74c3c;
|
||||
|
||||
/* Background colors */
|
||||
--ifm-background-color: #ffffff;
|
||||
--ifm-background-surface-color: #f8f9fa;
|
||||
|
||||
/* Code and syntax highlighting */
|
||||
--ifm-code-font-size: 95%;
|
||||
--ifm-pre-background: #1b263c;
|
||||
--ifm-pre-color: #e1e5e9;
|
||||
--docusaurus-highlighted-code-line-bg: rgba(51, 39, 53, 0.1);
|
||||
|
||||
/* Link colors */
|
||||
--ifm-link-color: var(--ifm-color-primary);
|
||||
--ifm-link-hover-color: var(--ifm-color-primary-darker);
|
||||
|
||||
/* Navbar */
|
||||
--ifm-navbar-background-color: rgba(255, 255, 255, 0.95);
|
||||
--ifm-navbar-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* Hero section gradient - matching original theme */
|
||||
--hero-gradient: linear-gradient(90deg, #332735 0%, #1b263c 100%);
|
||||
|
||||
/* OpenAPI method colors */
|
||||
--openapi-code-blue: #2980b9;
|
||||
--openapi-code-green: #16a085;
|
||||
--openapi-code-orange: #f39c12;
|
||||
--openapi-code-red: #e74c3c;
|
||||
--openapi-code-purple: #332735;
|
||||
}
|
||||
|
||||
/* For readability concerns, you should choose a lighter palette in dark mode. */
|
||||
[data-theme='dark'] {
|
||||
/* Dark theme primary colors - lighter versions of original theme */
|
||||
--ifm-color-primary: #8080aa;
|
||||
--ifm-color-primary-dark: #6a6a94;
|
||||
--ifm-color-primary-darker: #5a5a7e;
|
||||
--ifm-color-primary-darkest: #4a4a68;
|
||||
--ifm-color-primary-light: #9090ba;
|
||||
--ifm-color-primary-lighter: #a0a0ca;
|
||||
--ifm-color-primary-lightest: #b0b0da;
|
||||
|
||||
/* Dark theme background colors */
|
||||
--ifm-background-color: #1a1a1a;
|
||||
--ifm-background-surface-color: #2a2a2a;
|
||||
|
||||
/* Dark theme navbar */
|
||||
--ifm-navbar-background-color: rgba(26, 26, 26, 0.95);
|
||||
|
||||
/* Dark theme code highlighting */
|
||||
--docusaurus-highlighted-code-line-bg: rgba(51, 39, 53, 0.3);
|
||||
|
||||
/* Dark theme text colors */
|
||||
--ifm-font-color-base: #e1e5e9;
|
||||
--ifm-font-color-secondary: #a0a6ac;
|
||||
}
|
||||
|
||||
/* Sidebar Method labels */
|
||||
.api-method>.menu__link {
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.api-method>.menu__link::before {
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
border-radius: 0.25rem;
|
||||
border: 1px solid;
|
||||
margin-right: var(--ifm-spacing-horizontal);
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.get>.menu__link::before {
|
||||
content: "get";
|
||||
background-color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.put>.menu__link::before {
|
||||
content: "put";
|
||||
background-color: var(--openapi-code-blue);
|
||||
}
|
||||
|
||||
.post>.menu__link::before {
|
||||
content: "post";
|
||||
background-color: var(--openapi-code-green);
|
||||
}
|
||||
|
||||
.delete>.menu__link::before {
|
||||
content: "del";
|
||||
background-color: var(--openapi-code-red);
|
||||
}
|
||||
|
||||
.patch>.menu__link::before {
|
||||
content: "patch";
|
||||
background-color: var(--openapi-code-orange);
|
||||
}
|
||||
|
||||
.footer--dark {
|
||||
--ifm-footer-link-color: #ffffff;
|
||||
--ifm-footer-title-color: #ffffff;
|
||||
}
|
||||
|
||||
.footer--dark .footer__link-item {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.footer--dark .footer__title {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* OpenAPI theme fixes for light mode readability */
|
||||
/* Version badge fixes */
|
||||
.openapi__version-badge,
|
||||
.theme-doc-version-badge,
|
||||
[class*="version-badge"],
|
||||
[class*="versionBadge"] {
|
||||
background-color: #ffffff !important;
|
||||
color: #333333 !important;
|
||||
border: 1px solid #d1d5db !important;
|
||||
}
|
||||
|
||||
/* OpenAPI method badges in light mode */
|
||||
.openapi__method-badge,
|
||||
[class*="method-badge"] {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Button fixes for light mode */
|
||||
.openapi__button,
|
||||
.theme-api-docs-demo-panel button,
|
||||
[class*="api-docs"] button,
|
||||
button[class*="button"],
|
||||
.openapi-explorer__response-schema button,
|
||||
.openapi-tabs__operation button {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.openapi__button:hover,
|
||||
.theme-api-docs-demo-panel button:hover,
|
||||
[class*="api-docs"] button:hover,
|
||||
button[class*="button"]:hover,
|
||||
.openapi-explorer__response-schema button:hover,
|
||||
.openapi-tabs__operation button:hover {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Navigation buttons (Next/Previous) */
|
||||
.pagination-nav__link,
|
||||
.pagination-nav__label {
|
||||
color: #333333 !important;
|
||||
}
|
||||
|
||||
.pagination-nav__link--next,
|
||||
.pagination-nav__link--prev {
|
||||
background-color: #ffffff !important;
|
||||
border: 1px solid #d1d5db !important;
|
||||
}
|
||||
|
||||
.pagination-nav__link--next:hover,
|
||||
.pagination-nav__link--prev:hover {
|
||||
background-color: #f3f4f6 !important;
|
||||
}
|
||||
163
docs/static/src/pages/index.js
vendored
Normal file
163
docs/static/src/pages/index.js
vendored
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import Layout from '@theme/Layout';
|
||||
import Link from '@docusaurus/Link';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import styles from './index.module.css';
|
||||
|
||||
function HomepageHeader() {
|
||||
const {siteConfig} = useDocusaurusContext();
|
||||
return (
|
||||
<header className={clsx('hero hero--primary', styles.heroBanner)}>
|
||||
<div className="container">
|
||||
<div className={styles.heroContent}>
|
||||
<h1 className={styles.heroTitle}>Build AI Applications with Llama Stack</h1>
|
||||
<p className={styles.heroSubtitle}>
|
||||
Unified APIs for Inference, RAG, Agents, Tools, Safety, and Telemetry
|
||||
</p>
|
||||
<div className={styles.buttons}>
|
||||
<Link
|
||||
className={clsx('button button--primary button--lg', styles.getStartedButton)}
|
||||
to="/docs/getting-started">
|
||||
🚀 Get Started
|
||||
</Link>
|
||||
<Link
|
||||
className={clsx('button button--primary button--lg', styles.apiButton)}
|
||||
to="/docs/category/llama-stack-api">
|
||||
📚 API Reference
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
function QuickStart() {
|
||||
return (
|
||||
<section className={styles.quickStart}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col col--6">
|
||||
<h2 className={styles.sectionTitle}>Quick Start</h2>
|
||||
<p className={styles.sectionDescription}>
|
||||
Get up and running with Llama Stack in just a few commands. Build your first RAG application locally.
|
||||
</p>
|
||||
<div className={styles.codeBlock}>
|
||||
<pre><code>{`# Install uv and start Ollama
|
||||
ollama run llama3.2:3b --keepalive 60m
|
||||
|
||||
# Run Llama Stack server
|
||||
OLLAMA_URL=http://localhost:11434 \\
|
||||
uv run --with llama-stack \\
|
||||
llama stack build --distro starter \\
|
||||
--image-type venv --run
|
||||
|
||||
# Try the Python SDK
|
||||
from llama_stack_client import LlamaStackClient
|
||||
|
||||
client = LlamaStackClient(
|
||||
base_url="http://localhost:8321"
|
||||
)
|
||||
|
||||
response = client.inference.chat_completion(
|
||||
model="Llama3.2-3B-Instruct",
|
||||
messages=[{
|
||||
"role": "user",
|
||||
"content": "What is machine learning?"
|
||||
}]
|
||||
)`}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col col--6">
|
||||
<h2 className={styles.sectionTitle}>Why Llama Stack?</h2>
|
||||
<div className={styles.features}>
|
||||
<div className={styles.feature}>
|
||||
<div className={styles.featureIcon}>🔗</div>
|
||||
<div>
|
||||
<h4>Unified APIs</h4>
|
||||
<p>One consistent interface for all your AI needs - inference, safety, agents, and more.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.feature}>
|
||||
<div className={styles.featureIcon}>🔄</div>
|
||||
<div>
|
||||
<h4>Provider Flexibility</h4>
|
||||
<p>Swap between providers without code changes. Start local, deploy anywhere.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.feature}>
|
||||
<div className={styles.featureIcon}>🛡️</div>
|
||||
<div>
|
||||
<h4>Production Ready</h4>
|
||||
<p>Built-in safety, monitoring, and evaluation tools for enterprise applications.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.feature}>
|
||||
<div className={styles.featureIcon}>📱</div>
|
||||
<div>
|
||||
<h4>Multi-Platform</h4>
|
||||
<p>SDKs for Python, Node.js, iOS, Android, and REST APIs for any language.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CommunityLinks() {
|
||||
return (
|
||||
<section className={styles.community}>
|
||||
<div className="container">
|
||||
<div className={styles.communityContent}>
|
||||
<h2 className={styles.sectionTitle}>Join the Community</h2>
|
||||
<p className={styles.sectionDescription}>
|
||||
Connect with developers building the future of AI applications
|
||||
</p>
|
||||
<div className={styles.communityLinks}>
|
||||
<a
|
||||
href="https://github.com/llamastack/llama-stack"
|
||||
className={clsx('button button--outline button--lg', styles.communityButton)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
<span className={styles.communityIcon}>⭐</span>
|
||||
Star on GitHub
|
||||
</a>
|
||||
<a
|
||||
href="https://discord.gg/llama-stack"
|
||||
className={clsx('button button--outline button--lg', styles.communityButton)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
<span className={styles.communityIcon}>💬</span>
|
||||
Join Discord
|
||||
</a>
|
||||
<Link
|
||||
to="/docs/intro"
|
||||
className={clsx('button button--outline button--lg', styles.communityButton)}>
|
||||
<span className={styles.communityIcon}>📚</span>
|
||||
Read Docs
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
const {siteConfig} = useDocusaurusContext();
|
||||
return (
|
||||
<Layout
|
||||
title="Build AI Applications"
|
||||
description="The open-source framework for building generative AI applications with unified APIs for Inference, RAG, Agents, Tools, Safety, and Telemetry.">
|
||||
<HomepageHeader />
|
||||
<main>
|
||||
<QuickStart />
|
||||
<CommunityLinks />
|
||||
</main>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
283
docs/static/src/pages/index.module.css
vendored
Normal file
283
docs/static/src/pages/index.module.css
vendored
Normal file
|
|
@ -0,0 +1,283 @@
|
|||
/**
|
||||
* CSS files with the .module.css suffix will be treated as CSS modules
|
||||
* and scoped locally.
|
||||
*/
|
||||
|
||||
.heroBanner {
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--hero-gradient);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.heroBanner::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.heroLogo {
|
||||
height: 48px;
|
||||
width: auto;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 2.8rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
margin-bottom: 2rem;
|
||||
opacity: 0.9;
|
||||
line-height: 1.5;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.heroBanner .getStartedButton {
|
||||
background: white;
|
||||
color: #332735;
|
||||
border: 2px solid white;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.heroBanner .getStartedButton:hover {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #2b2129;
|
||||
border-color: rgba(255, 255, 255, 0.9);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.heroBanner .apiButton {
|
||||
background: transparent;
|
||||
color: white;
|
||||
border: 2px solid white;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.heroBanner .apiButton:hover {
|
||||
background: white;
|
||||
border-color: white;
|
||||
color: #332735;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Quick Start Section */
|
||||
.quickStart {
|
||||
padding: 4rem 0;
|
||||
background: var(--ifm-background-color);
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--ifm-color-emphasis-800);
|
||||
}
|
||||
|
||||
.sectionDescription {
|
||||
font-size: 1rem;
|
||||
color: var(--ifm-color-emphasis-600);
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.codeBlock {
|
||||
background: var(--ifm-color-gray-900);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.codeBlock pre {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.codeBlock code {
|
||||
color: var(--ifm-color-gray-100);
|
||||
font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Features */
|
||||
.features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
background: var(--ifm-color-gray-50);
|
||||
border: 1px solid var(--ifm-color-gray-200);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.feature:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--ifm-color-primary-lighter);
|
||||
}
|
||||
|
||||
.featureIcon {
|
||||
font-size: 2rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--ifm-color-primary-lightest);
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.feature h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--ifm-color-emphasis-800);
|
||||
}
|
||||
|
||||
.feature p {
|
||||
margin: 0;
|
||||
color: var(--ifm-color-emphasis-600);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Community Section */
|
||||
.community {
|
||||
padding: 3rem 0;
|
||||
background: var(--ifm-color-gray-50);
|
||||
border-top: 1px solid var(--ifm-color-gray-200);
|
||||
}
|
||||
|
||||
.communityContent {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.communityLinks {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.communityButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.communityButton:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.communityIcon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media screen and (max-width: 996px) {
|
||||
.heroBanner {
|
||||
padding: 3rem 2rem;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.quickStart {
|
||||
padding: 3rem 0;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.communityLinks {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.communityButton {
|
||||
width: 200px;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.heroLogo {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.codeBlock {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.codeBlock code {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.feature {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
}
|
||||
7
docs/static/src/pages/markdown-page.md
vendored
Normal file
7
docs/static/src/pages/markdown-page.md
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Markdown page example
|
||||
---
|
||||
|
||||
# Markdown page example
|
||||
|
||||
You don't need React to write simple standalone pages.
|
||||
Loading…
Add table
Add a link
Reference in a new issue