Created entry file switch

Added checks for index.njk and data.json files to switch from demo file 
usage.
To prevent override of default files.

Updated explanation on demo entry page.
This commit is contained in:
Stephan 2019-03-21 21:45:43 +01:00
parent cd870b1bfe
commit ef9236f47a
3 changed files with 47 additions and 12 deletions

View file

@ -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
});

View file

@ -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>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>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>
<h3>Overview</h3>
<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 <i>/source/screens/demo</i>.</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>
<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">
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>C(")(")</pre>
<h3>Demo Pages</h3>
</div>
<h3>Demo Pages</h3>
<ul class="list_link">
<!-- Loops through "demo-links" array -->
{% for link in data.demolinks %}

View file

@ -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"
}
]
}