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

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>
This commit is contained in:
Vincent Ambo 2022-09-04 20:59:19 +03:00 committed by tazjin
parent 932a70d0c2
commit 85e3281f75
2 changed files with 83 additions and 7 deletions

View file

@ -0,0 +1,7 @@
.footer {
text-align: right;
}
.lod {
text-align: center;
}

View file

@ -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()}
</>
}
}
}