Add HtmlWebpackPlugin - rough draft

jtpio · Nov 5, 2024 · 8f1c19f · 8f1c19f
1 parent 5d64d49
commit 8f1c19f
Show file tree

Hide file tree

Showing 15 changed files with 717 additions and 263 deletions.
diff --git a/app/webpack.config.js b/app/webpack.config.js
@@ -15,6 +15,7 @@ const BundleAnalyzerPlugin =
 
 const Build = require('@jupyterlab/builder').Build;
 const WPPlugin = require('@jupyterlab/builder').WPPlugin;
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const baseConfig = require('@jupyterlab/builder/lib/webpack.config.base');
 
 const data = require('./package.json');
@@ -210,6 +211,7 @@ module.exports = [
     entry: ['./publicpath.js', './' + path.relative(__dirname, entryPoint)],
     output: {
       path: path.resolve(__dirname, '..', 'notebook/static/'),
+      publicPath: '{{page_config.fullStaticUrl}}/',
       library: {
         type: 'var',
         name: ['_JUPYTERLAB', 'CORE_OUTPUT'],
@@ -231,6 +233,78 @@ module.exports = [
       fallback: { util: false },
     },
     plugins: [
+      new HtmlWebpackPlugin({
+        chunksSortMode: 'none',
+        template: path.join(
+          path.resolve(__dirname, '..', 'notebook/templates'),
+          'consoles_template.html'
+        ),
+        title: data.jupyterlab.name,
+        filename: path.join(
+          path.resolve(__dirname, '..', 'notebook/templates'),
+          'consoles.html'
+        ),
+      }),
+      new HtmlWebpackPlugin({
+        chunksSortMode: 'none',
+        template: path.join(
+          path.resolve(__dirname, '..', 'notebook/templates'),
+          'edit_template.html'
+        ),
+        title: data.jupyterlab.name,
+        filename: path.join(
+          path.resolve(__dirname, '..', 'notebook/templates'),
+          'edit.html'
+        ),
+      }),
+      new HtmlWebpackPlugin({
+        chunksSortMode: 'none',
+        template: path.join(
+          path.resolve(__dirname, '..', 'notebook/templates'),
+          'error_template.html'
+        ),
+        title: data.jupyterlab.name,
+        filename: path.join(
+          path.resolve(__dirname, '..', 'notebook/templates'),
+          'error.html'
+        ),
+      }),
+      new HtmlWebpackPlugin({
+        chunksSortMode: 'none',
+        template: path.join(
+          path.resolve(__dirname, '..', 'notebook/templates'),
+          'notebooks_template.html'
+        ),
+        title: data.jupyterlab.name,
+        filename: path.join(
+          path.resolve(__dirname, '..', 'notebook/templates'),
+          'notebooks.html'
+        ),
+      }),
+      new HtmlWebpackPlugin({
+        chunksSortMode: 'none',
+        template: path.join(
+          path.resolve(__dirname, '..', 'notebook/templates'),
+          'terminals_template.html'
+        ),
+        title: data.jupyterlab.name,
+        filename: path.join(
+          path.resolve(__dirname, '..', 'notebook/templates'),
+          'terminals.html'
+        ),
+      }),
+      new HtmlWebpackPlugin({
+        chunksSortMode: 'none',
+        template: path.join(
+          path.resolve(__dirname, '..', 'notebook/templates'),
+          'tree_template.html'
+        ),
+        title: data.jupyterlab.name,
+        filename: path.join(
+          path.resolve(__dirname, '..', 'notebook/templates'),
+          'tree.html'
+        ),
+      }),
       new WPPlugin.JSONLicenseWebpackPlugin({
         excludedPackageTest: (packageName) =>
           packageName === '@jupyter-notebook/app',
@@ -246,3 +320,6 @@ module.exports = [
     ],
   }),
 ].concat(extras);
+
+const logPath = path.join(buildDir, 'build_log.json');
+fs.writeFileSync(logPath, JSON.stringify(module.exports, null, '  '));
diff --git a/notebook/templates/consoles.html b/notebook/templates/consoles.html
@@ -1,43 +1,43 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>{{page_config['appName'] | e}} - Console</title>
-  {% block favicon %}
-  <link rel="icon" type="image/x-icon" href="{{ page_config['fullStaticUrl'] | e }}/favicons/favicon-console.ico" class="favicon">
-  {% endblock %}
-
-  {% if custom_css %}
-  <link rel="stylesheet" type="text/css" href="{{ base_url | escape }}custom/custom.css">
-  {% endif %}
-</head>
-<body class="jp-ThemedContainer">
-
-  {# Copy so we do not modify the page_config with updates. #}
-  {% set page_config_full = page_config.copy() %}
-
-  {# Set a dummy variable - we just want the side effect of the update. #}
-  {% set _ = page_config_full.update(baseUrl=base_url, wsUrl=ws_url) %}
-
-  {# Sentinel value to say that we are on the tree page #}
-  {% set _ = page_config_full.update(notebookPage='consoles') %}
-
-  <script id="jupyter-config-data" type="application/json">
-    {{ page_config_full | tojson }}
-  </script>
-  <script src="{{page_config['fullStaticUrl'] | e}}/bundle.js" main="index"></script>
-
-  <script type="text/javascript">
-    /* Remove token from URL. */
-    (function () {
-      var parsedUrl = new URL(window.location.href);
-      if (parsedUrl.searchParams.get('token')) {
-        parsedUrl.searchParams.delete('token');
-        window.history.replaceState({ }, '', parsedUrl.href);
-      }
-    })();
-  </script>
-
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>{{page_config['appName'] | e}} - Console</title>
+    {% block favicon %}
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="{{ page_config['fullStaticUrl'] | e }}/favicons/favicon-console.ico"
+      class="favicon"
+    />
+    {% endblock %} {% if custom_css %}
+    <link rel="stylesheet" href="{{ base_url | escape }}custom/custom.css" />
+    {% endif %}
+    <script
+      defer="defer"
+      src="{{page_config.fullStaticUrl}}/main.a4b72be68233e26a3717.js?v=a4b72be68233e26a3717"
+    ></script>
+  </head>
+  <body class="jp-ThemedContainer">
+    {# Copy so we do not modify the page_config with updates. #} {% set
+    page_config_full = page_config.copy() %} {# Set a dummy variable - we just
+    want the side effect of the update. #} {% set _ =
+    page_config_full.update(baseUrl=base_url, wsUrl=ws_url) %} {# Sentinel value
+    to say that we are on the tree page #} {% set _ =
+    page_config_full.update(notebookPage='consoles') %}
+    <script id="jupyter-config-data" type="application/json">
+      {{ page_config_full | tojson }}
+    </script>
+    <script>
+      /* Remove token from URL. */
+      (function () {
+        var parsedUrl = new URL(window.location.href);
+        if (parsedUrl.searchParams.get('token')) {
+          parsedUrl.searchParams.delete('token');
+          window.history.replaceState({}, '', parsedUrl.href);
+        }
+      })();
+    </script>
+  </body>
 </html>
diff --git a/notebook/templates/consoles_template.html b/notebook/templates/consoles_template.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{{page_config['appName'] | e}} - Console</title>
+    {% block favicon %}
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="{{ page_config['fullStaticUrl'] | e }}/favicons/favicon-console.ico"
+      class="favicon"
+    />
+    {% endblock %} {% if custom_css %}
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ base_url | escape }}custom/custom.css"
+    />
+    {% endif %}
+  </head>
+  <body class="jp-ThemedContainer">
+    {# Copy so we do not modify the page_config with updates. #} {% set
+    page_config_full = page_config.copy() %} {# Set a dummy variable - we just
+    want the side effect of the update. #} {% set _ =
+    page_config_full.update(baseUrl=base_url, wsUrl=ws_url) %} {# Sentinel value
+    to say that we are on the tree page #} {% set _ =
+    page_config_full.update(notebookPage='consoles') %}
+
+    <script id="jupyter-config-data" type="application/json">
+      {{ page_config_full | tojson }}
+    </script>
+
+    <script type="text/javascript">
+      /* Remove token from URL. */
+      (function () {
+        var parsedUrl = new URL(window.location.href);
+        if (parsedUrl.searchParams.get('token')) {
+          parsedUrl.searchParams.delete('token');
+          window.history.replaceState({}, '', parsedUrl.href);
+        }
+      })();
+    </script>
+  </body>
+</html>
diff --git a/notebook/templates/edit.html b/notebook/templates/edit.html
@@ -1,39 +1,8 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>{{page_config['appName'] | e}} - Edit</title>
-  {% block favicon %}
-  <link rel="icon" type="image/x-icon" href="{{ base_url | escape }}static/favicons/favicon-file.ico" class="favicon">
-  {% endblock %}
-</head>
-<body class="jp-ThemedContainer" data-notebook="edit">
-
-  {# Copy so we do not modify the page_config with updates. #}
-  {% set page_config_full = page_config.copy() %}
-
-  {# Set a dummy variable - we just want the side effect of the update. #}
-  {% set _ = page_config_full.update(baseUrl=base_url, wsUrl=ws_url) %}
-
-  {# Sentinel value to say that we are on the tree page #}
-  {% set _ = page_config_full.update(notebookPage='edit') %}
-
-  <script id="jupyter-config-data" type="application/json">
-    {{ page_config_full | tojson }}
-  </script>
-  <script src="{{page_config['fullStaticUrl'] | e}}/bundle.js" main="index"></script>
-
-  <script type="text/javascript">
-    /* Remove token from URL. */
-    (function () {
-      var parsedUrl = new URL(window.location.href);
-      if (parsedUrl.searchParams.get('token')) {
-        parsedUrl.searchParams.delete('token');
-        window.history.replaceState({ }, '', parsedUrl.href);
-      }
-    })();
-  </script>
-
-</body>
-</html>
+<!doctype html><html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>{{page_config['appName'] | e}} - Edit</title>{% block favicon %}<link rel="icon" type="image/x-icon" href="{{ base_url | escape }}static/favicons/favicon-file.ico" class="favicon"/>{% endblock %}<script defer="defer" src="{{page_config.fullStaticUrl}}/main.a4b72be68233e26a3717.js?v=a4b72be68233e26a3717"></script></head><body class="jp-ThemedContainer" data-notebook="edit">{# Copy so we do not modify the page_config with updates. #} {% set page_config_full = page_config.copy() %} {# Set a dummy variable - we just want the side effect of the update. #} {% set _ = page_config_full.update(baseUrl=base_url, wsUrl=ws_url) %} {# Sentinel value to say that we are on the tree page #} {% set _ = page_config_full.update(notebookPage='edit') %}<script id="jupyter-config-data" type="application/json">{{ page_config_full | tojson }}</script><script>/* Remove token from URL. */
+      (function () {
+        var parsedUrl = new URL(window.location.href);
+        if (parsedUrl.searchParams.get('token')) {
+          parsedUrl.searchParams.delete('token');
+          window.history.replaceState({}, '', parsedUrl.href);
+        }
+      })();</script></body></html>
diff --git a/notebook/templates/edit_template.html b/notebook/templates/edit_template.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{{page_config['appName'] | e}} - Edit</title>
+    {% block favicon %}
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="{{ base_url | escape }}static/favicons/favicon-file.ico"
+      class="favicon"
+    />
+    {% endblock %}
+  </head>
+  <body class="jp-ThemedContainer" data-notebook="edit">
+    {# Copy so we do not modify the page_config with updates. #} {% set
+    page_config_full = page_config.copy() %} {# Set a dummy variable - we just
+    want the side effect of the update. #} {% set _ =
+    page_config_full.update(baseUrl=base_url, wsUrl=ws_url) %} {# Sentinel value
+    to say that we are on the tree page #} {% set _ =
+    page_config_full.update(notebookPage='edit') %}
+
+    <script id="jupyter-config-data" type="application/json">
+      {{ page_config_full | tojson }}
+    </script>
+
+    <script type="text/javascript">
+      /* Remove token from URL. */
+      (function () {
+        var parsedUrl = new URL(window.location.href);
+        if (parsedUrl.searchParams.get('token')) {
+          parsedUrl.searchParams.delete('token');
+          window.history.replaceState({}, '', parsedUrl.href);
+        }
+      })();
+    </script>
+  </body>
+</html>
diff --git a/notebook/templates/error.html b/notebook/templates/error.html
@@ -1,59 +1,10 @@
-<!DOCTYPE html>
-<!--
-Copyright (c) Jupyter Development Team.
-Distributed under the terms of the Modified BSD License.
--->
-<html>
-
-<head>
-  <meta charset="utf-8">
-
-  <title>{% block title %}{{page_title | e}}{% endblock %}</title>
-
-  {% block favicon %}<link rel="shortcut icon" type="image/x-icon" href="/static/favicons/favicon.ico">{% endblock %}
-
-</head>
-
-<body class="jp-ThemedContainer">
-
-{% block stylesheet %}
-<style type="text/css">
-/* disable initial hide */
+<!doctype html><html><head><meta charset="utf-8"><title>{% block title %}{{page_title | e}}{% endblock %}</title>{% block favicon %}<link rel="shortcut icon" type="image/x-icon" href="/static/favicons/favicon.ico">{% endblock %}<script defer="defer" src="{{page_config.fullStaticUrl}}/main.a4b72be68233e26a3717.js?v=a4b72be68233e26a3717"></script></head><body class="jp-ThemedContainer">{% block stylesheet %}<style>/* disable initial hide */
 div#header, div#site {
     display: block;
-}
-</style>
-{% endblock %}
-{% block site %}
-
-<div class="error">
-    {% block h1_error %}
-    <h1>{{status_code | e}} : {{status_message | e}}</h1>
-    {% endblock h1_error %}
-    {% block error_detail %}
-    {% if message %}
-    <p>The error was:</p>
-    <div class="traceback-wrapper">
-    <pre class="traceback">{{message | e}}</pre>
-    </div>
-    {% endif %}
-    {% endblock %}
-</header>
-
-{% endblock %}
-
-{% block script %}
-<script type='text/javascript'>
-window.onload = function () {
+}</style>{% endblock %} {% block site %}<div class="error">{% block h1_error %}<h1>{{status_code | e}} : {{status_message | e}}</h1>{% endblock h1_error %} {% block error_detail %} {% if message %}<p>The error was:</p><div class="traceback-wrapper"><pre class="traceback">{{message | e}}</pre></div>{% endif %} {% endblock %}{% endblock %} {% block script %}<script>window.onload = function () {
   var tb = document.getElementsByClassName('traceback')[0];
   tb.scrollTop = tb.scrollHeight;
   {% if message %}
   console.error("{{message | e}}")
   {% endif %}
-};
-</script>
-{% endblock script %}
-
-</body>
-
-</html>
+};</script>{% endblock script %}</div></body></html>