Various fixes (#275)

Co-authored-by: TomuHirata <[email protected]>

Author: frontsideair

website/src/components/ExpandableGrid/ExpandableGrid.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { flushSync } from "react-dom";
 import styles from "./styles.module.css";
 
 const ExpandableGrid = ({ items, defaultVisibleCount, renderItem }) => {
@@ -21,7 +22,17 @@ const ExpandableGrid = ({ items, defaultVisibleCount, renderItem }) => {
       {items.length > defaultVisibleCount && (
         <div className={styles.buttonContainer}>
           <button
-            onClick={() => setIsExpanded(!isExpanded)}
+            onClick={(event) => {
+              if (isExpanded) {
+                flushSync(() => setIsExpanded(false));
+                event.currentTarget.scrollIntoView({
+                  behavior: "smooth",
+                  block: "center",
+                });
+              } else {
+                setIsExpanded(true);
+              }
+            }}
             className={styles.toggleButton}
           >
             {isExpanded ? "See Less ∧" : "See All ∨"}

website/src/components/Grid/Grid.tsx

@@ -60,15 +60,15 @@ export const Grid = ({
       <div className={grid({ columns, className })}>
         {children}
         {Array.from({ length: missingSlots }, (_, i) => (
-          <GridItem key={i} />
+          <GridItem key={i} filler />
         ))}
       </div>
     </div>
   );
 };
 
 const gridItemVariants = cva(
-  ["flex flex-col items-start p-10 gap-20 justify-between w-full bg-[#0E1416]"],
+  ["flex-col items-start p-10 gap-20 justify-between w-full bg-[#0E1416]"],
   {
     variants: {
       width: {
@@ -78,6 +78,10 @@ const gridItemVariants = cva(
       direction: {
         reverse: "md:flex-col-reverse",
       },
+      filler: {
+        true: "hidden md:flex",
+        false: "flex",
+      },
     },
     compoundVariants: [
       {
@@ -99,6 +103,9 @@ export const GridItem = ({
   children,
   width,
   direction,
+  filler = false,
 }: PropsWithChildren<VariantProps<typeof gridItem>>) => {
-  return <div className={gridItem({ width, direction })}>{children}</div>;
+  return (
+    <div className={gridItem({ width, direction, filler })}>{children}</div>
+  );
 };

website/src/components/Layout/AboveTheFold.tsx

@@ -19,8 +19,8 @@ export function AboveTheFold({
 }: Props) {
   const bodyParts = Array.isArray(body) ? body : [body];
   return (
-    <div className="flex flex-col min-h-screen">
-      <div className="flex flex-col justify-center items-center flex-1 gap-6 w-full max-w-5xl mx-auto px-4">
+    <div className="flex flex-col min-h-screen gap-6">
+      <div className="flex flex-col justify-center items-center flex-1 gap-6 w-full max-w-5xl mx-auto md:px-4">
         {sectionLabel && <SectionLabel label={sectionLabel} />}
         <div className="max-w-4xl mx-auto">
           <Heading level={1}>{title}</Heading>

website/src/components/Layout/Layout.tsx

@@ -7,70 +7,67 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 
 type Props = PropsWithChildren;
 
-const wrapper = cva(
-  "flex flex-col gap-20 bg-no-repeat w-full pt-42 pb-20 py-20",
-  {
-    variants: {
-      variant: {
-        red: "",
-        blue: "",
-        colorful: "",
-      },
-      direction: {
-        down: "bg-size-[auto_1000px] 2xl:bg-size-[100%_1000px] bg-[center_top]",
-        up: "bg-size-[auto_820px] 2xl:bg-size-[100%_820px] bg-[center_top]",
-      },
+const wrapper = cva("flex flex-col gap-20 bg-no-repeat w-full py-10", {
+  variants: {
+    variant: {
+      red: "",
+      blue: "",
+      colorful: "",
     },
-    compoundVariants: [
-      {
-        variant: "red",
-        direction: "down",
-        className: [
-          "bg-[linear-gradient(to_bottom,rgba(12,20,20,0)_0%,rgba(12,20,20,0)_50%,rgba(14,20,20,100)_75%),url('/img/background-image-2.png')]",
-        ],
-      },
-      {
-        variant: "blue",
-        direction: "down",
-        className: [
-          "bg-[linear-gradient(to_bottom,rgba(12,20,20,0)_0%,rgba(12,20,20,0)_50%,rgba(14,20,20,100)_75%),url('/img/background-image-3.png')]",
-        ],
-      },
-      {
-        variant: "colorful",
-        direction: "down",
-        className: [
-          "bg-[linear-gradient(to_bottom,rgba(12,20,20,0)_0%,rgba(12,20,20,0)_50%,rgba(14,20,20,100)_75%),url('/img/background-image-1.png')]",
-        ],
-      },
-      {
-        variant: "red",
-        direction: "up",
-        className: [
-          "bg-[linear-gradient(to_top,rgba(12,20,20,0)_0%,rgba(12,20,20,0)_10%,rgba(14,20,20,100)_40%),url('/img/background-image-2-flipped.png')]",
-        ],
-      },
-      {
-        variant: "blue",
-        direction: "up",
-        className: [
-          "bg-[linear-gradient(to_top,rgba(11,20,20,0)_0%,rgba(12,20,20,0)_10%,rgba(14,20,20,100)_40%),url('/img/background-image-3-flipped.png')]",
-        ],
-      },
-      {
-        variant: "colorful",
-        direction: "up",
-        className: [
-          "bg-[linear-gradient(to_top,rgba(11,20,20,0)_0%,rgba(12,20,20,0)_10%,rgba(14,20,20,100)_40%),url('/img/background-image-1-flipped.png')]",
-        ],
-      },
-    ],
-    defaultVariants: {
+    direction: {
+      down: "bg-size-[auto_1000px] 2xl:bg-size-[100%_1000px] bg-[center_top]",
+      up: "bg-size-[auto_820px] 2xl:bg-size-[100%_820px] bg-[center_top]",
+    },
+  },
+  compoundVariants: [
+    {
+      variant: "red",
+      direction: "down",
+      className: [
+        "bg-[linear-gradient(to_bottom,rgba(12,20,20,0)_0%,rgba(12,20,20,0)_50%,rgba(14,20,20,100)_75%),url('/img/background-image-2.png')]",
+      ],
+    },
+    {
+      variant: "blue",
+      direction: "down",
+      className: [
+        "bg-[linear-gradient(to_bottom,rgba(12,20,20,0)_0%,rgba(12,20,20,0)_50%,rgba(14,20,20,100)_75%),url('/img/background-image-3.png')]",
+      ],
+    },
+    {
       variant: "colorful",
       direction: "down",
+      className: [
+        "bg-[linear-gradient(to_bottom,rgba(12,20,20,0)_0%,rgba(12,20,20,0)_50%,rgba(14,20,20,100)_75%),url('/img/background-image-1.png')]",
+      ],
     },
+    {
+      variant: "red",
+      direction: "up",
+      className: [
+        "bg-[linear-gradient(to_top,rgba(12,20,20,0)_0%,rgba(12,20,20,0)_10%,rgba(14,20,20,100)_40%),url('/img/background-image-2-flipped.png')]",
+      ],
+    },
+    {
+      variant: "blue",
+      direction: "up",
+      className: [
+        "bg-[linear-gradient(to_top,rgba(11,20,20,0)_0%,rgba(12,20,20,0)_10%,rgba(14,20,20,100)_40%),url('/img/background-image-3-flipped.png')]",
+      ],
+    },
+    {
+      variant: "colorful",
+      direction: "up",
+      className: [
+        "bg-[linear-gradient(to_top,rgba(11,20,20,0)_0%,rgba(12,20,20,0)_10%,rgba(14,20,20,100)_40%),url('/img/background-image-1-flipped.png')]",
+      ],
+    },
+  ],
+  defaultVariants: {
+    variant: "colorful",
+    direction: "down",
   },
-);
+});
 
 export const LayoutContext = createContext<"red" | "blue" | "colorful">(
   "colorful",

website/src/components/Typography/Heading.tsx

@@ -1,13 +1,13 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import type { PropsWithChildren } from "react";
 
-const styles = cva("", {
+const styles = cva("hyphens-auto break-word", {
   variants: {
     level: {
-      1: "text-balance font-light text-[64px] leading-[100%] tracking-[-3%] text-center",
-      2: "text-wrap font-light text-[52px] leading-[120%] tracking-[-1%] text-center text-white",
-      3: "text-wrap font-regular text-[40px] leading-[120%] tracking-[-1%]",
-      4: "text-wrap font-regular text-[32px] leading-[120%] tracking-[0%]",
+      1: "text-balance font-light text-[40px] xxs:text-[52px] xs:text-[64px] leading-[100%] tracking-[-3%] text-center",
+      2: "text-wrap font-light text-[32px] xxs:text-[40px] xs:text-[52px] leading-[120%] tracking-[-1%] text-center text-white",
+      3: "text-wrap font-regular text-[24px] xxs:text-[32px] xs:text-[40px] leading-[120%] tracking-[-1%]",
+      4: "text-wrap font-regular text-[24px] xxs:text-[32px] leading-[120%] tracking-[0%]",
       5: "text-wrap font-medium text-[24px] leading-[120%] tracking-[0%]",
     },
   },
@@ -23,7 +23,12 @@ export const Heading = ({
   "aria-level": ariaLevel = level, // use stylistic level by default, but allow aria-level override
 }: Props) => {
   return (
-    <div role="heading" aria-level={ariaLevel} className={styles({ level })}>
+    <div
+      role="heading"
+      aria-level={ariaLevel}
+      className={styles({ level })}
+      lang="en"
+    >
       {children}
     </div>
   );

website/src/css/custom.css

@@ -26,6 +26,13 @@
   --color-brand-teal: #44edbc;
 
   --font-weight-regular: 400;
+
+  --breakpoint-xxs: 4rem;
+  --breakpoint-xs: 32rem;
+}
+
+@utility break-word {
+  word-break: break-word;
 }
 
 html {
@@ -66,6 +73,10 @@ a {
   color: rgba(255, 255, 255, 0.6) !important;
 }
 
+.markdown a {
+  color: var(--color-brand-teal) !important;
+}
+
 a:hover {
   text-decoration: none !important;
   color: white !important;

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

@@ -22,9 +22,7 @@ export default function GenAi(): JSX.Element {
         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}
         bodyColor="white"
-      >
-        <div className="md:h-40 lg:h-80" />
-      </AboveTheFold>
+      />
 
       <StickyGrid
         cards={[

website/src/pages/genai/index.tsx

@@ -23,9 +23,7 @@ export default function GenAi(): JSX.Element {
         ]}
         hasGetStartedButton={MLFLOW_DOCS_URL}
         bodyColor="white"
-      >
-        <div className="md:h-40 lg:h-80" />
-      </AboveTheFold>
+      />
 
       <StickyGrid
         cards={[

website/src/pages/index.tsx

@@ -19,42 +19,42 @@ export default function Home(): JSX.Element {
       <AboveTheFold
         title="Deliver production-ready AI"
         body="The open source developer platform to build AI applications and models with confidence."
-      >
-        <GlossyCardContainer>
-          <GlossyCard>
-            <Card
-              title="GenAI Apps & Agents"
-              bodySize="m"
-              body="Enhance your GenAI applications with end-to-end tracking, observability, and evaluations, all in one integrated platform."
-              padded
-              rounded={false}
-              cta={{
-                href: "/genai",
-                text: "Learn more",
-                prominent: true,
-              }}
-              image={<img src={GenAI} alt="" className="hidden md:block" />}
-            />
-          </GlossyCard>
-          <GlossyCard>
-            <Card
-              title="Model Training"
-              bodySize="m"
-              body="Streamline your machine learning workflows with end-to-end tracking, model management, and deployment."
-              padded
-              rounded={false}
-              cta={{
-                href: "/classical-ml",
-                text: "Learn more",
-                prominent: true,
-              }}
-              image={
-                <img src={ModelTraining} alt="" className="hidden md:block" />
-              }
-            />
-          </GlossyCard>
-        </GlossyCardContainer>
-      </AboveTheFold>
+      />
+
+      <GlossyCardContainer>
+        <GlossyCard>
+          <Card
+            title="GenAI Apps & Agents"
+            bodySize="m"
+            body="Enhance your GenAI applications with end-to-end tracking, observability, and evaluations, all in one integrated platform."
+            padded
+            rounded={false}
+            cta={{
+              href: "/genai",
+              text: "Learn more",
+              prominent: true,
+            }}
+            image={<img src={GenAI} alt="" className="hidden md:block" />}
+          />
+        </GlossyCard>
+        <GlossyCard>
+          <Card
+            title="Model Training"
+            bodySize="m"
+            body="Streamline your machine learning workflows with end-to-end tracking, model management, and deployment."
+            padded
+            rounded={false}
+            cta={{
+              href: "/classical-ml",
+              text: "Learn more",
+              prominent: true,
+            }}
+            image={
+              <img src={ModelTraining} alt="" className="hidden md:block" />
+            }
+          />
+        </GlossyCard>
+      </GlossyCardContainer>
 
       <Customers />
       <EcosystemList />

website/src/theme/BlogPostItems/index.js

@@ -19,23 +19,23 @@ export default function BlogPostItems({
 
     return (
       <div className="flex flex-col mb-10 max-w-7xl mx-auto gap-20">
-        <div className="flex flex-col-reverse md:flex-row gap-10">
+        <div className="flex flex-col-reverse items-center md:flex-row gap-10">
           <Link
             href={firstBlogPost.content.metadata.permalink}
-            className="flex flex-col justify-center items-start gap-4 w-1/2"
+            className="flex flex-col justify-center items-start gap-4 md:w-1/2"
           >
             <SectionLabel label="Featured" />
             <Heading level={2}>{firstBlogPost.content.metadata.title}</Heading>
             <Body size="l">{firstBlogPost.content.metadata.description}</Body>
           </Link>
           <Link
             href={firstBlogPost.content.metadata.permalink}
-            className="w-1/2"
+            className="md:w-1/2"
           >
             <img
               src={useBaseUrl(firstBlogPost.content.frontMatter.thumbnail)}
               alt={firstBlogPost.content.frontMatter.title}
-              className="w-full h-full object-cover rounded-md"
+              className="w-full aspect-video object-cover rounded-md"
             />
           </Link>
         </div>