"Powered By" page for the MLflow website

website/docusaurus.config.ts

@@ -148,6 +148,7 @@ const config: Config = {
           position: "right",
         },
         { to: "/ambassador", label: "Ambassador Program", position: "right" },
+        { to: "/powered-by", label: "Powered By", position: "right" },
         {
           to: "pathname:///docs/latest/getting-started/index.html",
           label: "Get Started",

website/src/data/README.md

@@ -0,0 +1,7 @@
+# Adding a logo to the "Powered By" page
+
+Follow these steps to add an organization logo to the "Powered By" page:
+
+1. Add the logo SVG file to `/static/img/companies/color`.
+2. Edit the `companies.json` file. The key is the company's display name (it's used for
+   alt/hover text on the image), and the value is an object containing the company's URL and logo source path from Step 1.

website/src/data/companies.json

@@ -0,0 +1,232 @@
+{
+  "Meta": {
+    "url": "https://www.meta.com",
+    "src": "img/companies/color/meta.svg"
+  },
+  "Databricks": {
+    "url": "https://www.databricks.com",
+    "src": "img/companies/color/databricks.svg"
+  },
+  "Microsoft": {
+    "url": "https://www.microsoft.com",
+    "src": "img/companies/color/microsoft.svg"
+  },
+  "Atlassian": {
+    "url": "https://www.atlassian.com",
+    "src": "img/companies/color/atlassian.svg"
+  },
+  "Grab": {
+    "url": "https://www.grab.com",
+    "src": "img/companies/color/grab.svg"
+  },
+  "Riot Games": {
+    "url": "https://www.riotgames.com",
+    "src": "img/companies/color/riot-games.svg"
+  },
+  "Booking": {
+    "url": "https://www.booking.com",
+    "src": "img/companies/color/booking.svg"
+  },
+  "Zillow": {
+    "url": "https://www.zillow.com",
+    "src": "img/companies/color/zillow.svg"
+  },
+  "Nike": {
+    "url": "https://www.nike.com",
+    "src": "img/companies/color/nike.svg"
+  },
+  "Wix": { "url": "https://www.wix.com", "src": "img/companies/color/wix.svg" },
+  "Intuit": {
+    "url": "https://www.intuit.com",
+    "src": "img/companies/color/intuit.svg"
+  },
+  "Toyota": {
+    "url": "https://www.toyota.com",
+    "src": "img/companies/color/toyota.svg"
+  },
+  "ABN AMRO": {
+    "url": "https://www.abnamro.com",
+    "src": "img/companies/color/abn-amro.svg"
+  },
+  "Accenture": {
+    "url": "https://www.accenture.com",
+    "src": "img/companies/color/accenture.svg"
+  },
+  "Acerta": {
+    "url": "https://acerta.ai/",
+    "src": "img/companies/color/acerta.svg"
+  },
+  "AIA Group": {
+    "url": "https://www.aia.com",
+    "src": "img/companies/color/aia-group.svg"
+  },
+  "AMD Telecom": {
+    "url": "https://www.amdtelecom.net",
+    "src": "img/companies/color/amd-telecom.svg"
+  },
+  "Anker Innovations": {
+    "url": "https://en.anker-in.com/",
+    "src": "img/companies/color/anker-innovations.svg"
+  },
+  "ASML": {
+    "url": "https://www.asml.com",
+    "src": "img/companies/color/asml.svg"
+  },
+  "Banco Hipotecario": {
+    "url": "https://www.hipotecario.com.ar/",
+    "src": "img/companies/color/banco-hipotecario.svg"
+  },
+  "Bigtincan": {
+    "url": "https://www.bigtincan.com/",
+    "src": "img/companies/color/bigtincan.svg"
+  },
+  "Bleckwen": {
+    "url": "https://www.bleckwen.ai/",
+    "src": "img/companies/color/bleckwen.svg"
+  },
+  "Brandfolder": {
+    "url": "https://www.brandfolder.com",
+    "src": "img/companies/color/brandfolder.svg"
+  },
+  "Cabify": {
+    "url": "https://www.cabify.com",
+    "src": "img/companies/color/cabify.svg"
+  },
+  "Capillary Technologies": {
+    "url": "https://www.capillarytech.com/",
+    "src": "img/companies/color/capillary-technologies.svg"
+  },
+  "Comcast": {
+    "url": "https://www.comcast.com",
+    "src": "img/companies/color/comcast.svg"
+  },
+  "Criteo": {
+    "url": "https://www.criteo.com",
+    "src": "img/companies/color/criteo.svg"
+  },
+  "Dagshub": {
+    "url": "https://www.dagshub.com",
+    "src": "img/companies/color/dagshub.svg"
+  },
+  "Despegar": {
+    "url": "https://www.us.despegar.com",
+    "src": "img/companies/color/despegar.svg"
+  },
+  "Emerton Data": {
+    "url": "https://www.emerton-data.com",
+    "src": "img/companies/color/emerton-data.svg"
+  },
+  "First Orion": {
+    "url": "https://firstorion.com/",
+    "src": "img/companies/color/first-orion.svg"
+  },
+  "Flipp": {
+    "url": "https://flipp.com/",
+    "src": "img/companies/color/flipp.svg"
+  },
+  "Fractal": {
+    "url": "https://www.fractal.ai",
+    "src": "img/companies/color/fractal.svg"
+  },
+  "Genpact": {
+    "url": "https://www.genpact.com",
+    "src": "img/companies/color/genpact.svg"
+  },
+  "Gousto": {
+    "url": "https://www.gousto.co.uk",
+    "src": "img/companies/color/gousto.svg"
+  },
+  "Grammarly": {
+    "url": "https://www.grammarly.com/",
+    "src": "img/companies/color/grammarly.svg"
+  },
+  "Headspace": {
+    "url": "https://www.headspace.com",
+    "src": "img/companies/color/headspace.svg"
+  },
+  "Health2Sync": {
+    "url": "https://www.health2sync.com",
+    "src": "img/companies/color/health2sync.svg"
+  },
+  "Intertec": {
+    "url": "https://www.intertec.io",
+    "src": "img/companies/color/intertec.svg"
+  },
+  "JetBlue": {
+    "url": "https://www.jetblue.com",
+    "src": "img/companies/color/jetblue.svg"
+  },
+  "Julo": {
+    "url": "https://www.julo.co.id",
+    "src": "img/companies/color/julo.svg"
+  },
+  "Kobalt": {
+    "url": "https://www.kobaltmusic.com",
+    "src": "img/companies/color/kobalt.svg"
+  },
+  "Modzy": {
+    "url": "https://www.modzy.com",
+    "src": "img/companies/color/modzy.svg"
+  },
+  "Motorola Solutions": {
+    "url": "https://www.motorolasolutions.com",
+    "src": "img/companies/color/motorola-solutions.svg"
+  },
+  "MTS": { "url": "https://www.mts.ru", "src": "img/companies/color/mts.svg" },
+  "Nextdoor": {
+    "url": "https://www.nextdoor.com",
+    "src": "img/companies/color/nextdoor.svg"
+  },
+  "Outreach": {
+    "url": "https://www.outreach.io",
+    "src": "img/companies/color/outreach.svg"
+  },
+  "Publicis Sapient": {
+    "url": "https://www.publicissapient.com",
+    "src": "img/companies/color/publicis-sapient.svg"
+  },
+  "Quantmetry": {
+    "url": "https://www.quantmetry.com",
+    "src": "img/companies/color/quantmetry.svg"
+  },
+  "Samsara": {
+    "url": "https://www.samsara.com",
+    "src": "img/companies/color/samsara.svg"
+  },
+  "Scribd": {
+    "url": "https://www.scribd.com",
+    "src": "img/companies/color/scribd.svg"
+  },
+  "SK Telecom": {
+    "url": "https://www.sktelecom.com",
+    "src": "img/companies/color/sk-telecom.svg"
+  },
+  "Solocal": {
+    "url": "https://www.solocal.com",
+    "src": "img/companies/color/solocal.svg"
+  },
+  "Stratio": {
+    "url": "https://www.stratio.com",
+    "src": "img/companies/color/stratio.svg"
+  },
+  "Systematic": {
+    "url": "https://www.systematicinc.com",
+    "src": "img/companies/color/systematic.svg"
+  },
+  "Tekion": {
+    "url": "https://www.tekion.com",
+    "src": "img/companies/color/tekion.svg"
+  },
+  "Telia Company": {
+    "url": "https://www.teliacompany.com",
+    "src": "img/companies/color/telia-company.svg"
+  },
+  "The Trade Desk": {
+    "url": "https://www.thetradedesk.com",
+    "src": "img/companies/color/the-trade-desk.svg"
+  },
+  "University Of Washington": {
+    "url": "https://www.washington.edu",
+    "src": "img/companies/color/university-of-washington.svg"
+  }
+}

