Website beta progress 2 (#2574)

.prettierignore

@@ -2,6 +2,7 @@
 **/dist-dev/
 **/test/output/
 **/bin/
+**/out/
 **/obj/
 **/.vs/
 **/.docusaurus/
@@ -41,3 +42,7 @@ packages/website/versioned_docs/**/standard-library/built-in-data-types.md
 
 #.tsp init template
 eng/feeds/
+
+# Skip formatting tsp files
+
+*.noformat.tsp

cspell.yaml

@@ -37,6 +37,7 @@ words:
   - multis
   - munge
   - mylib
+  - noformat
   - nostdlib
   - oapi
   - oneof

packages/website/docusaurus.config.js

@@ -121,14 +121,14 @@ const config = {
                 label: "OpenAPI",
                 to: "/openapi",
               },
-              {
-                label: "JSON Schema",
-                to: "/json-schema",
-              },
               {
                 label: "Data validation and type consistency",
                 to: "/data-validation",
               },
+              {
+                label: "Tooling support",
+                to: "/tooling",
+              },
             ],
           },
           {

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

@@ -18,7 +18,8 @@ export type FluentImageName =
   | "firework"
   | "people-shield"
   | "shield-blue"
-  | "shield-settings";
+  | "shield-settings"
+  | "text-edit";
 
 /**
  * Component for rendering a Fluent image.

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

@@ -15,8 +15,7 @@ export const HomeContent = () => {
       <SectionedLayout>
         <Overview />
         <OpenAPISection />
-        <EcoSystemSection />
-        <FlexibilitySection />
+        <DataValidationSection />
         <EditorSection />
         <ExtensibilitySection />
       </SectionedLayout>
@@ -92,7 +91,7 @@ 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."
-      illustration="illustrations/openapi3.png"
+      illustration={<OpenAPI3HeroIllustration />}
       items={[
         {
           title: "TypeSpec for OpenAPI developers",
@@ -111,13 +110,13 @@ const OpenAPISection = () => {
   );
 };
 
-const EcoSystemSection = () => {
+const DataValidationSection = () => {
   return (
     <Section
       header="Ecosystem"
-      title="Generate Json Schema for your models"
-      description="Use the json schema emitter to get the json schema for your types and use them to validate your data."
-      illustration="illustrations/openapi3.png"
+      title="Ensure data consitency"
+      description="Defined common models to use across your APIs, use the json schema emitter to get the json schema for your types and use them to validate your data."
+      illustration={<DataValidationHeroIllustration />}
       items={[
         {
           title: "Json schema emitter reference",
@@ -130,38 +129,13 @@ const EcoSystemSection = () => {
   );
 };
 
-const FlexibilitySection = () => {
-  return (
-    <Section
-      header="Ecosystem"
-      title="Action-oriented title todo"
-      description="With TypeSpec, align your team around a common type vocabulary. "
-      illustration="illustrations/openapi3.png"
-      items={[
-        {
-          title: "Title todo",
-          description: "Description todo",
-          image: "design",
-          link: "/data-validation",
-        },
-        {
-          title: "Title todo",
-          description: "Description todo",
-          image: "chat",
-          link: "todo",
-        },
-      ]}
-    />
-  );
-};
-
 const EditorSection = () => {
   return (
     <Section
       header="IDE"
       title="First party support for code editor"
       description="Typespec provide built-in support for many common editor features such as syntax highlighting, code completion, and more."
-      illustration="illustrations/ide.png"
+      illustration={<LightDarkImg src="illustrations/ide-hero" />}
       items={[
         {
           title: "TypeSpec for Visual Studio Code",
@@ -206,6 +180,9 @@ const ExtensibilitySection = () => {
 
 import extensibilityTs from "!!raw-loader!@site/static/tsp-samples/extensibility/custom-lib.ts";
 import extensibilityTsp from "!!raw-loader!@site/static/tsp-samples/extensibility/custom-lib.tsp";
+import { DataValidationHeroIllustration } from "@site/src/pages/data-validation";
+import { OpenAPI3HeroIllustration } from "@site/src/pages/openapi";
+import { LightDarkImg } from "../light-dark-img/light-dark-img";
 
 const ExtensibilityIllustration = () => {
   return (

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

@@ -1,14 +1,14 @@
 .section {
   display: flex;
   gap: 170px;
+  max-width: 100%;
   align-items: center;
   align-content: center;
   flex-direction: column;
 }
 
 @media only screen and (min-width: 1200px) {
   .section {
-    max-width: 100%;
     padding: 0 40px;
   }
 
@@ -23,6 +23,8 @@
 
 .info-container {
   display: flex;
+  max-width: 100%;
+  padding: 20px;
   justify-content: center;
 }
 

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

@@ -7,10 +7,10 @@ import {
   mergeClasses,
   tokens,
 } from "@fluentui/react-components";
-import { FluentImageName, FluentImg } from "../../fluent-img";
-
+import React from "react";
 import { AssetImg } from "../../asset-img/asset-img";
 import { Card } from "../../card/card";
+import { FluentImageName, FluentImg } from "../../fluent-img";
 import { Link } from "../../link/link";
 import style from "./section.module.css";
 
@@ -26,7 +26,7 @@ interface SectionProps {
   title: string;
   description: string;
   illustration: string | React.ReactNode;
-  items: SectionItem[];
+  items?: SectionItem[];
   layout?: "text-left" | "text-right";
 }
 
@@ -64,14 +64,16 @@ export const Section = ({
               {description}
             </div>
           </div>
-          <Card className={style["item-card"]}>
-            {items.map((x, i) => (
-              <>
-                {i !== 0 ? <Divider /> : ""}
-                <SectionItem {...x} />
-              </>
-            ))}
-          </Card>
+          {items ? (
+            <Card className={style["item-card"]}>
+              {items.map((x, i) => (
+                <React.Fragment key={i}>
+                  {i !== 0 ? <Divider /> : ""}
+                  <SectionItem {...x} />
+                </React.Fragment>
+              ))}
+            </Card>
+          ) : null}
         </div>
       </div>
       <Card className={style["illustration"]}>

packages/website/src/components/illustration-card/illustration-card.module.css

@@ -0,0 +1,7 @@
+.illustration :global(.tabs-container) {
+  margin-bottom: 0;
+}
+
+.illustration :global(.tabs-container) :global(.margin-top--md) {
+  margin-top: 0 !important;
+}

packages/website/src/components/illustration-card/illustration-card.tsx

@@ -0,0 +1,11 @@
+import { mergeClasses } from "@fluentui/react-components";
+import { Card } from "../card/card";
+import style from "./illustration-card.module.css";
+
+export interface IllustrationCardProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+export const IllustrationCard = ({ className, children }: IllustrationCardProps) => {
+  return <Card className={mergeClasses(className, style["illustration"])}>{children}</Card>;
+};

packages/website/src/components/light-dark-img/light-dark-img.module.css

@@ -0,0 +1,12 @@
+:global(html[data-theme="light"]) .dark {
+  display: none;
+}
+
+:global(html[data-theme="dark"]) .light {
+  display: none;
+}
+
+.light,
+.dark {
+  display: block;
+}

packages/website/src/components/light-dark-img/light-dark-img.tsx

@@ -0,0 +1,11 @@
+import { AssetImg } from "../asset-img/asset-img";
+import style from "./light-dark-img.module.css";
+
+export const LightDarkImg = ({ src }: { src: string }) => {
+  return (
+    <div>
+      <AssetImg className={style["dark"]} src={`${src}.dark.png`} />
+      <AssetImg className={style["light"]} src={`${src}.light.png`} />
+    </div>
+  );
+};

packages/website/src/components/use-case-overview/use-case-overview.module.css

@@ -14,7 +14,7 @@
 }
 
 .content {
-  flex: 1;
+  flex: 1 1 50%;
   padding: 80px;
 }
 
@@ -30,30 +30,24 @@
 }
 
 .illustration {
-  width: 30vw;
-  height: 25vw;
+  width: 40vw;
+  max-height: 100%;
+  padding: 0;
+  overflow: hidden;
 }
 
-@media only screen and (min-width: 1200px) {
+@media only screen and (min-width: 1024px) {
   .overview {
-    max-width: 1464px;
-    height: 600px;
+    flex-direction: row;
   }
-
   .illustration {
-    width: 30vw;
-    height: 25vw;
+    width: 50vw;
   }
 }
 
-@media only screen and (min-width: 1024px) {
+@media only screen and (min-width: 1200px) {
   .overview {
-    flex-direction: row;
-  }
-
-  .illustration {
-    width: 40vw;
-    height: 32vw;
+    max-width: 1464px;
   }
 }
 

packages/website/src/components/use-case-overview/use-case-overview.tsx

@@ -1,12 +1,13 @@
 import { Button, Title2 } from "@fluentui/react-components";
-import { Card } from "../card/card";
 import { DescriptionText } from "../description-text/secondary-text";
+import { IllustrationCard } from "../illustration-card/illustration-card";
 import style from "./use-case-overview.module.css";
 
 export interface UseCaseOverviewProps {
   title: string;
   subtitle: string;
   link: string;
+  illustration?: React.ReactNode;
 }
 
 export const UseCaseOverview = (props: UseCaseOverviewProps) => {
@@ -25,7 +26,7 @@ export const UseCaseOverview = (props: UseCaseOverviewProps) => {
           </Button>
         </div>
 
-        <Card className={style["illustration"]}></Card>
+        <IllustrationCard className={style["illustration"]}>{props.illustration}</IllustrationCard>
       </div>
     </div>
   );

packages/website/src/constants.ts

@@ -1,4 +1,9 @@
 export const Links = {
+  useCases: {
+    openapi: "/openapi",
+    dataValidation: "/data-validation",
+    editor: "/ide",
+  },
   gettingStartedOpenAPI: "/docs/getting-started/typespec-for-openapi-dev",
   gettingStartedWithHttp: "/docs/getting-started/getting-started-http",
 
@@ -15,8 +20,12 @@ export const Links = {
       decorators: "/docs/standard-library/json-schema/reference/decorators",
     },
   },
-
+  tooling: {
+    formatter: "/docs/introduction/formatter",
+    styleGuide: "/docs/introduction/style-guide",
+  },
   editor: {
+    home: "/docs/introduction/installation#install-the-vs-and-vscode-extensions",
     code: "/docs/introduction/editor/code",
     visualStudio: "/docs/introduction/editor/visual-studio",
   },

packages/website/src/css/custom.css

@@ -9,12 +9,43 @@
   --colorNeutralBackground1: #ffffff;
   --colorNeutralBackground2: #fafafa;
   --colorNeutralBackground3: #f5f5f5;
+  /* Status warning */
+  --colorStatusWarningBackground1: #fff9f5;
+  --colorStatusWarningBackground2: #fdcfb4;
+  --colorStatusWarningBackground3: #f7630c;
+  --colorStatusWarningForeground1: #bc4b09;
+  --colorStatusWarningForeground2: #8a3707;
+  --colorStatusWarningForeground3: #bc4b09;
+
+  /* Status danger */
+  --colorStatusDangerBackground1: #fdf3f4;
+  --colorStatusDangerBackground2: #eeacb2;
+  --colorStatusDangerBackground3: #c50f1f;
+  --colorStatusDangerForeground1: #b10e1c;
+  --colorStatusDangerForeground2: #6e0811;
+  --colorStatusDangerForeground3: #c50f1f;
 }
 
 [data-theme="dark"] {
   --colorNeutralBackground1: #292929;
   --colorNeutralBackground2: #1f1f1f;
   --colorNeutralBackground3: #141414;
+
+  /* Status warning */
+  --colorStatusWarningBackground1: #4a1e04;
+  --colorStatusWarningBackground2: #8a3707;
+  --colorStatusWarningBackground3: #f7630c;
+  --colorStatusWarningForeground1: #faa06b;
+  --colorStatusWarningForeground2: #fdcfb4;
+  --colorStatusWarningForeground3: #f98845;
+
+  /* Status danger */
+  --colorStatusDangerBackground1: #3b0509;
+  --colorStatusDangerBackground2: #6e0811;
+  --colorStatusDangerBackground3: #c50f1f;
+  --colorStatusDangerForeground1: #dc626d;
+  --colorStatusDangerForeground2: #eeacb2;
+  --colorStatusDangerForeground3: #dc626d;
 }
 
 /* You can override the default Infima variables here. */