gulpfile.js

@@ -2,9 +2,10 @@
 const hippie = {
   brand: 'hippie',
   jsFile: 'main',
-  jsonFile: 'db'
+  jsonFile: 'db',
+  index: 'demo.html',
+  data: 'demo/data.json'
 }
-
 // Gulp requirements
 const { watch, series, parallel } = require('gulp');
 const { src, dest } = require('gulp');
@@ -68,6 +69,14 @@ const output = {
   vendor: 'build/vendor'
 };
 
+//Check for index file and deactivate demo content
+if (fs.existsSync('source/screens/index.*')){
+  hippie.index = 'index.html';
+}
+if (fs.existsSync('source/templates/data.json')){
+  hippie.data = 'data.json';
+}
+
 // Create tasks
 
 // Clean build folder
@@ -99,7 +108,7 @@ function nunjucks() {
 	return src(input.screens)
   .pipe(plumber())
   .pipe(data(function() {
-    let data = JSON.parse(fs.readFileSync(input.demo.data));
+    let data = JSON.parse(fs.readFileSync(input.templates +'/'+ hippie.data));
     object = {hippie, data};
     return object;
   }))
@@ -115,7 +124,7 @@ function nunjucks() {
 // Serve files to the browser
 function serve(done) {
   server.init({
-    index: "demo.html",
+    index: hippie.index,
     open: false,
     server: output.root
   });

source/screens/demo.njk

@@ -14,10 +14,13 @@
   <div class="hello">
     <h2>This is {{hippie.brand | upper}}</h2>
     <p>You can start using it by replacing this file with your own index page.</p>
-    <p>To do this you need to open the file <code>/gulpfile.js</code> and comment out the line <code>index: "demo.html",</code>. Then you need to place your index file (<code>index.njk</code>) into the folder <code>/source/pages</code>.</p>
+    <p>To do this you need to create a file <code>/index.njk</code> inside the <i>source/screens</i> folder. You can also create a <code>data.json</code> file inside the <i>source/templates</i> folder as a data source for your nunjucks files.</p>
-    <p>For a very basic start you can make a copy of the demo page <code>blank.njk</code>. You can find it at <code>/source/pages/demo</code>.</p>
+    <p>For a very basic start you can make a copy of the demo page <code>blank.njk</code>. You can find it at <i>/source/screens/demo</i>.</p>
-    <p>The <i>demo</i> folder contains an overview of all elements and also examples for style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
+    <p>The <i>source/demo</i> folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
-    <h3>Overview</h3>
+    <div class="pos_rel">
+      <pre class="txt_tiny txt_white pos_abs pin_down pin_right">  ()()<br>  (..)<br>C(")(")</pre>
+      <h3>Overview</h3>
+    </div>
     <nav>
       <ul class="list_link">
         <!-- Loops through "demoadditionallinks" array -->
@@ -26,10 +29,7 @@
         {% endfor %}
       </ul>
     </nav>
-    <div class="pos_rel">
+    <h3>Demo Pages</h3>
-      <pre class="txt_tiny txt_white pos_abs pin_down pin_right">  ()()<br>  (..)<br>C(")(")</pre>
-      <h3>Demo Pages</h3>
-    </div>
     <ul class="list_link">
       <!-- Loops through "demo-links" array -->
       {% for link in data.demolinks %}

source/templates/data.json

@@ -0,0 +1,26 @@
+{
+  "demoadditionallinks": [
+    {
+      "href": "/demo.html",
+      "text": "Index"
+    }
+  ],
+  "demolinks": [
+    {
+      "href": "demo/error/403.html",
+      "text": "403"
+    },
+    {
+      "href": "demo/error/400.html",
+      "text": "400"
+    },
+    {
+      "href": "demo/error/500.html",
+      "text": "500"
+    },
+    {
+      "href": "demo/os.html",
+      "text": "OS"
+    }
+  ]
+}