Merge branch 'development' into testing-npm-scripts

Nunjucks
- Added nunjucks-cli dependency - Added npm script for nunjucks
2023-10-17 21:55:05 +02:00 · 2023-10-16 23:00:21 +02:00 · 2022-10-09 22:57:30 +02:00 · 2022-08-19 22:04:32 +02:00 · 2022-08-11 23:21:35 +02:00
8 changed files with 2211 additions and 16716 deletions
--- a/deploy/css/demo.css
+++ b/deploy/css/demo.css
--- a/deploy/css/demo_basic.css
+++ b/deploy/css/demo_basic.css
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -2,53 +2,59 @@
  "name": "hippie",
  "version": "0.4.2",
  "description": "Hippie interweaves preeminent personal interface elements",
-  "main": "gulpfile.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "preversion": "npm test",
-    "version": "gulp build && git add -A dist",
-    "postversion": "git push && git push --tags"
+  "keywords": [
+    "web",
+    "frontend",
+    "framework",
+    "sass",
+    "css",
+    "html",
+    "js"
+  ],
+  "homepage": "https://github.com/sthag/hippie#readme",
+  "bugs": {
+    "url": "https://github.com/sthag/hippie/issues",
+    "email": "klarsichtweise@gmail.com"
  },
+  "license": "MIT",
+  "author": "Stephan Hagedorn",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/sthag/hippie.git"
  },
-  "author": "Stephan Hagedorn",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/sthag/hippie/issues"
+  "scripts": {
+    "hello": "echo -n \"This is \" && node -p \"process.env.npm_package_name\" | tr '[:lower:]' '[:upper:]'",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "preversion": "npm test",
+    "version": "gulp build && git add -A dist",
+    "postversion": "git push && git push --tags",
+    "clean": "npm run clean:build & npm run clean:deploy & npm run clean:report & npm run clean:test",
+    "clean:build": "rm -rf build/*",
+    "clean:deploy": "rm -rf deploy/*",
+    "clean:report": "rm -rf report/*",
+    "clean:test": "rm -rf test/*",
+    "serve": "browser-sync start --no-open --index 'demo.html' --server 'build'",
+    "serve:watch": "browser-sync start --open false --index 'demo.html' --files 'build' --server 'build'",
+    "style": "npm run style:compile & npm run style:post",
+    "style:compile": "sass source/style:build/css --load-path=vendor",
+    "style:post": "postcss build/css/*.css -d deploy/css",
+    "style:watch": "sass --watch source/style:build/css --load-path=vendor",
+    "nunjucks": "nunjucks source/screens/**/*.njk -p source/templates -o build/test",
+    "develop": "npm run style:watch & npm run serve:watch"
+  },
+  "config": {
+    "port": "3000"
  },
