release: v4.0 with easily exchangeable WebGl canvas header and severa…

…l other changes prepared

.gitignore

@@ -1,3 +1,4 @@
+shaders.glslx.min.js
 .jekyll-cache
 .ncurc.json
 .sass-cache

LICENSE.txt

@@ -1,7 +1,7 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 Nathan Randecker
-Copyright (c) 2020 Sitdisch
+Copyright © 2016 Nathan Randecker
+Copyright © 2020 Sitdisch
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

_config.yml

@@ -30,6 +30,8 @@ destination: docs
 keep_files: ['assets']
 exclude: [
   'README.md',
+  'canvas.config.js',
+  'canvas.nodemon.json',
   'copyfiles.mjs',
   'index.js',
   'node_modules',

_includes/footer.html

@@ -9,4 +9,5 @@
 <!-- INCLUDE THE NECESSARY JS FILES FOR ALL LAYOUTS -->  
 <script src="{{ '/assets/lib_c/jquery/dist/jquery.min.js' | prepend: site.baseurl }}" crossorigin="anonymous"></script>
 <script src="{{ '/assets/js/main.bundle.min.js' | prepend: site.baseurl }}" crossorigin="anonymous"></script>
+<script src="{{ '/assets/js/canvas.bundle.min.js' | prepend: site.baseurl }}" crossorigin="anonymous"></script>
 <script src="{{ '/assets/lib_c/bootstrap/dist/js/bootstrap.bundle.min.js' | prepend: site.baseurl }}" crossorigin="anonymous"></script>

_includes/head.html

@@ -6,7 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta charset="utf-8">
   {% if site.google_site_verification %}<meta name="google-site-verification" content="{{ site.google_site_verification }}">{% endif %}
-  <meta name="viewport" content="width=device-width, initial-scale=1"> 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
   <link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/img/icon/apple-touch-icon.png' | prepend: site.baseurl }}">
   <link rel="icon" type="image/png" sizes="48x48" href="{{ '/assets/img/icon/favicon-48x48.png' | prepend: site.baseurl }}">
   <link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/img/icon/favicon-32x32.png' | prepend: site.baseurl }}">

_includes/header.html

@@ -1,12 +1,7 @@
-<div id="particles-js">
-  <ul id="hex-header" class="clear">{% for i in (1..48) %}
-    <li class="hex-header-li" id="#hex{{ forloop.index }}">
-      <div class="hex-header-div">
-        <span class="hex-header-link" href="#hex{{ forloop.index }}"></span>
-      </div>
-    </li>{% endfor %}
-  </ul>
-  <div class="header">
+<div id="header">
+  <span id="header-canvas-overshadow"></span>
+  <canvas id="header-canvas"></canvas>
+  <div class="header-items">
     <h1 class="site-title">{{site.title}}</h1>
     <img src="{{ site.user_picture | prepend: site.baseurl }}" alt="{{ site.user_name | prepend: site.baseurl }}" ></img>
     <span class="user-description">{{site.user_name}}</span>
@@ -17,9 +12,9 @@ <h1 class="site-title">{{site.title}}</h1>
       {% include follow-banner.html %}
     </div>
     <ul class="header-links">
-      {% assign header = " header-link" %}
       {% include navbar-link-banner.html %}
     </ul>
   </div>
   <a class="down" href="#about" title="Go down" data-scroll data-scroll-options='{"offset": -15}'><i class="icon fa fa-angle-double-down" aria-hidden="true"></i></a>
 </div>
+<span id="header-end"></span>

_includes/navbar-link-banner.html

@@ -1,14 +1,14 @@
 <li><a class="nav-link link navbar-link-home navbar-click-stay" data-press-delay title="Go there" href="{{ '/' | prepend: site.baseurl }}" >Home</a></li>
 <li><span class="bar navbar-link-home">|</span></li>
 <li><div class="dropdown-divider navbar-link-home"></div></li>
-<li><a class="nav-link link navbar-link-about{{ header }}" title="Go there" href='#about' data-hash-prefix="{{ '/' | prepend: site.baseurl }}" data-scroll data-scroll-options='{"offset": -15}'>Expertise</a></li>
+<li><a class="nav-link link navbar-link-about" title="Go there" href='#about' data-hash-prefix="{{ '/' | prepend: site.baseurl }}" data-scroll data-scroll-options='{"offset": -15}'>Expertise</a></li>
 <li><div class="dropdown-divider"></div></li>
 <li><span class="bar">|</span></li>
 <li class="nav-item dropdown">
-  <a class="btn btn-drop navbar-link-projects{{ header }}" role="button" title="Go to this overview" href="#projects" data-hash-prefix="{{ '/' | prepend: site.baseurl }}" data-scroll data-scroll-options='{"offset": -15}'>Projects</a>
+  <a class="btn btn-drop navbar-link-projects" role="button" title="Go to this overview" href="#projects" data-hash-prefix="{{ '/' | prepend: site.baseurl }}" data-scroll data-scroll-options='{"offset": -15}'>Projects</a>
   <div class="btn btn-arrow dropdown-toggle dropdown-toggle-split navbar-arrow-projects navbar-click-stay" role="button" title="Toggle Dropdown" data-bs-display='static' data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></div>
   <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-    <a class="dropdown-item navbar-link-project-1{{ header }}" title="Go there" href="#project-1" data-hash-prefix="{{ '/projects/2020/10/31/project-1.html' | prepend: site.baseurl }}" data-scroll data-scroll-options='{"offset": -45}'>- Project 1</a>
-    <a class="dropdown-item navbar-link-project-2{{ header }}" title="Go there" href="#project-2" data-hash-prefix="{{ '/projects/2020/10/31/project-2.html' | prepend: site.baseurl }}" data-scroll data-scroll-options='{"offset": -45}'>- Project 2</a>
+    <a class="dropdown-item navbar-link-project-1" title="Go there" href="#project-1" data-hash-prefix="{{ '/projects/2020/10/31/project-1.html' | prepend: site.baseurl }}" data-scroll data-scroll-options='{"offset": -45}'>- Project 1</a>
+    <a class="dropdown-item navbar-link-project-2" title="Go there" href="#project-2" data-hash-prefix="{{ '/projects/2020/10/31/project-2.html' | prepend: site.baseurl }}" data-scroll data-scroll-options='{"offset": -45}'>- Project 2</a>
   </div>
 </li>

_includes/navbar.html

@@ -7,7 +7,6 @@
   <a class="nav-link float-end up-arrow navbar-click-stay" href="#" data-scroll title="Up to the top"><i class="icon fa fa-arrow-circle-up press-simulation-parent navbar-click-stay" title="Up to the top"></i></a>
   <div class="collapse navbar-collapse" id="navbarSupportedContent">
     <ul class="navbar-nav float-start">
-      {% assign header = "" %}
       {% include navbar-link-banner.html %}
     </ul>
   </div>

_includes/short-header.html

@@ -1,22 +1,17 @@
-<div id="particles-js" class="short-particles">
-  <ul id="short-hex-header" class="clear">{% for i in (1..18) %}
-    <li class="hex-header-li" id="#hex{{ forloop.index }}">
-      <div class="hex-header-div">
-        <span class="hex-header-link" href="#hex{{ forloop.index }}"></span>
-      </div>
-    </li>{% endfor %}
-  </ul>
-  <div class="short-header">
+<div id="header" class="short">
+  <span id="header-canvas-overshadow"></span>
+  <canvas id="header-canvas"></canvas>
+  <div class="header-items">
     <a title="Go Home" href="{{ '/' | prepend: site.baseurl }}">
       <img data-press-delay src="{{ site.user_picture | prepend: site.baseurl }}" alt="{{ site.user_name | prepend: site.baseurl }}" ></img>
     </a>
     <h1 class="site-title">{{site.user_name}}</h1>
-    <div class="short-header-icons">
+    <div class="header-icons">
       {% include follow-banner.html %}
     </div>
-    <ul class="short-header-links">
-      {% assign header = " header-link" %}
+    <ul class="header-links">
       {% include navbar-link-banner.html %}
     </ul>
   </div>
 </div>
+<span id="header-end"></span>

_posts/2020-10-31-project-1.md

@@ -6,7 +6,7 @@ categories: projects
 ---
 
 # <span class="scroll-spy" id="project-1"></span>Project 1: First Example
-<small><small><small>&nbsp;&nbsp;***Published: {{page.date | date: '%B %d, %Y'}}***</small></small></small>
+<small><small><small>&nbsp;&nbsp;***Published: {{page.date | date: '%b %d, %Y'}}***</small></small></small>
 
 ## Explanation
 first description

_posts/2020-10-31-project-2.md

@@ -6,7 +6,7 @@ categories: projects
 ---
 
 # <span class="scroll-spy" id="project-2"></span>Project 2: Second Example
-<small><small><small>&nbsp;&nbsp;***Published: {{page.date | date: '%B %d, %Y'}}***</small></small></small>
+<small><small><small>&nbsp;&nbsp;***Published: {{page.date | date: '%b %d, %Y'}}***</small></small></small>
 
 ## Explanation
 first description

canvas.config.js

@@ -0,0 +1,84 @@
+/*! LIGHT-PARTICLE: CANVAS.CONFIG.JS
+ * 
+ * Author: sitdisch
+ * Source: https://sitdisch.github.io/#mythemeway
+ * License: MIT
+ * Copyright © 2021 sitdisch
+ */
+
+// 
+// SECTION: PATH TO CANVAS (p2c) IN USE
+// 
+
+// const p2c = './src/canvas/mtw-canvas-disks';
+const p2c = './src/canvas/mtw-canvas-malachite';
+
+// 
+// SECTION: OTHER CONST, VARS & FUNCTIONS
+// 
+
+const webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
+const prepr = require('prepr');
+const { emptyDirSync, remove, readFileSync, writeFileSync } = require('fs-extra');
+const { spawn, spawnSync } = require('child_process');
+const { resolve } = require('path');
+const { watch } = require('chokidar');
+
+function glsl(devMode) {
+  writeFileSync(`${p2c}/shader.prepr.glslx`, prepr(readFileSync(`${p2c}/shaders.glslx`, "utf8")));
+  var glslxCmd = ['glslx', `${p2c}/shader.prepr.glslx`, `--output=${p2c}/shaders.glslx.min.js`, '--format=js' ];
+  if (devMode) {
+    glslxCmd.push('--pretty-print', '--disable-rewriting', '--renaming=none');
+  }
+  const cp = spawnSync('npx', glslxCmd, {stdio: 'inherit'});
+  if (cp.status != 0) {
+    console.log("\x1b[1;31m[ERROR]\x1b[0m => \x1b[0m[\x1b[90mwebpack\x1b[0m]: `\x1b[36mcanvas-glsl-preprocess\x1b[0m` \x1b[1;31m[failed]\x1b[0m");
+    remove(`${p2c}/shaders.glslx.min.js`);
+  };
+  remove(`${p2c}/shader.prepr.glslx`);
+}
+
+// 
+// SECTION: WEBPACK
+// 
+
+var config = {
+  entry: { canvas: `${p2c}/main.js` },
+  output: {
+    path: resolve(__dirname, './docs/assets'),
+    filename: 'js/[name].bundle.min.js',
+  },
+  stats: { modules: false },
+  devServer: {
+    host: 'local-ip',
+    hot: 'only',
+    liveReload: false,
+    magicHtml: false,
+    client: {
+      logging: 'none',
+      overlay: true
+    },
+    static: false,
+    devMiddleware: { writeToDisk: true },
+    onListening: () => {
+      watch(`${p2c}/shaders.glslx`, {ignoreInitial: true})
+        .on('change', () => { glsl(true); })
+      ;
+    },
+  },
+}
+
+module.exports = (env, argv) => {
+  if (argv.mode === 'production') {
+    config.optimization = {
+      minimize: true,
+      minimizer: [new TerserPlugin()],
+    };
+    glsl();
+  } else {
+    config.infrastructureLogging = { level: 'warn' };
+    glsl(true);
+  };
+  return config;
+};

canvas.nodemon.json

@@ -0,0 +1,12 @@
+{
+  "restartable": false,
+  "quiet": true,
+  "legacyWatch": true,
+  "exec": "webpack serve --mode=development --config=canvas.config.js",
+  "watch": [
+    "canvas.config.js"
+  ],
+  "events": {
+    "restart": "node -e 'console.log(\"[\\x1b[90mwebpack\\x1b[0m]: Starting async `\\x1b[36mcanvas-build-process\\x1b[0m`...\")'"
+  }
+}

copyfiles.mjs

@@ -1,11 +1,9 @@
-/*!
- * copyfiles.mjs
+/*! LIGHT-PARTICLE: COPYFILES.MJS
  * 
  * Author: sitdisch
  * Source: https://sitdisch.github.io/#mythemeway
  * License: MIT
- * Copyright (c) 2021 sitdisch
- *
+ * Copyright © 2021 sitdisch
  */
 
 import { copy } from 'fs-extra';

docs/LICENSE.txt

@@ -1,7 +1,7 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 Nathan Randecker
-Copyright (c) 2020 Sitdisch
+Copyright © 2016 Nathan Randecker
+Copyright © 2020 Sitdisch
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

docs/assets/img/icon/manifest.json

@@ -5,7 +5,8 @@
         {
             "src": "/assets/img/icon/android-chrome-192x192.png",
             "sizes": "192x192",
-            "type": "image/png"
+            "type": "image/png",
+            "purpose": "any maskable"
         },
         {
             "src": "/assets/img/icon/android-chrome-256x256.png",
@@ -16,10 +17,13 @@
         {
             "src": "/assets/img/icon/android-chrome-512x512.png",
             "sizes": "512x512",
-            "type": "image/png"
+            "type": "image/png",
+            "purpose": "any maskable"
         }
     ],
     "theme_color": "#eaf1f2",
     "background_color": "#eaf1f2",
-    "display": "standalone"
+    "display": "standalone",
+    "orientation": "portrait",
+    "description": "Website-Boilerplate: Light-Particle"
 }

docs/assets/js/canvas.bundle.min.js.LICENSE.txt

@@ -0,0 +1,19 @@
+/* @license twgl.js 4.21.2 Copyright (c) 2015, Gregg Tavares All Rights Reserved.
+Available via the MIT license.
+see: http://github.com/greggman/twgl.js for details */
+
+/*! MTW-CANVAS-MALACHITE: MAIN.JS
+ * 
+ * Author: sitdisch
+ * Source: https://sitdisch.github.io/#mythemeway
+ * Copyright © 2021 sitdisch
+ *
+ * FRAGMENT SHADER IS BASED ON:
+ * 
+ * Shadertoy: Glare of water
+ * 
+ * Original Author: Jan Mróz (jaszunio15)
+ * Source: https://www.shadertoy.com/view/ttSGz3
+ * License: CC BY 3.0
+ * Copyright © 2019 Jan Mróz
+ */

docs/assets/js/main.bundle.min.js.LICENSE.txt

@@ -1,15 +1,3 @@
-/*!
- * MAIN SCRIPT OF LIGHT-PARTICLE
- * 
- * Author: sitdisch
- * Source: https://sitdisch.github.io/#mythemeway
- * License: MIT
- * Copyright (c) 2020 sitdisch
- *
- */
-
-/*!  @preserve canvas-particle-network Copyright (c) 2015 Julian Laval | MIT License */
-
 /*! *****************************************************************************
     Copyright (c) Microsoft Corporation. All rights reserved.
     Licensed under the Apache License, Version 2.0 (the "License"); you may not use
@@ -26,3 +14,11 @@
     ***************************************************************************** */
 
 /*! @preserve sweet-scroll v4.0.0 - tsuyoshiwada | MIT License */
+
+/*! LIGHT-PARTICLE: MAIN.JS
+ * 
+ * Author: sitdisch
+ * Source: https://sitdisch.github.io/#mythemeway
+ * License: MIT
+ * Copyright © 2020 sitdisch
+ */