Add switch.html page emission in webpack and route constant

cgen-0bd2d6e452e84da9bf9e8baed4cd6f39

website/src/website/components/Nav.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { home, playground, docs, monarch } from "../pages/routes";
+import { home, playground, docs, monarch, switchRoute } from "../pages/routes";
 import { Container, Navbar, Nav, NavDropdown } from "./bootstrap";
 
 export class PageNav extends React.Component {

website/src/website/pages/App.tsx

@@ -1,9 +1,10 @@
 import { Home } from "./home/Home";
 import { PlaygroundPage } from "./playground/PlaygroundPage";
-import { docs, home, monarch, playground } from "./routes";
+import { docs, home, monarch, playground, switchRoute } from "./routes";
 import * as React from "react";
 import { DocsPage } from "./DocsPage";
 import { MonarchPage } from "./MonarchPage";
+import { SwitchPage } from "./switch/SwitchPage";
 
 export class App extends React.Component {
 	render() {
@@ -15,6 +16,8 @@ export class App extends React.Component {
 			return <DocsPage />;
 		} else if (monarch.isActive) {
 			return <MonarchPage />;
+		} else if (switchRoute.isActive) {
+			return <SwitchPage />;
 		}
 		return <>Page does not exist</>;
 	}

website/src/website/pages/routes.ts

@@ -26,3 +26,4 @@ export const home = new Route("./");
 export const playground = new Route("./playground.html");
 export const docs = new Route("./docs.html");
 export const monarch = new Route("./monarch.html");
+export const switchRoute = new Route("./switch.html");

website/src/website/pages/switch/SwitchPage.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { ControlledMonacoEditor } from "../../components/monaco/MonacoEditor";
+
+export function SwitchPage() {
+  const [value, setValue] = React.useState<string>(`// Welcome to SWITCH\n// Start coding, create repos and manage issues here.\n`);
+  return (
+    <div className="switch-shell">
+      <div className="switch-activity-bar" aria-label="Activity Bar">
+        <button className="switch-activity-item" title="Explorer" aria-label="Explorer">📁</button>
+        <button className="switch-activity-item" title="Search" aria-label="Search">🔎</button>
+        <button className="switch-activity-item" title="Source Control" aria-label="Source Control">🔀</button>
+        <button className="switch-activity-item" title="Issues" aria-label="Issues">🏷️</button>
+      </div>
+      <div className="switch-main">
+        <aside className="switch-sidebar" aria-label="Sidebar">
+          <div className="switch-pane">
+            <div className="switch-pane-header">Explorer</div>
+            <div className="switch-pane-body">
+              <button className="switch-secondary-btn">Open Folder</button>
+              <button className="switch-secondary-btn">New Repository</button>
+            </div>
+          </div>
+          <div className="switch-pane">
+            <div className="switch-pane-header">Repositories</div>
+            <div className="switch-pane-body">
+              <div className="switch-empty">No repositories yet</div>
+            </div>
+          </div>
+        </aside>
+        <section className="switch-editor" aria-label="Editor">
+          <div className="switch-tabbar">
+            <div className="switch-tab active">welcome.ts</div>
+          </div>
+          <div className="switch-editor-inner">
+            <ControlledMonacoEditor value={value} onDidValueChange={setValue} language="typescript" theme="vs-dark" />
+          </div>
+        </section>
+      </div>
+      <footer className="switch-statusbar" aria-label="Status Bar">
+        <div className="switch-status-item">SWITCH</div>
+        <div className="switch-status-item">TypeScript</div>
+        <div className="switch-status-item">UTF-8</div>
+        <div className="switch-status-item">LF</div>
+      </footer>
+    </div>
+  );
+}

website/webpack.config.ts

@@ -107,6 +107,11 @@ module.exports = {
 			filename: "monarch.html",
 			templateContent: getHtml(),
 		}),
+		new HtmlWebpackPlugin({
+			chunks: ["index"],
+			filename: "switch.html",
+			templateContent: getHtml(),
+		}),
 		new CopyPlugin({
 			patterns: [{ from: "./static", to: "./" }],
 		}),