Update some content for the website

packages/website/src/components/asset-img/asset-img.module.css

@@ -0,0 +1,3 @@
+.img {
+  display: block;
+}

packages/website/src/components/asset-img/asset-img.tsx

@@ -0,0 +1,15 @@
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import style from "./asset-img.module.css";
+
+export interface AssetImgProps {
+  src: string;
+  className?: string;
+}
+
+/**
+ * Component for rendering an image resolving the relative path.
+ */
+export const AssetImg = ({ src, ...props }: AssetImgProps) => {
+  const fullSrc = useBaseUrl(`/img/${src}`);
+  return <img className={style["img"]} src={fullSrc} {...props} />;
+};

packages/website/src/components/fluent-img.tsx

@@ -7,13 +7,17 @@ export interface FluentImgProps {
 }
 
 export type FluentImageName =
-  | "checkmark"
   | "chat"
+  | "checkmark"
+  | "design-layout"
   | "design"
+  | "document-add"
+  | "document-cloud"
   | "editor"
   | "eye-dev"
   | "firework"
-  | "people-shield";
+  | "people-shield"
+  | "shield-blue";
 
 /**
  * Component for rendering a Fluent image.

packages/website/src/components/homepage/homepage.module.css

@@ -1,6 +1,6 @@
 .intro-container {
   background-repeat: no-repeat;
-  width: 100vw;
+  width: 100%;
   background-size: 100vw 94%;
 
   display: flex;

packages/website/src/components/homepage/homepage.tsx

@@ -5,6 +5,7 @@ import { SectionedLayout } from "../sectioned-layout/sectioned-layout";
 import { Feature, FeatureGroup } from "./feature/feature";
 import style from "./homepage.module.css";
 import { Section } from "./section/section";
+import { Links } from "@site/src/constants";
 
 const useFluentStyles = makeStyles({
   bg: { backgroundColor: tokens.colorNeutralBackground3 },
@@ -93,18 +94,19 @@ const OpenAPISection = () => {
       header="Productivity"
       title="Streamline your OpenAPI workflow"
       description="Benefit from a huge ecosystem of OpenAPI tools for configuring API gateways, generating code, and validating your data."
+      image="illustrations/openapi3.png"
       items={[
         {
           title: "TypeSpec for OpenAPI developers",
-          description: "Description todo",
+          description: "Get started with using TypeSpec coming from OpenAPI.",
           image: "design",
-          link: "/openapi",
+          link: Links.gettingStartedOpenAPI,
         },
         {
-          title: "Title",
-          description: "Description todo",
-          image: "checkmark",
-          link: "todo",
+          title: "OpenAPI emitter reference",
+          description: "Reference documentation for the OpenAPI 3.0 emitter.",
+          image: "document-add",
+          link: "/docs/standard-library/openapi3/reference",
         },
       ]}
     />
@@ -117,13 +119,20 @@ const EcoSystemSection = () => {
       header="Ecosystem"
       title="Test API endpoints as you code"
       description="Build a complete JSON RPC interface for your service, call it from your web browser, and test out endpoints in a breeze."
+      image="illustrations/openapi3.png"
       items={[
         {
           title: "TypeSpec for JSON RPC developer",
           description: "Description todo",
           image: "design",
           link: "/json-rpc",
         },
+        {
+          title: "Validate messages with JSON Schema",
+          description: "Generate the JSON Schema for your JSON RPC message.",
+          image: "people-shield",
+          link: "/docs/standard-library/json-schema/reference",
+        },
       ]}
     />
   );
@@ -135,6 +144,7 @@ const FlexibilitySection = () => {
       header="Ecosystem"
       title="Action-oriented title todo"
       description="With TypeSpec, align your team around a common type vocabulary. "
+      image="illustrations/openapi3.png"
       items={[
         {
           title: "Title todo",

packages/website/src/components/homepage/section/section.module.css

@@ -55,19 +55,28 @@
 
 .illustration {
   width: 80vw;
-  height: 70vw;
+  padding: 0;
+  overflow: hidden;
 }
 
 @media only screen and (min-width: 1200px) {
   .illustration {
     width: 50vw;
-    height: 40vw;
   }
 }
 
 .item-card {
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.item {
+  display: flex;
+  gap: 12px
 }
+
 .item-image {
   width: 52px;
   height: 52px;

packages/website/src/components/homepage/section/section.tsx

@@ -1,6 +1,5 @@
 import {
   Caption1,
-  CardHeader,
   Divider,
   Link,
   Subtitle2,
@@ -11,6 +10,7 @@ import {
 } from "@fluentui/react-components";
 import { FluentImageName, FluentImg } from "../../fluent-img";
 
+import { AssetImg } from "../../asset-img/asset-img";
 import { Card } from "../../card/card";
 import style from "./section.module.css";
 
@@ -25,6 +25,7 @@ interface SectionProps {
   header: string;
   title: string;
   description: string;
+  image: string;
   items: SectionItem[];
   layout?: "text-left" | "text-right";
 }
@@ -34,7 +35,7 @@ const useFluentStyles = makeStyles({
   descriptionText: { color: tokens.colorNeutralForeground3 },
 });
 
-export const Section = ({ header, title, description, items, layout }: SectionProps) => {
+export const Section = ({ header, title, description, items, layout, image }: SectionProps) => {
   const fluentStyles = useFluentStyles();
   return (
     <div
@@ -66,7 +67,9 @@ export const Section = ({ header, title, description, items, layout }: SectionPr
           </Card>
         </div>
       </div>
-      <Card className={style["illustration"]}></Card>
+      <Card className={style["illustration"]}>
+        <AssetImg src={image} />
+      </Card>
     </div>
   );
 };
@@ -75,17 +78,15 @@ const SectionItem = ({ title, description, image, link }: SectionItem) => {
   const fluentStyles = useFluentStyles();
 
   return (
-    <CardHeader
-      image={<FluentImg className={style["item-image"]} name={image} />}
-      header={<Subtitle2 block={true}>{title}</Subtitle2>}
-      description={
-        <div className={style["item-content"]}>
-          <Caption1 block={true} className={fluentStyles.descriptionText}>
-            {description}
-          </Caption1>
-          <Link href={link}>Learn more</Link>
-        </div>
-      }
-    ></CardHeader>
+    <div className={style["item"]}>
+      <FluentImg className={style["item-image"]} name={image} />
+      <div className={style["item-content"]}>
+        <Subtitle2 block={true}>{title}</Subtitle2>
+        <Caption1 block={true} className={fluentStyles.descriptionText}>
+          {description}
+        </Caption1>
+        <Link href={link}>Learn more →</Link>
+      </div>
+    </div>
   );
 };

packages/website/src/components/sectioned-layout/sectioned-layout.module.css

@@ -1,4 +1,8 @@
 .layout {
+  overflow-x: hidden;
+}
+
+.layout-inner {
   display: flex;
   padding: 48px 0px 60px 0px;
   margin: auto;

packages/website/src/components/sectioned-layout/sectioned-layout.tsx

@@ -1,5 +1,9 @@
 import style from "./sectioned-layout.module.css";
 
 export const SectionedLayout = ({ children }) => {
-  return <div className={style["layout"]}>{children}</div>;
+  return (
+    <div className={style["layout"]}>
+      <div className={style["layout-inner"]}>{children}</div>
+    </div>
+  );
 };

packages/website/src/constants.ts

@@ -0,0 +1,5 @@
+export const Links = {
+  gettingStartedOpenAPI: "/docs/getting-started/typespec-for-openapi-dev",
+  gettingStartedWithHttp: "/docs/getting-started/getting-started-http",
+  spectral: "https://stoplight.io/open-source/spectral",
+};

packages/website/src/pages/data-validation.tsx

@@ -49,6 +49,7 @@ const DataValidationContent = () => {
           header="Ecosystem"
           title="Test API endpoints as you code"
           description="Build a complete JSON RPC interface for your service, call it from your web browser, and test out endpoints in a breeze."
+          image="illustrations/openapi3.png"
           items={[
             {
               title: "TypeSpec for JSON RPC developer",
@@ -64,6 +65,7 @@ const DataValidationContent = () => {
           header="Ecosystem"
           title="Test API endpoints as you code"
           description="Build a complete JSON RPC interface for your service, call it from your web browser, and test out endpoints in a breeze."
+          image="illustrations/openapi3.png"
           items={[
             {
               title: "TypeSpec for JSON RPC developer",

packages/website/src/pages/json-rpc.tsx

@@ -49,6 +49,7 @@ const JsonRpcContent = () => {
           header="Ecosystem"
           title="Test API endpoints as you code"
           description="Build a complete JSON RPC interface for your service, call it from your web browser, and test out endpoints in a breeze."
+          image="illustrations/openapi3.png"
           items={[
             {
               title: "TypeSpec for JSON RPC developer",
@@ -64,6 +65,7 @@ const JsonRpcContent = () => {
           header="Ecosystem"
           title="Test API endpoints as you code"
           description="Build a complete JSON RPC interface for your service, call it from your web browser, and test out endpoints in a breeze."
+          image="illustrations/openapi3.png"
           items={[
             {
               title: "TypeSpec for JSON RPC developer",

packages/website/src/pages/openapi.tsx

@@ -1,3 +1,4 @@
+import { Links } from "@site/src/constants";
 import { FluentLayout } from "../components/fluent-layout";
 import { Section } from "../components/homepage/section/section";
 import { SectionedLayout } from "../components/sectioned-layout/sectioned-layout";
@@ -19,17 +20,17 @@ const OpenApiContent = () => {
   return (
     <div>
       <UseCaseOverview
-        title="Action-oriented use case description over two lines"
-        subtitle="Meet TypeSpec, a language for describing APIs. Compile to OpenAPI, JSON RPC, client and server code, docs, and more."
-        link=""
+        title="Write TypeSpec, emit OpenAPI"
+        subtitle="Benefit from a huge ecosystem of OpenAPI tools for configuring API gateways, generating code, and validating your data."
+        link={Links.gettingStartedOpenAPI}
       />
       <SectionedLayout>
         <UseCaseFeatureGroup>
           <UseCaseFeature
             image="design"
-            title="Max 50 characters"
-            subtitle="Describe a specific feature and how it benefits users. One to three lines."
-            link=""
+            title="Use HTTP/REST libraries"
+            subtitle="Drastically reduce the verbosity of your spec."
+            link={Links.gettingStartedWithHttp}
           />
           <UseCaseFeature
             image="design"
@@ -39,23 +40,36 @@ const OpenApiContent = () => {
           />
           <UseCaseFeature
             image="design"
-            title="Max 50 characters"
-            subtitle="Describe a specific feature and how it benefits users. One to three lines."
-            link=""
+            title="Abstract common patterns"
+            subtitle="Codify API patterns into reusable components, diving up quality and consistency across your API surface"
+            link={Links.spectral}
           />
         </UseCaseFeatureGroup>
 
         <Section
           header="Ecosystem"
-          title="Test API endpoints as you code"
+          title="Interoperate with the OpenAPI ecosystem"
           description="Build a complete JSON RPC interface for your service, call it from your web browser, and test out endpoints in a breeze."
+          image="illustrations/openapi3.png"
           items={[
             {
-              title: "TypeSpec for JSON RPC developer",
+              title: "Api Gateway",
               description: "Description todo",
-              image: "design",
+              image: "document-cloud",
               link: "/json-rpc",
             },
+            {
+              title: "Code Generators",
+              description: "Use the generated OpenAPI to generate code.",
+              image: "document-add",
+              link: Links.spectral,
+            },
+            {
+              title: "Linters",
+              description: "Integrate with spectral to lint your OpenAPI.",
+              image: "shield-blue",
+              link: Links.spectral,
+            },
           ]}
         />
 
@@ -64,6 +78,7 @@ const OpenApiContent = () => {
           header="Ecosystem"
           title="Test API endpoints as you code"
           description="Build a complete JSON RPC interface for your service, call it from your web browser, and test out endpoints in a breeze."
+          image="illustrations/openapi3.png"
           items={[
             {
               title: "TypeSpec for JSON RPC developer",