From 00990d18efc6d9210bd3ceb6540b4b737461c249 Mon Sep 17 00:00:00 2001 From: IBRAHIM IBRAHIM <66755652+Ibrahim2595@users.noreply.github.com> Date: Fri, 1 May 2026 13:26:40 -0400 Subject: [PATCH 1/5] fix: updates to the landing page Signed-off-by: IBRAHIM IBRAHIM <66755652+Ibrahim2595@users.noreply.github.com> --- preview/docusaurus.config.ts | 21 +- preview/package-lock.json | 18 +- preview/package.json | 3 +- .../src/components/ColorModeToggleSwitch.tsx | 26 ++ preview/src/components/GitHubStars.tsx | 105 ++++++ preview/src/components/SlackButton.tsx | 16 + preview/src/components/VersionDropdown.tsx | 10 +- preview/src/css/custom.css | 345 +++++++++++++++--- preview/src/pages/index.tsx | 120 ++++-- .../src/theme/NavbarItem/ComponentTypes.tsx | 6 + 10 files changed, 588 insertions(+), 82 deletions(-) create mode 100644 preview/src/components/ColorModeToggleSwitch.tsx create mode 100644 preview/src/components/GitHubStars.tsx create mode 100644 preview/src/components/SlackButton.tsx diff --git a/preview/docusaurus.config.ts b/preview/docusaurus.config.ts index 3864e2a4..47d4a6c2 100644 --- a/preview/docusaurus.config.ts +++ b/preview/docusaurus.config.ts @@ -73,6 +73,7 @@ const config: Config = { colorMode: { defaultMode: 'light', respectPrefersColorScheme: true, + disableSwitch: true, }, announcementBar: { id: 'dev_preview_banner', @@ -95,18 +96,30 @@ const config: Config = { position: 'left', label: 'Documentation', }, + { + to: '/blog', + label: 'Blog', + position: 'left', + }, + { + to: '/community', + label: 'Community', + position: 'left', + }, { type: 'custom-version-dropdown' as any, position: 'left', }, { - href: 'https://llm-d.ai', - label: 'llm-d.ai', + type: 'custom-github-stars' as any, + position: 'right', + }, + { + type: 'custom-slack-button' as any, position: 'right', }, { - href: 'https://github.com/llm-d/llm-d', - label: 'GitHub', + type: 'custom-color-mode-toggle' as any, position: 'right', }, ], diff --git a/preview/package-lock.json b/preview/package-lock.json index b86da326..4222a0a3 100644 --- a/preview/package-lock.json +++ b/preview/package-lock.json @@ -12,9 +12,10 @@ "@docusaurus/faster": "3.10.0", "@docusaurus/preset-classic": "3.10.0", "@docusaurus/theme-mermaid": "^3.10.0", - "@fontsource/inter": "^5.2.8", + "@fontsource/ibm-plex-sans": "^5.2.8", "@mdx-js/react": "^3.0.0", "clsx": "^2.0.0", + "lucide-react": "^1.14.0", "prism-react-renderer": "^2.3.0", "react": "^19.0.0", "react-dom": "^19.0.0" @@ -4234,11 +4235,10 @@ "tslib": "^2.4.0" } }, - "node_modules/@fontsource/inter": { + "node_modules/@fontsource/ibm-plex-sans": { "version": "5.2.8", - "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.2.8.tgz", - "integrity": "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg==", - "license": "OFL-1.1", + "resolved": "https://registry.npmjs.org/@fontsource/ibm-plex-sans/-/ibm-plex-sans-5.2.8.tgz", + "integrity": "sha512-eztSXjDhPhcpxNIiGTgMebdLP9qS4rWkysuE1V7c+DjOR0qiezaiDaTwQE7bTnG5HxAY/8M43XKDvs3cYq6ZYQ==", "funding": { "url": "https://github.com/sponsors/ayuhito" } @@ -12669,6 +12669,14 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.14.0.tgz", + "integrity": "sha512-+1mdWcfSJVUsaTIjN9zoezmUhfXo5l0vP7ekBMPo3jcS/aIkxHnXqAPsByszMZx/Y8oQBRJxJx5xg+RH3urzxA==", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/markdown-extensions": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-2.0.0.tgz", diff --git a/preview/package.json b/preview/package.json index 4e2f5818..01072281 100644 --- a/preview/package.json +++ b/preview/package.json @@ -21,9 +21,10 @@ "@docusaurus/faster": "3.10.0", "@docusaurus/preset-classic": "3.10.0", "@docusaurus/theme-mermaid": "^3.10.0", - "@fontsource/inter": "^5.2.8", + "@fontsource/ibm-plex-sans": "^5.2.8", "@mdx-js/react": "^3.0.0", "clsx": "^2.0.0", + "lucide-react": "^1.14.0", "prism-react-renderer": "^2.3.0", "react": "^19.0.0", "react-dom": "^19.0.0" diff --git a/preview/src/components/ColorModeToggleSwitch.tsx b/preview/src/components/ColorModeToggleSwitch.tsx new file mode 100644 index 00000000..6ba36559 --- /dev/null +++ b/preview/src/components/ColorModeToggleSwitch.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import {useColorMode} from '@docusaurus/theme-common'; +import {Moon, Sun} from 'lucide-react'; + +export default function ColorModeToggleSwitch(): React.JSX.Element { + const {colorMode, setColorMode} = useColorMode(); + const isDark = colorMode === 'dark'; + + return ( + + ); +} diff --git a/preview/src/components/GitHubStars.tsx b/preview/src/components/GitHubStars.tsx new file mode 100644 index 00000000..5f1e7218 --- /dev/null +++ b/preview/src/components/GitHubStars.tsx @@ -0,0 +1,105 @@ +import React, {useEffect, useState} from 'react'; +import {Star} from 'lucide-react'; + +// lucide-react 1.x dropped brand marks; inline the GitHub Octicon (MIT) so we +// don't depend on the older 0.x line. +function GitHubMark({size = 16}: {size?: number}): React.JSX.Element { + return ( + + ); +} + +const REPO_URL = 'https://github.com/llm-d/llm-d'; +const API_URL = 'https://api.github.com/repos/llm-d/llm-d'; +const CACHE_KEY = 'llmd-github-stars'; +const CACHE_TTL_MS = 60 * 60 * 1000; + +type CacheEntry = {count: number; ts: number}; + +function formatStars(n: number): string { + if (n < 1000) return n.toString(); + return (Math.round(n / 100) / 10).toFixed(1) + 'k'; +} + +function readCache(): number | null { + try { + const raw = sessionStorage.getItem(CACHE_KEY); + if (!raw) return null; + const parsed = JSON.parse(raw) as CacheEntry; + if (Date.now() - parsed.ts > CACHE_TTL_MS) return null; + return parsed.count; + } catch { + return null; + } +} + +function writeCache(count: number): void { + try { + sessionStorage.setItem(CACHE_KEY, JSON.stringify({count, ts: Date.now()})); + } catch { + /* ignore quota / privacy mode */ + } +} + +export default function GitHubStars(): React.JSX.Element { + const [stars, setStars] = useState(null); + + useEffect(() => { + const cached = readCache(); + if (cached !== null) { + setStars(cached); + return; + } + let cancelled = false; + fetch(API_URL) + .then((r) => { + if (!r.ok) throw new Error(`HTTP ${r.status}`); + return r.json() as Promise<{stargazers_count: number}>; + }) + .then((data) => { + if (cancelled) return; + setStars(data.stargazers_count); + writeCache(data.stargazers_count); + }) + .catch(() => { + /* swallow — we just won't show a count */ + }); + return () => { + cancelled = true; + }; + }, []); + + return ( + + + GitHub + {stars !== null && ( + + + )} + + ); +} diff --git a/preview/src/components/SlackButton.tsx b/preview/src/components/SlackButton.tsx new file mode 100644 index 00000000..4136c7b1 --- /dev/null +++ b/preview/src/components/SlackButton.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +const SLACK_URL = 'https://llm-d.slack.com'; + +export default function SlackButton(): React.JSX.Element { + return ( + + Join Slack + + ); +} diff --git a/preview/src/components/VersionDropdown.tsx b/preview/src/components/VersionDropdown.tsx index cd0aab93..94b5ca0f 100644 --- a/preview/src/components/VersionDropdown.tsx +++ b/preview/src/components/VersionDropdown.tsx @@ -1,12 +1,20 @@ import React from 'react'; import {usePluginData} from '@docusaurus/useGlobalData'; +import {useLocation} from '@docusaurus/router'; +import useBaseUrl from '@docusaurus/useBaseUrl'; const REPO_URL = 'https://github.com/llm-d/llm-d/tree'; -export default function VersionDropdown(): React.JSX.Element { +export default function VersionDropdown(): React.JSX.Element | null { const {releases} = usePluginData('llmd-versions-plugin') as { releases: string[]; }; + const {pathname} = useLocation(); + const docsBasePath = useBaseUrl('/docs/'); + + if (!pathname.startsWith(docsBasePath)) { + return null; + } // Latest stable version (first in releases list) const latestTag = releases?.[0]; diff --git a/preview/src/css/custom.css b/preview/src/css/custom.css index 505d2c59..72998382 100644 --- a/preview/src/css/custom.css +++ b/preview/src/css/custom.css @@ -1,7 +1,7 @@ -@import url('@fontsource/inter/400.css'); -@import url('@fontsource/inter/500.css'); -@import url('@fontsource/inter/600.css'); -@import url('@fontsource/inter/700.css'); +@import url('@fontsource/ibm-plex-sans/400.css'); +@import url('@fontsource/ibm-plex-sans/500.css'); +@import url('@fontsource/ibm-plex-sans/600.css'); +@import url('@fontsource/ibm-plex-sans/700.css'); /* llm-d docs — purple brand palette, dark gradient hero */ @@ -16,8 +16,7 @@ --ifm-color-primary-lightest: #a142b8; --ifm-code-font-size: 90%; - --ifm-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', - Roboto, sans-serif; + --ifm-font-family-base: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --ifm-font-family-monospace: 'SF Mono', 'Cascadia Code', 'Consolas', 'Liberation Mono', Menlo, monospace; --ifm-heading-font-weight: 600; @@ -59,6 +58,28 @@ border-bottom: 1px solid rgba(255, 255, 255, 0.06); } +/* Constrain navbar inner content to match the page container's max-width + (Infima .container = 1140px / 1320px @ ≥1440px, padding 1rem). The bar + itself (.navbar) keeps spanning the full viewport. */ +.navbar { + padding-left: 0; + padding-right: 0; +} + +.navbar__inner { + width: 100%; + max-width: var(--ifm-container-width); + margin: 0 auto; + padding-left: var(--ifm-spacing-horizontal); + padding-right: var(--ifm-spacing-horizontal); +} + +@media (min-width: 1440px) { + .navbar__inner { + max-width: var(--ifm-container-width-xl); + } +} + .navbar__title { font-weight: 700; font-size: 1.15rem; @@ -236,10 +257,15 @@ table th { line-height: 2; } -/* ===== Landing page — dark gradient hero (matches official slide) ===== */ +.footer__copyright { + font-size: 0.875rem; +} + +/* ===== Landing page — split-layout hero ===== */ .hero--llmd { - padding: 5rem 0 3rem; - text-align: center; + display: block; + padding: 5rem 0 4rem; + text-align: left; background: linear-gradient( 180deg, #000000 0%, @@ -250,77 +276,215 @@ table th { color: #ffffff; } +.hero__split { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + align-items: center; +} + +.hero__copy { + max-width: 32rem; +} + .hero--llmd .hero__title { color: #ffffff; - font-size: 1.5rem; - font-weight: 400; - margin-top: 2rem; + font-size: 2.5rem; + font-weight: 700; + line-height: 1.15; + letter-spacing: -0.02em; + margin: 0; } .hero--llmd .hero__subtitle { - color: #ffffff; - font-size: 1.1rem; - max-width: 560px; - margin: 0.5rem auto 0; + color: rgba(255, 255, 255, 0.75); + font-size: 1.05rem; + line-height: 1.6; + max-width: 540px; + margin: 1.25rem 0 0; +} + +.hero__buttons { + margin-top: 2rem; + display: flex; + flex-wrap: wrap; + gap: 0.75rem; +} + +.hero__visual { + min-height: 320px; } -.hero--llmd .hero__logo { - max-width: 320px; - height: auto; +.hero__buttons .button { + font-size: 0.95rem; + font-weight: 500; + padding: 0.625rem 1.25rem; + border-radius: 6px; } -.hero--llmd .button--primary { +.hero__buttons .button--primary { background-color: var(--llmd-purple); border-color: var(--llmd-purple); color: #fff; } -.hero--llmd .button--primary:hover { +.hero__buttons .button--primary:hover { background-color: var(--ifm-color-primary-dark); border-color: var(--ifm-color-primary-dark); + color: #fff; } -.hero--llmd .button--outline { - color: #e0d0e8; - border-color: rgba(255, 255, 255, 0.3); +.hero__buttons .button--outline { + background-color: transparent; + color: #ffffff; + border: 1px solid rgba(255, 255, 255, 0.4); } -.hero--llmd .button--outline:hover { - color: #fff; +.hero__buttons .button--outline:hover { + background-color: rgba(255, 255, 255, 0.1); + color: #ffffff; border-color: rgba(255, 255, 255, 0.6); - background-color: rgba(255, 255, 255, 0.08); } -/* ===== Feature cards ===== */ -.features { +@media (max-width: 996px) { + .hero--llmd { + padding: 3.5rem 0 2.5rem; + } + .hero__split { + grid-template-columns: 1fr; + gap: 2rem; + } + .hero--llmd .hero__title { + font-size: 1.875rem; + } + .hero__visual { + display: none; + } +} + +/* ===== Contributor logo strip ===== */ +.contributor-strip { + display: flex; + flex-wrap: nowrap; + align-items: center; + gap: 1.5rem; + padding: 1.75rem 0; + max-width: 900px; +} + +.contributor-label { + font-size: 0.8rem; + color: var(--ifm-color-emphasis-600); + letter-spacing: 0.03em; + font-weight: 400; +} + +.contributor-logo { + height: 24px; + width: auto; + max-width: 120px; + object-fit: contain; + filter: grayscale(1); + opacity: 0.55; + transition: opacity 0.15s ease; +} + +.contributor-logo:hover { + opacity: 0.9; +} + +[data-theme='dark'] .contributor-logo { + filter: brightness(0) invert(1); + opacity: 0.7; +} + +[data-theme='dark'] .contributor-logo:hover { + opacity: 0.95; +} + +/* ===== Capabilities section ===== */ +.capabilities-section { + padding: 3rem 0 4rem; +} + +.capabilities-heading { + font-size: 1.25rem; + font-weight: 600; + letter-spacing: -0.01em; + margin: 0 0 1.5rem; +} + +.capabilities-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); - gap: 1rem; - padding: 1.5rem 0 3rem; + grid-template-columns: repeat(3, 1fr); + gap: 1.25rem; +} + +@media (max-width: 996px) { + .capabilities-grid { + grid-template-columns: 1fr; + } } -.feature-card { +.capability-card { border: 1px solid var(--ifm-color-emphasis-200); - border-radius: 8px; - padding: 1.25rem; - transition: border-color 0.2s, box-shadow 0.2s; + border-radius: 10px; + padding: 1.5rem; + background: var(--ifm-background-color); + display: flex; + flex-direction: column; + transition: border-color 0.15s ease, box-shadow 0.15s ease; } -.feature-card:hover { +.capability-card:hover { border-color: var(--ifm-color-primary); - box-shadow: 0 2px 12px rgba(123, 45, 142, 0.12); + box-shadow: 0 2px 14px rgba(123, 45, 142, 0.1); } -.feature-card h3 { - margin-top: 0; - font-size: 1rem; +.capability-icon { + width: 40px; + height: 40px; + border-radius: 8px; + background-color: var(--ifm-color-emphasis-200); + color: var(--ifm-color-emphasis-700); + display: inline-flex; + align-items: center; + justify-content: center; + margin-bottom: 1rem; +} + +.capability-title { + font-size: 1.1rem; font-weight: 600; + margin: 0 0 0.4rem; +} + +.capability-tagline { + font-size: 0.95rem; + font-weight: 500; + color: var(--ifm-color-emphasis-800); + margin: 0 0 0.75rem; + line-height: 1.4; } -.feature-card p { - margin-bottom: 0; +.capability-body { font-size: 0.875rem; + line-height: 1.6; color: var(--ifm-color-emphasis-700); + margin: 0 0 1.25rem; + flex-grow: 1; +} + +.capability-cta { + font-size: 0.875rem; + font-weight: 600; + color: var(--ifm-color-primary); + text-decoration: none; + margin-top: auto; +} + +.capability-cta:hover { + text-decoration: underline; } /* ===== Breadcrumbs ===== */ @@ -346,3 +510,98 @@ table th { .theme-doc-version-banner { border-radius: 6px; } + +/* ===== Navbar right side — pills + color toggle ===== */ +.navbar__items--right { + gap: 0.5rem; +} + +.nav-pill { + display: inline-flex; + align-items: center; + gap: 0.4rem; + padding: 0.375rem 0.75rem; + border: 1px solid rgba(255, 255, 255, 0.18); + border-radius: 9999px; + color: inherit; + text-decoration: none; + font-size: 0.85rem; + line-height: 1; + transition: background-color 0.15s ease, border-color 0.15s ease; +} + +.nav-pill:hover, +.nav-pill:focus-visible { + text-decoration: none; + color: inherit; + background-color: rgba(255, 255, 255, 0.06); + border-color: rgba(255, 255, 255, 0.28); +} + +.nav-pill__label { + font-weight: 500; +} + +.nav-pill__chip { + display: inline-flex; + align-items: center; + gap: 0.2rem; + padding: 0.125rem 0.5rem; + margin-left: 0.15rem; + background-color: rgba(255, 255, 255, 0.08); + border-radius: 9999px; + font-size: 0.75rem; + font-weight: 500; +} + +.nav-pill--gh { + padding-right: 0.375rem; +} + +/* ===== Color mode toggle switch ===== */ +.color-toggle { + background: transparent; + border: none; + padding: 0; + margin: 0; + cursor: pointer; + display: inline-flex; + align-items: center; + -webkit-tap-highlight-color: transparent; +} + +.color-toggle__track { + position: relative; + display: inline-block; + width: 44px; + height: 24px; + border-radius: 9999px; + border: 1px solid rgba(255, 255, 255, 0.2); + background-color: rgba(255, 255, 255, 0.08); + transition: background-color 0.2s ease, border-color 0.2s ease; +} + +.color-toggle:hover .color-toggle__track, +.color-toggle:focus-visible .color-toggle__track { + border-color: rgba(255, 255, 255, 0.32); +} + +.color-toggle__thumb { + position: absolute; + top: 2px; + left: 2px; + width: 18px; + height: 18px; + border-radius: 50%; + background-color: #ffffff; + color: #1a0b1e; + display: inline-flex; + align-items: center; + justify-content: center; + transition: transform 0.2s ease; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); +} + +.color-toggle[data-state='dark'] .color-toggle__thumb { + transform: translateX(20px); +} diff --git a/preview/src/pages/index.tsx b/preview/src/pages/index.tsx index 9e0c43d4..3979c260 100644 --- a/preview/src/pages/index.tsx +++ b/preview/src/pages/index.tsx @@ -1,12 +1,13 @@ +import React from 'react'; import clsx from 'clsx'; import Link from '@docusaurus/Link'; +import {useBaseUrlUtils} from '@docusaurus/useBaseUrl'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useBaseUrl from '@docusaurus/useBaseUrl'; import Layout from '@theme/Layout'; +import {Database, Layers, Network, Split, TrendingUp} from 'lucide-react'; -import styles from './index.module.css'; - -function HeroSection() { +function HeroSection(): React.JSX.Element { return (
@@ -36,43 +37,102 @@ function HeroSection() { ); } -const sections = [ +const contributors = [ + {name: 'IBM', file: 'ibm.png'}, + {name: 'Google', file: 'google.png'}, + {name: 'Red Hat', file: 'redhat.png'}, + {name: 'NVIDIA', file: 'nvidia.png'}, + {name: 'CoreWeave', file: 'coreweave.svg'}, + {name: 'AMD', file: 'amd.svg'}, +]; + +function ContributorLogos(): React.JSX.Element { + const {withBaseUrl} = useBaseUrlUtils(); + return ( +
+
+ Supported by + {contributors.map((c) => ( + {c.name} + ))} +
+
+ ); +} + +const capabilities = [ { - title: 'Getting Started', - to: '/docs/getting-started', - description: 'Introduction to llm-d, quickstart guide, feature matrix, and release artifacts.', + icon: Network, + title: 'LLM-Aware Load Balancing', + tagline: + 'Route every request to the replica that will serve it fastest.', + body: + "llm-d's endpoint picker scores each replica in real time across four signals: prefix cache locality, KV-cache utilization, queue depth, and predicted latency. Each request is dispatched to the replica with the lowest expected tail latency — delivering order-of-magnitude p99 improvements over round-robin routing, with no additional hardware.", + ctaLabel: 'Explore LLM-aware routing', + to: '/docs/guides/intelligent-inference-scheduling', }, { - title: 'Architecture', - to: '/docs/architecture', - description: 'Core components — Proxy, InferencePool, EPP, Model Servers — and advanced features.', + icon: Split, + title: 'Prefill / Decode Disaggregation', + tagline: + 'Scale prompt processing and token generation independently.', + body: + 'Prefill and decode have fundamentally different resource profiles. llm-d splits them across dedicated worker pools and transfers KV-cache between phases over RDMA via NIXL. The result is faster TTFT, more predictable TPOT, and better GPU utilization across the cluster.', + ctaLabel: 'See how disaggregation works', + to: '/docs/guides/pd-disaggregation', }, { - title: 'Guides', - to: '/docs/guides', - description: 'Step-by-step adoption procedures: scheduling, disaggregation, expert parallelism, caching.', + icon: Layers, + title: 'Wide Expert Parallelism', + tagline: + "Serve frontier MoE models that don't fit on a single node.", + body: + 'llm-d combines data parallelism and expert parallelism across nodes to deploy large mixture-of-experts models like DeepSeek-R1. This pattern maximizes KV-cache space, enables long-context online serving, and supports high-throughput generation for batch and RL workloads.', + ctaLabel: 'Deploy wide-EP models', + to: '/docs/guides/wide-expert-parallelism', }, { - title: 'Resources', - to: '/docs/resources/gateway', - description: 'Gateway setup, API configuration, monitoring, multi-model deployment, and RDMA.', + icon: Database, + title: 'Tiered KV Prefix Caching', + tagline: 'Cache at memory speed. Spill at storage cost.', + body: + 'llm-d extends KV-cache beyond accelerator HBM through a configurable storage hierarchy: HBM, CPU memory, local SSD, and shared remote storage (in progress). Hot prefixes stay close to the accelerator; cold prefixes spill to cheaper tiers automatically. You serve longer contexts and higher concurrency without adding GPUs.', + ctaLabel: 'Configure tiered caching', + to: '/docs/guides/kv-cache-management', }, { - title: 'API Reference', - to: '/docs/api-reference', - description: 'API specifications and reference documentation.', + icon: TrendingUp, + title: 'Workload Autoscaling', + tagline: 'Scale for the load you have, on the hardware you have.', + body: + 'Two complementary patterns, both built on Kubernetes primitives. HPA scales replicas using live inference signals — queue depth and request counts from the endpoint picker. The Workload Variant Autoscaler routes across model variants on heterogeneous hardware to meet SLOs at the lowest cost.', + ctaLabel: 'Set up autoscaling', + to: '/docs/guides/workload-autoscaling', }, ]; -function FeaturesSection() { +function CapabilitiesSection(): React.JSX.Element { return ( -
-
- {sections.map((s) => ( - -

{s.title}

-

{s.description}

- +
+

Key capabilities

+
+ {capabilities.map(({icon: Icon, title, tagline, body, ctaLabel, to}) => ( +
+ +

{title}

+

{tagline}

+

{body}

+ + {ctaLabel} + +
))}
@@ -85,7 +145,11 @@ export default function Home(): React.JSX.Element {
- + {/* Contributor logo strip — hidden for now, may be restored later. To re-enable, uncomment the block below. */} + {/* + + */} +
); diff --git a/preview/src/theme/NavbarItem/ComponentTypes.tsx b/preview/src/theme/NavbarItem/ComponentTypes.tsx index 5501a09f..f6c928ce 100644 --- a/preview/src/theme/NavbarItem/ComponentTypes.tsx +++ b/preview/src/theme/NavbarItem/ComponentTypes.tsx @@ -1,7 +1,13 @@ import ComponentTypes from '@theme-original/NavbarItem/ComponentTypes'; import VersionDropdown from '@site/src/components/VersionDropdown'; +import GitHubStars from '@site/src/components/GitHubStars'; +import SlackButton from '@site/src/components/SlackButton'; +import ColorModeToggleSwitch from '@site/src/components/ColorModeToggleSwitch'; export default { ...ComponentTypes, 'custom-version-dropdown': VersionDropdown, + 'custom-github-stars': GitHubStars, + 'custom-slack-button': SlackButton, + 'custom-color-mode-toggle': ColorModeToggleSwitch, }; From 242ebb6cd07f7fccf4d08774487f9010da179286 Mon Sep 17 00:00:00 2001 From: IBRAHIM IBRAHIM <66755652+Ibrahim2595@users.noreply.github.com> Date: Fri, 1 May 2026 14:52:16 -0400 Subject: [PATCH 2/5] feat: adding socials in the footer Signed-off-by: IBRAHIM IBRAHIM <66755652+Ibrahim2595@users.noreply.github.com> --- preview/docusaurus.config.ts | 19 ++++++++ preview/src/css/custom.css | 24 ++++++++++ preview/static/img/social/bluesky.svg | 3 ++ preview/static/img/social/github.svg | 16 +++++++ preview/static/img/social/linkedin.svg | 13 ++++++ preview/static/img/social/reddit.svg | 13 ++++++ preview/static/img/social/slack.svg | 62 ++++++++++++++++++++++++++ preview/static/img/social/x.svg | 14 ++++++ preview/static/img/social/youtube.svg | 3 ++ 9 files changed, 167 insertions(+) create mode 100644 preview/static/img/social/bluesky.svg create mode 100644 preview/static/img/social/github.svg create mode 100644 preview/static/img/social/linkedin.svg create mode 100644 preview/static/img/social/reddit.svg create mode 100644 preview/static/img/social/slack.svg create mode 100644 preview/static/img/social/x.svg create mode 100644 preview/static/img/social/youtube.svg diff --git a/preview/docusaurus.config.ts b/preview/docusaurus.config.ts index 47d4a6c2..40c09d2d 100644 --- a/preview/docusaurus.config.ts +++ b/preview/docusaurus.config.ts @@ -152,6 +152,25 @@ const config: Config = { {label: 'KV Cache', href: 'https://github.com/llm-d/llm-d-kv-cache'}, ], }, + { + title: 'Social', + items: [ + { + html: ` +
+ GitHub + LinkedIn + Slack + Reddit + Bluesky + X + YouTube +
+ `, + }, + {label: 'Join our Slack', href: 'https://llm-d.slack.com'}, + ], + }, ], copyright: `Copyright © ${new Date().getFullYear()} llm-d project. Apache 2.0 License.`, }, diff --git a/preview/src/css/custom.css b/preview/src/css/custom.css index 72998382..eb7e7b63 100644 --- a/preview/src/css/custom.css +++ b/preview/src/css/custom.css @@ -261,6 +261,30 @@ table th { font-size: 0.875rem; } +.footer-social-icons { + display: flex; + gap: 0.75rem; + align-items: center; + margin-bottom: 0.75rem; +} + +.footer-social-icons a { + display: inline-flex; + opacity: 0.85; + transition: opacity 150ms ease; +} + +.footer-social-icons a:hover { + opacity: 1; +} + +.footer-social-icons img { + width: 20px; + height: 20px; + display: block; + object-fit: contain; +} + /* ===== Landing page — split-layout hero ===== */ .hero--llmd { display: block; diff --git a/preview/static/img/social/bluesky.svg b/preview/static/img/social/bluesky.svg new file mode 100644 index 00000000..26cce976 --- /dev/null +++ b/preview/static/img/social/bluesky.svg @@ -0,0 +1,3 @@ + + + diff --git a/preview/static/img/social/github.svg b/preview/static/img/social/github.svg new file mode 100644 index 00000000..48b95d58 --- /dev/null +++ b/preview/static/img/social/github.svg @@ -0,0 +1,16 @@ + + diff --git a/preview/static/img/social/linkedin.svg b/preview/static/img/social/linkedin.svg new file mode 100644 index 00000000..2bce9d32 --- /dev/null +++ b/preview/static/img/social/linkedin.svg @@ -0,0 +1,13 @@ + + diff --git a/preview/static/img/social/reddit.svg b/preview/static/img/social/reddit.svg new file mode 100644 index 00000000..4d56634d --- /dev/null +++ b/preview/static/img/social/reddit.svg @@ -0,0 +1,13 @@ + + diff --git a/preview/static/img/social/slack.svg b/preview/static/img/social/slack.svg new file mode 100644 index 00000000..8c4da4c8 --- /dev/null +++ b/preview/static/img/social/slack.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + diff --git a/preview/static/img/social/x.svg b/preview/static/img/social/x.svg new file mode 100644 index 00000000..3bae975e --- /dev/null +++ b/preview/static/img/social/x.svg @@ -0,0 +1,14 @@ + + diff --git a/preview/static/img/social/youtube.svg b/preview/static/img/social/youtube.svg new file mode 100644 index 00000000..f4be71d0 --- /dev/null +++ b/preview/static/img/social/youtube.svg @@ -0,0 +1,3 @@ + + + From 2f29fff5dfe4533e359d8936deabd612d1a3e7db Mon Sep 17 00:00:00 2001 From: IBRAHIM IBRAHIM <66755652+Ibrahim2595@users.noreply.github.com> Date: Fri, 1 May 2026 15:02:41 -0400 Subject: [PATCH 3/5] fix: cleanup unused code and static files Signed-off-by: IBRAHIM IBRAHIM <66755652+Ibrahim2595@users.noreply.github.com> --- preview/src/css/custom.css | 40 ------------------------------ preview/src/pages/index.module.css | 18 -------------- preview/src/pages/index.tsx | 36 +-------------------------- 3 files changed, 1 insertion(+), 93 deletions(-) delete mode 100644 preview/src/pages/index.module.css diff --git a/preview/src/css/custom.css b/preview/src/css/custom.css index eb7e7b63..d6b6ba64 100644 --- a/preview/src/css/custom.css +++ b/preview/src/css/custom.css @@ -386,46 +386,6 @@ table th { } } -/* ===== Contributor logo strip ===== */ -.contributor-strip { - display: flex; - flex-wrap: nowrap; - align-items: center; - gap: 1.5rem; - padding: 1.75rem 0; - max-width: 900px; -} - -.contributor-label { - font-size: 0.8rem; - color: var(--ifm-color-emphasis-600); - letter-spacing: 0.03em; - font-weight: 400; -} - -.contributor-logo { - height: 24px; - width: auto; - max-width: 120px; - object-fit: contain; - filter: grayscale(1); - opacity: 0.55; - transition: opacity 0.15s ease; -} - -.contributor-logo:hover { - opacity: 0.9; -} - -[data-theme='dark'] .contributor-logo { - filter: brightness(0) invert(1); - opacity: 0.7; -} - -[data-theme='dark'] .contributor-logo:hover { - opacity: 0.95; -} - /* ===== Capabilities section ===== */ .capabilities-section { padding: 3rem 0 4rem; diff --git a/preview/src/pages/index.module.css b/preview/src/pages/index.module.css deleted file mode 100644 index f331949d..00000000 --- a/preview/src/pages/index.module.css +++ /dev/null @@ -1,18 +0,0 @@ -.heroBanner { - padding: 4rem 0; - text-align: center; - position: relative; - overflow: hidden; -} - -@media screen and (max-width: 996px) { - .heroBanner { - padding: 2rem; - } -} - -.buttons { - display: flex; - align-items: center; - justify-content: center; -} diff --git a/preview/src/pages/index.tsx b/preview/src/pages/index.tsx index 3979c260..076c9016 100644 --- a/preview/src/pages/index.tsx +++ b/preview/src/pages/index.tsx @@ -1,7 +1,5 @@ import React from 'react'; -import clsx from 'clsx'; import Link from '@docusaurus/Link'; -import {useBaseUrlUtils} from '@docusaurus/useBaseUrl'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useBaseUrl from '@docusaurus/useBaseUrl'; import Layout from '@theme/Layout'; @@ -9,7 +7,7 @@ import {Database, Layers, Network, Split, TrendingUp} from 'lucide-react'; function HeroSection(): React.JSX.Element { return ( -
+
-
- Supported by - {contributors.map((c) => ( - {c.name} - ))} -
-
- ); -} - const capabilities = [ { icon: Network, @@ -145,10 +115,6 @@ export default function Home(): React.JSX.Element {
- {/* Contributor logo strip — hidden for now, may be restored later. To re-enable, uncomment the block below. */} - {/* - - */}
From 7a7992b211fd511b607953676907884e2beec0ec Mon Sep 17 00:00:00 2001 From: IBRAHIM IBRAHIM <66755652+Ibrahim2595@users.noreply.github.com> Date: Fri, 1 May 2026 15:25:24 -0400 Subject: [PATCH 4/5] fix: mobile version margins and overlaps Signed-off-by: IBRAHIM IBRAHIM <66755652+Ibrahim2595@users.noreply.github.com> --- preview/docusaurus.config.ts | 14 ++++++++ preview/src/components/SlackButton.tsx | 2 +- preview/src/css/custom.css | 46 ++++++++++++++++++++++++++ preview/src/pages/index.tsx | 34 ++++++++++--------- 4 files changed, 79 insertions(+), 17 deletions(-) diff --git a/preview/docusaurus.config.ts b/preview/docusaurus.config.ts index 40c09d2d..8cd8db73 100644 --- a/preview/docusaurus.config.ts +++ b/preview/docusaurus.config.ts @@ -122,6 +122,20 @@ const config: Config = { type: 'custom-color-mode-toggle' as any, position: 'right', }, + // Mobile-only fallbacks — hidden on desktop via CSS, surface in the + // hamburger drawer at <997px where the custom pills are hidden. + { + href: 'https://github.com/llm-d/llm-d', + label: 'GitHub', + position: 'right', + className: 'navbar-mobile-only', + }, + { + href: 'https://llm-d.slack.com', + label: 'Join Slack', + position: 'right', + className: 'navbar-mobile-only', + }, ], }, footer: { diff --git a/preview/src/components/SlackButton.tsx b/preview/src/components/SlackButton.tsx index 4136c7b1..ad23e99c 100644 --- a/preview/src/components/SlackButton.tsx +++ b/preview/src/components/SlackButton.tsx @@ -8,7 +8,7 @@ export default function SlackButton(): React.JSX.Element { href={SLACK_URL} target="_blank" rel="noopener noreferrer" - className="nav-pill" + className="nav-pill nav-pill--slack" > Join Slack diff --git a/preview/src/css/custom.css b/preview/src/css/custom.css index d6b6ba64..0ffabda8 100644 --- a/preview/src/css/custom.css +++ b/preview/src/css/custom.css @@ -288,6 +288,7 @@ table th { /* ===== Landing page — split-layout hero ===== */ .hero--llmd { display: block; + width: 100%; padding: 5rem 0 4rem; text-align: left; background: linear-gradient( @@ -386,8 +387,16 @@ table th { } } +@media (max-width: 480px) { + .hero--llmd .hero__title { + font-size: 1.5rem; + line-height: 1.2; + } +} + /* ===== Capabilities section ===== */ .capabilities-section { + width: 100%; padding: 3rem 0 4rem; } @@ -589,3 +598,40 @@ table th { .color-toggle[data-state='dark'] .color-toggle__thumb { transform: translateX(20px); } + +/* ===== Responsive navbar — hide custom pills on mobile, hide standard + fallback links on desktop. The color-mode toggle stays visible at all + widths. ===== */ +@media (max-width: 996px) { + .nav-pill--gh, + .nav-pill--slack { + display: none; + } +} + +/* The custom color-mode toggle is replicated into the mobile drawer by + Docusaurus. Hide that copy — the one rendered in the top navbar stays + visible. Targets both the toggle itself and any wrapping list item so + no empty space is left behind. */ +.navbar-sidebar .color-toggle, +.navbar-sidebar li:has(> .color-toggle) { + display: none; +} + +@media (min-width: 997px) { + .navbar-mobile-only { + display: none !important; + } +} + +/* ===== Tablet polish: tighter pill padding on iPad-sized desktops so the + right-side controls don't crowd against the viewport edge. ===== */ +@media (min-width: 997px) and (max-width: 1100px) { + .nav-pill { + padding-left: 0.625rem; + padding-right: 0.625rem; + } + .nav-pill--gh { + padding-right: 0.375rem; + } +} diff --git a/preview/src/pages/index.tsx b/preview/src/pages/index.tsx index 076c9016..fb4019bb 100644 --- a/preview/src/pages/index.tsx +++ b/preview/src/pages/index.tsx @@ -88,22 +88,24 @@ const capabilities = [ function CapabilitiesSection(): React.JSX.Element { return ( -
-

Key capabilities

-
- {capabilities.map(({icon: Icon, title, tagline, body, ctaLabel, to}) => ( -
- -

{title}

-

{tagline}

-

{body}

- - {ctaLabel} - -
- ))} +
+
+

Key capabilities

+
+ {capabilities.map(({icon: Icon, title, tagline, body, ctaLabel, to}) => ( +
+ +

{title}

+

{tagline}

+

{body}

+ + {ctaLabel} + +
+ ))} +
); From efa92c3ddc736fb4c57a030e1b4b2a9b10518e86 Mon Sep 17 00:00:00 2001 From: IBRAHIM IBRAHIM <66755652+Ibrahim2595@users.noreply.github.com> Date: Fri, 8 May 2026 16:07:43 -0400 Subject: [PATCH 5/5] feat: updating the hero message, description, and capabilities on the landing page Signed-off-by: IBRAHIM IBRAHIM <66755652+Ibrahim2595@users.noreply.github.com> --- preview/src/pages/index.tsx | 45 ++++++++++++++------------ preview/static/img/docs/llm-d-arch.svg | 2 +- 2 files changed, 26 insertions(+), 21 deletions(-) diff --git a/preview/src/pages/index.tsx b/preview/src/pages/index.tsx index fb4019bb..ca083f0b 100644 --- a/preview/src/pages/index.tsx +++ b/preview/src/pages/index.tsx @@ -9,26 +9,31 @@ function HeroSection(): React.JSX.Element { return (
- llm-d -

- Kubernetes-native distributed inference serving for LLMs -

-
- - Get Started - - - Quickstart - +
+
+

+ Production-grade distributed LLM inference. +

+

+ llm-d is a distributed inference stack that orchestrates vLLM and + SGLang across your cluster with LLM-aware routing, disaggregated + serving, and tiered KV caching — using Kubernetes primitives you + already run. +

+
+ + Get started + + + See the architecture + +
+
+
diff --git a/preview/static/img/docs/llm-d-arch.svg b/preview/static/img/docs/llm-d-arch.svg index 6cbb4441..6ec00ecc 100644 --- a/preview/static/img/docs/llm-d-arch.svg +++ b/preview/static/img/docs/llm-d-arch.svg @@ -1 +1 @@ - + \ No newline at end of file