feat: Add Usage section and reorganize documentation navigation

.gitignore

@@ -22,6 +22,7 @@ docs/community/sigs.md
 docs/guide/guide.md
 docs/guide/Installation/*.md
 docs/guide/InfraProviders/*.md
+docs/usage/**/*.md
 # Keep category files for sidebar configuration
 !docs/guide/Installation/_category_.json
 !docs/guide/InfraProviders/_category_.json

docusaurus.config.js

@@ -146,14 +146,20 @@ const config = {
             type: "docSidebar",
             sidebarId: "structureSidebar",
             position: "left",
-            label: "What is llm-d?",
+            label: "Architecture",
           },
           {
             type: "docSidebar",
             sidebarId: "guideSidebar",
             position: "left",
             label: "Guides",
           },
+          {
+            type: "docSidebar",
+            sidebarId: "usageSidebar",
+            position: "left",
+            label: "Usage",
+          },
           {
             type: "docSidebar",
             sidebarId: "commSidebar",

remote-content/remote-content.js

@@ -13,6 +13,9 @@ import componentSources from './remote-sources/architecture/components-generator
 // Import guide remote content sources
 import guideSources from './remote-sources/guide/guide-generator.js';
 
+// Import usage remote content sources
+import usageSources from './remote-sources/usage/usage-generator.js';
+
 // Import infra providers remote content sources
 import infraProviderSources from './remote-sources/infra-providers/infra-providers-generator.js';
 
@@ -48,6 +51,9 @@ const remoteContentPlugins = [
   // Guide remote content sources (docs/guide/)
   ...guideSources,  // Spread all dynamically generated guide sources
 
+  // Usage remote content sources (docs/usage/)
+  ...usageSources,  // Spread all dynamically generated usage sources
+
   // Infra Providers remote content sources (docs/infra-providers/)
   ...infraProviderSources,  // Spread all dynamically generated infra provider sources
 

remote-content/remote-sources/architecture/components-generator.js

@@ -49,14 +49,16 @@ function generateComponentRemoteSource(config) {
         if (filename === 'README.md') {
           // Generate clean names without llm-d prefix
           const cleanName = name.replace(/^llm-d-/, '');
-          const cleanTitle = cleanName.split('-').map(word => 
+
+          // Use custom sidebarLabel from config if provided, otherwise auto-generate
+          const displayLabel = config.sidebarLabel || cleanName.split('-').map(word => 
             word.charAt(0).toUpperCase() + word.slice(1)
           ).join(' ');
 
           return createContentWithSource({
-            title: cleanTitle,
+            title: displayLabel,
             description,
-            sidebarLabel: cleanTitle,
+            sidebarLabel: displayLabel,
             sidebarPosition,
             filename: 'README.md',
             newFilename: `${cleanName}.md`,
@@ -107,7 +109,9 @@ The llm-d ecosystem consists of multiple interconnected components that work tog
   sortedComponents.forEach((component) => {
     const { repoUrl } = generateRepoUrls(component);
     const cleanName = component.name.replace(/^llm-d-/, '');
-    const cleanTitle = cleanName.split('-').map(word => 
+
+    // Use custom sidebarLabel if provided, otherwise auto-generate
+    const displayLabel = component.sidebarLabel || cleanName.split('-').map(word => 
       word.charAt(0).toUpperCase() + word.slice(1)
     ).join(' ');
     const docLink = `./Components/${cleanName}`;
@@ -117,7 +121,7 @@ The llm-d ecosystem consists of multiple interconnected components that work tog
     const versionUrl = `${repoUrl}/releases/tag/${versionTag}`;
     const versionLink = `[${versionTag}](${versionUrl})`;
 
-    content += `\n| **[${cleanTitle}](${repoUrl})** | ${component.description} | [${component.org}/${component.name}](${repoUrl}) | ${versionLink} | [View Docs](${docLink}) |`;
+    content += `\n| **[${displayLabel}](${repoUrl})** | ${component.description} | [${component.org}/${component.name}](${repoUrl}) | ${versionLink} | [View Docs](${docLink}) |`;
   });
 
   content += `

remote-content/remote-sources/components-data.yaml

@@ -14,43 +14,43 @@ release:
 components:
   - name: llm-d-inference-scheduler
     org: llm-d
+    sidebarLabel: "Inference Scheduler"
     description: This scheduler that makes optimized routing decisions for inference requests to the llm-d inference framework.
-    category: Core Infrastructure
     sidebarPosition: 1
     version: v0.3.2
   - name: llm-d-modelservice
     org: llm-d-incubation
+    sidebarLabel: "Model Service"
     description: '`modelservice` is a Helm chart that simplifies LLM deployment on llm-d by declaratively managing Kubernetes resources for serving base models. It enables reproducible, scalable, and tunable model deployments through modular presets, and clean integration with llm-d ecosystem components (including vLLM, Gateway API Inference Extension, LeaderWorkerSet).'
-    category: Infrastructure Tools
     sidebarPosition: 2
     version: llm-d-modelservice-v0.2.10
   - name: llm-d-routing-sidecar
     org: llm-d
+    sidebarLabel: "Routing Sidecar"
     description: A reverse proxy redirecting incoming requests to the prefill worker specified in the x-prefiller-host-port HTTP request header.
-    category: Core Infrastructure
     sidebarPosition: 3
     version: v0.3.0
   - name: llm-d-inference-sim
     org: llm-d
+    sidebarLabel: "Inference Simulator"
     description: A light weight vLLM simulator emulates responses to the HTTP REST endpoints of vLLM.
-    category: Development Tools
     sidebarPosition: 4
     version: v0.6.1
   - name: llm-d-infra
     org: llm-d-incubation
+    sidebarLabel: "Infrastructure"
     description: A helm chart for deploying gateway and gateway related infrastructure assets for llm-d.
-    category: Infrastructure Tools
     sidebarPosition: 5
     version: v1.3.3
   - name: llm-d-kv-cache-manager
     org: llm-d
+    sidebarLabel: "KV Cache Manager"
     description: This repository contains the llm-d-kv-cache-manager, a pluggable service designed to enable KV-Cache Aware Routing and lay the foundation for advanced, cross-node cache coordination in vLLM-based serving platforms.
-    category: Core Infrastructure
     sidebarPosition: 6
     version: v0.3.0
   - name: llm-d-benchmark
     org: llm-d
+    sidebarLabel: "Benchmark Tools"
     description: This repository provides an automated workflow for benchmarking LLM inference using the llm-d stack. It includes tools for deployment, experiment execution, data collection, and teardown across multiple environments and deployment styles.
-    category: Development Tools
     sidebarPosition: 7
     version: v0.3.0

remote-content/remote-sources/usage/usage-generator.js

@@ -0,0 +1,116 @@
+/**
+ * Usage Documentation Generator
+ * 
+ * Automatically syncs post-deployment operational documentation from the llm-d 
+ * repository's docs directory. These guides cover inference operations, gateway 
+ * configuration, monitoring, and other day-to-day usage topics.
+ * 
+ * Usage docs are synced from the specific release version defined in components-data.yaml,
+ * not from the main branch. This ensures documentation matches the released version.
+ */
+
+import { createContentWithSource } from '../utils.js';
+import { findRepoConfig, RELEASE_INFO } from '../component-configs.js';
+import { getRepoTransform } from '../repo-transforms.js';
+
+// Get repository configuration for the main llm-d repo
+const repoConfig = findRepoConfig('llm-d');
+
+// Use the release version from YAML instead of the branch
+const releaseVersion = RELEASE_INFO.version;
+const repoUrl = `https://github.com/${repoConfig.org}/${repoConfig.name}`;
+const sourceBaseUrl = `https://raw.githubusercontent.com/${repoConfig.org}/${repoConfig.name}/${releaseVersion}/`;
+
+// Create a custom transform that uses the release version instead of 'main'
+const transform = getRepoTransform(repoConfig.org, repoConfig.name);
+const contentTransform = (content, sourcePath) => transform(content, { 
+  repoUrl, 
+  branch: releaseVersion,  // Use release version, not 'main'
+  org: repoConfig.org, 
+  name: repoConfig.name, 
+  sourcePath 
+});
+
+/**
+ * Configuration for usage documentation
+ * These documents cover post-deployment operations and usage
+ */
+const USAGE_DOCS = [
+  {
+    sourceFile: 'docs/getting-started-inferencing.md',
+    title: 'Getting Started with Inference',
+    description: 'How to send inference requests to your deployed llm-d model servers',
+    sidebarLabel: 'Getting Started with Inference',
+    sidebarPosition: 1,
+    outputFile: 'getting-started-inferencing.md'
+  },
+  {
+    sourceFile: 'docs/customizing-your-gateway.md',
+    title: 'Customizing Your Gateway',
+    description: 'How to configure and customize the inference gateway',
+    sidebarLabel: 'Customizing Your Gateway',
+    sidebarPosition: 2,
+    outputFile: 'customizing-your-gateway.md'
+  },
+  {
+    sourceFile: 'docs/readiness-probes.md',
+    title: 'Readiness Probes',
+    description: 'Configuring health checks and readiness probes for model servers',
+    sidebarLabel: 'Readiness Probes',
+    sidebarPosition: 3,
+    outputFile: 'readiness-probes.md'
+  },
+  {
+    sourceFile: 'docs/monitoring/README.md',
+    title: 'Monitoring and Observability',
+    description: 'Enable metrics collection, dashboards, and monitoring for your llm-d deployment',
+    sidebarLabel: 'Monitoring and Observability',
+    sidebarPosition: 4,
+    outputFile: 'monitoring.md'
+  }
+];
+
+/**
+ * Create plugin configurations for all usage docs
+ */
+function createUsagePlugins() {
+  const plugins = [];
+
+  USAGE_DOCS.forEach((doc) => {
+    plugins.push([
+      'docusaurus-plugin-remote-content',
+      {
+        name: `usage-${doc.outputFile.replace('.md', '')}`,
+        sourceBaseUrl,
+        outDir: 'docs/usage',
+        documents: [doc.sourceFile],
+        noRuntimeDownloads: false,
+        performCleanup: true,
+
+        modifyContent(filename, content) {
+          if (filename === doc.sourceFile) {
+            return createContentWithSource({
+              title: doc.title,
+              description: doc.description,
+              sidebarLabel: doc.sidebarLabel,
+              sidebarPosition: doc.sidebarPosition,
+              filename: doc.sourceFile,
+              newFilename: doc.outputFile,
+              repoUrl,
+              branch: releaseVersion,
+              content,
+              contentTransform
+            });
+          }
+          return undefined;
+        },
+      },
+    ]);
+  });
+
+  return plugins;
+}
+
+// Export all usage plugins
+export default createUsagePlugins();
+

sidebars.js

@@ -18,6 +18,8 @@ const sidebars = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
   guideSidebar: [{type: 'autogenerated', dirName: 'guide'}],
 
+  usageSidebar: [{type: 'autogenerated', dirName: 'usage'}],
+
   structureSidebar: [{type: 'autogenerated', dirName: 'architecture'}],
 
   commSidebar: [{type: 'autogenerated', dirName: 'community'}],

src/components/Install/index.js

@@ -49,7 +49,7 @@ export default function Install() {
               <a className="link" href="docs/guide#our-well-lit-paths">Explore llm-d!</a></h3>
           {/* -------------------------------------------------------------------------- */}
           <a className="static-button install-button button-link" href="docs/guide">
-            Complete install methods here
+            Install Guides
           </a>
         </div>
       </div>

src/components/Welcome/index.js

@@ -20,9 +20,9 @@ export default function Welcome() {
           <a className="static-button button-link" href="docs/architecture">
             Architecture
           </a>
-          <a className="static-button button-link" href="docs/guide/Installation/prerequisites" >
+          <a className="static-button button-link" href="/docs/guide" >
             {/* Link to install page on the docs */}
-            Installation
+            Install Guides
           </a>
           <a className="static-button button-link" href="docs/community">
             {/* Link to Community tab */}