use data-jupyter-kernel-id attribute for kernel id instead of global variable

Author: maartenbreddels

voila/static/main.js

@@ -2,6 +2,12 @@
 // Initialize requirejs (for dynamically loading widgets)
 // and render widgets on page.
 
+var kernel_id = null;
+var scripts = document.getElementsByTagName('script');
+Array.prototype.forEach.call(scripts, (script) => {
+    kernel_id = script.getAttribute('data-jupyter-kernel-id') || kernel_id;
+})
+
 requirejs.config({
     baseUrl: 'static/dist'
 })
@@ -17,7 +23,7 @@ require(['libwidgets'], function(lib) {
         WSURL = 'ws://' + window.location.host
     }
 
-    var widgetApp = new lib.WidgetApplication(BASEURL, WSURL, lib.requireLoader, window.kernel_id);
+    var widgetApp = new lib.WidgetApplication(BASEURL, WSURL, lib.requireLoader, kernel_id);
 
     window.addEventListener("beforeunload", function (e) {
         widgetApp.cleanWidgets();

voila/templates/voila.tpl

@@ -9,22 +9,18 @@
 {%- block html_head -%}
 <meta charset="utf-8" />
 {% set nb_title = nb.metadata.get('title', '') or resources['metadata']['name'] %}
-<title>Voila: {{resources.kernel_id}} - {{nb_title}}</title>
-
-<script>
-window.kernel_id = '{{resources.kernel_id}}'
-</script>
-
+<title>Voila: {{nb_title}}</title>
 
 <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/font-awesome.min.css" type="text/css" />
 
 <script
-    data-main="static/main"
-    src="/static/require.min.js"
+    data-main="/voila/static/main"
+    data-jupyter-kernel-id="{{resources.kernel_id}}"
+    src="/voila/static/require.min.js"
     integrity="sha256-Ae2Vz/4ePdIu6ZyI/5ZGsYnb+m0JlOmKPjt6XZ9JJkA="
     crossorigin="anonymous">
 </script>
-<script src="static/jquery.min.js"></script>
+<script src="/voila/static/jquery.min.js"></script>