Better styling and a nav

Author: kddnewton

docs/index.css

@@ -1,13 +1,43 @@
 html, body {
+  font-family: "Source Serif Pro", serif;
+  font-size: 16px;
   height: 100vh;
   margin: 0;
 }
 
 #root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+nav {
+  background-color: #fafafa;
+  box-shadow: 0 1px 2px 0 #888;
+  box-sizing: border-box;
+  display: flex;
+  padding: 0.5em;
+}
+
+nav h1 {
+  font-size: 1.2em;
+  font-weight: initial;
+  margin: 0;
+}
+
+nav a {
+  vertical-align: middle;
+}
+
+nav h1, nav a {
+  padding: 0 1em;
+}
+
+main {
   box-sizing: border-box;
   display: flex;
   gap: 0.5em;
-  height: 100vh;
+  height: 100%;
   padding: 0.5em;
 }
 

src/Tree.tsx

@@ -5,6 +5,9 @@ import createRuby, { Ruby } from "./createRuby";
 // Create a singleton since we don't actually want there to be multiple virtual
 // machines running even if there are multiple Tree components.
 let ruby: Ruby = {
+  format(source) {
+    return source;
+  },
   prettyPrint(source) {
     return "Loading...";
   }

src/createRuby.ts

@@ -73,6 +73,15 @@ export default async function createRuby() {
   `);
 
   return {
+    // A function that calls through to the SyntaxTree.format function to get
+    // the pretty-printed version of the source.
+    format(source: string) {
+      const rubySource = `
+        SyntaxTree.format(JSON.parse(${JSON.stringify(JSON.stringify(source))}))
+      `;
+
+      return ruby.eval(rubySource).toString();
+    },
     // A function that calls through to PP to get the pretty-printed version of
     // the syntax tree.
     prettyPrint(source: string) {

src/index.tsx

@@ -18,10 +18,17 @@ const App: React.FC = () => {
 
   return (
     <>
-      <Editor cols={cols} value={source} onChange={setSource} />
-      <Suspense fallback={<TreeFallback cols={cols} />}>
-        <Tree cols={cols} value={source} />
-      </Suspense>
+      <nav>
+        <h1>Syntax Tree</h1>
+        <a href="https://ruby-syntax-tree.github.io/syntax_tree">Docs</a>
+        <a href="https://github.com/ruby-syntax-tree/syntax_tree">Source</a>
+      </nav>
+      <main>
+        <Editor cols={cols} value={source} onChange={setSource} />
+        <Suspense fallback={<TreeFallback cols={cols} />}>
+          <Tree cols={cols} value={source} />
+        </Suspense>
+      </main>
     </>
   );
 };