Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/reshape/layouts
plugin that adds the ability to use layout block/extend statements
https://github.com/reshape/layouts
Last synced: about 8 hours ago
JSON representation
plugin that adds the ability to use layout block/extend statements
- Host: GitHub
- URL: https://github.com/reshape/layouts
- Owner: reshape
- License: mit
- Created: 2016-08-09T16:34:25.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-04-19T13:33:26.000Z (over 5 years ago)
- Last Synced: 2024-09-21T12:56:01.948Z (4 days ago)
- Language: JavaScript
- Size: 82 KB
- Stars: 9
- Watchers: 3
- Forks: 3
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: contributing.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Reshape Layouts
[](https://npmjs.com/package/reshape-layouts)
[](https://travis-ci.org/reshape/layouts?branch=master)
[](https://david-dm.org/reshape/layouts)
[](https://coveralls.io/r/reshape/layouts?branch=master)
Layout inheritance using `block` and `extend`, inspired by ([jade/pug](http://jade-lang.com/reference/inheritance/)).
### Installation
`npm i reshape-layouts --save`
### Usage
Let's say we have a base template:
`base.html`
```html
Default Title
footer content
```
Now we can inherit this template. All defined blocks inside `` will
replace the blocks with the same name in the parent template. If the block is not defined inside `` its content in the parent template remains the same.
In the example the blocks `title` and `content` will be replaced and
the block `footer` will remain unchanged:
```js
const reshape = require('reshape')
const layouts = require('reshape-layouts')
const html = '' +
'How to use reshape-layouts' +
'Read the documentation'
''
reshape({
plugins: layouts({
encoding: 'utf8', // Parent template encoding (default: 'utf8')
root: './' // Path to parent template directory (default: './')
})
}).process(html)
.then((res) => res.output())
```
The final HTML will be:
```html
How to use reshape-layouts
Read the documentation
footer content
```
#### Append & Prepend
It's also possible to append and prepend block's content
```js
const reshape = require('reshape')
const layouts = require('reshape-layouts')
const html = '' +
'' +
'Read the documentation' +
'— 2016'
''
reshape({ plugins: layouts() })
.process(html)
.then((res) => res.output())
```
The final HTML will be:
```html
How to use reshape-layouts
Read the documentation
footer content — 2016
```
### Caveats
There are a number of tags that have their contents parsed as plaintext and cannot contain nested html tags. If you place a `block` tag inside any of these elements, it will not behave as expected, and instead will be rendered as plaintext. These are the tags that are content-only: `title`, `noscript`, `noframes`, `style`, `script`, `xmp`, `iframe`, `noembed`.
### Options
All options are optional, none are required.
| Name | Description | Default |
| ---- | ----------- | ------- |
| **root** | root to resolve layout paths from | reshape `filename` option |
| **encoding** | encoding with which to read layout files | `utf8` |
### Reporting Dependencies
This plugin will report its dependencies in the standard format as dictated by [reshape-loader](https://github.com/reshape/loader) if you pass `dependencies: []` as an option to reshape when it runs. Dependencies will be available on the output object under the `dependencies` key. For example:
```js
const reshape = require('reshape')
const include = require('reshape-layouts')
reshape({ plugins: [layouts()], dependencies: []})
.process(someHtml)
.then((res) => {
console.log(res.dependencies)
console.log(res.output())
})
```
If you are using this with webpack, reshape-loader takes care of the dependency reporting and you don't have to do anything 😁
### License & Contributing
- Licensed under [MIT](LICENSE.txt)
- See the [contributing guide](contributing.md)