website/src/pages/powered-by/index.module.css

@@ -0,0 +1,78 @@
+.logo {
+  width: 100%;
+  max-height: 3rem;
+  max-width: 10rem;
+}
+
+.logoContainer {
+  padding: 1rem;
+  margin: 1rem;
+  filter: grayscale(100%);
+  transform: scale(1);
+  transition:
+    0.2s filter,
+    0.3s transform;
+}
+
+.logoContainer:hover {
+  filter: grayscale(0%);
+  transform: scale(1.1);
+  transition:
+    0.2s filter,
+    0.3s transform;
+}
+
+.logosSectionOuter {
+  clip-path: polygon(0 0, 100% 5rem, 100% 100%, 0 100%);
+  background-color: white;
+  padding-top: 5rem;
+  padding-bottom: 3rem;
+  width: 100%;
+}
+
+.logosSectionInner {
+  max-width: 60rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: auto;
+}
+
+.pageContainer {
+  padding-top: 5rem;
+}
+
+.text {
+  font-size: 1.2rem;
+  margin: auto;
+  padding: 3rem;
+  max-width: 50rem;
+}
+
+@media screen and (max-width: 996px) {
+  .logo {
+    max-height: 2.5rem;
+    max-width: 8rem;
+  }
+
+  .logoContainer {
+    filter: grayscale(0%);
+  }
+
+  .pageContainer {
+    padding-top: 3rem;
+  }
+
+  .logosSectionOuter {
+    padding-top: 3rem;
+    clip-path: polygon(0 0, 100% 3rem, 100% 100%, 0 100%);
+  }
+
+  .text {
+    font-size: 1rem;
+    margin: auto;
+    margin-bottom: 2rem;
+    padding: 1rem;
+  }
+}

