Iterate

packages/voila/package.json

@@ -12,13 +12,14 @@
     "@jupyter-widgets/output": "^6.0.1",
     "@jupyterlab/application": "^3.0.0",
     "@jupyterlab/apputils": "^3.0.0",
+    "@jupyterlab/apputils-extension": "^3.5.0",
     "@jupyterlab/coreutils": "^5.0.0",
     "@jupyterlab/docregistry": "^3.0.0",
     "@jupyterlab/javascript-extension": "^3.5.0",
     "@jupyterlab/json-extension": "^3.0.0",
     "@jupyterlab/logconsole": "^3.0.0",
     "@jupyterlab/mainmenu": "^3.0.0",
-    "@jupyterlab/markdownviewer-extension": "^3.0.0",
+    "@jupyterlab/markdownviewer-extension": "^3.5.0",
     "@jupyterlab/mathjax2-extension": "^3.0.0",
     "@jupyterlab/nbformat": "^3.0.0",
     "@jupyterlab/notebook": "^3.0.0",
@@ -49,7 +50,7 @@
     "@jupyterlab/builder": "^3.0.0",
     "@types/node": "^18.8.3",
     "babel-loader": "^8.0.5",
-    "css-loader": "~5.0.2",
+    "css-loader": "^6.7.2",
     "file-loader": "^6.2.0",
     "fs-extra": "^9.1.0",
     "glob": "~7.1.6",
@@ -58,6 +59,7 @@
     "p-limit": "^2.2.2",
     "raw-loader": "^4.0.2",
     "rimraf": "^3.0.2",
+    "sass-loader": "^13.2.0",
     "style-loader": "^2.0.0",
     "svg-url-loader": "^7.1.1",
     "typescript": "~4.1.3",

packages/voila/style/index.css

@@ -1,4 +1,7 @@
-@import url('~@fortawesome/fontawesome-free/css/all.min.css');
-@import url('~@fortawesome/fontawesome-free/css/v4-shims.min.css');
-@import url('~@lumino/widgets/style/index.css');
-@import url('~@jupyterlab/apputils/style/index.css');
+@import url('@fortawesome/fontawesome-free/css/all.min.css');
+@import url('@fortawesome/fontawesome-free/css/v4-shims.min.css');
+@import url('@lumino/widgets/style/index.css');
+@import url('@jupyterlab/ui-components/style/index.css');
+@import url('@jupyterlab/apputils/style/index.css');
+@import url('@jupyterlab/rendermime/style/index.css');
+@import url('@jupyterlab/docregistry/style/index.css');

packages/voila/webpack.config.js

@@ -84,6 +84,7 @@ module.exports = [
   }),
   merge(baseConfig, {
     entry: './' + path.relative(__dirname, styleEntryPoint),
+    mode: 'production',
     output: {
       path: distRoot,
       filename: 'voila-style.js'

share/jupyter/voila/templates/base/voila_setup.macro.html.j2

@@ -1,6 +1,5 @@
 {%- macro voila_setup_labextensions(base_url, labextensions) -%}
 <script src="{{ page_config['fullStaticUrl'] | e }}/voila.js"></script>
-<script src="{{ page_config['fullStaticUrl'] | e }}/voila-style.js"></script>
 {%- endmacro %}
 
 {# For backward compatibility #}

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

@@ -10,6 +10,10 @@
 <script src="{{ resources.jquery_url }}"></script>
 {%- endblock html_head_js_jquery -%}
 
+{# this overrides the default behaviour of rendering static widgets #}
+{% block jupyter_widgets %}
+{% endblock jupyter_widgets %}
+
 {% block notebook_execute %}
     {# Copy so we do not modify the page_config with updates. #}
     {% set page_config_full = page_config.copy() %}
@@ -30,24 +34,13 @@
 {%- endblock html_head_js -%}
 
 {%- block html_head_css -%}
-  {{ resources.include_css("static/materialcolors.css") }}
-  {{ resources.include_css("static/labvariables.css") }}
-
-  {#
-    This is a temporary solution, when Notebook 7 is out, the "classic"
-    template should inherit from the "lab" template and get the lab CSS
-    automatically
-  #}
-  {{ resources.include_css("../lab/static/index.css") }}
-  {{ resources.include_css("../lab/static/theme-light.css") }}
-
+  {{ resources.include_js("static/voila-style.js") }}
   <style>
     /*Hide empty cells*/
     .jp-mod-noOutputs.jp-mod-noInput {
       display: none;
     }
   </style>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.5.0/css/font-awesome.min.css" type="text/css" />
 {{ super() }}
 {%- endblock html_head_css -%}
 

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

@@ -36,14 +36,6 @@
 
 {%- endblock html_head_js -%}
 
-{%- block html_head_css -%}
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@^5/css/all.min.css" type="text/css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@^5/css/v4-shims.min.css" type="text/css" />
-  {{ resources.include_css("static/materialcolors.css") }}
-  {{ resources.include_css("static/labvariables.css") }}
-  {{ super() }}
-{%- endblock html_head_css -%}
-
 {% block body_header %}
 {% if resources.theme == 'dark' %}
 <body class="jp-Notebook" data-base-url="{{resources.base_url}}voila/" data-jp-theme-light="false" data-jp-theme-name="JupyterLab Dark">