release: v3.0 with Squoosh, imagemin and several other changes prepared

.github/dependabot.yml

@@ -11,12 +11,6 @@ updates:
     schedule:
       interval: "daily"
 
-  # Maintain dependencies for bundler
-  - package-ecosystem: "bundler"
-    directory: "/"
-    schedule:
-      interval: "daily"
-
   # Maintain dependencies for npm
   - package-ecosystem: "npm" # See documentation for possible values
     directory: "/" # Location of package manifests

_config.yml

@@ -29,17 +29,13 @@ google_site_verification: # your meta tag (no quotation marks)
 destination: docs
 keep_files: ['assets']
 exclude: [
-  'src',
-  'node_modules',
-  'Gemfile',
-  'Gemfile.lock',
-  'index.js',
-  'copyfiles.js',
-  'gulpfile.js',
-  'webpack.config.js',
   'README.md',
-  'yarn.lock',
-  'package.json',
+  'copyfiles.mjs',
+  'index.js',
+  'node_modules',
   'package-lock.json',
-  '.ncurc.json'
+  'package.json',
+  'src',
+  'watcher.config.mjs',
+  'webpack.config.js',
 ]

_includes/footer.html

@@ -1,6 +1,6 @@
 <footer class="footer">
   <p>&copy; {{site.user_name}}</p>
-  <p>Built with Webpack, Jekyll, Gulp and <i class="fas fa-heart love"></i> by <a data-press-delay href="https://github.com/mythemeway" title="Come over">MTW</a>.<br><a data-press-delay href="https://sitdisch.github.io#mythemeway" title="Go there">Source of this demo</a>.</p>
+  <p>Built with Webpack, Jekyll and <i class="fas fa-heart love"></i> by <a data-press-delay href="https://github.com/mythemeway" title="Come over">MTW</a>.<br><a data-press-delay href="https://sitdisch.github.io#mythemeway" title="Go there">Source of this demo</a>.</p>
 </footer>
 
 <!-- INCLUDE THE NECESSARY HTML FILES FOR ALL LAYOUTS -->  

copyfiles.js → copyfiles.mjs

@@ -1,59 +1,46 @@
 /*!
- * copyfiles.js
+ * copyfiles.mjs
  * 
  * Author: sitdisch
  * Source: https://sitdisch.github.io/#mythemeway
  * License: MIT
- * Copyright (c) 2020 sitdisch
+ * Copyright (c) 2021 sitdisch
  *
  */
 
-const fs = require('fs-extra');
+import * as fs from 'fs-extra';
 
 const copyfiles = [
   {
-    name: 'Devicon',
     source: './node_modules/devicon',
     files: ['devicon.min.css', 'LICENSE', 'fonts'],
     target: './docs/assets/lib/devicon'
   },
   {
-    name: 'Fontawesome',
     source: './node_modules/@fortawesome/fontawesome-free',
     files: ['LICENSE.txt', 'css/all.min.css', 'css/v4-shims.min.css', 'webfonts'],
     target: './docs/assets/lib/fontawesome'
   },
   {
-    name: 'Google-Webfonts',
     source: './src/lib/google-webfonts',
     files: ['font-rubik.css', 'font-files'],
     target: './docs/assets/lib/google-webfonts'
   },
   {
-    name: 'Jquery',
     source: './node_modules/jquery',
     files: ['/dist/jquery.min.js', 'LICENSE.txt'],
     target: './docs/assets/lib/jquery'
   },
   {
-    name: 'Bootstrap',
     source: './node_modules/bootstrap/',
     files: ['/dist/js/bootstrap.bundle.min.js', '/dist/js/bootstrap.bundle.min.js.map', 'LICENSE'],
     target: './docs/assets/lib/bootstrap'
-  },
+  }
 ];
 
 copyfiles.forEach(copyfile => {
-  var log = false;
   copyfile.files.forEach(file => {
-    try {
-      fs.copySync(`${copyfile.source}/${file}`, `${copyfile.target}/${file}`, { overwrite: false, errorOnExist: true });
-      log = true;
-    } catch {}
+    fs.copy(`${copyfile.source}/${file}`, `${copyfile.target}/${file}`)
+      .catch(err => console.error(err))
   });
-  if (log === true) {
-    console.log('[\x1b[90mfs-extra\x1b[0m]:', copyfile.name, '\x1b[1;92m[copied]\x1b[0m');
-  }
 });
-
-console.log("[\x1b[90mfs-extra\x1b[0m]: Finished `\x1b[36mfs-extra\x1b[0m`");

index.js

@@ -1,27 +1,6 @@
 // MISSING LICENSES IN THE WEBPACK BUNDLE
 /*!  @preserve canvas-particle-network Copyright (c) 2015 Julian Laval | MIT License */
 
