Modernize build system and fix vulnerabilities

- Update Node.js dependencies to latest secure versions
- Fix all 40 security vulnerabilities (0 vulnerabilities remaining)
- Update Gulp to v5.0.1 and fix deprecated patterns
- Replace deprecated node-sass with modern sass (dart-sass)
- Update browser-sync to v3.0.4 for security fixes
- Update Foundation Sites to v6.9.0 and FontAwesome to v6.7.2
- Fix deprecated Sass functions (darken, lighten, scale-color)
- Add modern @use statements for sass:math and sass:color
- Update Travis CI configuration for Node.js 18
- Suppress Sass deprecation warnings from dependencies
- Replace deprecated request package with axios
- Remove run-sequence dependency (built into Gulp 4+)

Build system now works with modern tools and zero vulnerabilities.

Author: Dale Kunce

.travis.yml

@@ -1,26 +1,25 @@
 language: ruby
-rvm:
-  - 3.3
-env:uage: ruby
 rvm:
   - 3.3.5
 env:
   global:
+  - TRAVIS_NODE_VERSION=18
   - GH_REF=github.com/MissingMaps/missingmaps.github.io
   - DEPLOY_BRANCH=publish
   - secure: CWoizTEORW1cbd9e9wtebUIiTsztfRgS5wTRTTkRl1NJBbgK5KElLedcQxoIi3jU+rdkZCSyi5aNe6U4dAkUf1PvPlO2WCC6qOxZGdeuhXGY2SEQvpsW+VmTVa5IjE/EN2/X1Vpg5P092xEu7+n7W90d8EKlUaUIWXEPGz5S2fMIszdsDbs5SxZ5k4Bz1mMuB4Kr6w7sbVuEFIUaQII7vg63z6EjVu1CDpUoqc9nLYD+deScWLD9fCr5s1wxre36/tg4k52WvhiPddwFJAdpns3peTQxfR6Wgoc4oDch92lFG59zweDcBDRkbI/kG6yxc3m2BXges9GZztEh0c5BfenEXwqJI0gHA3cvuzcp86zTposQeaFOk3BaRzEULitBFyAP6OTIKp4oaS+fbXGGtzDgz47s4SAGwEJIOQHkRTbGCq/OlnkbPB2N+X+tMYXbeO9n4p3OGuLRgvpILx5GAO7sEUKp7cc4IfcoRdSCxbUWO/M7dcn1ZKK+Yc9rYcyaKlniimBchBOlCqTS9SZ9kxmko1pZKpvy18dPzrgkI2MVX7TKbms0ZjixV/9el7Ir/HIl+Sz3akJ7YZi8q1mQ56cTEiPg7ZC37XC5uxJylA4uwQy4jK3macvfmxwhXd+EZDxl6v0NreZNtmwhphPWIELabmR6/wrd4xhqNaup1Mk=
-# cache:
-#   directories:
-#   - node_modules
+cache:
+  directories:
+  - node_modules
 before_install:
   - chmod +x ./.build_scripts/deploy.sh
 before_script:
   - . $HOME/.nvm/nvm.sh
   - nvm install $TRAVIS_NODE_VERSION
   - nvm use $TRAVIS_NODE_VERSION
-    - npm install -g gulp-cli
+  - npm install -g gulp-cli
   - gem install bundler -v 2.6.9
   - bundle install
+  - npm install
 script: gulp prod
 after_success:
   - "./.build_scripts/deploy.sh"

_config.yml

@@ -16,9 +16,6 @@ baseurl: ""
 
 permalink: pretty
 
-collections:
-  - events
-
 # locale settings
 default_locale:     "en"
 authorized_locales: ["cs", "en", "es", "fr"]

