Skip to content

Adjust get started links to point to the "self hosting vs databricks" selector #309

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jun 17, 2025
Merged

Adjust get started links to point to the "self hosting vs databricks" selector #309

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3d351a0
fiix
dbczumar Jun 17, 2025
6f55b69
Fixes
dbczumar Jun 17, 2025
498794e
fix
dbczumar Jun 17, 2025
a85dd83
fix
dbczumar Jun 17, 2025
30c90d4
yarn fmt
dbczumar Jun 17, 2025
94018a4
fix
dbczumar Jun 17, 2025
1d1756e
yarn fmt
dbczumar Jun 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion website/src/components/GetStartedTagline/GetStartedTagline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export const GetStartedTagline = () => {
<span className="text-lg text-gray-600 text-center">
Join the industry leading companies building with MLflow
</span>
<GetStartedButton variant="primary" link={MLFLOW_DOCS_URL} />
<GetStartedButton variant="primary" link="#get-started" />
</div>
);
};
85 changes: 43 additions & 42 deletions website/src/components/GetStartedWithMLflow/GetStartedWithMLflow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,31 @@
import DatabricksLogo from "@site/static/img/databricks-logo.svg";
import Checkmark from "@site/static/img/checkmark.svg";
import { useLocation } from "@docusaurus/router";
import useBaseUrl from "@docusaurus/useBaseUrl";
import useBrokenLinks from "@docusaurus/useBrokenLinks";

import { GetStartedButton } from "../GetStartedButton/GetStartedButton";
import { cn } from "../../utils";
import { Heading } from "../Typography/Heading";
import { Body } from "../Typography/Body";
import { useLayoutVariant } from "../Layout/Layout";
import { MLFLOW_DOCS_URL, MLFLOW_DBX_TRIAL_URL } from "@site/src/constants";
import { MLFLOW_DOCS_URL, MLFLOW_DBX_TRIAL_URL, MLFLOW_DBX_INSTALL_URL } from "@site/src/constants";

