more updates to config

docs/conf.py

@@ -42,7 +42,11 @@
 
 thebelab_config = {
     "repository_url": "https://github.com/binder-examples/r",
-    "selector": ".thebelab",
+    # "repository_branch": "master",
+    # "selector": ".thebelab",
+    # "selector_input": ,
+    # "selector_output": ,
+    # "codemirror-theme": "blackboard"  # Doesn't currently work
 }
 
 # Add any paths that contain templates here, relative to this directory.

docs/configure.md

@@ -29,7 +29,7 @@ converted to interactive with `thebelab`.
 If you'd like to include outputs in the *static* version of your page, and only
 overwrite them once the user has run that Thebelab cell, you can configure `sphinx-thebelab`
 to detect and keep the outputs associated with some code. To do so, use
-the `selector-output` configuration. This is a selector that is searched for *within* any
+the `selector_output` configuration. This is a selector that is searched for *within* any
 items discovered by `selector`. If an output is found, it will be placed just after the
 code and Thebelab will detect it.
 
@@ -164,3 +164,34 @@ directive:
   Make live
 </button>
 ```
+
+## Choose a codemirror theme
+
+You can customize `sphinx-thebelab` to use the codemirror theme of your choice.
+To do so, use the following configuration:
+
+```
+thebelab_config = {
+   "codemirror-theme": "<cm-theme>"
+}
+```
+
+See [the CodeMirror theme demo](https://codemirror.net/demo/theme.html) for a list
+of themes that you can use, and what they look like.
+
+
+## Configuration reference
+
+Here's a reference of all of the configuration values avialable to `sphinx-thebelab`.
+Many of these eventually make their was into the `thebelab` configuration. You can
+find a [reference for `thebelab` configuration here](https://thebelab.readthedocs.io/en/latest/config_reference.html).
+
+```
+thebelab_config = {
+    "repository_url": "<your-repo-url>",
+    "repository_branch": "<your-repo-branch>",
+    "selector": "<selector-for-code-cells>",
+    "selector_input": "<selector-for-cell-input>",
+    "selector_output": "<selector-for-cell-output>",
+}
+```

setup.py

@@ -25,7 +25,6 @@
     packages=find_packages(),
     package_data={
         "sphinx_thebelab": [
-            "_static/thebelab_config.js_t",
             "_static/thebelab.css",
             "_static/thebelab.js",
         ]

sphinx_thebelab/__init__.py

@@ -17,23 +17,6 @@ def st_static_path(app):
     app.config.html_static_path.append(static_path)
 
 
-def add_to_context(app, config):
-    # Update the global context
-    config.html_context.update(
-        {"thebelab_selector": config.thebelab_config.get("selector", ".thebelab")}
-    )
-    config.html_context.update(
-        {"thebelab_selector_code": config.thebelab_config.get("selector-code", "pre")}
-    )
-    config.html_context.update(
-        {
-            "thebelab_selector_output": config.thebelab_config.get(
-                "selector-output", ".output"
-            )
-        }
-    )
-
-
 def init_thebelab_core(app, env, docnames):
     config_thebe = app.config["thebelab_config"]
     if not config_thebe:
@@ -43,6 +26,17 @@ def init_thebelab_core(app, env, docnames):
     # Add core libraries
     opts = {"async": "async"}
     app.add_js_file(filename="https://unpkg.com/thebelab@latest/lib/index.js", **opts)
+
+    # Add configuration variables
+    thebelab_selector = app.config.thebelab_config.get("selector", ".thebelab")
+    thebelab_selector_input = app.config.thebelab_config.get("selector_input", "pre")
+    thebelab_selector_output = app.config.thebelab_config.get("selector_output", ".output")
+    thebelab_config = f"""
+        const thebelab_selector = "{ thebelab_selector }"
+        const thebelab_selector_input = "{ thebelab_selector_input }"
+        const thebelab_selector_output = "{ thebelab_selector_output }"
+    """
+    app.add_js_file(None, body=thebelab_config)
     app.add_js_file(filename="thebelab.js", **opts)
 
 
@@ -59,7 +53,7 @@ def update_thebelab_context(app, doctree, docname):
         raise ValueError(
             "thebelab configuration must be `True` or a dictionary for configuration."
         )
-    codemirror_theme = config_thebe.get("codemirror_theme", "abcdef")
+    codemirror_theme = config_thebe.get("codemirror-theme", "abcdef")
 
     # Thebelab configuration
     # Choose the kernel we'll use
@@ -122,7 +116,7 @@ def _split_repo_url(url):
     return org, repo
 
 
-class ThebeButtonNode(nodes.Element):
+class ThebeLabButtonNode(nodes.Element):
     """Appended to the doctree by the ThebeButton directive
 
     Renders as a button to enable thebelab on the page.
@@ -161,7 +155,7 @@ class ThebeLabButton(Directive):
 
     def run(self):
         kwargs = {"text": self.arguments[0]} if self.arguments else {}
-        return [ThebeButtonNode(**kwargs)]
+        return [ThebeLabButtonNode(**kwargs)]
 
 
 # Used to render an element node as HTML
@@ -183,9 +177,6 @@ def setup(app):
     # configuration for this tool
     app.add_config_value("thebelab_config", {}, "html")
 
-    # Add configuration value to the template
-    app.connect("config-inited", add_to_context)
-
     # Include Thebelab core docs
     app.connect("env-before-read-docs", init_thebelab_core)
     app.connect("doctree-resolved", update_thebelab_context)
@@ -194,13 +185,11 @@ def setup(app):
 
     # Add relevant code to headers
     app.add_css_file("thebelab.css")
-    app.add_js_file("thebelab_config.js")
-    app.add_js_file("thebelab.js")
 
-    # ThebeButtonNode is the button that activates thebelab
+    # ThebeLabButtonNode is the button that activates thebelab
     # and is only rendered for the HTML builder
     app.add_node(
-        ThebeButtonNode,
+        ThebeLabButtonNode,
         html=(visit_element_html, None),
         latex=(skip, None),
         textinfo=(skip, None),

sphinx_thebelab/_static/thebelab.js

@@ -35,12 +35,18 @@ var initThebelab = () => {
     })
 
     // Set thebelab event hooks
+    var thebelabStatus;
     thebelab.on("status", function (evt, data) {
         console.log("Status changed:", data.status, data.message);
+
         $(".thebelab-launch-button ")
-        .attr("class", "thebelab-button thebelab-launch-button thebe-status-" + data.status)
+        .removeClass("thebe-status-" + thebelabStatus)
+        .addClass("thebe-status-" + data.status)
         .find(".loading-text").html("<span class='launch_msg'>Launching from mybinder.org: </span><span class='status'>" + data.status + "</span>");
 
+        // Now update our thebelab status
+        thebelabStatus = data.status;
+
         // Find any cells with an initialization tag and ask ThebeLab to run them when ready
         if (data.status === "ready") {
             var thebeInitCells = document.querySelectorAll('.thebelab-init');
@@ -57,7 +63,7 @@ var initThebelab = () => {
     codeCells.forEach((codeCell, index) => {
         const codeCellId = index => `codecell${index}`;
         codeCell.id = codeCellId(index);
-        codeCellText = codeCell.querySelector(thebelab_selector_code);
+        codeCellText = codeCell.querySelector(thebelab_selector_input);
         codeCellOutput = codeCell.querySelector(thebelab_selector_output);
 
         // Clean up the language to make it work w/ CodeMirror and add it to the cell