Designed for fit my own needs to build HTML static pages to be incorpored inside a website based on Magento, eZPublish or Drupal templates
It provide an easy way to include handlebar's partials files inside HTML template page with a minimal list of helpers like include, repeat (loop), or, and, livereload...
npm install mustacher --saveconst fs = require('fs');
const path = require('path');
const mustacher = require('mustacher');
// variables at root level touched by any helper
const context = { private: 'as @root.private' };
// default config
const config = {
cwd: __dirname,
delimiter: {
ldim: '{{',
rdim: '}}',
},
partials: {
ext: '.hbs',
src: 'partials',
},
};
const templateFile = path.join(__dirname, 'index.html');
const outputfile = path.join(__dirname, '..', 'public', 'index.html');
const fsOptions = { encoding: 'utf8' };
const templateContent = fs.readFileSync(templateFile, fsOptions);
const compiledOutput = mustacher(templateContent, <context>, <config>);
fs.writeFileSync(outputfile, compiledOutput, fsOptions);<div class="part">
{{$include 'relative/to/root/path/to/template'}}
</div><head>
... {{$css 'path/to/css/file'}}
<!-- include inline -->
{{$css '__build__/path/to/css/file' true}} ...
</head> <div id="main-footer">
...
</div>
{{$js 'path/to/js/file'}}
</body><div class="image">
{{$image}}
</div><div class="image">
{{$image 300}}
</div><div class="image">
{{$image 300 200}}
</div><img src="my/file.png?{{$timestamp}}" alt="" title="" /><img src="my/file.png?{{$timestamp 20}}" alt="" title="" /><div id="footer">
{{$livereload 1337}}
</div><span>
<b>{{$random 1 31}}</b>
<strong>Juanary</strong>
<em>1970</em>
</span><span>{{$random 0 1 true}}</span>{{$ldim}}toto {{$ldim}}toto{{$rdim}}toto{{$rdim}} {{$ldim}}toto{{$rdim}}{{$css 'path/to/file'}} {{$css 'path/to/file.min'}} {{$css 'path/to/file.min'
'{"media":"print,projection,screen"}'}}{{$js 'path/to/file'}} {{$js 'path/to/file.min'}} {{$js 'path/to/file.min'
'{"data-main":"main.js"}'}}<ul>
{{#repeat 4}}
<li class="{{class}}">
<a href="" alt="{{count}} of {{of}}">item </a>
<ul>
{{#repeat}}
<li class="{{#if @first}}first{{/if}}">
<span>sub item {{@../index}}/{{@index}}</span>
</li>
{{/repeat}}
</ul>
</li>
{{/repeat}}
</ul>{{#and true false ...}}
<span>fail</span>
{{else}}
<span>success</span>
{{/and}}{{#or true false ...}}
<span>success</span>
{{else}}
<span>fail</span>
{{/or}}{{#equal 'toto' 'blague'}}
<span>fail</span>
{{else}}
<span>success</span>
{{/equal}}not yet implemented
- Lorem Ipsum
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent