First pass at docs

package.json

@@ -14,6 +14,10 @@
     "lint": "eslint src/ worker/"
   },
   "devDependencies": {
+    "@types/assert": "^1.4.3",
+    "@types/react-dom": "^16.9.2",
+    "@types/react-router-dom": "^5.1.0",
+    "@types/react-syntax-highlighter": "^11.0.1",
     "@typescript-eslint/eslint-plugin": "^2.5.0",
     "@typescript-eslint/parser": "^2.5.0",
     "eslint": "^6.5.1",
@@ -24,9 +28,8 @@
   "dependencies": {
     "@material-ui/core": "^4.5.1",
     "@material-ui/icons": "^4.5.1",
-    "@types/react-dom": "^16.9.2",
-    "@types/react-router-dom": "^5.1.0",
-    "@types/react-syntax-highlighter": "^11.0.1",
+    "assert": "^2.0.0",
+    "query-string": "^6.8.3",
     "react": "^16.10.2",
     "react-c3js": "^0.1.20",
     "react-dom": "^16.10.2",

src/Docs.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { main } from "./doc_utils";
+import CodeBlock from "./CodeBlock";
+import { Link, useLocation } from "react-router-dom";
+import {
+  List,
+  ListItem,
+  Drawer,
+  Box,
+  Card,
+  CardHeader,
+  CardContent
+} from "@material-ui/core";
+
+interface Props {
+  source: string;
+}
+
+export default function Docs(props: Props) {
+  const location = useLocation();
+  const docs = main(location.pathname, props.source);
+
+  return (
+    <div>
+      <Drawer open={true} variant="persistent">
+        <List>
+          {docs.map(d => {
+            return (
+              <ListItem>
+                <a href={"?doc#" + d.name}>{d.name}</a>
+              </ListItem>
+            );
+          })}
+        </List>
+      </Drawer>
+      <p>
+        <a href="?">Code</a>
+      </p>
+      {docs.map(d => {
+        return (
+          <div id={"#" + d.name}>
+            <Card>
+              <CardHeader title={d.name} subheader={d.typestr} />
+              <CardContent>
+                <p>{d.docstr}</p>
+                <CodeBlock language="json" value={JSON.stringify(d, null, 1)} />
+              </CardContent>
+            </Card>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/Registry.js

@@ -3,6 +3,7 @@ import { Box } from "@material-ui/core";
 import { Link, useLocation } from "react-router-dom";
 import Markdown from "./Markdown";
 import CodeBlock from "./CodeBlock";
+import Docs from "./Docs";
 import { proxy } from "./registry_utils";
 
 export default function Registry() {
@@ -54,8 +55,20 @@ export default function Registry() {
     if (state.rUrl && state.rUrl.endsWith(".md")) {
       contentComponent = <Markdown source={state.contents} />;
     } else {
-      // TODO(ry) pass language to CodeBlock.
-      contentComponent = <CodeBlock value={state.contents} />;
+      console.log("looking for doc in location.search", location.search);
+      if (location.search.includes("doc") && state.contents) {
+        contentComponent = <Docs source={state.contents} />;
+      } else {
+        // TODO(ry) pass language to CodeBlock.
+        contentComponent = (
+          <div>
+            <p>
+              <Link to="?doc">Documentation</Link>
+            </p>
+            <CodeBlock value={state.contents} />;
+          </div>
+        );
+      }
     }
   }