Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/antitim/cedr
Page builder from library of blocks
https://github.com/antitim/cedr
cedr
Last synced: about 1 month ago
JSON representation
Page builder from library of blocks
- Host: GitHub
- URL: https://github.com/antitim/cedr
- Owner: antitim
- License: mit
- Created: 2016-11-03T14:09:24.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2016-11-18T12:56:28.000Z (about 8 years ago)
- Last Synced: 2024-05-03T03:21:24.158Z (8 months ago)
- Topics: cedr
- Language: JavaScript
- Homepage:
- Size: 12.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# cedr [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url]
> Cedr - is a page builder from library of blocks.
## About
Generates the html page from the structure presented in the form of a js object.
In the description of the structure of the used blocks that are in the description of library blocks.
Inspired by [BEM](https://en.bem.info/) and [bem-xjst](https://github.com/bem/bem-xjst)
Before you can use `cedr` strongly recommended to read [this methodolgy](https://en.bem.info/methodology/quick-start/)
Also may interesting:
- [gulp-cedr](https://github.com/antitim/gulp-cedr)
- [cedr-library](https://github.com/antitim/cedr-library)
- [cedr-deps](https://github.com/antitim/cedr-deps)
## Installation
```sh
$ npm install --save cedr
```
## Usage
```js
const cedr = require('cedr');
let library = {
'page': {
templates: {
'page': '{{{ content }}}',
'__header': '
This is Header: {{{ content }}}'
}
},
'text': {
templates: {
'text': '{{{ content }}}
'
}
}
}
let page = {
block: 'page',
content: [
{
block: 'text',
content: 'text'
},
{
block: 'page',
element: 'header',
content: 'Yeah!'
}
]
};
cedr(page, library);
// Return '
text
This is Header: Yeah!'
cedr(page);
// Return '
text
Yeah!
'
```
Example with [express](http://expressjs.com/)
```js
'use strict'
const cedr = require('cedr');
const express = require('express');
const app = express();
const library = {
'page': {
templates: {
'page': '{{{ content }}}',
'__header': '
This is Header: {{{ content }}}'
}
},
'text': {
templates: {
'text': '{{{ content }}}
'
}
}
}
app.get('/', function (req, res) {
let page = {
block: 'page',
content: [
{
block: 'text',
content: 'text'
},
{
block: 'page',
element: 'header',
content: 'Yeah!'
}
]
};
res.send(cedr(page, library));
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!')
})
```
## API
cedr can be called with or without library of blocks.
### cedr(page[, library])
#### page
Type: `Object`
The object of page. [More about page format](docs/page.md)
#### library
Type: `Object`
The object of library.
Returns a `String` of html.
## License
MIT © [antitim](http://vk.com/antitim)
[npm-image]: https://badge.fury.io/js/cedr.svg
[npm-url]: https://npmjs.org/package/cedr
[travis-image]: https://travis-ci.org/antitim/cedr.svg?branch=master
[travis-url]: https://travis-ci.org/antitim/cedr
[daviddm-image]: https://david-dm.org/antitim/cedr.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/antitim/cedr