website/src/pages/powered-by/index.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import Layout from "@theme/Layout";
+import companies from "../../data/companies.json";
+import styles from "./index.module.css";
+import { H2 } from "../../components/Header";
+
+type CompanyTileProps = {
+  name: string;
+  url: string;
+  src: string;
+};
+
+function CompanyTile({ name, url, src }: CompanyTileProps): React.ReactElement {
+  return (
+    <a href={url} target="_blank">
+      <div className={styles.logoContainer}>
+        <img className={styles.logo} src={src} alt={name} title={name} />
+      </div>
+    </a>
+  );
+}
+
+export default function Companies(): React.ReactElement {
+  return (
+    <Layout
+      wrapperClassName={styles.pageContainer}
+      title="Powered By MLflow"
+      description="Powered By MLflow"
+    >
+      <H2>Powered by MLflow</H2>
+      <div className={styles.text}>
+        MLflow is trusted by organizations of all sizes to power their AI and
+        machine learning workflows. Below are some of the organizations using
+        and contributing to MLflow.
+      </div>
+      <div className={styles.logosSectionOuter}>
+        <div className={styles.logosSectionInner}>
+          {Object.keys(companies).map((name) => (
+            <CompanyTile
+              name={name}
+              url={companies[name].url}
+              src={companies[name].src}
+            />
+          ))}
+        </div>
+      </div>
+    </Layout>
+  );
+}