-  "homepage": "https://github.com/sthag/hippie#readme",
  "devDependencies": {
-    "@babel/core": "~7",
-    "@babel/preset-env": "~7",
+    "autoprefixer": "^10.4.8",
    "browser-sync": "^2.27.10",
-    "del": "^7.0.0",
-    "gulp": "^4.0.2",
-    "gulp-autoprefixer": "^8.0.0",
-    "gulp-babel": "~8.0",
-    "gulp-cached": "^1.1.1",
-    "gulp-changed": "^4.0.3",
-    "gulp-clean-css": "~4",
-    "gulp-concat": "^2.6.1",
-    "gulp-data": "^1.3.1",
-    "gulp-if": "~3",
-    "gulp-jshint": "~2",
-    "gulp-json-concat": "~0.2",
-    "gulp-notify": "^4.0.0",
-    "gulp-nunjucks-render": "^2.2.3",
-    "gulp-plumber": "^1.2.1",
-    "gulp-remember": "^1.0.1",
-    "gulp-rename": "~2",
-    "gulp-sass": "~5",
-    "gulp-sass-lint": "^1.4.0",
-    "gulp-uglify": "^3.0.2",
-    "gulp-useref": "^5.0.0",
-    "gulp.spritesmith": "^6.13.0",
+    "cssnano": "^5.1.13",
    "jshint": "~2",
    "jshint-stylish": "^2.2.1",
-    "merge-stream": "^2.0.0",
-    "pump": "^3.0.0",
-    "sass": "^1.54.0"
-  }
+    "nunjucks-cli": "^1.0.0",
+    "postcss": "^8.4.16",
+    "postcss-cli": "^10.0.0",
+    "sass": "^1.54.4"
+  },
+  "private": true
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,10 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')({
+      env: '>= 4%, last 2 version'
+    }),
+    require('cssnano')({
+      preset: 'default',
+    }),
+  ],
+};
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@ -1 +1 @@
-Subproject commit 0214054c81aaa29150d97efa0d03b6328c0258fb
+Subproject commit bf818600f866abb2e1541aa70acc03ca2ebcd148
--- a/source/style/modules/demo/_demo_module.scss
+++ b/source/style/modules/demo/_demo_module.scss
@ -180,31 +180,31 @@
 }

 .demo__query_example {
-	@include goingLarge($screen_tiny * 1px) {background-color: $alpha_color; }
-	@include goingLarge($screen_small * 1px) {background-color: $bravo_color; }
-	@include goingLarge($screen_medium * 1px) {background-color: $charlie_color; }
-	@include goingLarge($screen_large * 1px) {background-color: $delta_color; }
-	@include goingLarge($screen_huge * 1px) {background-color: $echo_color; }
-	@include goingLarge($screen_gigantic * 1px) {background-color: $foxtrot_color; }
+	@include goingLarge($screen_tiny) {background-color: $alpha_color; }
+	@include goingLarge($screen_small) {background-color: $bravo_color; }
+	@include goingLarge($screen_medium) {background-color: $charlie_color; }
+	@include goingLarge($screen_large) {background-color: $delta_color; }
+	@include goingLarge($screen_huge) {background-color: $echo_color; }
+	@include goingLarge($screen_gigantic) {background-color: $foxtrot_color; }
 	margin-bottom: $space_small;
 	padding: $space_small;
 	text-align: center;

 	&:after {
 		@extend code;
-		@include goingLarge($screen_tiny * 1px) {
+		@include goingLarge($screen_tiny) {
 			& { content: '768px'; }
 		}
-		@include goingLarge($screen_small * 1px) {
+		@include goingLarge($screen_small) {
 			& { content: '1024px'; }
 		}
-		@include goingLarge($screen_medium * 1px) {
+		@include goingLarge($screen_medium) {
 			& { content: '1280px'; }
 		}
-		@include goingLarge($screen_huge * 1px) {
+		@include goingLarge($screen_huge) {
 			& { content: '1680px'; }
 		}
-		@include goingLarge($screen_gigantic * 1px) {
+		@include goingLarge($screen_gigantic) {
 			& { content: '1920px'; }
 		}
 		content: '< 768px';
--- a/source/templates/hippie/partials/_head_script.njk
+++ b/source/templates/hippie/partials/_head_script.njk
@ -1,9 +1,9 @@
 <!-- head.script.partial -->
 <script>
-  //Entry script at page init
-  var debugOn = false;
-  var debugOnScreen = true;
-  var assetsLoaded = false;
+  // Entry script at page init
+  let debugOn = false;
+  let debugOnScreen = true;
+  let assetsLoaded = false;

  // Get the current time difference between page
  // load and when this func was invoked
@ -19,12 +19,30 @@
      : new Array(width - n.length + 1).join(z) + n;
  }

-  // log message to console and add
+  // Log message to console and add
  // performance measuring information
  function logPerf(msg, arg) {
    if (debugOn) {
      if (debugOnScreen && assetsLoaded) {
-        if (!$('#jsLogPerf').length) {
+        if (!document.getElementById('jsLogPerf')) {
+          let wrap = document.createElement('div');
+          let box = document.createElement('div');
+
+          wrap.style.position = 'relative';
+          box.style.cssText = `position: fixed;
+            bottom: 16px;
+            right: 40px;
+            zIndex: 1000;
+            padding: 0 8px;
+            background: rgba(255,255,255,.6);
+            color: rgb(128);
+            fontSize: 1rem;`;
+          box.id = 'jsLogPerf';
+
+          wrap.prepend(box);
+          document.body.prepend(wrap);
+
+          /*
          $('<div><div></div></div>')
            .css('position', 'relative')
            .find('div')
@ -41,21 +59,39 @@
            })
            .end()
            .prependTo('body');
+          */
          // $('body').prepend('<div style="position:relative;"></div>');
          // $('div').first().prepend('<div id="jslogPerf" style="position:fixed;bottom:8px;right:16px;z-index:1000;padding:8px;background:rgb(0,255,255,.5)"></div>');
        }
-        $('#jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
-        // Alternative short-circuit evaluation
+
+        let code = document.createElement('code');
+
+        code.style.cssText = `display: block;
+          margin: 8px 0;
+          padding: 1px 4px;
+          background-color: transparent;
+          color: black;
+          font-size: 12px;
+          line-height: 1.1;`;
+        code.innerHTML = '<b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '';
+
+        document.getElementById('jsLogPerf').append(code);
+        // document.getElementById('jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
+        // $('#jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
+        
+        // NOTE: Alternative short-circuit evaluation
        // needs element in document but prevents error if not
        // $log = $log || $('#jslogPerf');
        // $log.append('<p style="margin-bottom:4px;font-size:.75em;"><b>' + getTimeDiff() + '</b>ms :: ' + msg);
      }
+
      if (window.console) {
        console.debug(pad(getTimeDiff(), 5) + 'ms :: ' + msg, (
          arg
          ? arg
          : ''));
-        // NOTE Non standard feature. Not available on IE
+
+        // NOTE: Non standard feature. Not available on IE
        if (console.timeStamp) {
          console.timeStamp(msg);
        }
Author	SHA1	Message	Date
sthag	3a00fb08a8	Merge branch 'development' into testing-npm-scripts	2023-10-17 21:55:05 +02:00
sthag	bd3d8529ed	Nunjucks - Added nunjucks-cli dependency - Added npm script for nunjucks	2023-10-16 23:00:21 +02:00
Stephan Hagedorn	cf3fde601e	logPerf without JQuery	2022-10-09 22:57:30 +02:00
Stephan Hagedorn	6494df4d32	Added scripts - New packages for css processing - Added index for browser-sync	2022-08-19 22:04:32 +02:00
Stephan Hagedorn	e1714fde80	Replaced gulp with npm scripts - Removed all gulp packages - Replaced gulp tasks with npm scripts - Some tasks are still missing - Kept gulp files for reference - Fixed media query styles	2022-08-11 23:21:35 +02:00