playground markdown tweaks

playground/TODO.md

@@ -7,20 +7,17 @@
 - [ ] make sample files available for import
   - workaround is to visit the file first
   - we can put them in the zip file and pull them over the IPC
-- [ ] make phone layout automatic
-- [ ] case split &c
+- [x] make phone layout automatic
+- [x] case split &c
 - [x] move newt to a worker (shim + newt + listener)
 - [x] tabs for source, compiler output
 - [x] Show errors in editor
 - [x] show tabs on rhs
-  - [ ] make editor a tab on mobile
-    - (or possibly put the tab bar under the keyboard)
 - [x] publish / host on github
 - [ ] multiple persistent files
 - [x] kill return for autocomplete
 - [x] save to url (copy from idris2-playground)
 - [ ] click on url
-- [ ] settings
+- [ ] settings pane
   - compilation is now optional, what else do we need for newt?
-
-
+- [ ] update docs for new icons (how do we get them in there...)

playground/src/help.md

@@ -16,11 +16,9 @@ The editor will typecheck the file with newt and render errors as the file is ch
 
 ## Buttons
 
-▶ Compile and run the current file in an iframe, console output is collected to the console tab.
+:play: Compile and run the current file in an iframe, console output is collected to the console tab.
 
-📋 Embed the current file in the URL and copy to clipboard
-
-↕ or ↔ Toggle vertical or horziontal layout (for mobile)
+:share: Embed the current file in the URL and copy to clipboard.
 
 ## Keyboard
 

playground/src/main.ts

@@ -26,13 +26,15 @@ let topData: undefined | TopData;
 const ipc = new IPC();
 
 function mdline2nodes(s: string) {
-  let cs: (VNode|string)[] = []
-  let toks = s.matchAll(/(\*\*.*?\*\*)|(\*.*?\*)|(_.*?_)|[^*]+|\*/g)
+  let cs: (VNode<any>|string)[] = []
+  let toks = s.matchAll(/\*\*(.*?)\*\*|\*(.*?)\*|_(.*?)_|!\[(.*?)\]\((.*?)\)|:(\w+):|[^*]+|\*/g);
   for (let tok of toks) {
-    if (tok[1]) cs.push(h('b',{},tok[0].slice(2,-2)))
-    else if (tok[2]) cs.push(h('em',{},tok[0].slice(1,-1)))
-    else if (tok[3]) cs.push(h('em',{},tok[0].slice(1,-1)))
-    else cs.push(tok[0])
+       tok[1] && cs.push(h('b',{},tok[1]))
+    || tok[2] && cs.push(h('em',{},tok[2]))
+    || tok[3] && cs.push(h('em',{},tok[0].slice(1,-1)))
+    || tok[5] && cs.push(h('img',{src: tok[5], alt: tok[4]}))
+    || tok[6] && cs.push(h(Icon, {name: tok[6]}))
+    || cs.push(tok[0])
   }
   return cs
 }
@@ -361,6 +363,19 @@ preload.then(() => {
   }
 });
 
+const icons: Record<string,string> = {
+  'play-dark': play,
+  'play-light': play_light,
+  'share-dark': share,
+  'share-light': share_light,
+};
+
+function Icon({name}: {name: string}) {
+  let dark = state.dark.value ? 'dark' : 'light'
+  let src = icons[name + '-' + dark];
+  return h('img', {src});
+}
+
 function EditWrap() {
   const options = state.files.value.map((value) =>
     h("option", { value }, value)