page.md

Page format

Page is an Object that describes an HTML document. Represents a tree of nodes.

There are three types of node:

• Text node
• Array of nodes
• Block node

The root of the tree is always block.

Array of nodes

Array of nodes

Text node

String

Block node

Object

The term "Block" is taken from the BEM methodology. Before you can use cedr strongly recommended to read this methodolgy

{
  block: 'menu', // required field
  element: 'item', // is filled if the current node is an element
  mods: {
    key1: 'value',
    key2: true
  }, // contains a hash of the modifier block
  attrs: {
    target: '_blank',
    'data-bar': 'foo'
  }, // contains block attributes
  tagName: 'span', // if you do not specify, it will be `div` by default
  className: 'item-prop', //additional class name
  content: Node // contains the node
}

You can use any other field to pass the context to the template.

Example of page:

{
  block: 'page',
  content: [
    {
      block: 'page',
      element: 'header',
      mods: {
        size: 'big',
        main: true
      }
      content: 'Yeah!'
    },
    {
      block: 'panel',
      attrs: {
        'data-bar': 'foo'
      }
      someData: [1, 2, 3],
      content: [
        {
          block: 'text',
          tagName: 'span',
          className: 'item-prop'
        },
        'Good'
      ]
    },
    'Footer will be here'
  ]
}

Result for this page without using library of block:

<div class="page">
  <div class="page__header page__header_size_big page__header_main">Yeah!</div>
  <div class="panel" data-bar="foo">
    <span class="text item-prop"></span>
    Good
  </div>
  Footer will be here
</div>