Skip to content

Commit dcf34da

Browse files
dbczumardbczumar
authored
Adjust get started links to point to the "self hosting vs databricks" selector (#309)
Signed-off-by: dbczumar <[email protected]>
1 parent 5f57483 commit dcf34da

File tree

7 files changed

+102
-49
lines changed

7 files changed

+102
-49
lines changed

‎website/src/components/GetStartedTagline/GetStartedTagline.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const GetStartedTagline = () => {
77
<span className="text-lg text-gray-600 text-center">
88
Join the industry leading companies building with MLflow
99
</span>
10-
<GetStartedButton variant="primary" link={MLFLOW_DOCS_URL} />
10+
<GetStartedButton variant="primary" link="#get-started" />
1111
</div>
1212
);
1313
};

‎website/src/components/GetStartedWithMLflow/GetStartedWithMLflow.tsx

Lines changed: 55 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,42 @@
11
import DatabricksLogo from "@site/static/img/databricks-logo.svg";
22
import Checkmark from "@site/static/img/checkmark.svg";
3+
import { useLocation } from "@docusaurus/router";
4+
import useBaseUrl from "@docusaurus/useBaseUrl";
5+
import useBrokenLinks from "@docusaurus/useBrokenLinks";
36

47
import { GetStartedButton } from "../GetStartedButton/GetStartedButton";
5-
import { cn } from "../../utils";
8+
import { cn, isClassicalMLPage } from "../../utils";
69
import { Heading } from "../Typography/Heading";
710
import { Body } from "../Typography/Body";
811
import { useLayoutVariant } from "../Layout/Layout";
9-
import { MLFLOW_DOCS_URL, MLFLOW_DBX_TRIAL_URL } from "@site/src/constants";
12+
import {
13+
MLFLOW_DOCS_URL,
14+
MLFLOW_DBX_TRIAL_URL,
15+
MLFLOW_DBX_INSTALL_URL,
16+
} from "@site/src/constants";
1017

