https://github.com/dadi/web-es6-templates

A ES6 template literals interface for DADI Web
https://github.com/dadi/web-es6-templates

Last synced: 8 months ago
JSON representation

A ES6 template literals interface for DADI Web

• Host: GitHub
• URL: https://github.com/dadi/web-es6-templates
• Owner: dadi
• Created: 2017-08-03T17:00:30.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2019-05-03T15:00:50.000Z (about 7 years ago)
• Last Synced: 2025-03-20T03:48:55.298Z (about 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 68.4 KB
• Stars: 1
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          


## ES6 template engine interface

[![npm (scoped)](https://img.shields.io/npm/v/@dadi/web-es6-templates.svg?maxAge=10800&style=flat-square)](https://www.npmjs.com/package/@dadi/web-es6-templates)

[![Coverage Status](https://coveralls.io/repos/github/dadi/web-es6-templates/badge.svg?branch=master)](https://coveralls.io/github/dadi/web-es6-templates?branch=master)

[![Build Status](https://travis-ci.org/dadi/web-es6-templates.svg?branch=master)](https://travis-ci.org/dadi/web-es6-templates)

[![JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

This module allows native [ES6 template literals](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals) to be used with [DADI Web](https://github.com/dadi/web).

## Installation

- Add this module as a dependency:

   ```

   npm install @dadi/web-es6-templates --save

   ```

- Include it in the `engines` array passed to Web:

   ```js

   require('@dadi/web')({

     engines: [

       require('@dadi/web-es6-templates')

     ]

   })

   ```

## Usage

### Helpers

The base directory for absolute paths is the `utils/helpers` directory.

Helpers are `required()` functions that can be embeded into templates to keep your code DRY. Take this example which could live in your `helpers` folder as `slugify.js`.

```javascript

var s = require('underscore.string/slugify')

module.exports = slugify = (chunk) => {

  return s(chunk)

}

```

This function would be used in a template file like so:

```javascript

${slugify('The Quick Brown Fox Jumps Over The Lazy Dog')}

```

Output:

```

the-quick-brown-fox-jumps-over-the-lazy-dog

```

### Includes

The base directory for absolute paths is the `pages/` directory. Take the following directory tree.

```

pages/

|_ partials/

|_ |_ header.js

|_ |_ footer.js

|_ index.js

|_ index.json

```

To include the partials from `index.js`, you can use an underscore to indicate a sub-folder:

```js

${partials_header}

ES6 Templates test


This page lives at ${host}.


Loop test




  ${posts.results.map(i => '
' + i.attributes.title + '
').join('')}



${partials_footer}

```