app/assets/styles/_base.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // IE < 11
 // Don't delete.
 .lt-ie10 {
@@ -19,7 +21,7 @@
 
 /*----------------------------------------------*/
 /*Variables*/
-/*----------------------------------------------*/
+/*------------------------------------------  color: color.adjust($mmGreen, $lightness: 10%);---*/
 
 $mmred: #e23d3d;
 $mmgreen: #8BBF3F;
@@ -71,8 +73,8 @@ $ButtonColor: $DataColor;
 /*----------------------------------------------*/
 $text-color: $darkgrey;
 $border-color: $darkgrey;
-$border-color-darken: darken($border-color, 5%);
-$border-color-lighten: lighten($border-color, 5%);
+$border-color-darken: color.adjust($border-color, $lightness: -5%);
+$border-color-lighten: color.adjust($border-color, $lightness: 5%);
 
 /*----------------------------------------------*/
 /*Fixing Default CSS*/
@@ -113,11 +115,11 @@ body{
 }
 
 ::-moz-selection { /* Code for Firefox */
-    background: desaturate(lighten($mmYello, 24), 20);
+    background: desaturate(color.adjust($mmYello, $lightness: 24%), 20%);
 }
 
 ::selection {
-    background: desaturate(lighten($mmYello, 24), 20);
+    background: desaturate(color.adjust($mmYello, $lightness: 24%), 20%);
 }
 
 .centerme{

app/assets/styles/_settings.scss

@@ -1,3 +1,6 @@
+@use "sass:color";
+@use "sass:math";
+
 //  Foundation for Sites Settings
 //  -----------------------------
 //
@@ -8,6 +11,7 @@
 //   3. The Grid
 //   4. Base Typography
 //   5. Typography Helpers
+
 //   6. Abide
 //   7. Accordion
 //   8. Accordion Menu
@@ -168,7 +172,7 @@ $code-background: $light-gray;
 $code-border: 1px solid $medium-gray;
 $code-padding: rem-calc(2 5 1);
 $anchor-color: $primary-color;
-$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
+$anchor-color-hover: color.scale($anchor-color, $lightness: -14%);
 $anchor-text-decoration: none;
 $anchor-text-decoration-hover: none;
 $hr-width: $global-width;
@@ -283,7 +287,7 @@ $button-padding: 0.85em 1em;
 $button-margin: 0 0 $global-margin 0;
 $button-fill: solid;
 $button-background: $primary-color;
-$button-background-hover: scale-color($button-background, $lightness: -15%);
+$button-background-hover: color.scale($button-background, $lightness: -15%);
 $button-color: $white;
 $button-color-alt: $black;
 $button-radius: $global-radius;
@@ -775,15 +779,15 @@ $table-color-scale: 5%;
 $table-border: 1px solid smart-scale($table-background, $table-color-scale);
 $table-padding: rem-calc(8 10 10);
 $table-hover-scale: 2%;
-$table-row-hover: darken($table-background, $table-hover-scale);
-$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
+$table-row-hover: color.adjust($table-background, $lightness: -$table-hover-scale);
+$table-row-stripe-hover: color.adjust($table-background, $lightness: -($table-color-scale + $table-hover-scale));
 $table-is-striped: true;
 $table-striped-background: smart-scale($table-background, $table-color-scale);
 $table-stripe: even;
 $table-head-background: smart-scale($table-background, math.div($table-color-scale, 2));
-$table-head-row-hover: darken($table-head-background, $table-hover-scale);
+$table-head-row-hover: color.adjust($table-head-background, $lightness: -$table-hover-scale);
 $table-foot-background: smart-scale($table-background, $table-color-scale);
-$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
+$table-foot-row-hover: color.adjust($table-foot-background, $lightness: -$table-hover-scale);
 $table-head-font-color: $body-font-color;
 $table-foot-font-color: $body-font-color;
 $show-header-for-stacked: false;

gulpfile.js

@@ -3,7 +3,7 @@ const gulp = require('gulp');
 const autoprefixer = require('gulp-autoprefixer');
 const browserSync = require('browser-sync');
 const cleaner = require('gulp-clean');
-const concat = require('gulp-concat').default || require('gulp-concat');
+const concat = require('gulp-concat');
 const cp = require('child_process');
 const fs = require('fs');
 const git = require('gulp-git');
@@ -13,8 +13,8 @@ const plumber = require('gulp-plumber');
 const axios = require('axios');
 const sass = require('gulp-sass')(require('sass'));
 const sourcemaps = require('gulp-sourcemaps');
-const uglify = require('gulp-uglify').default || require('gulp-uglify');
-const zip = require('gulp-zip').default;
+const uglify = require('gulp-uglify');
+const zip = require('gulp-zip');
 
 async function grabEvents() {
   const url = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSENK52p0o0dEpEfEH-qvloWEkILbcf-X8aSWdStVHKZuAF-G8-80NsRcouqBlB3DSsqerzVvPmnxDu/pub?gid=469941282&single=true&output=csv';
@@ -74,7 +74,8 @@ function styles() {
     errLogToConsole: true,
     outputStyle: 'expanded',
     quietDeps: true, // Suppress deprecation warnings from dependencies like Foundation Sites
-    verbose: false   // Reduce verbose output
+    verbose: false,  // Reduce verbose output
+    silenceDeprecations: ['legacy-js-api', 'import', 'global-builtin', 'color-functions', 'slash-div']
   };
   return gulp.src(sassInput)
     .pipe(plumber())