feat: online report CDN for bootstrap, jquery

When the `online_report` config parameter is set to True, bootstrap and jquery are loaded from a CDN as ploty.js. This results in a much smaller report. Co-authored-by: pradyot-09 <pradyotpatil@gmail.com>
ing-bank · Jul 5, 2022 · 72df86d · 72df86d
1 parent 2c2395c
commit 72df86d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 25 deletions.
diff --git a/popmon/visualization/templates/core.html b/popmon/visualization/templates/core.html
@@ -10,20 +10,22 @@
 
   <title>POPMON Report</title>
 
-  <!-- Bootstrap core CSS -->
-  <!-- Custom styles for this template -->
+  {%- if online_report %}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">
+  {%- endif -%}
+
   <style>
-    {% include 'assets/css/bootstrap.min.css' %}
-    {% include 'assets/css/custom-style.css' %}
+    {%- if not online_report -%}
+        {%- include 'assets/css/bootstrap.min.css' -%}
+    {%- endif -%}
+    {%- include 'assets/css/custom-style.css' -%}
   </style>
 
 </head>
 <body id="page-top">
-
-    {% include 'modal-popup.html' %}
-    {% include 'header.html' %}
+    {%- include 'modal-popup.html' -%}
+    {%- include 'header.html' -%}
     {{ sections }}
-    {% include 'footer.html' %}
-
+    {%- include 'footer.html' -%}
 </body>
-</html>
+</html>
diff --git a/popmon/visualization/templates/footer.html b/popmon/visualization/templates/footer.html
@@ -1,24 +1,22 @@
-<!-- Footer -->
 <footer class="py-5 bg-dark">
     <div class="container">
         <p class="m-0 text-center text-white">Copyright &copy; ING WBAA 2022</p>
     </div>
-    <!-- /.container -->
 </footer>
 
-<!-- Bootstrap core JavaScript -->
-<!-- Plugin JavaScript -->
-<!-- Custom JavaScript for this theme -->
-{% if online_report %}
+{%- if online_report -%}
     <script src="https://cdn.plot.ly/plotly-2.12.1.min.js"></script>
-{% endif %}
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery.easing@1.4.1/jquery.easing.min.js"></script>
+{%- endif -%}
 <script>
-    {% if not online_report %}
-        {% include 'assets/js/plotly.js' %}
-    {% endif %}
-    {% include 'assets/js/jquery.min.js' %}
-    {% include 'assets/js/bootstrap.bundle.min.js' %}
-    {% include 'assets/js/jquery.easing.min.js' %}
-    {% include 'assets/js/scrolling-nav.js' %}
-    {% include 'assets/js/custom-script.js' %}
+    {%- if not online_report -%}
+        {%- include 'assets/js/plotly.js' -%}
+        {%- include 'assets/js/jquery.min.js' -%}
+        {%- include 'assets/js/bootstrap.bundle.min.js' -%}
+        {%- include 'assets/js/jquery.easing.min.js' -%}
+    {%- endif -%}
+    {%- include 'assets/js/scrolling-nav.js' -%}
+    {%- include 'assets/js/custom-script.js' -%}
 </script>