feat(corp/tvixbolt): add some additional information on the page r/4644

A little bit easier to grasp what's going on then just a blank page
with a textbox ...

Change-Id: I16f456035173813d60d88ff7e5ebd14712f77ec3
Reviewed-on: https://cl.tvl.fyi/c/depot/+/6330
Tested-by: BuildkiteCI
Reviewed-by: tazjin <tazjin@tvl.su>

2 files changed, 83 insertions, 7 deletions

diff --git a/corp/tvixbolt/index.css b/corp/tvixbolt/index.css
index e69de29bb2..95bd7d0983 100644
--- a/corp/tvixbolt/index.css
+++ b/corp/tvixbolt/index.css
@@ -0,0 +1,7 @@
+.footer {
+    text-align: right;
+}
+
+.lod {
+    text-align: center;
+}
diff --git a/corp/tvixbolt/src/main.rs b/corp/tvixbolt/src/main.rs
index 122a84e0ac..d43241da63 100644
--- a/corp/tvixbolt/src/main.rs
+++ b/corp/tvixbolt/src/main.rs
@@ -14,6 +14,50 @@ struct Model {
     code: String,
 }
 
+fn tvixbolt_overview() -> Html {
+    html! {
+        <>
+          <p>
+            {"This page lets you explore the bytecode generated by the "}
+            <a href="https://cs.tvl.fyi/depot/-/tree/tvix">{"Tvix"}</a>
+            {" compiler for the Nix language. See the "}
+            <a href="https://tvl.fyi/blog/rewriting-nix">{"Tvix announcement"}</a>
+            {" for some background information on Tvix itself."}
+          </p>
+          <p>
+            {"Tvix is still "}<i>{"extremely work-in-progress"}</i>{" and you "}
+            {"should expect to be able to cause bugs and errors in this tool."}
+          </p>
+        </>
+    }
+}
+
+fn footer_link(location: &'static str, name: &str) -> Html {
+    html! {
+        <>
+            <a class="uncoloured-link" href={location}>{name}</a>{" | "}
+        </>
+    }
+}
+
+fn footer() -> Html {
+    html! {
+        <>
+        <hr/>
+        <footer>
+          <p class="footer">
+            {footer_link("https://tvl.su", "home")}
+            {footer_link("https://cs.tvl.fyi", "code")}
+            {footer_link("https://tvl.fyi/builds", "ci")}
+            {footer_link("https://b.tvl.fyi", "bugs")}
+            {"© ООО ТВЛ"}
+          </p>
+          <p class="lod">{"ಠ_ಠ"}</p>
+        </footer>
+        </>
+    }
+}
+
 impl Component for Model {
     type Message = Msg;
     type Properties = ();
@@ -37,8 +81,10 @@ impl Component for Model {
         // This gives us a component's "`Scope`" which allows us to send messages, etc to the component.
         let link = ctx.link();
         html! {
+            <>
             <div class="container">
-                <h1>{"tvixbolt"}</h1>
+                <h1>{"tvixbolt 0.1-alpha"}</h1>
+                {tvixbolt_overview()}
                 <form>
                   <fieldset>
                     <legend>{"Input"}</legend>
@@ -55,16 +101,39 @@ impl Component for Model {
                         </textarea>
                     </div>
 
-                <div class="form-group">
-                <label for="disable-bytecode">{"Disassemble:"}</label>
-                <input for="disable-bytecode" type="checkbox" checked=true disabled=true />
-                </div>
+                    <div class="form-group">
+                      <label for="disable-bytecode">{"Disassemble:"}</label>
+                      <input for="disable-bytecode" type="checkbox" checked=true disabled=true />
+                    </div>
                   </fieldset>
                 </form>
                 <hr />
-                <h2>{"Result:"}</h2>
-                {eval(&self.code).display()}
+                {self.run()}
+                {footer()}
             </div>
+            </>
+        }
+    }
+}
+
+impl Model {
+    fn run(&self) -> Html {
+        if self.code.is_empty() {
+            return html! {
+                <p>
+                  {"Enter some Nix code above to get started. Don't know Nix yet? "}
+                  {"Check out "}
+                  <a href="https://code.tvl.fyi/about/nix/nix-1p/README.md">{"nix-1p"}</a>
+                  {"!"}
+                </p>
+            };
+        }
+
+        html! {
+            <>
+              <h2>{"Result:"}</h2>
+              {eval(&self.code).display()}
+            </>
         }
     }
 }