❤
npm
Sign UpSign In

cedr

0.1.4 • Public • Published

cedr NPM version Build Status Dependency Status

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 and bem-xjst Before you can use cedr strongly recommended to read this methodolgy

Also may interesting:

Installation

$ npm install --save cedr

Usage

const cedr = require('cedr');
 
let library = {
  'page': {
    templates: {
      'page': '<!DOCTYPE html><html><head></head><body class="{{ className }}">{{{ content }}}</body></html>',
      '__header': '<div class="{{ className }}">This is Header: {{{ content }}}</div>'
    }
  },
  'text': {
    templates: {
      'text': '<p class="{{ className }}">{{{ content }}}</p>'
    }
  }
}
 
let page = {
  block: 'page',
  content: [
    {
      block: 'text',
      content: 'text'
    },
    {
      block: 'page',
      element: 'header',
      content: 'Yeah!'
    }
  ]
};
 
cedr(page, library); 
// Return '<!DOCTYPE html><html><head></head><body class="page"><p class="text">text</p><div class="page__header">This is Header: Yeah!</div></body></html>'
cedr(page); 
// Return '<div class="page"><div class="text">text</div><div class="page__header">Yeah!</div></div>'
 

Example with express

'use strict'
 
const cedr = require('cedr');
const express = require('express');
 
const app = express();
 
const library = {
  'page': {
    templates: {
      'page': '<!DOCTYPE html><html><head></head><body class="{{ className }}">{{{ content }}}</body></html>',
      '__header': '<div class="{{ className }}">This is Header: {{{ content }}}</div>'
    }
  },
  'text': {
    templates: {
      'text': '<p class="{{ className }}">{{{ content }}}</p>'
    }
  }
}
 
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

library

Type: Object

The object of library.

Returns a String of html.

License

MIT © antitim

Readme

Keywords

Package Sidebar

Install

npm i cedr

Repository

github.com/antitim/cedr

Homepage

github.com/antitim/cedr#readme

Weekly Downloads

4

Version

0.1.4

License

MIT

Last publish

Collaborators

  • antitim
Try on RunKit
Report malware