0.2.6 • Published 4 years ago
mustacher v0.2.6
Mustacher
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...
Install
npm install mustacher --save
Exposed helpers
inline
blocks
Examples
const 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);
inline
\$include
<div class="part">
{{$include 'relative/to/root/path/to/template'}}
</div>
$css & $js helper
<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>
\$image (default width: 300)
<div class="image">
{{$image}}
</div>
<div class="image">
{{$image 300}}
</div>
<div class="image">
{{$image 300 200}}
</div>
\$timestamp
<img src="my/file.png?{{$timestamp}}" alt="" title="" />
<img src="my/file.png?{{$timestamp 20}}" alt="" title="" />
\$livereload
<div id="footer">
{{$livereload 1337}}
</div>
\$random
<span>
<b>{{$random 1 31}}</b>
<strong>Juanary</strong>
<em>1970</em>
</span>
<span>{{$random 0 1 true}}</span>
literal
\$ldim
{{$ldim}}toto {{$ldim}}toto{{$rdim}}
\$rdim
toto{{$rdim}} {{$ldim}}toto{{$rdim}}
\$css
{{$css 'path/to/file'}} {{$css 'path/to/file.min'}} {{$css 'path/to/file.min'
'{"media":"print,projection,screen"}'}}
\$js
{{$js 'path/to/file'}} {{$js 'path/to/file.min'}} {{$js 'path/to/file.min'
'{"data-main":"main.js"}'}}
blocks
#repeat
<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
{{#and true false ...}}
<span>fail</span>
{{else}}
<span>success</span>
{{/and}}
#or
{{#or true false ...}}
<span>success</span>
{{else}}
<span>fail</span>
{{/or}}
#equal
{{#equal 'toto' 'blague'}}
<span>fail</span>
{{else}}
<span>success</span>
{{/equal}}
Issues
not yet implemented
- Lorem Ipsum
Dependents
0.2.6
4 years ago
0.2.3
4 years ago
0.2.5
4 years ago
0.1.21
8 years ago
0.1.20
8 years ago
0.1.19
8 years ago
0.1.18
9 years ago
0.1.16
9 years ago
0.1.15
9 years ago
0.1.14
9 years ago
0.1.13
9 years ago
0.1.12
9 years ago
0.1.11
9 years ago
0.1.10
9 years ago
0.1.9
9 years ago
0.1.8
9 years ago
0.1.7
9 years ago
0.1.6
9 years ago
0.1.5
9 years ago
0.1.4
9 years ago
0.1.3
9 years ago
0.1.1
9 years ago
0.1.0
10 years ago