Website: Start populating some content (#2539)

<img width="2178" alt="image"
src="https://github.com/microsoft/typespec/assets/1031227/ced234e9-1ab0-4984-8c7f-3c517ee0a0fd">

## Openapi/rest

<img width="1491" alt="image"
src="https://github.com/microsoft/typespec/assets/1031227/d56f1fe9-d6de-4e8d-bd3c-531a28d2cf1c">

## Json schema 
<img width="1364" alt="image"
src="https://github.com/microsoft/typespec/assets/1031227/44f5b440-d762-44dd-b93e-143dfec4dc7f">

.vscode/settings.json

@@ -27,7 +27,7 @@
     "editor.detectIndentation": false,
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "[json][[jsonc][yaml][typespec][markdown]": {
+  "[json][[jsonc][yaml][typespec][markdown][css]": {
     "editor.formatOnSave": true,
     "editor.formatOnPaste": true,
     "editor.insertSpaces": true,

cspell.yaml

@@ -46,6 +46,7 @@ words:
   - openapi
   - openapiv
   - picocolors
+  - prismjs
   - proto
   - protobuf
   - protoc

docs/extending-typespec/emitters-basics.md

@@ -21,11 +21,10 @@ A TypeSpec emitter exports a function named `$onEmit` from its main entrypoint.
 For example, the following will write a text file to the output directory:
 
 ```typescript
-import { EmitContext } from "@typespec/compiler";
-import Path from "path";
+import { EmitContext, resolvePath } from "@typespec/compiler";
 
 export async function $onEmit(context: EmitContext) {
-  const outputDir = Path.join(context.emitterOutputDir, "hello.txt");
+  const outputDir = resolvePath(context.emitterOutputDir, "hello.txt");
   await context.program.host.writeFile(outputDir, "hello world!");
 }
 ```

packages/website/definitions/index.d.ts

@@ -1 +1,5 @@
 declare module "*.png";
+declare module "!!raw-loader!@site/static/*" {
+  const contents: string;
+  export = contents;
+}

packages/website/docusaurus.config.js

@@ -1,8 +1,6 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-// const lightCodeTheme = require("prism-react-renderer/themes/github");
-const lightCodeTheme = require("./themes/prism/atom-one-light.js");
 const { themes } = require("prism-react-renderer");
 const { resolve } = require("path");
 
@@ -124,8 +122,8 @@ const config = {
                 to: "/openapi",
               },
               {
-                label: "JSON RPC",
-                to: "/json-rpc",
+                label: "JSON Schema",
+                to: "/json-schema",
               },
               {
                 label: "Data validation and type consistency",
@@ -193,9 +191,9 @@ const config = {
         copyright: `Copyright © ${new Date().getFullYear()} Microsoft Corp.`,
       },
       prism: {
-        theme: lightCodeTheme,
-        darkTheme: themes.dracula,
-        additionalLanguages: [],
+        theme: themes.oneLight,
+        darkTheme: themes.oneDark,
+        additionalLanguages: ["shell-session"],
       },
       mermaid: {},
       algolia: {

packages/website/package.json

@@ -28,7 +28,8 @@
     "@docusaurus/theme-mermaid": "^2.4.3",
     "@docusaurus/theme-common": "~2.4.3",
     "@mdx-js/react": "^1.6.22",
-    "prism-react-renderer": "^2.0.6",
+    "prism-react-renderer": "^2.1.0",
+    "prismjs": "~1.29.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "@fluentui/react-components": "~9.32.1"
@@ -58,7 +59,8 @@
     "eslint": "^8.49.0",
     "rimraf": "~5.0.1",
     "dotenv": "~16.3.1",
-    "swc-loader": "^0.2.3"
+    "swc-loader": "^0.2.3",
+    "raw-loader": "~4.0.2"
   },
   "browserslist": {
     "production": [

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/code-block/code-block.module.css

@@ -0,0 +1,3 @@
+.code-block {
+  margin: 0;
+}

packages/website/src/components/code-block/code-block.tsx

@@ -0,0 +1,7 @@
+import CodeBlockDocusaurus, { Props } from "@theme/CodeBlock";
+import style from "./code-block.module.css";
+
+export interface CodeBlockProps extends Props {}
+export const CodeBlock = (props: CodeBlockProps) => {
+  return <CodeBlockDocusaurus {...props} className={style["code-block"]} />;
+};

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

@@ -7,13 +7,18 @@ 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"
+  | "shield-settings";
 
 /**
  * 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;
@@ -94,8 +94,11 @@
   display: flex;
   padding: 80px 60px;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: center;
   gap: 16px;
-  flex: 1 0 0;
   margin: auto;
 }
+
+.codeblock-seperator {
+  height: 10px;
+}