-// IMPORT YOUR FILES OF THE IMG DIRECTORY
-import './src/img/Project1.jpg';
-import './src/img/Project2.jpg';
-import './src/img/User_picture.png';
-import './src/img/particle.png';
-import './src/img/sphere-purp.png';
-import './src/img/android-chrome-512x512.png';
-import './src/img/android-chrome-256x256.png';
-import './src/img/apple-touch-icon.png';
-import './src/img/android-chrome-192x192.png';
-import './src/img/mstile-150x150.png';
-import './src/img/480px-Cyclohexane_simple.svg.png';
-import './src/img/favicon.ico';
-import './src/img/favicon-48x48.png';
-import './src/img/favicon-32x32.png';
-import './src/img/favicon-16x16.png';
-import './src/img/safari-pinned-tab.svg';
-import './src/img/osafari-pinned-tab.svg';
-import './src/img/manifest.json';
-import './src/img/browserconfig.xml';
-
 // 
 // IMPORT YOUR FILES OF THE JS DIRECTORY
 // 
@@ -36,8 +15,8 @@ document.addEventListener("DOMContentLoaded",
     const scroller = new SweetScroll({
       easing: "easeInCirc",
       stopPropagation: false,
-      before: () => { setTimeout(function (){document.getElementById('navbar').setAttribute('data-hide','true')}, 300); },
-      complete: () => { setTimeout(function (){document.getElementById('navbar').setAttribute('data-hide','false')}, 100); }
+      before: () => { setTimeout( () => {document.getElementById('navbar').setAttribute('data-hide','true')}, 300); },
+      complete: () => { setTimeout( () => {document.getElementById('navbar').setAttribute('data-hide','false')}, 100); }
     });
 
     var canvas = new ParticleNetwork(

package.json

@@ -1,7 +1,7 @@
 {
   "name": "Dark-Particle",
   "author": "Sitdisch",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Package of Dark-Particle",
   "repository": {
     "type": "git",
@@ -10,55 +10,52 @@
   "license": "MIT",
   "scripts": {
     "start": "npm run -s start:log && nodemon",
-    "start:log": "node -e 'console.log(\"[\\x1b[90mnodemon\\x1b[0m]: Starting `\\x1b[36mwatch\\x1b[0m` of \\x1b[35mwebpack.config.js\\x1b[0m and \\x1b[35mgulpfile.js\\x1b[0m\\n[\\x1b[90mnodemon\\x1b[0m]: Starting `\\x1b[36mwebpack-dev-server\\x1b[0m`...\")'",
+    "start:log": "node -e 'console.log(\"[\\x1b[90mnodemon\\x1b[0m]: Starting `\\x1b[36mwatch\\x1b[0m` of \\x1b[35mwebpack.config.js\\x1b[0m, \\x1b[35mpackage.json\\x1b[0m and \\x1b[35mwatcher.config.mjs\\x1b[0m...\\n[\\x1b[90mnodemon\\x1b[0m]: Starting `\\x1b[36mwebpack-dev-server\\x1b[0m`...\")'",
     "build": "npm run -s build:cmd",
-    "build:cmd": "(npm run -s build:log:webp) && (./node_modules/.bin/webpack --mode=production) && (npm run -s build:log:jekyll) && (bundle exec jekyll build) && (npm run -s build:log:htmlminifier) && (npm run -s build:htmlminifier) && (npm run -s build:log:finish)",
+    "build:cmd": "(npm run -s build:log:webp) && (./node_modules/.bin/webpack --mode=production) && (npm run -s build:log:htmlminifier) && (npm run -s build:htmlminifier) && (npm run -s build:log:finish)",
     "build:log:webp": "node -e 'console.log(\"[\\x1b[90mwebpack\\x1b[0m]: Starting `\\x1b[36mproduction-mode\\x1b[0m`...\")'",
-    "build:log:jekyll": "node -e 'console.log(\"[\\x1b[90mwebpack\\x1b[0m]: Finished `\\x1b[36mproduction-mode\\x1b[0m`\\n[\\x1b[90mjekyll\\x1b[0m]: Starting `\\x1b[36mbuild-process\\x1b[0m`...\")'",
-    "build:log:htmlminifier": "node -e 'console.log(\"[\\x1b[90mjekyll\\x1b[0m]: Finished `\\x1b[36mbuild-process\\x1b[0m`\\n[\\x1b[90mHTMLMinifier\\x1b[0m]: Starting `\\x1b[36mminifying-process\\x1b[0m`...\")'",
+    "build:log:htmlminifier": "node -e 'console.log(\"[\\x1b[90mwebpack\\x1b[0m]: `\\x1b[36mproduction-mode\\x1b[0m` \\x1b[1;32m[finished]\\x1b[0m\\n[\\x1b[90mHTMLMinifier\\x1b[0m]: Starting `\\x1b[36mminifying-process\\x1b[0m`...\")'",
     "build:htmlminifier": "./node_modules/html-minifier-terser/cli.js --input-dir ./docs --output-dir ./docs --file-ext html --remove-comments --collapse-whitespace --conservative-collapse --remove-optional-tags --remove-redundant-attributes --remove-script-type-attributes --minify-css true --minify-js true --collapse-boolean-attributes",
-    "build:log:finish": "node -e 'console.log(\"[\\x1b[90mHTMLMinifier\\x1b[0m]: Finished `\\x1b[36mminifying-process\\x1b[0m`\")'"
+    "build:log:finish": "node -e 'console.log(\"[\\x1b[90mHTMLMinifier\\x1b[0m]: `\\x1b[36mminifying-process\\x1b[0m` \\x1b[1;32m[finished]\\x1b[0m\")'"
   },
   "nodemonConfig": {
     "quiet": true,
     "legacyWatch": true,
     "exec": "./node_modules/.bin/webpack serve --mode=development",
     "watch": [
       "webpack.config.js",
-      "gulpfile.js"
+      "package.json",
+      "watcher.config.mjs"
     ],
     "events": {
       "restart": "node -e 'console.log(\"[\\x1b[90mnodemon\\x1b[0m]: Restarting `\\x1b[36mwebpack-dev-server\\x1b[0m`...\")'"
     }
   },
   "dependencies": {
-    "@babel/core": "7.15.5",
-    "@babel/preset-env": "7.15.6",
+    "@babel/core": "7.15.8",
+    "@babel/preset-env": "7.15.8",
+    "@squoosh/cli": "0.7.2",
+    "chokidar": "3.5.2",
     "@fortawesome/fontawesome-free": "5.15.4",
     "babel-loader": "8.2.2",
-    "bootstrap": "5.1.1",
+    "bootstrap": "5.1.2",
     "canvas-particle-network": "1.5.0",
-    "css-loader": "6.2.0",
-    "css-minimizer-webpack-plugin": "3.0.2",
+    "css-loader": "6.3.0",
+    "css-minimizer-webpack-plugin": "3.1.1",
     "devicon": "2.14.0",
     "fs-extra": "10.0.0",
-    "gulp": "4.0.2",
     "html-minifier-terser": "6.0.2",
     "ignore-emit-webpack-plugin": "2.0.6",
-    "image-minimizer-webpack-plugin": "2.2.0",
-    "imagemin-gifsicle": "7.0.0",
-    "imagemin-mozjpeg": "9.0.0",
-    "imagemin-pngquant": "9.0.2",
-    "imagemin-svgo": "9.0.0",
+    "imagemin": "8.0.1",
+    "imagemin-svgo": "10.0.0",
     "jquery": "3.6.0",
-    "mini-css-extract-plugin": "2.3.0",
-    "nodemon": "2.0.12",
-    "sass": "1.41.0",
+    "mini-css-extract-plugin": "2.4.2",
+    "nodemon": "2.0.13",
+    "sass": "1.42.1",
     "sass-loader": "12.1.0",
-    "shelljs": "0.8.4",
     "sweet-scroll": "4.0.0",
-    "webpack": "5.53.0",
-    "webpack-cli": "4.8.0",
-    "webpack-dev-server": "4.2.1"
+    "webpack": "5.58.0",
+    "webpack-cli": "4.9.0",
+    "webpack-dev-server": "4.3.1"
   }
 }

src/js/main.js

@@ -52,7 +52,7 @@ if ( window.matchMedia("(pointer: coarse)").matches )  {
         var pressSimulationTime = 175;
         // adaption after resize only for notouch devices
         window.onresize = function () {
-                setTimeout(function () { location.reload() }, 100);
+                setTimeout( () => { location.reload() }, 100);
         }
 }
 
@@ -65,7 +65,7 @@ function setupHashPage() {
         window.scrollBy(0, hashOffset);
         var hrefReplaceHash = location.href.replace(location.hash,"");
         history.pushState({},'reset_hash', hrefReplaceHash);
-        setTimeout(function (){nav.setAttribute('data-hide','false')}, 700);
+        setTimeout( () => {nav.setAttribute('data-hide','false')}, 700);
 };
 
 function disNavbar() {
@@ -81,7 +81,7 @@ function disNavbar() {
 
 window.pressSimulation = function(element,time) {
         element.classList.add("pressed");
-        setTimeout(function () {
+        setTimeout( () => {
                 element.classList.remove("pressed");
         }, time);
 }
@@ -90,7 +90,7 @@ function pressDelay(ev) {
         ev.preventDefault();
         ev.stopImmediatePropagation();
         ev.stopPropagation();
-        setTimeout( function() {
+        setTimeout(  () => {
                 ev.target.click();
         }, 400);
         firstIteration = "0";
@@ -110,7 +110,7 @@ window.onload = function () {
         if ( location.hash ) {
                 setTimeout(setupHashPage, 100);
         } else {
-                setTimeout(function (){nav.setAttribute('data-hide','false')}, 500);
+                setTimeout( () => {nav.setAttribute('data-hide','false')}, 500);
         }
 };