jupyter-book · stevejpurves · Sep 30, 2021 · Sep 20, 2021 · Sep 20, 2021 · Aug 16, 2021
diff --git a/development/binder.html b/development/binder.html
@@ -10,6 +10,7 @@
     <script type="text/x-thebe-config">
       {
         mountStatusWidget: true,
+        mountActivateWidget: true,
         requestKernel: true,
         binderOptions: {
           repo: "binder-examples/requirements",
@@ -23,18 +24,8 @@
   </head>
   <body>
     <div class="container">
+      <div class="thebe-activate"></div>
       <div class="thebe-status"></div>
-      <button id="activateButton">Activate</button>
-      <script>
-        var bootstrapThebe = function () {
-          thebelab.bootstrap();
-        };
-
-        document
-          .querySelector("#activateButton")
-          .addEventListener("click", bootstrapThebe);
-      </script>
-
       <pre data-executable="true" data-language="python" class="pre-element">
 print("Hello!")</pre
       >

diff --git a/development/local.html b/development/local.html
@@ -11,6 +11,7 @@
     <script type="text/x-thebe-config">
       {
         requestKernel: false,
+        mountActivateWidget: true,
         mountStatusWidget: true,
         kernelOptions: {
           name: "python3",
@@ -42,17 +43,8 @@
             </pre
         >
       </div>
+      <div class="thebe-activate"></div>
       <div class="thebe-status"></div>
-      <button id="activateButton">Activate</button>
-      <script>
-        var bootstrapThebe = function () {
-          thebelab.bootstrap();
-        };
-
-        document
-          .querySelector("#activateButton")
-          .addEventListener("click", bootstrapThebe);
-      </script>
       <pre data-executable="true" data-language="python" class="pre-element">
 print("Hello!")</pre
       >

diff --git a/development/main.css b/development/main.css
@@ -8,10 +8,10 @@ body {
   align-items: center;
   height: 100vh;
 }
-#activateButton {
-  width: 130px;
-  height: 50px;
-  font-size: 1.25em;
+.thebe-activate {
+  margin-bottom: 15px;
+}
+.thebe-activate-button {
   border: 1px solid black;
   border-radius: 5px;
   background-color: lightblue;

diff --git a/docs/Makefile b/docs/Makefile
@@ -2,7 +2,7 @@
 #
 
 # You can set these variables from the command line.
-SPHINXOPTS    =
+SPHINXOPTS    = -v
 SPHINXBUILD   = sphinx-build
 SPHINXPROJ    = Thebe
 SOURCEDIR     = .

diff --git a/docs/api.rst b/docs/api.rst
@@ -10,4 +10,4 @@ The thebe JavaScript API
     We need to add jsdoc-style docstrings to our exported functions.
 
 
-.. js:autofunction:: bootstrap
+.. js:autofunction:: thebelab.bootstrap
diff --git a/docs/index.rst b/docs/index.rst
@@ -10,6 +10,7 @@ Thebe
    configure
    security
    events
+   ui
    config_reference
    howto/initialize_cells
    contribute
@@ -53,7 +54,7 @@ Try clicking the button. The cell will be come active!
 
 .. raw:: html
 
-   <button id="activateButton" style="width: 120px; height: 40px; font-size: 1.5em;">Activate</button>
+
    <script>
    var bootstrapThebe = function() {
        thebelab.bootstrap();

diff --git a/docs/ui.rst b/docs/ui.rst
@@ -0,0 +1,94 @@
+==============
+User Interface
+==============
+
+Thebe includes support for some built-in user interface elements.
+
+The aim is to provide simple elements that can be added to a page a styled accordingly by the consumer without neeing to [re]write coont code.
+Using these UI elements in the way shown here, assumes that you already have Thebe statically loaded on page.
+
+Built in UI elements are:
+
+- Activate Button
+- Kernel Status Widget
+
+Activate Button
+===============
+
+Configure this UI element as follows.
+
+Add a :code:`div` element to the page in the desired location.
+
+.. code-block:: html
+
+  <div class="thebe-activate" />
+
+Then set the following option to :code:`mountActivateWidget:true` in the Thebe config object
+
+Status Widget
+=============
+
+Configure this UI element as follows.
+
+Add a :code:`div` element to the page in the desired location.
+
+.. code-block:: html
+
+  <div class="thebe-status" />
+
+Then set the following option to :code:`mountStatusWidget:true` in the Thebe config object
+
+Example
+=======
+
+Adding the following to a page will render both Activate and Status widgets.
+
+.. code-block:: html
+
+  <script src="https://unpkg.com/thebe@latest/lib/index.js"></script>
+  <script type="text/x-thebe-config">
+    {
+      requestKernel: true,
+      binderOptions: {
+        repo: "binder-examples/requirements",
+      },
+      mountActivateWidget: true,
+      mountStatusWidget: true
+    }
+  </script>
+  <div class="thebe-activate" />
+  <div class="thebe-status" />
+
+Pressing activate will convert the following code into an activate cell, and the kernel status widget
+will show status of the kernel launch.
+
+.. raw:: html
+
+  <script src="https://unpkg.com/thebe@latest/lib/index.js"></script>
+  <script type="text/x-thebe-config">
+    {
+      requestKernel: true,
+      binderOptions: {
+        repo: "binder-examples/requirements",
+      },
+      mountActivateWidget: true,
+      mountStatusWidget: true
+    }
+  </script>
+  <div class="thebe-activate"></div>
+  <div class="thebe-status"></div>
+
+
+.. raw:: html
+
+   <pre data-executable="true" data-language="python">
+   %matplotlib inline
+   import numpy as np
+   import matplotlib.pyplot as plt
+   x = np.linspace(0,10)
+   plt.plot(x, np.sin(x))
+   plt.plot(x, np.cos(x))
+   </pre>
+
+
+Note: If you are looking to load Thebe dynamically, check the custom launch button in the example `here. <https://github.com/executablebooks/thebe/blob/feat/kernel-status/examples/demo-launch-button.html>`_
diff --git a/examples/demo.html b/examples/demo.html
@@ -11,9 +11,6 @@ <h1>Thebe demo</h1>
       <li><a href="demo-active.html">The same, active</li>
       <li><a href="demo-active-variation.html">Variation</li>
       <li><a href="demo-preview.html">Pre-computed cell output</li>
-      <li><a href="demo-activate-button.html">Built in activate button</li>
-      <li><a href="demo-status-widget.html">Built in status field</li>
-      <li><a href="demo-launch-button.html">Example of a custom launch &apos; load script</li>
     </ul>
 
     <h2>References</h2>

diff --git a/examples/index.css b/examples/index.css
@@ -1,6 +1,6 @@
 body {
+  margin: 30px auto;
   max-width: 850px;
-  margin: auto;
   font-family: sans-serif;
 }
 .thebelab-cell {

diff --git a/examples/index.html b/examples/index.html
@@ -25,7 +25,6 @@
   </head>
   <body>
     <h1>Thebe</h1>
-
     <p>
       <a href="https://github.com/executablebooks/thebe">Thebe</a>
       is an experiment attempting to rebuild
@@ -35,8 +34,6 @@ <h1>Thebe</h1>
       should make Thebe a smaller, more sustainable project.
     </p>
 
-    <h2><a href="demo.html">Step by step demo</a></h2>
-
     <h2>A minimal example</h2>
 
     This page illustrates a minimal setup to get Thebe running, using
@@ -69,6 +66,12 @@ <h2>A minimal example</h2>
 plt.plot(x, np.cos(x))</pre
     >
 
+    <h2>Step by step demo</h2>
+    <p>
+      See a <a href="demo.html">step by step demo</a> of adding thebe to a
+      static html document containing existing code.
+    </p>
+
     <h2>More examples &amp; demos</h2>
     <ul>
       <li>
@@ -77,19 +80,24 @@ <h2>More examples &amp; demos</h2>
       <li>
         <a href="widgets.html">Making use of Jupyter interactive widgets</a>
       </li>
-      <li>
-        <a href="prompts.html"
-          >Alternative computational environments; code cells with prompts and
-          outputs</a
-        >
-      </li>
+
       <li>
         <a href="demo-preview.html">Setting predefined output for cells</a>
       </li>
       <li><a href="demo-activate-button.html">Simple activate button</a></li>
       <li>
         <a href="demo-status-widget.html">Using the Status Widget on a page</a>
       </li>
+      <li>
+        <a href="prompts.html"
+          >Alternative computational environments; code cells with prompts and
+          outputs</a
+        >
+      </li>
+    </ul>
+
+    <h2>Thebe in use - external</h2>
+    <ul>
       <li>
         <a
           href="http://sage-package.readthedocs.io/en/latest/sage_package/sphinx-demo.html"
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,4 +10,4 @@ The thebe JavaScript API
		We need to add jsdoc-style docstrings to our exported functions.


		.. js:autofunction:: bootstrap
		.. js:autofunction:: thebelab.bootstrap