Installation

npm i --save-dev bemark

Usage

Bemark can work standalone and in existing project like cli-tool for static content generation. Documentation for any project will be the best example. Bemark can help to build local and online documentation in easy way. Also you can write blog, artciles and anything from your mind ;)

Init

You should choose cwd directory for your content in Markdown, output directory for generated content and languages for i18n. Bemark support i18n as well. First language will be used as default.

bemark init

After that Bemark generate base project structure:

├── config.js

├── content

│ ├── articles

│ │ └── index.en.md

│ └── index.en.md

├── i18n.js

├── package.json

└── themes

└── <project-name>

Build

You can build all content in two ways. Firstly, it's simple command:

bemark build

After that you can open generated content as html files open dist/index.html.
You can see generated folder structure below:

├── dist

│ ├── articles

│ │ └── index.html

│ ├── css

│ │ └── styles.min.css

│ ├── .nojekyll

│ ├── index.html

│ └── js

│ └── scripts.min.js

Second way to build your site is the dev-server which based on browser-sync.

bemark server

Point your browser to http://localhost:3000. Now you can edit your content, templates and configs with live-reloading ;)

Content

To generate static pages put markdown files into content/* with lang suffixes (e.g. index.en.md).
You may use yaml header to set title and tags like this:

---

title: Post title

tags:

- tag1

- tag2

- tag3

---

# Markdown content

Every markdown page will be wrapped in layout which is based on bemhtml templates for bem-xjst engine.

Layouts

When you put your pages into content/**/* each of them get layout name based on folder name where they stay. For example file in content/artiсles/index.en.md has articles layout. If file stay in the root of content folder so it has root layout ;) What does it mean for you? It's an unlimited number of possibilities for content customization. For example put template below to static/themes/<theme-name>/page/_layout/page_layout_articles.bemhtml.js:

block('page').mod('layout','articles')(

content()(function(){

return[

{

elem:'header',

content:{

block:'header',

content:[

{

tag:'h1',

content:'Article layout'

},

{

tag:'h2',

content:`It's name: ${this._name}`

}

]

}

},

{

elem:'content',

content:this.ctx.content

},

{

elem:'footer',

content:{

block:'footer',

content:'Copyright by Superhero!'

}

},

this.ctx.scripts

];

})

);

Themes

You can collect your components for layouts in static/themes/<theme-name>. One default theme with your project name was created for you by bemark init command.
Theme folders follows filesystem organisation for BEM projects.
Component is the subfolder of theme for entity with *.bemhtml.js, *.css and *.js implementation. For example you can write component for header. Put template below to static/themes/<theme-name>/header/header.bemhtml.js: