examples: add wasm online demo

examples/jotdown_wasm/Cargo.toml

@@ -0,0 +1,19 @@
+[package]
+name = "jotdown_wasm"
+description = "Web demo of Jotdown"
+authors = ["Noah Hellman <noah@hllmn.net>"]
+license = "MIT"
+version = "0.1.0"
+edition = "2021"
+homepage = "https://hllmn.net/projects/jotdown"
+repository = "https://github.com/hellux/jotdown"
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+jotdown = { path = "../../" }
+wasm-bindgen = { version = "0.2", default-features = false }
+
+[dependencies.web-sys]
+version = "0.3"

examples/jotdown_wasm/Makefile

@@ -0,0 +1,15 @@
+WASM=pkg/jotdown_wasm_bg.wasm
+
+SRC=$(shell find src ../../src -name '*.rs')
+
+${WASM}: ${SRC}
+	wasm-pack build --release --target web
+
+wasm: ${WASM}
+
+run: ${WASM}
+	python -m http.server
+
+clean:
+	rm -rf pkg
+	cargo clean

examples/jotdown_wasm/index.html

@@ -0,0 +1,33 @@
+<select id="fmt"><option value="preview">preview</option><option value="html">html</option></select>
+<div id="jotdown" style="display:flex;">
+  <script type="module">
+    import init, { jotdown_render } from './pkg/jotdown_wasm.js';
+    await init();
+
+    let output = document.getElementById("output");
+    let input = document.getElementById("input");
+    let fmt = document.getElementById("fmt");
+
+    function render() {
+        let html = jotdown_render(input.innerText);
+        console.log(fmt.value);
+        if (fmt.value == "html") {
+            output.classList.add("verbatim")
+            output.innerText = html;
+        } else if (fmt.value == "preview") {
+            output.classList.remove("verbatim")
+            output.innerHTML = html;
+        }
+    }
+
+    render()
+
+    input.onkeyup = render;
+    fmt.onchange = render;
+
+    // auto focus on input on load
+    setTimeout(() => { input.focus(); }, 0);
+  </script>
+  <pre id="input" contenteditable="true" placeholder="Input djot here" style="width:50%;height:100%;min-height:8em;max-height:20em;resize:none;margin:0">*Hello world!*</pre>
+  <pre id="output" readonly style="width:50%;height:100%;margin:0;min-height:8em;max-height:20em"></div></pre>
+</div>

examples/jotdown_wasm/src/lib.rs

@@ -0,0 +1,10 @@
+use wasm_bindgen::prelude::*;
+
+#[must_use]
+#[wasm_bindgen]
+pub fn jotdown_render(djot: &str) -> String {
+    let events = jotdown::Parser::new(djot);
+    let mut html = String::new();
+    jotdown::html::push(events, &mut html);
+    html
+}