Add EcosystemList component and integrate new ecosystem data

src/components/adoptersList.js → src/components/logoWall.js

@@ -1,9 +1,8 @@
 import React from "react";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useBaseUrl from "@docusaurus/useBaseUrl";
-import adoptersData from "../data/adopters.json";
 
-const AdoptersList = () => {
+const LogoWall = ({ items, imgPrefix }) => {
   const { i18n } = useDocusaurusContext();
   const isZh = i18n.currentLocale === "zh";
   const baseUrl = useBaseUrl("/");
@@ -12,11 +11,11 @@ const AdoptersList = () => {
 
   return (
     <ul className="support-wrapper">
-      {adoptersData.map(({ logo, logoZh, name, nameZh, website }, index) => {
+      {items.map(({ logo, logoZh, name, nameZh, website }, index) => {
         const href = website?.trim() || null;
         const rawLogo = isZh && logoZh ? logoZh : logo;
         const hasLogo = rawLogo && rawLogo.trim() !== "";
-        const logoPath = hasLogo && rawLogo.startsWith("/") ? rawLogo : `/img/adopters/${rawLogo}`;
+        const logoPath = hasLogo && rawLogo.startsWith("/") ? rawLogo : `${imgPrefix}/${rawLogo}`;
         const displayName = isZh && nameZh ? nameZh : name;
 
         return (
@@ -54,4 +53,4 @@ const AdoptersList = () => {
   );
 };
 
-export default AdoptersList;
+export default LogoWall;

src/data/ecosystem.json

@@ -0,0 +1,38 @@
+[
+  {
+    "name": "KAI Scheduler",
+    "nameZh": "KAI Scheduler",
+    "logo": "/img/ecosystem/kai-scheduler.png",
+    "website": "https://github.com/NVIDIA/kai-scheduler"
+  },
+  {
+    "name": "Volcano",
+    "nameZh": "Volcano",
+    "logo": "/img/ecosystem/volcano.png",
+    "website": "https://volcano.sh"
+  },
+  {
+    "name": "Kueue",
+    "nameZh": "Kueue",
+    "logo": "/img/ecosystem/kueue.svg",
+    "website": "https://kueue.sigs.k8s.io"
+  },
+  {
+    "name": "Koordinator",
+    "nameZh": "Koordinator",
+    "logo": "/img/ecosystem/koordinator.svg",
+    "website": "https://koordinator.sh"
+  },
+  {
+    "name": "Olares",
+    "nameZh": "Olares",
+    "logo": "/img/ecosystem/olares.png",
+    "website": "https://www.olares.com"
+  },
+  {
+    "name": "CozyStack",
+    "nameZh": "CozyStack",
+    "logo": "/img/ecosystem/cozystack.svg",
+    "website": "https://cozystack.io"
+  }
+]

src/pages/index.js

@@ -23,8 +23,10 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import styles from "./styles.module.css";
 import ContributorsList from "../components/contributorsList";
-import AdoptersList from "../components/adoptersList";
+import LogoWall from "../components/logoWall";
 import BeforeAfterComparison from "../components/BeforeAfterComparison";
+import adoptersData from "../data/adopters.json";
+import ecosystemData from "../data/ecosystem.json";
 import heroStats from "../data/home/heroStats";
 import valueCards from "../data/home/valueCards";
 
@@ -52,6 +54,12 @@ const heroWorkloadEcosystem = [
     label: { en: "Xinference", zh: "Xinference" },
     logo: "img/ecosystem/xinference.svg",
   },
+  {
+    key: "qwen",
+    label: { en: "Qwen", zh: "通义千问" },
+    logo: "img/ecosystem/qwen.svg",
+  },
+  { key: "ray", label: { en: "Ray", zh: "Ray" }, logo: "img/ecosystem/ray.svg" },
   { key: "llm", label: { en: "LLM", zh: "LLM" } },
   { key: "ml", label: { en: "ML", zh: "ML" } },
   { key: "hpc", label: { en: "HPC", zh: "HPC" } },
@@ -69,6 +77,11 @@ const heroSchedulerEcosystem = [
     label: { en: "Koordinator", zh: "Koordinator" },
     logo: "img/ecosystem/koordinator.svg",
   },
+  {
+    key: "kai-scheduler",
+    label: { en: "KAI Scheduler", zh: "KAI Scheduler" },
+    logo: "img/ecosystem/kai-scheduler.png",
+  },
 ];
 const heroGpuSlices = ["GPU", "1/2", "1/4", "1/N"];
 const heroDeviceEcosystem = [
@@ -877,6 +890,20 @@ export default function Home() {
           </div>
         </section>
 
+        <section ref={addRevealRef} className={clsx(styles.section, styles.reveal)}>
+          <div className="container">
+            <h2 className={styles.sectionTitle}>{isZh ? "与 HAMi 协同" : "Works with HAMi"}</h2>
+            <p className={styles.sectionLead}>
+              {isZh
+                ? "HAMi 与以下开源调度器、队列及云平台协同工作，既可作为设备层嵌入，也可在调度层集成。"
+                : "HAMi integrates with these open-source schedulers, queuing layers, and cloud platforms, either as an embeddable device layer or at the scheduling layer."}
+            </p>
+            <div className={styles.supportersWrap}>
+              <LogoWall items={ecosystemData} imgPrefix="/img/ecosystem" />
+            </div>
+          </div>
+        </section>
+
         <section ref={addRevealRef} className={clsx(styles.section, styles.reveal)}>
           <div className="container">
             <h2 className={styles.sectionTitle}>{isZh ? "采用者" : "Adopters"}</h2>
@@ -886,7 +913,7 @@ export default function Home() {
                 : "The organizations below are evaluating or using HAMi in production environments."}
             </p>
             <div className={styles.supportersWrap}>
-              <AdoptersList />
+              <LogoWall items={adoptersData} imgPrefix="/img/adopters" />
             </div>
             <article className={styles.adoptersCta}>
               <h3 className={styles.adoptersCtaTitle}>

src/pages/styles.module.css

@@ -221,7 +221,7 @@
 
 .schedulerEcosystemGrid {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 6px;
 }
 
@@ -2078,7 +2078,7 @@
   }
 
   .schedulerEcosystemGrid {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-template-columns: repeat(5, minmax(0, 1fr));
   }
 
   .ecoLayerDevices .ecoLogoGrid {
@@ -2246,7 +2246,7 @@
   }
 
   .schedulerEcosystemGrid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
   .ecoCoreRow {