Fix and optimize shop styles and remove jquery

Reduce bootstrap bundle, replace jquery dependant code and remove jquery. Optimize style loading.
Overall the lighthouse metrics are far better now.

Signed-off-by: Egor Savkin <es@m-labs.hk>

package.json

@@ -8,7 +8,8 @@
     "start": "npx webpack --watch",
     "build": "npx webpack",
     "start-dev": "npx webpack --watch --mode=development --devtool=inline-source-map",
-    "build-dev": "npx webpack --mode=development --devtool=inline-source-map"
+    "build-dev": "npx webpack --mode=development --devtool=inline-source-map",
+    "optimize-bootstrap": "zola build -o tmp_out && npx purgecss --css static/css/bootstrap-5.3.0.min.css --content 'tmp_out/**/*.html' -o static/css/bootstrap-5.3.0.opt.css --safelist modal-backdrop && rm -rf tmp_out"
   },
   "repository": {
     "type": "git",
@@ -33,7 +34,8 @@
     "babel-preset-minify": "^0.5.2",
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
-    "webpack-preprocessor-loader": "^1.3.0"
+    "webpack-preprocessor-loader": "^1.3.0",
+    "purgecss": "^7.0.2"
   },
   "babel": {
     "presets": [

static/sw.js

@@ -2,8 +2,6 @@ var CACHE_NAME = 'ml-03';
 var urlsToCache = [
   '/css/bootstrap-5.3.0.min.css',
   '/css/styles.css',
-  '/js/jquery-3.7.0.slim.min.js',
-  '/js/jquery-3.7.0.min.js',
   '/js/bootstrap-5.3.0.min.js',
   '/js/react.production.min.js',
   '/js/react-dom.production.min.js',

templates/404.html

@@ -43,7 +43,7 @@
     <link href="{{ get_url(path='favicon.ico', cachebust=true) }}" rel="shortcut icon" type="image/x-icon">
     <link href="{{ get_url(path='favicon.ico', cachebust=true) }}" rel="icon" type="image/x-icon">
 
-    <link rel="stylesheet" href="{{ get_url(path='css/bootstrap-5.3.0.min.css', cachebust=true) }}">
+    <link rel="stylesheet" href="{{ get_url(path='css/bootstrap-5.3.0.opt.css', cachebust=true) }}">
     <link rel="stylesheet" href="{{ get_url(path='css/styles.css', cachebust=true) }}">
     {% block styles %}{% endblock %}
   </head>
@@ -155,7 +155,6 @@
 
     <!-- ./FOOTER -->
 
-    <script src="{{ get_url(path='js/jquery-3.7.0.slim.min.js', cachebust=true) }}"></script>
     <script src="{{ get_url(path='js/bootstrap-5.3.0.bundle.min.js', cachebust=true) }}"></script>
 
     <script>

templates/_base.html

@@ -42,12 +42,12 @@
     <link href="{{ get_url(path='favicon.ico', cachebust=true) }}" rel="shortcut icon" type="image/x-icon">
     <link href="{{ get_url(path='favicon.ico', cachebust=true) }}" rel="icon" type="image/x-icon">
 
-    <link rel="stylesheet" href="{{ get_url(path='css/bootstrap-5.3.0.min.css', cachebust=true) }}" as="style">
-    <link rel="stylesheet" href="{{ get_url(path='css/styles.css', cachebust=true) }}" as="style">
-
-
     {% block links %}{% endblock %}
-    {% block styles %}{% endblock %}
+
+    {% block styles %}
+    <link rel="stylesheet" href="{{ get_url(path='css/bootstrap-5.3.0.opt.css', cachebust=true) }}">
+    <link rel="stylesheet" href="{{ get_url(path='css/styles.css', cachebust=true) }}">
+    {% endblock %}
 
   </head>
 
@@ -171,7 +171,6 @@
 
     <!-- <script src="{{ get_url(path='js/as.js', cachebust=true) }}"></script> -->
 
-    <script src="{{ get_url(path='js/jquery-3.7.0.min.js', cachebust=true) }}"></script>
     <script src="{{ get_url(path='js/bootstrap-5.3.0.bundle.min.js', cachebust=true) }}" defer></script>
 
     <script>
@@ -186,16 +185,20 @@
     </script>
 
     <script>
-      $(function () {
+      document.addEventListener('DOMContentLoaded', function() {
-        $('#modalEnlarged').on('hidden.bs.modal', function (e) {
+        const modal = document.getElementById('modalEnlarged');
-          $('#enlarged').attr('src', '');
+        const enlargedImg = document.getElementById('enlarged');
-        });
 
-        $('[data-popup]').click(function (evt) {
+        modal.addEventListener('hidden.bs.modal', function() {
-          var _self = $(this);
+          enlargedImg.src = '';
-          var _img_enlarged = _self.data('nsrc');
+        });
-          $('#enlarged').attr('src', _img_enlarged);
+        document.querySelectorAll('[data-popup]').forEach(function(element) {
-          $('#modalEnlarged').modal('show');
+          element.addEventListener('click', function() {
+            const imgSrc = this.dataset.nsrc;
+            enlargedImg.src = imgSrc;
+            const bsModal = new bootstrap.Modal(modal);
+            bsModal.show();
+          });
         });
       });
     </script>

templates/page-place-order.html

@@ -2,7 +2,8 @@
 
 
 {% block styles %}
-{{ super() }}
+<link rel="stylesheet" href="{{ get_url(path='css/bootstrap-5.3.0.min.css', cachebust=true) }}">
+<link rel="stylesheet" href="{{ get_url(path='css/styles.css', cachebust=true) }}">
 <link rel="stylesheet" href="{{ get_url(path='css/order-hardware.css', cachebust=true) }}">
 {% endblock %}
 

templates/page.html

@@ -1,6 +1,7 @@
 {% extends 'section.html' %}
 
 {% block styles %}
+{{ super() }}
 <style>
   h5 {
     margin-bottom: 2rem!important;