thurtle: Document query parameters

src/web/thurtle/jsx.ts

@@ -67,7 +67,10 @@ export const createElement = (
   return element;
 };
 
-const appendChild = (parent: HTMLElement, child: Child | Child[]) => {
+const appendChild = (parent: HTMLElement, child: Child | Child[] | null) => {
+  if (child == null) {
+    return;
+  }
   if (Array.isArray(child))
     child.forEach((nestedChild) => appendChild(parent, nestedChild));
   else

src/web/thurtle/thurtle.css

@@ -6,6 +6,10 @@
   height: calc(100% - 40px);
 }
 
+.no-nav .main {
+  height: 100%;
+}
+
 .editor {
   flex: 1;
 }
@@ -15,6 +19,10 @@
   padding-bottom: 0 !important;
 }
 
+.no-nav nav {
+  display: none;
+}
+
 .world {
   border: thin solid rgb(171, 208, 166);
   border-radius: 0.5em;
@@ -32,17 +40,17 @@
 .output {
   font-size: 0.75em;
   overflow: auto;
-  min-height: calc(
-    100vh - 438px
-  ); /* hack because i can't figure out how to auto scale this */
-  max-height: calc(
-    100vh - 438px
-  ); /* hack because i can't figure out how to auto scale this */
   height: calc(
     100vh - 438px
   ); /* hack because i can't figure out how to auto scale this */
 }
 
+.no-nav .output {
+  height: calc(
+    100vh - 398px
+  ); /* hack because i can't figure out how to auto scale this */
+}
+
 label {
   font-weight: 500;
 }

src/web/thurtle/thurtle.tsx

@@ -1,3 +1,11 @@
+/////////////////////////////////////////////////////////////////////////
+// Query parameters:
+// `p`: Base64-encoded program
+// `pn`: Program name. If `p` is not provided, looks up builtin example
+// `ar`: Auto-run program
+// `sn`: Show navbar (default: 1)
+/////////////////////////////////////////////////////////////////////////
+
 import * as jsx from "./jsx";
 import WAForth from "waforth";
 import "./thurtle.css";
@@ -15,6 +23,25 @@ import { saveAs } from "file-saver";
 
 declare let bootstrap: any;
 
+function parseQS(sqs = window.location.search) {
+  const qs: Record<string, string> = {};
+  const sqss = sqs
+    .substring(sqs.indexOf("?") + 1)
+    .replace(/\+/, " ")
+    .split("&");
+  for (const p of sqss) {
+    const j = p.indexOf("=");
+    if (j > 0) {
+      qs[decodeURIComponent(p.substring(0, j))] = decodeURIComponent(
+        p.substring(j + 1)
+      );
+    }
+  }
+  return qs;
+}
+
+const qs = parseQS();
+
 function About() {
   return (
     <>
@@ -27,7 +54,7 @@ function About() {
 const editor = new Editor();
 
 const rootEl = (
-  <div class="root">
+  <div class={"root" + (qs.sn === "0" ? " no-nav" : "")}>
     <nav class="navbar navbar-light bg-light">
       <div class="container-fluid">
         <a class="navbar-brand" href="/thurtle">
@@ -217,11 +244,13 @@ const rootEl = (
           </form>
         </div>
       </div>
-      <div class="container mt-2 text-muted d-sm-none">
-        <p>
-          <About />
-        </p>
-      </div>
+      {qs.sn !== "0" ? (
+        <div class="container mt-2 text-muted d-sm-none">
+          <p>
+            <About />
+          </p>
+        </div>
+      ) : null}
     </div>
     <div
       class="modal fade"
@@ -705,26 +734,8 @@ document.addEventListener("keydown", (ev) => {
   }
 });
 
-////////////////////////////////////////////////////////////////////
+/////////////////////////////////////////////////////////////////////////
 
-function parseQS(sqs = window.location.search) {
-  const qs: Record<string, string> = {};
-  const sqss = sqs
-    .substring(sqs.indexOf("?") + 1)
-    .replace(/\+/, " ")
-    .split("&");
-  for (const p of sqss) {
-    const j = p.indexOf("=");
-    if (j > 0) {
-      qs[decodeURIComponent(p.substring(0, j))] = decodeURIComponent(
-        p.substring(j + 1)
-      );
-    }
-  }
-  return qs;
-}
-
-const qs = parseQS();
 if (qs.p) {
   saveProgram(qs.pn ?? "", atob(qs.p), true);
   loadPrograms();