export const GetStartedWithMLflow = () => {
const variant = useLayoutVariant();
const location = useLocation();
const classicalMLPath = useBaseUrl("/classical-ml");
const isClassicalMLPage = location.pathname.startsWith(classicalMLPath);
const databricksUrl = isClassicalMLPage ? MLFLOW_DBX_INSTALL_URL : MLFLOW_DBX_TRIAL_URL;
const databricksButtonText = isClassicalMLPage ? "Get started" : "Get started for free";

useBrokenLinks().collectAnchor("get-started");

return (
<div className={cn("grid grid-cols-1 lg:grid-cols-2 gap-8")}>
<div
className={cn(
"flex flex-col gap-6 items-start",
variant !== "blue" ? "lg:col-span-2" : "",
)}
>
<div id="get-started" className={cn("grid grid-cols-1 lg:grid-cols-2 gap-8")}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think you need to add something like this so docusarus knows that #get-started is an anchor:

mlflow-website/website/src/components/Section/Section.tsx

Line 13 in 5f57483

useBrokenLinks().collectAnchor(id);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks so much! Pushed a fix (hopefully :D)

<div className="flex flex-col gap-6 items-start lg:col-span-2">
<Heading level={2}>Get started with MLflow</Heading>
{variant !== "blue" ? (
<Body size="l">Choose from two options depending on your needs</Body>
) : null}
<Body size="l">Choose from two options depending on your needs</Body>
</div>
<div className="flex flex-col gap-8 p-8 bg-[#fff]/4 rounded-2xl justify-between">
<div className="flex flex-col gap-8">
Expand All @@ -49,40 +52,38 @@ export const GetStartedWithMLflow = () => {
link={MLFLOW_DOCS_URL}
/>
</div>
{variant !== "blue" ? (
<div className="flex flex-col gap-8 p-8 bg-[#fff]/4 rounded-2xl @container justify-between">
<div className="flex flex-col gap-8">
<div className="flex flex-row justify-between items-center gap-4">
<div className="flex flex-row justify-center items-end gap-3 flex-wrap">
<h3 className="m-0 text-white">Managed hosting </h3>
<span className="text-gray-500 text-sm">ON</span>
<DatabricksLogo />
</div>
</div>
<div className="flex flex-col gap-4">
{[
"Free and fully managed — experience MLflow without the setup hassle",
"Built and maintained by the original creators of MLflow",
"Full OSS compatibility",
].map((bulletPoint, index) => (
<div key={index} className="flex flex-row items-center gap-4">
<Checkmark className="shrink-0" />
<span className="text-md font-light text-gray-600">
{bulletPoint}
</span>
</div>
))}
Comment on lines -52 to -74
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll also show the databricks option on the classic ML page, but link to https://docs.databricks.com/aws/en/mlflow/mlflow-3-install. I'll add some info to https://docs.databricks.com/aws/en/mlflow/mlflow-3-install about how to sign up for lighthouse & use it for classic ML too!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @xq-yin

<div className="flex flex-col gap-8 p-8 bg-[#fff]/4 rounded-2xl @container justify-between">
<div className="flex flex-col gap-8">
<div className="flex flex-row justify-between items-center gap-4">
<div className="flex flex-row justify-center items-end gap-3 flex-wrap">
<h3 className="m-0 text-white">Managed hosting </h3>
<span className="text-gray-500 text-sm">ON</span>
<DatabricksLogo />
</div>
</div>
<GetStartedButton
body="Get started for free"
size="large"
width="full"
variant="dark"
link={MLFLOW_DBX_TRIAL_URL}
/>
<div className="flex flex-col gap-4">
{[
"Free and fully managed — experience MLflow without the setup hassle",
"Built and maintained by the original creators of MLflow",
"Full OSS compatibility",
].map((bulletPoint, index) => (
<div key={index} className="flex flex-row items-center gap-4">
<Checkmark className="shrink-0" />
<span className="text-md font-light text-gray-600">
{bulletPoint}
</span>
</div>
))}
</div>
</div>
) : null}
<GetStartedButton
body={databricksButtonText}
size="large"
width="full"
variant="dark"
link={databricksUrl}
/>
</div>
</div>
);
};
23 changes: 21 additions & 2 deletions website/src/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { useState, useLayoutEffect, useEffect } from "react";
import Link from "@docusaurus/Link";
import { useLocation } from "@docusaurus/router";
import useBaseUrl from "@docusaurus/useBaseUrl";
import Logo from "@site/static/img/mlflow-logo-white.svg";
import DownIcon from "@site/static/img/chevron-down-small.svg";

Expand All @@ -15,6 +17,20 @@ import { cva } from "class-variance-authority";

const MD_BREAKPOINT = 640;

// Helper function to determine the appropriate "Get started" link based on current page
function getStartedLinkForPage(pathname: string): string {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I saw this helper function several times in the codebase, think we could extract it out to be a util

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Definitely! Extracted!

const classicalMLPath = useBaseUrl("/classical-ml");
const genAIPath = useBaseUrl("/genai");

if (pathname.startsWith(classicalMLPath)) {
return "/classical-ml#get-started";
} else if (pathname.startsWith(genAIPath)) {
return "/genai#get-started";
} else {
return "/#get-started";
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if my TS/JS styling memory is still up to date, less indentation with early return is preferred

if (pathname.startsWith(classicalMLPath)) {
  return "/classical-ml#get-started";
}
if (pathname.startsWith(genAIPath)) {
  return "/genai#get-started";
}
return "/#get-started";

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Absolutely! Tidied this up :)

}

const navStyles = cva(
"fixed w-full z-20 top-0 start-0 bg-black/20 border-b border-[#F7F8F8]/8 backdrop-blur-[20px] overflow-y-auto",
{
Expand All @@ -31,6 +47,9 @@ export const Header = () => {
const [isOpen, setIsOpen] = useState(false);
const [isProductItemHovered, setIsProductItemHovered] = useState(false);
const [isProductSubmenuOpen, setIsProductSubmenuOpen] = useState(false);
const location = useLocation();

const getStartedHref = getStartedLinkForPage(location.pathname);

const handleProductItemHover = () => {
setIsProductItemHovered(true);
Expand Down Expand Up @@ -77,7 +96,7 @@ export const Header = () => {
<Logo className="h-[36px]" />
</Link>
<div className="flex flex-row items-center gap-6 md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse grow justify-end basis-0">
<Link href={MLFLOW_DOCS_URL} className="hidden md:block">
<Link href={getStartedHref} className="hidden md:block">
<Button variant="primary" size="small">
Get started
</Button>
Expand Down Expand Up @@ -155,7 +174,7 @@ export const Header = () => {
<HeaderMenuItem href="/ambassadors" label="Ambassador Program" />
</li>
<li className="w-full md:w-auto md:hidden">
<Link href={MLFLOW_DOCS_URL}>
<Link href={getStartedHref}>
<Button variant="primary" size="small" width="full">
Get started
</Button>
Expand Down
1 change: 1 addition & 0 deletions website/src/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ export const MOBILE_LAYOUT_BREAKPOINT = 996;
export const MLFLOW_DOCS_URL = "https://mlflow.org/docs/latest/";
export const MLFLOW_DBX_TRIAL_URL =
"https://signup.databricks.com/?destination_url=/ml/experiments-signup?source=MLFLOW_ORG&dbx_source=TRY_MLFLOW&signup_experience_step=EXPRESS&provider=MLFLOW";
export const MLFLOW_DBX_INSTALL_URL = "https://docs.databricks.com/aws/en/mlflow/mlflow-3-install";
2 changes: 1 addition & 1 deletion website/src/pages/classical-ml/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function GenAi(): JSX.Element {
<AboveTheFold
title="Mastering the ML lifecycle"
body="From experiment to production, MLflow streamlines your complete machine learning journey with end-to-end tracking, model management, and deployment."
hasGetStartedButton={MLFLOW_DOCS_URL}
hasGetStartedButton="#get-started"
bodyColor="white"
/>

Expand Down
2 changes: 1 addition & 1 deletion website/src/pages/genai/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function GenAi(): JSX.Element {
body={[
"Enhance your GenAI application with end-to-end tracking, observability, evaluations, all in one integrated platform.",
]}
hasGetStartedButton={MLFLOW_DOCS_URL}
hasGetStartedButton="#get-started"
bodyColor="white"
/>

Expand Down
Loading