Improve tutorial

3 files changed, 71 insertions, 29 deletions

diff --git a/src/Editor.tsx b/src/Editor.tsx
index d179b83..41bf9ff 100644
--- a/src/Editor.tsx
+++ b/src/Editor.tsx
@@ -5,8 +5,16 @@ import { useState } from "react"
 import styles from "./Editor.module.css"
 import { APIResult, submitSource } from "./api"
 
+const defaultSourceText = `define times2
+    dup +
+    ;
+
+2 times2 .
+-- prints 4
+`
+
 const Editor = () => {
-  const [sourceText, setSourceText] = useState("")
+  const [sourceText, setSourceText] = useState(defaultSourceText)
   const [result, setResult] = useState<APIResult<string, Error>>({ type: "not_yet_requested" })
   const onChange = setSourceText
 
diff --git a/src/Tutorial.module.css b/src/Tutorial.module.css
new file mode 100644
index 0000000..459a757
--- /dev/null
+++ b/src/Tutorial.module.css
@@ -0,0 +1,8 @@
+.quote {
+  padding-left: 10px;
+  border-left: 4px solid var(--white);
+}
+
+.quote pre {
+  margin-bottom: -8px;
+}
diff --git a/src/Tutorial.tsx b/src/Tutorial.tsx
index 917142b..20b4304 100644
--- a/src/Tutorial.tsx
+++ b/src/Tutorial.tsx
@@ -1,37 +1,63 @@
-import { useState } from "react"
+import styles from "./Tutorial.module.css"
 
-const Tutorial = () => {
-  const [collapsed, setCollapsed] = useState(true)
+const Tutorial = () => (
+  <>
+    <h3>
+      <strong>SLAM</strong> is a procedural, stack-based programming language
+      inspired by Forth and Lisp.
+    </h3>
 
-  if (collapsed) {
-    return <button onClick={() => setCollapsed(false)}>SLAM tutorial ▼</button>
-  }
+    <p>
+      In the core of every SLAM program, there is an implied, global stack of
+      strongly and dynamically typed values. A SLAM program consists of a sequence
+      of <i>words</i> that when evaluated, can consume and produce values from/to
+      the stack. New words can be defined with the <i>define</i> builtin word.
+    </p>
 
-  return (
-    <>
-      <button onClick={() => setCollapsed(true)}>SLAM tutorial ▲</button>
+    <p>
+      Just like in Forth, good SLAM words are short and succinct in their definition. Words
+      should not leave extra values on the stack to avoid issues later on.
+    </p>
 
-      <h3>
-        <strong>SLAM</strong> is a procedural, stack-based programming language
-        inspired by Forth and Lisp.
-      </h3>
+    <p>
+      <i>Phrases</i>, roughly equal to Lisp&apos;s quoted S-expressions, are a sequence
+      of words that are not immediately evaluated when encountered, but instead put on
+      the stack for later manipulation. Phrases can be used to implement strings or homogenous
+      list structures. Phrases are also the core of conditional expressions, where branches
+      of code are only evaluated when a condition is met.
+    </p>
 
-      <p>
-        In the core of every SLAM program, there is an implied, global stack of
-        strongly and dynamically typed values. A SLAM program consists of a sequence
-        of <i>words</i> that when evaluated, can consume and produce values from/to
-        the stack.
-      </p>
+    <p>
+      Some useful SLAM words include:
+    </p>
+
+    <div className={styles.quote}>
+      <pre>+</pre>
+      <p>Consume two numerical values and push their sum to the stack.</p>
+    </div>
+
+    <div className={styles.quote}>
+      <pre>dup</pre>
+      <p>Duplicate the top value of the stack.</p>
+    </div>
 
-      <p>
-        <i>Phrases</i>, roughly equal to Lisp&apos;s quoted S-expressions, are a sequence
-        of words that are not immediately evaluated when encountered, but instead put on the stack for later
-        manipulation. Phrases can be used to implement strings or homogenous list structures. Phrases
-        are also the core of conditional expressions, where branches of code are only evaluated
-        when a condition is met.
+    <div className={styles.quote}>
+      <pre>.</pre>
+      <p>Consume one value and print its string representation to the output.</p>
+    </div>
+
+    <div className={styles.quote}>
+      <pre>cond</pre>
+      <p>Consume three values (bool, phrase1, phrase2) from the stack. If bool is true,
+        evaluate phrase1, otherwise evaluate phrase2.
       </p>
-    </>
-  )
-}
+    </div>
+
+    <p>
+      See the examples above for more!
+    </p>
+  </>
+)
+
 
 export default Tutorial
\ No newline at end of file