diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/index.html | 6 | ||||
| -rw-r--r-- | docs/repl.js | 20 | ||||
| -rw-r--r-- | docs/style.css | 37 |
3 files changed, 46 insertions, 17 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; } } |