Introduced 11ty

Set new version based on all changes since last version change, which was 0.4.2.

Removed obsolete devDependencies, now only using 11ty and sass.

Update to package.json fields

- New sass version
- Update to project links
- Rearranged fields
- New commands for 'scripts' that include changes from branch testing-npm-scripts
- Added field 'private' to prevent publishing by mistake

Added configuration for 11ty to reflect previous behaviour from gulp.

- Moved source/templates/demo/data.json to source/screens/demo.json so it can be used
- Fixed demo template so it can use the data source
- Removed source/data/demo.json which was not used

.eleventy.js

@@ -0,0 +1,32 @@
+module.exports = function (eleventyConfig) {
+	eleventyConfig.setNunjucksEnvironmentOptions({
+		// throwOnUndefined: true,
+		trimBlocks: true
+	});
+
+	eleventyConfig.addGlobalData("permalink", () => {
+		return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`;
+	});
+
+	eleventyConfig.addPassthroughCopy({"source/art/images": "art"});
+
+	eleventyConfig.addPassthroughCopy({"source/art/favicons/**/*.+(ico|png|svg)": "."});
+
+	eleventyConfig.addPassthroughCopy({"source/code/**/*.js": "js"});
+
+	eleventyConfig.addPassthroughCopy({"source/data/**/*.json": "json"});
+
+	eleventyConfig.addPassthroughCopy("vendor");
+
+	return {
+		dir: {
+			input: "source/screens",
+			output: "build",
+			includes: "../templates",
+			data: "../data"
+		},
+		markdownTemplateEngine: "njk",
+		htmlTemplateEngine: "njk",
+		templateFormats: ["html", "njk"]
+	}
+};

README.md

@@ -1,5 +1,7 @@
 # HIPPIE
 
+Hippie interweaves preeminent personal interface elements
+
 > WORK IN PROGRESS (it is not ready to be used)
 
 This is a [Node.js](https://nodejs.org/) based generator for static HTML documents.

package.json

@@ -1,54 +1,36 @@
 {
   "name": "hippie",
-  "version": "0.4.2",
+  "version": "0.12.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": [
+    "hippie",
+    "www site template"
+  ],
+  "homepage": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie",
+  "bugs": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie/issues",
+  "license": "MIT",
+  "author": "Stephan Hagedorn <sthag@interaktionsweise.de> (https://karte@interaktionsweise.de/)",
+  "main": "",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/sthag/hippie.git"
+    "url": "https://quelltext.interaktionsweise.de/interaktionsweise/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",
+    "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/*",
+    "style:compile": "sass source/style:build/css --load-path=vendor",
+    "style:watch": "sass --watch source/style:build/css --load-path=vendor",
+    "build:new": "npm run clean:build && npx @11ty/eleventy && npm run style:compile",
+    "build": "npx @11ty/eleventy && npm run style:compile"
   },
-  "homepage": "https://github.com/sthag/hippie#readme",
+  "private": true,
   "devDependencies": {
-    "@babel/core": "~7",
-    "@babel/preset-env": "~7",
-    "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",
-    "jshint": "~2",
-    "jshint-stylish": "^2.2.1",
-    "merge-stream": "^2.0.0",
-    "pump": "^3.0.0",
-    "sass": "^1.54.0"
+    "@11ty/eleventy": "^2.0.1",
+    "sass": "^1.69.4"
   }
 }

source/data/demo.json

@@ -1,22 +0,0 @@
-{
-  "demo": [
-    {
-      "demo1": "1",
-      "demo2": "2"
-    },
-    {
-      "demo1": "1",
-      "demo2": "2"
-    },
-    {
-      "demo1": "1",
-      "demo2": "2"
-    }
-  ],
-  "test": [
-    {
-      "test1": "3",
-      "test2": "4"
-    }
-  ]
-}

source/screens/demo.njk

@@ -38,7 +38,7 @@
       <nav>
         <ul class="list_link">
           <!-- Loops through "demoadditionallinks" array -->
-          {% for link in data.demoadditionallinks %}
+          {% for link in demoadditionallinks %}
             <li>
               <a href="{{ link.href }}">{{ link.text }}</a>
             </li>
@@ -48,7 +48,7 @@
       <h3>Demo Pages</h3>
       <ul class="list_link">
         <!-- Loops through "demo-links" array -->
-        {% for link in data.demolinks %}
+        {% for link in demolinks %}
           <li>
             <a href="{{ link.href }}">{{ link.text }}</a>
           </li>

source/style/hippie-style

@@ -1 +1 @@
-Subproject commit 0214054c81aaa29150d97efa0d03b6328c0258fb
+Subproject commit 84ddbceb9a130943c3833b3d937bd7beac2e71d3

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';