convert to nbconvert and voila compatible template

setup.py

@@ -49,6 +49,7 @@ def user_dir():
 
 class DevelopCmd(develop):
     prefix_targets = [
+        ("nbconvert/templates", 'material'),
         ("voila/templates", 'material')
     ]
     def run(self):
@@ -77,7 +78,7 @@ def run(self):
 # WARNING: all files generates during setup.py will not end up in the source distribution
 data_files = []
 # Add all the templates
-for (dirpath, dirnames, filenames) in os.walk('share/jupyter/voila/templates/'):
+for (dirpath, dirnames, filenames) in os.walk('share/jupyter/'):
     if filenames:
         data_files.append((dirpath, [os.path.join(dirpath, filename) for filename in filenames]))
 
@@ -96,7 +97,7 @@ def run(self):
         'ipython',
         'jupyter',
         'widgets',
-        'voila'
+        'voila==0.2.0a1'
     ],
     cmdclass={
         'develop': DevelopCmd,

share/jupyter/nbconvert/templates/material/conf.json

@@ -0,0 +1 @@
+{"base_template": "lab"}

share/jupyter/nbconvert/templates/material/index.html.j2

@@ -0,0 +1,100 @@
+{%- extends 'lab/index.html.j2' -%}
+
+{# this overrides the default behavior of directly starting the kernel and executing the notebook #}
+{% block notebook_execute %}
+{% endblock notebook_execute %}
+
+{%- block html_head_css -%}
+{{ super() }}
+{% if resources.theme == 'dark' %}
+{% set bar_color = '#555454' %}
+{% else %}
+{% set bar_color = '#5cbcaf' %}
+{% endif %}
+{{ resources.include_css("static/materialize.min.css") }}
+
+<style type="text/css">
+  body {
+    background-color: var(--jp-layout-color0);
+    overflow-y: scroll;
+  }
+
+  /* Overwrite default value, workaround for not breaking materialize */
+  .jp-Notebook {
+    padding: 0px;
+  }
+
+  .nav-wrapper {
+    background-color: {{ bar_color }};
+  }
+
+  .brand-logo {
+    height: 90%;
+    width: 100%;
+  }
+
+  .voila-spinner-color1 {
+    fill: {{ bar_color }};
+  }
+</style>
+
+<style>
+a.anchor-link {
+  display: none;
+}
+.highlight  {
+  margin: 0.4em;
+}
+/* we keep the DOM for nbconvert the same as for voila, but hide the status icon */
+#kernel-status-icon {
+  display: none;
+}
+</style>
+
+{%- endblock html_head_css -%}
+
+{%- block body -%}
+{%- block body_header -%}
+  {{ super() }}
+  <header>
+    <div class="navbar-fixed">
+      <nav class="top-nav">
+        <div class="nav-wrapper">
+          <a href="#!" class="brand-logo-container">
+            <object class="brand-logo" type="image/svg+xml" data="{{ resources.include_url("static/voila_logo.svg") }}"></object>
+          </a>
+          <ul class="right">
+            <li><a href="#"><i class="material-icons" id="kernel-status-icon">radio_button_unchecked</i></a></li>
+          </ul>
+        </div>
+      </nav>
+    </div>
+  </header>
+
+  <main>
+    <div class="container">
+      <div class="row">
+        <div class="col s12">
+{%- endblock body_header -%}
+
+{%- block body_loop -%}
+          {% if resources.theme == 'dark' %}
+          <div class="jp-Notebook theme-dark">
+          {% else %}
+          <div class="jp-Notebook theme-light">
+          {% endif %}
+            {{ super() }}
+          </div>
+{%- endblock body_loop -%}
+
+{%- block body_footer -%}
+        </div>
+      </div>
+    </div>
+  </main>
+  {{ super() }}
+  {{ resources.include_js("static/materialize.min.js") }}
+</body>
+{%- endblock body_footer -%}
+
+{%- endblock body -%}

share/jupyter/voila/templates/material/index.html.j2

@@ -0,0 +1,69 @@
+{%- extends 'nbconvert/templates/material/index.html.j2' -%}
+
+{%- block html_head_css -%}
+{{ super() }}
+<style>
+  /* unhide the icon */
+  #kernel-status-icon {
+    display: unset;
+  }
+
+  @font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url("{{ resources.include_url("static/icons_font.ttf") }}") format('truetype');
+  }
+
+  .material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+  }
+
+  /* Workaround for the Select/Dropdown widgets to be visible: */
+  select {
+    display: block;
+  }
+
+  /* Workaround for the RadioButtons widgets to be visible: */
+  [type="radio"]:not(:checked), [type="radio"]:checked {
+    position: static;
+    opacity: 1;
+    pointer-events: auto;
+  }
+</style>
+
+{%- endblock html_head_css -%}
+
+
+{% block footer_js %}
+  {{ super() }}
+  <script type="text/javascript">
+    requirejs(['static/voila'], function(voila) {
+      (async function() {
+        var kernel = await voila.connectKernel();
+
+        kernel.statusChanged.connect(() => {
+          // console.log(kernel.status);
+          var el = document.getElementById("kernel-status-icon");
+
+          if (kernel.status == 'busy') {
+            el.innerHTML = 'radio_button_checked';
+          } else {
+            el.innerHTML = 'radio_button_unchecked';
+          }
+        });
+      })();
+    });
+  </script>
+{% endblock footer_js %}
+