Add demo arrow

4 files changed, 51 insertions, 20 deletions

diff --git a/docs/index.html b/docs/index.html
index da309970..a928c111 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,10 +4,12 @@
 <p><em>Try it online below or <a href="https://mlochbaum.github.io/BQN/try.html">here</a>, and see <a href="running.html">running.md</a> for more options.</em></p>
 <div class='cont'>
   <div class='kb'></div>
-  <textarea class='code' rows='1' autofocus><⟜'a'⊸/ "Big Questions Notation"</textarea>
+  <div class='rel'>
+    <textarea class='code' rows='1' autofocus><⟜'a'⊸/ "Big Questions Notation"</textarea>
+    <svg class='demo' viewBox='0 -6 4 12'><path d='M1 -6H0L1 0L0 6H1L4 0z'/></svg>
+  </div>
   <pre class='rslt'>"B Q N"</pre>
 </div>
-
 <p><strong>BQN</strong> is a new programming language in the APL lineage, which aims to remove inconsistent and burdensome aspects of the APL tradition and put the great ideas on a firmer footing. BQN is aimed at existing and aspiring APL-family programmers, and using it requires a solid understanding of functions and multidimensional arrays. However, because of its focus on providing simple, consistent, and powerful array operations, BQN should also be a good language for learning array programming and building stronger array intuition.</p>
 <p>BQN maintains many of the ideas that made APL\360 revolutionary in 1966:</p>
 <ul>
diff --git a/docs/repl.js b/docs/repl.js
index 78d70848..d67bd47f 100644
--- a/docs/repl.js
+++ b/docs/repl.js
@@ -65,6 +65,26 @@ if (doc.perm) doc.perm.onmouseover = doc.perm.onfocus = () => {
   doc.perm.href='#code='+escape(doc.code.value)
 }
 
+let demo = 0;
+if (doc.demo) doc.demo.onclick = () => {
+  const demos = [
+    '<⟜\'a\'⊸/ "Big Questions Notation"'
+   ,'≠⌜˜ 8 ⥊ 0‿1'
+   ,'+´ 1 + ↕100'
+   ,'(+´ ÷ ≠) 2‿5‿7‿4'
+   ,'+`-˝ "()" =⌜ "(2×(4-1)÷(√9))"'
+   ,'0‿1‿10‿100⊸⍋⊸⊔ ⟨6,11,9,20,105,1,¯1,4⟩'
+   ,'{(+`𝕩<\'a\') ⊔ 𝕩} "camelCaseWord"'
+   ,'3‿4‿2⌾(0‿0⊸⍉) 3‿3⥊¯1'
+   ,'∾ (<˘ ≍¨¨ 1↓↓) "abcd"'
+   ,'Life←{∨´1‿𝕩∧3‿4=+˝⥊⌽⟜𝕩¨∾⌜˜¯1‿0‿1}\nLife⍟(↕4) 6‿6↑(1⊸=∨5⊸≤)3‿3⥊↕9'
+   ,'⥊ 1‿0‿1 ∧⌜⍟3 1'
+   ,'⌈˝ (≠ ↕ 0‿0⊸∾) 1‿2‿5‿4‿0‿2‿1'
+  ];
+  ++demo; if (demo===demos.length) demo=0;
+  doc.code.value = demos[demo]; setTimeout(repl, 0);
+}
+
 if (location.hash) {
   let hp={};
   location.hash.substring(1).split(',').map(s=>{
diff --git a/docs/style.css b/docs/style.css
index 8e84beff..ce0c68a6 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -53,18 +53,25 @@ pre, textarea, .kb {
 }
 pre { margin: 1.6em 0.4em; }
 pre, textarea { padding: 0.8em; }
-textarea { width:100%; outline:none; resize:vertical; }
-.cont { margin:1.3em 0; }
-.rslt { background:none; border-top:none; margin:0; }
-.rslt.err { color:#d11; }
+textarea { width: 100%; outline: none; resize: vertical; margin: 0; }
+.cont { margin: 1.3em 0; }
+.rslt { background: none; border-top: none; margin: 0; }
+.rslt.err { color: #d11; }
 .kb {
-  line-height:1.5;
-  width:100%;
-  padding:0.3em 0;
+  line-height: 1.5;
+  width: 100%;
+  padding: 0.3em 0;
 }
 .kb span {
-  cursor:default;
-  padding:1px;
+  cursor: default;
+  padding: 1px;
+}
+.rel { position: relative; }
+.demo {
+  position: absolute; top: 0.2em; right: 0.4em;
+  height: 2.2em;
+  fill: #272e30;
+  cursor: pointer;
 }
 
 .Value        { color: #1f2020; }
@@ -82,11 +89,11 @@ textarea { width:100%; outline:none; resize:vertical; }
 .Comment      { color: #32328b; }
 .String       { color: #2d7583; }
 
-a:link        { color: #0b39dc; text-decoration-color:#0b39dc91; }
+a:link        { color: #0b39dc; text-decoration-color: #0b39dc91; }
 a:visited     { color: #3d155f; }
 
-.kb span:hover{ background-color:#bce; }
-.kb.backslash { background-color:#cee; }
+.kb span:hover{ background-color: #bce; }
+.kb.backslash { background-color: #cee; }
 
 @media (prefers-color-scheme: dark) {
   body, input { color: #d6d7d9; background-color: #141515; }
@@ -96,8 +103,8 @@ a:visited     { color: #3d155f; }
   code        { border-color: #0c0d0e; background-color: #0f1011; }
   table td, th{ border-color: #636967; }
   table th    { border-color: #88918c; background-color: #292a2b; }
-  .kb span:hover { background-color:#237; }
-  .kb.backslash  { background-color:#1e2430; }
+  .kb span:hover { background-color: #237; }
+  .kb.backslash  { background-color: #1e2430; }
 
   .Value      { color: #b2b9bb; }
   .Function   { color: #3aa548; }
@@ -114,6 +121,6 @@ a:visited     { color: #3d155f; }
   .Comment    { color: #3f3daa; }
   .String     { color: #3e99ab; }
 
-  a:link      { color: #5592d9; text-decoration-color:#508dd978; }
+  a:link      { color: #5592d9; text-decoration-color: #508dd978; }
   a:visited   { color: #8781c1; }
 }
diff --git a/md.bqn b/md.bqn
index c1a57ff9..a6b8dbb7 100644
--- a/md.bqn
+++ b/md.bqn
@@ -249,10 +249,12 @@ Markdown ← {filename𝕊𝕩:
     useRepl ↩ 1
 "<div class='cont'>
   <div class='kb'></div>
-  <textarea class='code' rows='1' autofocus><⟜'a'⊸/ ""Big Questions Notation""</textarea>
+  <div class='rel'>
+    <textarea class='code' rows='1' autofocus><⟜'a'⊸/ ""Big Questions Notation""</textarea>
+    <svg class='demo' viewBox='0 -6 4 12'><path d='M1 -6H0L1 0L0 6H1L4 0z'/></svg>
+  </div>
   <pre class='rslt'>""B Q N""</pre>
-</div>
-"
+</div>"
   }‿{
     codeMask ← "<code>" ¯6⊸⌽⊸(>○(⌈`(1+↕∘≠)⊸×))○(⍷⟜𝕩 ∾ 0⥊˜1-˜≠) "</code>"
     (1¨ <⊸∾ codeMask⊸GetMultiHighlights)⊸Modify 𝕩