Merge pull request #765 from OneZoom/webpack-5

NPM upgrade incl. webpack 5
OneZoom · Apr 8, 2024 · b916c72 · b916c72
2 parents 92a7baa + bc56533
commit b916c72
Show file tree

Hide file tree

Showing 17 changed files with 13,955 additions and 19,335 deletions.
diff --git a/.github/workflows/test-client.yml b/.github/workflows/test-client.yml
@@ -26,3 +26,7 @@ jobs:
       - run: npm ci
       - run: npm run build --if-present
       - run: npm test
+      - run: ./node_modules/.bin/grunt compile-js
+      - run: ./node_modules/.bin/grunt compile-js_dev
+      - run: ./node_modules/.bin/grunt css
+      - run: ./node_modules/.bin/grunt compress
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -49,10 +49,9 @@ module.exports = function (grunt) {
         ].join(" && "),
       },
       web2py_start_dev: {
-        cwd: "../../",
+        cwd: "./",
         command: [
-          '( [ -f oz.crt ] || openssl req -newkey rsa:2048 -x509 -days 365 -nodes -keyout oz.key -subj "/CN=dev.onezoom/" -out oz.crt; )',
-          venv_python + ' web2py.py -c oz.crt -k oz.key -p 8000 -a pass',
+          './web2py-run',
         ].join(" && "),
       },
       compile_python: {
@@ -103,15 +102,11 @@ module.exports = function (grunt) {
       },
       compile_js: {
         command: [
-            // Only pass --openssl-legacy-provider if node recognises it (NB: FreeBSD node18 doesn't)
-            'export NODE_OPTIONS="$(node --help | grep -o -- --openssl-legacy-provider || true)"',
             'npm run compile_js',
         ].join(" && "),
       },
       compile_js_dev: {
         command: [
-            // Only pass --openssl-legacy-provider if node recognises it (NB: FreeBSD node18 doesn't)
-            'export NODE_OPTIONS="$(node --help | grep -o -- --openssl-legacy-provider || true)"',
             'npm run compile_js_dev',
         ].join(" && "),
       },

diff --git a/OZprivate/scss/Boot-Sass/oz_partials/_forms.scss b/OZprivate/scss/Boot-Sass/oz_partials/_forms.scss
@@ -594,7 +594,7 @@ input[type="checkbox"] {
   // Reposition the icon because it's now within a grid column and columns have
   // `position: relative;` on them. Also accounts for the grid gutter padding.
   .has-feedback .form-control-feedback {
-    right: floor(($grid-gutter-width / 2));
+    right: floor(calc($grid-gutter-width / 2));
   }
 
   // Form group sizes

diff --git a/OZprivate/scss/Boot-Sass/oz_partials/_navbar.scss b/OZprivate/scss/Boot-Sass/oz_partials/_navbar.scss
@@ -230,7 +230,7 @@
 // the nav the full height of the horizontal nav (above 768px).
 
 .navbar-nav {
-  margin: ($navbar-padding-vertical / 2) (-$navbar-padding-horizontal);
+  margin: calc(($navbar-padding-vertical / 2) - $navbar-padding-horizontal);
 
   > li > a {
     padding-top:    10px;
@@ -347,7 +347,7 @@
     @include navbar-vertical-align($input-height-small);
   }
   &.btn-xs {
-    @include navbar-vertical-align(22);
+    @include navbar-vertical-align(22px);
   }
 }
 

diff --git a/OZprivate/scss/Boot-Sass/oz_partials/_type.scss b/OZprivate/scss/Boot-Sass/oz_partials/_type.scss
@@ -25,7 +25,7 @@ h1, .h1,
 h2, .h2,
 h3, .h3 {
   margin-top: $line-height-computed;
-  margin-bottom: ($line-height-computed / 2);
+  margin-bottom: calc($line-height-computed / 2);
 
   small,
   .small {
@@ -35,8 +35,8 @@ h3, .h3 {
 h4, .h4,
 h5, .h5,
 h6, .h6 {
-  margin-top: ($line-height-computed / 2);
-  margin-bottom: ($line-height-computed / 2);
+  margin-top: calc($line-height-computed / 2);
+  margin-bottom: calc($line-height-computed / 2);
 
   small,
   .small {
@@ -56,7 +56,7 @@ h6, .h6 { font-size: $font-size-h6; }
 // -------------------------
 
 p {
-  margin: 0 0 ($line-height-computed / 2);
+  margin: 0 0 calc($line-height-computed / 2);
 }
 
 .lead {
@@ -77,7 +77,7 @@ p {
 // Ex: (12px small font / 14px base font) * 100% = about 85%
 small,
 .small {
-  font-size: floor((100% * $font-size-small / $font-size-base));
+  font-size: floor(calc(100% * $font-size-small / $font-size-base));
 }
 
 mark,
@@ -136,7 +136,7 @@ mark,
 // -------------------------
 
 .page-header {
-  padding-bottom: (($line-height-computed / 2) - 1);
+  padding-bottom: calc(($line-height-computed / 2) - 1px);
   margin: ($line-height-computed * 2) 0 $line-height-computed;
   border-bottom: 1px solid $page-header-border-color;
 }
@@ -149,7 +149,7 @@ mark,
 ul,
 ol {
   margin-top: 0;
-  margin-bottom: ($line-height-computed / 2);
+  margin-bottom: calc($line-height-computed / 2);
   ul,
   ol {
     margin-bottom: 0;

diff --git a/OZprivate/scss/Boot-Sass/oz_partials/mixins/_grid-framework.scss b/OZprivate/scss/Boot-Sass/oz_partials/mixins/_grid-framework.scss
@@ -13,8 +13,8 @@
     // Prevent columns from collapsing when empty
     min-height: 1px;
     // Inner gutter via padding
-    padding-left:  ceil(($grid-gutter-width / 2));
-    padding-right: floor(($grid-gutter-width / 2));
+    padding-left:  ceil(calc($grid-gutter-width / 2));
+    padding-right: floor(calc($grid-gutter-width / 2));
   }
 }
 
@@ -33,12 +33,12 @@
 @mixin calc-grid-column($index, $class, $type) {
   @if ($type == width) and ($index > 0) {
     .col-#{$class}-#{$index} {
-      width: percentage(($index / $grid-columns));
+      width: percentage(calc($index / $grid-columns));
     }
   }
   @if ($type == push) and ($index > 0) {
     .col-#{$class}-push-#{$index} {
-      left: percentage(($index / $grid-columns));
+      left: percentage(calc($index / $grid-columns));
     }
   }
   @if ($type == push) and ($index == 0) {
@@ -48,7 +48,7 @@
   }
   @if ($type == pull) and ($index > 0) {
     .col-#{$class}-pull-#{$index} {
-      right: percentage(($index / $grid-columns));
+      right: percentage(calc($index / $grid-columns));
     }
   }
   @if ($type == pull) and ($index == 0) {
@@ -58,7 +58,7 @@
   }
   @if ($type == offset) {
     .col-#{$class}-offset-#{$index} {
-      margin-left: percentage(($index / $grid-columns));
+      margin-left: percentage(calc($index / $grid-columns));
     }
   }
 }

diff --git a/OZprivate/scss/Boot-Sass/oz_partials/mixins/_grid.scss b/OZprivate/scss/Boot-Sass/oz_partials/mixins/_grid.scss
@@ -6,35 +6,35 @@
 @mixin container-fixed($gutter: $grid-gutter-width) {
   margin-right: auto;
   margin-left: auto;
-  padding-left:  floor(($gutter / 2));
-  padding-right: ceil(($gutter / 2));
+  padding-left:  floor(calc($gutter / 2));
+  padding-right: ceil(calc($gutter / 2));
   @include clearfix;
 }
 
 // Creates a wrapper for a series of columns
 @mixin make-row($gutter: $grid-gutter-width) {
-  margin-left:  ceil(($gutter / -2));
-  margin-right: floor(($gutter / -2));
+  margin-left:  ceil(calc($gutter / -2));
+  margin-right: floor(calc($gutter / -2));
   @include clearfix;
 }
 
 // Generate the extra small columns
 @mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
   position: relative;
   float: left;
-  width: percentage(($columns / $grid-columns));
+  width: percentage(calc($columns / $grid-columns));
   min-height: 1px;
   padding-left:  ($gutter / 2);
   padding-right: ($gutter / 2);
 }
 @mixin make-xs-column-offset($columns) {
-  margin-left: percentage(($columns / $grid-columns));
+  margin-left: percentage(calc($columns / $grid-columns));
 }
 @mixin make-xs-column-push($columns) {
-  left: percentage(($columns / $grid-columns));
+  left: percentage(calc($columns / $grid-columns));
 }
 @mixin make-xs-column-pull($columns) {
-  right: percentage(($columns / $grid-columns));
+  right: percentage(calc($columns / $grid-columns));
 }
 
 // Generate the small columns
@@ -46,22 +46,22 @@
 
   @media (min-width: $screen-sm-min) {
     float: left;
-    width: percentage(($columns / $grid-columns));
+    width: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-sm-column-offset($columns) {
   @media (min-width: $screen-sm-min) {
-    margin-left: percentage(($columns / $grid-columns));
+    margin-left: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-sm-column-push($columns) {
   @media (min-width: $screen-sm-min) {
-    left: percentage(($columns / $grid-columns));
+    left: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-sm-column-pull($columns) {
   @media (min-width: $screen-sm-min) {
-    right: percentage(($columns / $grid-columns));
+    right: percentage(calc($columns / $grid-columns));
   }
 }
 
@@ -74,22 +74,22 @@
 
   @media (min-width: $screen-md-min) {
     float: left;
-    width: percentage(($columns / $grid-columns));
+    width: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-md-column-offset($columns) {
   @media (min-width: $screen-md-min) {
-    margin-left: percentage(($columns / $grid-columns));
+    margin-left: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-md-column-push($columns) {
   @media (min-width: $screen-md-min) {
-    left: percentage(($columns / $grid-columns));
+    left: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-md-column-pull($columns) {
   @media (min-width: $screen-md-min) {
-    right: percentage(($columns / $grid-columns));
+    right: percentage(calc($columns / $grid-columns));
   }
 }
 
@@ -102,21 +102,21 @@
 
   @media (min-width: $screen-lg-min) {
     float: left;
-    width: percentage(($columns / $grid-columns));
+    width: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-lg-column-offset($columns) {
   @media (min-width: $screen-lg-min) {
-    margin-left: percentage(($columns / $grid-columns));
+    margin-left: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-lg-column-push($columns) {
   @media (min-width: $screen-lg-min) {
-    left: percentage(($columns / $grid-columns));
+    left: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-lg-column-pull($columns) {
   @media (min-width: $screen-lg-min) {
-    right: percentage(($columns / $grid-columns));
+    right: percentage(calc($columns / $grid-columns));
   }
 }
diff --git a/OZprivate/scss/Boot-Sass/oz_partials/mixins/_nav-divider.scss b/OZprivate/scss/Boot-Sass/oz_partials/mixins/_nav-divider.scss
@@ -4,7 +4,7 @@
 
 @mixin nav-divider($color: #e5e5e5) {
   height: 1px;
-  margin: (($line-height-computed / 2) - 1) 0;
+  margin: calc(($line-height-computed / 2) - 1px) 0;
   overflow: hidden;
   background-color: $color;
 }
diff --git a/OZprivate/scss/Boot-Sass/oz_partials/mixins/_nav-vertical-align.scss b/OZprivate/scss/Boot-Sass/oz_partials/mixins/_nav-vertical-align.scss
@@ -4,6 +4,6 @@
 // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
 
 @mixin navbar-vertical-align($element-height) {
-  margin-top: (($navbar-height - $element-height) / 2);
-  margin-bottom: (($navbar-height - $element-height) / 2);
+  margin-top: calc(($navbar-height - $element-height) / 2);
+  margin-bottom: calc(($navbar-height - $element-height) / 2);
 }
diff --git a/OZprivate/scss/_OZ_thumbnails.scss b/OZprivate/scss/_OZ_thumbnails.scss
@@ -7,7 +7,7 @@
 .thumbnail {
   display: block;
   padding: $thumbnail-padding;
-  margin-top: ($line-height-computed / 2);
+  margin-top: calc($line-height-computed / 2);
   margin-bottom: $line-height-computed;
   line-height: $line-height-base;
   background-color: $thumbnail-bg;
@@ -38,11 +38,11 @@ figure {
   .thumbnail {
     border: 0;
     border-radius: 0;
-    margin-bottom: $line-height-computed / 2;
+    margin-bottom: calc($line-height-computed / 2);
   }
   figcaption {
     text-align: center;
-    margin-bottom: $line-height-computed / 2;
+    margin-bottom: calc($line-height-computed / 2);
   }
 }
 

diff --git a/OZprivate/scss/_OZ_variables.scss b/OZprivate/scss/_OZ_variables.scss
@@ -391,8 +391,8 @@ $container-lg:                 $container-large-desktop !default;
 $navbar-height:                    50px !default;
 $navbar-margin-bottom:             $line-height-computed !default;
 $navbar-border-radius:             $border-radius-base !default;
-$navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;
-$navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2) !default;
+$navbar-padding-horizontal:        floor(calc($grid-gutter-width / 2)) !default;
+$navbar-padding-vertical:          calc(($navbar-height - $line-height-computed) / 2) !default;
 $navbar-collapse-max-height:       340px !default;
 
 $navbar-default-color:             #777 !default;

diff --git a/README.markdown b/README.markdown
@@ -35,7 +35,7 @@ There are two ways in which you can install OneZoom on a personal computer: full
 
 ## Requirements and packages
 
-For any installation, OneZoom requires node & python (3.10).
+For any installation, OneZoom requires node (18+) & python (3.10).
 
 #### Debian/Ubuntu
 
@@ -60,7 +60,6 @@ apt install lsb-release
 wget https://dev.mysql.com/get/mysql-apt-config_0.8.29-1_all.deb
 dpkg -i mysql-apt-config_0.8.29-1_all.deb
 apt update && apt install mysql-server
-# NB: Select "Use Legacy Authentication Method (Retain MySQL 5.x Compatibility)"
 ```
 
 #### Windows
@@ -90,7 +89,7 @@ chown deploy:staff ${WEB2PY_PATH}
 git clone https://github.com/web2py/web2py ${WEB2PY_PATH} --branch v2.27.1
 git clone https://github.com/OneZoom/OZtree.git ${WEB2PY_PATH}/applications/OZtree --branch production
 cd ${WEB2PY_PATH}/applications/OZtree
-npm ci --legacy-peer-deps
+npm ci
 ```
 
 Next, ``cp private/appconfig.ini.example private/appconfig.ini`` and edit to match your needs, taking care to:
@@ -197,7 +196,7 @@ installing SQL Workbench on Windows works great to connect to the Ubuntu MySQL i
 On the OneZoom main site, web2py is run using a combination of nginx and uwsgi. This is complete overkill if you just want to run a local copy of OneZoom for testing purposes. You can simply run a [temporary and basic web2py server using Python 3](http://www.web2py.com/books/default/chapter/29/03/overview#Startup). The simplest is to open a command-line prompt in the root web2py folder, and run the following (assuming the command `python3` is linked to something like Python 3.7)
 
 ```
-./node_modules/.bin/grunt start-dev
+./web2py-run
 ```
 
 When web2py is run, it will print instructions telling how to shut down the web2py server. For example, on Windows you might use `taskkill /f /pid XXXX`, where `XXXX` is the process id.

diff --git a/install-nginx.sh b/install-nginx.sh
@@ -207,6 +207,18 @@ server {
         uwsgi_pass uwsgi_${WEB2PY_NAME};
         include uwsgi_params;
     }
+
+    # Switch to a dev server by renaming this to "location /" and similarly with the above section
+    location /devserver {
+        proxy_pass       https://127.0.0.1:8000;
+        proxy_ssl_verify off;
+        proxy_set_header Host            \$host;
+        proxy_set_header X-Real-IP       \$remote_addr;
+        proxy_set_header X-Forwarded-for \$remote_addr;
+        proxy_set_header X-Forwarded-Proto \$scheme;
+        proxy_set_header Upgrade \$http_upgrade;
+        proxy_set_header Connection \$http_connection;
+    }
 }
 EOF