/mustacher

JS tool to help build HTML static pages. Perfect for templating eZPublish, Magento, Drupal... CMS models

Primary LanguageJavaScript

Mustacher Built with Grunt

MIT License NPM version NPM downloads build coverage

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