"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,8 @@
+# Adding companies to the "Powered By" page
+
+Follow these steps to add a company logo to the "Powered By" page:
+
+1. Edit the `companies.json` file. The key should be the company's display name (it's used for
+alt/hover text on the image), and the value should be the company's website URL.
+2. Add the SVG file to `/static/img/companies`. The filename must be the company's display name 
+in lowercase, with all spaces replaced with `-`. For example, `"University of Washington" -> university-of-washington.svg`.

website/src/data/companies.json

@@ -0,0 +1,64 @@
+{
+  "ABN AMRO": "https://www.abnamro.com",
+  "Accenture": "https://www.accenture.com",
+  "Acerta": "https://acerta.ai/",
+  "AIA Group": "https://www.aia.com",
+  "AMD Telecom": "https://www.amdtelecom.net",
+  "Anker Innovations": "https://en.anker-in.com/",
+  "ASML": "https://www.asml.com",
+  "Atlassian": "https://www.atlassian.com",
+  "Banco Hipotecario": "https://www.hipotecario.com.ar/",
+  "Bigtincan": "https://www.bigtincan.com/",
+  "Bleckwen": "https://www.bleckwen.ai/",
+  "Booking": "https://www.booking.com",
+  "Brandfolder": "https://www.brandfolder.com",
+  "Cabify": "https://www.cabify.com",
+  "Capillary Technologies": "https://www.capillarytech.com/",
+  "Comcast": "https://www.comcast.com",
+  "Criteo": "https://www.criteo.com",
+  "Dagshub": "https://www.dagshub.com",
+  "Databricks": "https://www.databricks.com",
+  "Despegar": "https://www.us.despegar.com",
+  "Emerton Data": "https://www.emerton-data.com",
+  "First Orion": "https://firstorion.com/",
+  "Flipp": "https://flipp.com/",
+  "Fractal": "https://www.fractal.ai",
+  "Genpact": "https://www.genpact.com",
+  "Gousto": "https://www.gousto.co.uk",
+  "Grab": "https://www.grab.com",
+  "Grammarly": "https://www.grammarly.com/",
+  "Headspace": "https://www.headspace.com",
+  "Health2Sync": "https://www.health2sync.com",
+  "Intertec": "https://www.intertec.io",
+  "Intuit": "https://www.intuit.com",
+  "JetBlue": "https://www.jetblue.com",
+  "Julo": "https://www.julo.co.id",
+  "Kobalt": "https://www.kobaltmusic.com",
+  "Landscape": "https://www.landscape.cl",
+  "Meta": "https://www.meta.com",
+  "Microsoft": "https://www.microsoft.com",
+  "Modzy": "https://www.modzy.com",
+  "MosaicML": "https://www.mosaicml.com",
+  "Motorola Solutions": "https://www.motorolasolutions.com",
+  "MTS": "https://www.mts.ru",
+  "Nextdoor": "https://www.nextdoor.com",
+  "Nike": "https://www.nike.com",
+  "Outreach": "https://www.outreach.io",
+  "Publicis Sapient": "https://www.publicissapient.com",
+  "Quantmetry": "https://www.quantmetry.com",
+  "Riot Games": "https://www.riotgames.com",
+  "Samsara": "https://www.samsara.com",
+  "Scribd": "https://www.scribd.com",
+  "SK Telecom": "https://www.sktelecom.com",
+  "Solocal": "https://www.solocal.com",
+  "Stratio": "https://www.stratio.com",
+  "Systematic": "https://www.systematicinc.com",
+  "Tekion": "https://www.tekion.com",
+  "Telia Company": "https://www.teliacompany.com",
+  "The Trade Desk": "https://www.thetradedesk.com",
+  "Toyota": "https://www.toyota.com",
+  "University Of Washington": "https://www.washington.edu",
+  "WayMore": "https://www.waymore.io",
+  "Wix": "https://www.wix.com",
+  "Zillow": "https://www.zillow.com"
+}

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

@@ -0,0 +1,37 @@
+.logo {
+  width: 100%;
+  max-height: 3rem;
+  max-width: 10rem;
+}
+
+.logoContainer {
+  padding: 1rem;
+  margin: 1rem;
+}
+
+.pageContainer {
+  padding-top: 5rem;
+}
+
+.text {
+  font-size: 1.2rem;
+  margin: 1rem;
+  padding: 3rem;
+}
+
+@media screen and (max-width: 996px) {
+  .logo {
+    max-height: 2.5rem;
+    max-width: 8rem;
+  }
+
+  .pageContainer {
+    padding-top: 3rem;
+  }
+
+  .text {
+    font-size: 1rem;
+    margin: 1rem;
+    padding: 1rem;
+  }
+}

website/src/pages/powered-by.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import Layout from "@theme/Layout";
+import companies from "../data/companies.json";
+import styles from "./powered-by.module.css";
+import { H2 } from "../components/Header";
+
+function nameToSrc(name: string) {
+  return `img/companies/${name.toLowerCase().replace(/ /g, "-")}.svg`;
+}
+
+type CompanyTileProps = {
+  name: string;
+  url: string;
+};
+
+function CompanyTile({ name, url }: CompanyTileProps): React.ReactElement {
+  return (
+    <a href={url} target="_blank">
+      <div className={styles.logoContainer}>
+        <img className={styles.logo} src={nameToSrc(name)} 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
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          maxWidth: "60rem",
+          margin: "auto",
+        }}
+      >
+        <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. To add your organization here, email our
+          user list at{" "}
+          <a href="https://groups.google.com/g/mlflow-users">
+            mlflow-users@googlegroups.com
+          </a>
+          !
+        </div>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            flexWrap: "wrap",
+          }}
+        >
+          {Object.keys(companies).map((name) => {
+            return <CompanyTile name={name} url={companies[name]} />;
+          })}
+        </div>
+      </div>
+    </Layout>
+  );
+}