ced

cedr

Page builder from library of blocks

Showing:

Popularity

Downloads/wk

1

GitHub Stars

1

Maintenance

Last Commit

5yrs ago

Contributors

1

Package

Dependencies

1

Size (min+gzip)

2.7KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100