mustacher

v0.2.6

Published

2 years ago

Perfect for templating eZPublish, Magento, Drupal... CMS models

Downloads

0High
0Medium
0Low

handlebars helpers html static ezpublish magento drupal repeat loop conditionals or and include dummy image templates files lorem ipsum mustache htmlbars precompile tpl cms

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Mustacher

Install

Exposed helpers

inline

blocks

Examples

inline

$include

$css & $js helper

$image (default width: 300)

$timestamp

$livereload

$random

literal

$ldim

$rdim

$css

$js

blocks

#repeat

#and

#or

#equal

Issues

Dependents