.eleventy.js

@@ -1,32 +0,0 @@
-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,7 +1,5 @@
 # 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,36 +1,54 @@
 {
   "name": "hippie",
-  "version": "0.12.2",
+  "version": "0.4.2",
   "description": "Hippie interweaves preeminent personal interface elements",
-  "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": "",
+  "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"
+  },
   "repository": {
     "type": "git",
-    "url": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie.git"
+    "url": "git+https://github.com/sthag/hippie.git"
   },
-  "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"
+  "author": "Stephan Hagedorn",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/sthag/hippie/issues"
   },
-  "private": true,
+  "homepage": "https://github.com/sthag/hippie#readme",
   "devDependencies": {
-    "@11ty/eleventy": "^2.0.1",
-    "sass": "^1.69.4"
+    "@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"
   }
 }

source/data/demo.json

@@ -0,0 +1,22 @@
+{
+  "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 demoadditionallinks %}
+          {% for link in data.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 demolinks %}
+        {% for link in data.demolinks %}
           <li>
             <a href="{{ link.href }}">{{ link.text }}</a>
           </li>

source/style/hippie-style

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

source/style/modules/demo/_demo_module.scss

@@ -180,31 +180,31 @@
 }
 
 .demo__query_example {
-	@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; }
+	@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; }
 	margin-bottom: $space_small;
 	padding: $space_small;
 	text-align: center;
 
 	&:after {
 		@extend code;
-		@include goingLarge($screen_tiny) {
+		@include goingLarge($screen_tiny * 1px) {
 			& { content: '768px'; }
 		}
-		@include goingLarge($screen_small) {
+		@include goingLarge($screen_small * 1px) {
 			& { content: '1024px'; }
 		}
-		@include goingLarge($screen_medium) {
+		@include goingLarge($screen_medium * 1px) {
 			& { content: '1280px'; }
 		}
-		@include goingLarge($screen_huge) {
+		@include goingLarge($screen_huge * 1px) {
 			& { content: '1680px'; }
 		}
-		@include goingLarge($screen_gigantic) {
+		@include goingLarge($screen_gigantic * 1px) {
 			& { content: '1920px'; }
 		}
 		content: '< 768px';