1118
export const GetStartedWithMLflow = () => {
1219
const variant = useLayoutVariant();
20+
const location = useLocation();
21+
const classicalMLPath = useBaseUrl("/classical-ml");
22+
const isClassicalML = isClassicalMLPage(location.pathname, classicalMLPath);
23+
const databricksUrl = isClassicalML
24+
? MLFLOW_DBX_INSTALL_URL
25+
: MLFLOW_DBX_TRIAL_URL;
26+
const databricksButtonText = isClassicalML
27+
? "Get started"
28+
: "Get started for free";
29+
30+
useBrokenLinks().collectAnchor("get-started");
1331

1432
return (
15-
<div className={cn("grid grid-cols-1 lg:grid-cols-2 gap-8")}>
16-
<div
17-
className={cn(
18-
"flex flex-col gap-6 items-start",
19-
variant !== "blue" ? "lg:col-span-2" : "",
20-
)}
21-
>
33+
<div
34+
id="get-started"
35+
className={cn("grid grid-cols-1 lg:grid-cols-2 gap-8")}
36+
>
37+
<div className="flex flex-col gap-6 items-start lg:col-span-2">
2238
<Heading level={2}>Get started with MLflow</Heading>
23-
{variant !== "blue" ? (
24-
<Body size="l">Choose from two options depending on your needs</Body>
25-
) : null}
39+
<Body size="l">Choose from two options depending on your needs</Body>
2640
</div>
2741
<div className="flex flex-col gap-8 p-8 bg-[#fff]/4 rounded-2xl justify-between">
2842
<div className="flex flex-col gap-8">
@@ -49,40 +63,38 @@ export const GetStartedWithMLflow = () => {
4963
link={MLFLOW_DOCS_URL}
5064
/>
5165
</div>
52-
{variant !== "blue" ? (
53-
<div className="flex flex-col gap-8 p-8 bg-[#fff]/4 rounded-2xl @container justify-between">
54-
<div className="flex flex-col gap-8">
55-
<div className="flex flex-row justify-between items-center gap-4">
56-
<div className="flex flex-row justify-center items-end gap-3 flex-wrap">
57-
<h3 className="m-0 text-white">Managed hosting </h3>
58-
<span className="text-gray-500 text-sm">ON</span>
59-
<DatabricksLogo />
60-
</div>
61-
</div>
62-
<div className="flex flex-col gap-4">
63-
{[
64-
"Free and fully managed — experience MLflow without the setup hassle",
65-
"Built and maintained by the original creators of MLflow",
66-
"Full OSS compatibility",
67-
].map((bulletPoint, index) => (
68-
<div key={index} className="flex flex-row items-center gap-4">
69-
<Checkmark className="shrink-0" />
70-
<span className="text-md font-light text-gray-600">
71-
{bulletPoint}
72-
</span>
73-
</div>
74-
))}
66+
<div className="flex flex-col gap-8 p-8 bg-[#fff]/4 rounded-2xl @container justify-between">
67+
<div className="flex flex-col gap-8">
68+
<div className="flex flex-row justify-between items-center gap-4">
69+
<div className="flex flex-row justify-center items-end gap-3 flex-wrap">
70+
<h3 className="m-0 text-white">Managed hosting </h3>
71+
<span className="text-gray-500 text-sm">ON</span>
72+
<DatabricksLogo />
7573
</div>
7674
</div>
77-
<GetStartedButton
78-
body="Get started for free"
79-
size="large"
80-
width="full"
81-
variant="dark"
82-
link={MLFLOW_DBX_TRIAL_URL}
83-
/>
75+
<div className="flex flex-col gap-4">
76+
{[
77+
"Free and fully managed — experience MLflow without the setup hassle",
78+
"Built and maintained by the original creators of MLflow",
79+
"Full OSS compatibility",
80+
].map((bulletPoint, index) => (
81+
<div key={index} className="flex flex-row items-center gap-4">
82+
<Checkmark className="shrink-0" />
83+
<span className="text-md font-light text-gray-600">
84+
{bulletPoint}
85+
</span>
86+
</div>
87+
))}
88+
</div>
8489
</div>
85-
) : null}
90+
<GetStartedButton
91+
body={databricksButtonText}
92+
size="large"
93+
width="full"
94+
variant="dark"
95+
link={databricksUrl}
96+
/>
97+
</div>
8698
</div>
8799
);
88100
};

‎website/src/components/Header/Header.tsx

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { useState, useLayoutEffect, useEffect } from "react";
22
import Link from "@docusaurus/Link";
3+
import { useLocation } from "@docusaurus/router";
4+
import useBaseUrl from "@docusaurus/useBaseUrl";
35
import Logo from "@site/static/img/mlflow-logo-white.svg";
46
import DownIcon from "@site/static/img/chevron-down-small.svg";
57

6-
import { cn } from "../../utils";
8+
import { cn, getStartedLinkForPage } from "../../utils";
79

810
import { Button } from "../Button/Button";
911
import { HeaderMenuItem } from "../HeaderMenuItem/HeaderMenuItem";
@@ -31,6 +33,15 @@ export const Header = () => {
3133
const [isOpen, setIsOpen] = useState(false);
3234
const [isProductItemHovered, setIsProductItemHovered] = useState(false);
3335
const [isProductSubmenuOpen, setIsProductSubmenuOpen] = useState(false);
36+
const location = useLocation();
37+
const classicalMLPath = useBaseUrl("/classical-ml");
38+
const genAIPath = useBaseUrl("/genai");
39+
40+
const getStartedHref = getStartedLinkForPage(
41+
location.pathname,
42+
classicalMLPath,
43+
genAIPath,
44+
);
3445

3546
const handleProductItemHover = () => {
3647
setIsProductItemHovered(true);
@@ -77,7 +88,7 @@ export const Header = () => {
7788
<Logo className="h-[36px]" />
7889
</Link>
7990
<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">
80-
<Link href={MLFLOW_DOCS_URL} className="hidden md:block">
91+
<Link href={getStartedHref} className="hidden md:block">
8192
<Button variant="primary" size="small">
8293
Get started
8394
</Button>
@@ -155,7 +166,7 @@ export const Header = () => {
155166
<HeaderMenuItem href="/ambassadors" label="Ambassador Program" />
156167
</li>
157168
<li className="w-full md:w-auto md:hidden">
158-
<Link href={MLFLOW_DOCS_URL}>
169+
<Link href={getStartedHref}>
159170
<Button variant="primary" size="small" width="full">
160171
Get started
161172
</Button>

‎website/src/constants.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,5 @@ export const MOBILE_LAYOUT_BREAKPOINT = 996;
22
export const MLFLOW_DOCS_URL = "https://mlflow.org/docs/latest/";
33
export const MLFLOW_DBX_TRIAL_URL =
44
"https://signup.databricks.com/?destination_url=/ml/experiments-signup?source=MLFLOW_ORG&dbx_source=TRY_MLFLOW&signup_experience_step=EXPRESS&provider=MLFLOW";
5+
export const MLFLOW_DBX_INSTALL_URL =
6+
"https://docs.databricks.com/aws/en/mlflow/mlflow-3-install";

‎website/src/pages/classical-ml/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default function GenAi(): JSX.Element {
2020
<AboveTheFold
2121
title="Mastering the ML lifecycle"
2222
body="From experiment to production, MLflow streamlines your complete machine learning journey with end-to-end tracking, model management, and deployment."
23-
hasGetStartedButton={MLFLOW_DOCS_URL}
23+
hasGetStartedButton="#get-started"
2424
bodyColor="white"
2525
/>
2626

‎website/src/pages/genai/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default function GenAi(): JSX.Element {
2121
body={[
2222
"Enhance your GenAI application with end-to-end tracking, observability, evaluations, all in one integrated platform.",
2323
]}
24-
hasGetStartedButton={MLFLOW_DOCS_URL}
24+
hasGetStartedButton="#get-started"
2525
bodyColor="white"
2626
/>
2727

‎website/src/utils.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,31 @@ import { twMerge } from "tailwind-merge";
44
export function cn(...inputs: ClassValue[]) {
55
return twMerge(clsx(inputs));
66
}
7+
8+
// Helper function to determine the appropriate "Get started" link based on current page
9+
export function getStartedLinkForPage(
10+
pathname: string,
11+
classicalMLPath: string,
12+
genAIPath: string,
13+
): string {
14+
if (pathname.startsWith(classicalMLPath)) {
15+
return "/classical-ml#get-started";
16+
}
17+
if (pathname.startsWith(genAIPath)) {
18+
return "/genai#get-started";
19+
}
20+
return "/#get-started";
21+
}
22+
23+
// Helper function to determine if current page is classical ML
24+
export function isClassicalMLPage(
25+
pathname: string,
26+
classicalMLPath: string,
27+
): boolean {
28+
return pathname.startsWith(classicalMLPath);
29+
}
30+
31+
// Helper function to determine if current page is GenAI
32+
export function isGenAIPage(pathname: string, genAIPath: string): boolean {
33+
return pathname.startsWith(genAIPath);
34+
}

0 commit comments

Comments
 (0)