add pyodide-based demo for the website

7 files changed, 179 insertions, 1 deletions

diff --git a/doc/_static/demo.css b/doc/_static/demo.css
new file mode 100644
index 00000000..43730782
--- /dev/null
+++ b/doc/_static/demo.css
@@ -0,0 +1,38 @@
+#try {
+    background-color: #f6f6f6;
+    border-radius: 0;
+    border: 1px solid #ccc;
+    margin-top: 10px;
+    padding: 10px 15px 15px 10px;
+    position: relative;
+}
+
+#try h2 {
+    margin-top: 0;
+}
+
+#try textarea {
+    border: 1px solid #999;
+    padding: 2px;
+    width: 100%;
+    min-height: 150px;
+}
+
+#hlcode pre {
+    background-color: transparent;
+    border-radius: 0;
+}
+
+#loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: auto auto;
+    background-color: #cccccccc;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+}
diff --git a/doc/_static/demo.js b/doc/_static/demo.js
new file mode 100644
index 00000000..db2a8e07
--- /dev/null
+++ b/doc/_static/demo.js
@@ -0,0 +1,81 @@
+languagePluginLoader.then(() => {
+    // pyodide is now ready to use...
+    pyodide.loadPackage('Pygments').then(() => {
+        pyodide.runPython('import pygments.lexers, pygments.formatters.html, pygments.styles');
+
+        var lexerlist = pyodide.runPython('list(pygments.lexers.get_all_lexers())');
+        var sel = document.getElementById("lang");
+        for (lex of lexerlist) {
+            var opt = document.createElement("option");
+            opt.text = lex[0];
+            opt.value = lex[1][0];
+            sel.add(opt);
+        }
+
+        var stylelist = pyodide.runPython('list(pygments.styles.get_all_styles())');
+        var sel = document.getElementById("style");
+        for (sty of stylelist) {
+            if (sty != "default") {
+                var opt = document.createElement("option");
+                opt.text = sty;
+                opt.value = sty;
+                sel.add(opt);
+            }
+        }
+
+        document.getElementById("hlbtn").disabled = false;
+        document.getElementById("loading").style.display = "none";
+    });
+});
+
+function new_file() {
+    pyodide.globals['fname'] = document.getElementById("file").files[0].name;
+    var alias = pyodide.runPython('pygments.lexers.find_lexer_class_for_filename(fname).aliases[0]');
+    var sel = document.getElementById("lang");
+    for (var i = 0; i < sel.length; i++) {
+        if (sel.options[i].value == alias) {
+            sel.selectedIndex = i;
+            reset_err_hl();
+            break;
+        }
+    }
+}
+
+function reset_err_hl() {
+    document.getElementById("aroundlang").style.backgroundColor = null;
+}
+
+function highlight() {
+    var select = document.getElementById("lang");
+    var alias = select.options.item(select.selectedIndex).value
+
+    if (alias == "") {
+        document.getElementById("aroundlang").style.backgroundColor = "#ffcccc";
+        return;
+    }
+    pyodide.globals['alias'] = alias;
+
+    var select = document.getElementById("style");
+    pyodide.globals['style'] = select.options.item(select.selectedIndex).value;
+
+    pyodide.runPython('lexer = pygments.lexers.get_lexer_by_name(alias)');
+    pyodide.runPython('fmter = pygments.formatters.html.HtmlFormatter(noclasses=True, style=style)');
+
+    var file = document.getElementById("file").files[0];
+    if (file) {
+        file.arrayBuffer().then(function(buf) {
+            pyodide.globals['code_mem'] = buf;
+            pyodide.runPython('code = bytes(code_mem)');
+            highlight_now();
+        });
+    } else {
+        pyodide.globals['code'] = document.getElementById("code").value;
+        highlight_now();
+    }
+}
+
+function highlight_now() {
+    var out = document.getElementById("hlcode");
+    out.innerHTML = pyodide.runPython('pygments.highlight(code, lexer, fmter)');
+    document.location.hash = "#try";
+}
diff --git a/doc/_static/spinner.gif b/doc/_static/spinner.gif
new file mode 100644
index 00000000..2212db95
--- /dev/null
+++ b/doc/_static/spinner.gif
diff --git a/doc/_templates/demo.html b/doc/_templates/demo.html
new file mode 100644
index 00000000..222d9a14
--- /dev/null
+++ b/doc/_templates/demo.html
@@ -0,0 +1,47 @@
+{% extends "layout.html" %}
+{% set sidebars = sidebars + ["demo_sidebar.html"] %}
+
+{% block extrahead %}
+{{ super() }}
+<link rel="stylesheet" type="text/css" href="{{ pathto("_static/demo.css", 1) }}">
+<script type="text/javascript">var languagePluginUrl = "{{ pathto("_static/pyodide/", 1) }}";</script>
+<script type="text/javascript" src="{{ pathto("_static/pyodide/pyodide.js", 1) }}"></script>
+<script type="text/javascript" src="{{ pathto("_static/demo.js", 1) }}"></script>
+{% endblock %}
+
+{% block htmltitle %}<title>Demo{{ titlesuffix }}</title>{% endblock %}
+
+{% block body %}
+{{ body }}
+
+<h1>Demo - Try it out!</h1>
+<p>The highlighting here is performed in-browser using
+    a WebAssembly translation of Pygments.</p>
+
+<div id="try">
+    <h2>Enter code and select a language</h2>
+    <form>
+        <p><span id="aroundlang">
+            <label for="lang">Language:</label> &nbsp;<select id="lang" onchange="reset_err_hl()">
+                <option value="">&nbsp;&nbsp;Select a lexer&nbsp;&nbsp;</option>
+            </select>
+	    &nbsp;&nbsp;</span>
+            &middot;&nbsp;&nbsp;
+            <label for="style">Style:</label> &nbsp;<select id="style">
+                <option value="default">default&nbsp;&nbsp;&nbsp;&nbsp;</option>
+            </select></p>
+        <p><label for="file">Upload a file here:</label> &nbsp;
+	    <input type="file" id="file" onchange="new_file()"> &nbsp; or enter code below:</p>
+	    <p><textarea id="code" rows="1" cols="60"></textarea></p>
+	    <p style="text-align: right">
+                <input type="button" value="Highlight!" onclick="highlight()" id="hlbtn" disabled>
+	        &nbsp;&nbsp;&nbsp; <input type="reset" value="Reset"></p>
+    </form>
+    <div id="loading">
+        <p><img src="{{ pathto("_static/spinner.gif", 1) }}" style="vertical-align: middle"></p>
+        <p>Loading Python...</p>
+    </div>
+</div>
+
+<div id="hlcode"></div>
+{% endblock %}
diff --git a/doc/_templates/demo_sidebar.html b/doc/_templates/demo_sidebar.html
new file mode 100644
index 00000000..3f2a86c6
--- /dev/null
+++ b/doc/_templates/demo_sidebar.html
@@ -0,0 +1 @@
+<p><a href="#try">Back to top</a></p>
diff --git a/doc/_templates/index_with_try.html b/doc/_templates/index_with_try.html
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/doc/_templates/index_with_try.html
diff --git a/doc/conf.py b/doc/conf.py
index c744b4d1..3ab5c2e2 100644
--- a/doc/conf.py
+++ b/doc/conf.py
@@ -129,7 +129,10 @@ html_sidebars = {'index': ['indexsidebar.html', 'searchbox.html']}
 
 # Additional templates that should be rendered to pages, maps page names to
 # template names.
-#html_additional_pages = {}
+if os.environ.get('WEBSITE_BUILD'):
+    html_additional_pages = {
+        'demo': 'demo.html',
+    }
 
 # If false, no module index is generated.
 #html_domain_indices = True
@@ -217,3 +220,11 @@ man_pages = [
 
 # Example configuration for intersphinx: refer to the Python standard library.
 #intersphinx_mapping = {'http://docs.python.org/': None}
+
+
+def pg_context(app, pagename, templatename, ctx, event_arg):
+    ctx['demo_active'] = bool(os.environ.get('WEBSITE_BUILD'))
+
+
+def setup(app):
+    app.connect('html-page-context', pg_context)