Installing
Run: npm install -g bnm-cli
Updating
Run: npm update -g bnm-cli
Commands summary
From a playground folder run:
bnm create <componentName>
To test the component locally go to the component`s folder and run:
bnm staging
To upload the component from component folder run:
bnm upload
Then open a browser and go to http://localhost:9000/
Upload URL can be provided as param like: bnm upload -u "http://localhost:9001/api" Default URL for uploading and rendering service is: "http://banner-magic.webology.no/api"
Commands in detail
create
To create a component go to a playground folder and run:
bnm create <componentName>
Component name cannot contain special characters and punctuation marks.
This command will create a basic component which you will be able to change according to your needs.
1. Creating a background component (default):
Run bnm create myBannerBackground
It will create a folder myBannerBackground which includes:
assets folder
Add any assets your component uses in the assets folder (pictures, fonts etc)
By default it includes 3 pictures: logo.png, a.jpg, b.png which you will have to replace with the pictures you need or delete.
The json, html and sass files have references to these pictures.
component.json
The the json of this newly created component:
{
"name": "myBannerBackground",
"version": "1.0",
"author": "unknown", // Change accordingly
//Change the label value from below accordingly,
// it will show in the banner-magic front end when creating a banner
"label": "Label for myBannerBackground",
"path": "/commons/los&co",
// The css properties listed in the properties key from below
// will be able to be changed from the banner-magic front-end
// you can add/delete any props from here and change their labels according to your needs
"properties": {
"left": {
"value": 0,
"label": "Left",
"type": "number",
"group": "/Position"
},
"top": {
"value": 0,
"label": "Top",
"type": "number",
"group": "/Position"
},
"label": {
"type": "text",
"value": "This is a component label.",
"group": "/Content",
"label": "Label"
},
"height": {
"type": "number",
"value": 250,
"group": "/Size",
"label": "Height"
},
"bgImage": {
"type": "select",
"options": [
{
"name": "London",
"value": "assets/a.jpg"
},
{
"name": "New York",
"value": "assets/b.jpg"
}
],
"value": "assets/a.jpg",
"group": "/Content",
"label": "Background Image"
}
}
}
component.html
<div class="sas2-2">
<h3>${data.label}</h3>
<img src="${data.url('/assets/logo.png')}">
</div>
component.sass
=commonStyle // common props, they cannot be changed by the designer
.{{component_name}}
position: relative
width: 100%
height: 250px
overflow: hidden
max-width: 980px
margin: 0 auto
background-image: url(/assets/b.png)
=customStyle // customs props, the designer can change them according to his needs
.{{component_name}}
left: $left+0px
top: $top+0px
height: $height+0px
.banner.css
This file will not be included at the upload and it is used only render the component at the staging step.
When viewing you component locally change the banner props from below according to your needs
.banner {
width: 950px;
height: 250px;
}
2. Creating a badge component (A text in a round circle with css animation):
Run bnm create book-now-badge
Go to book-now-badge folder and remove the assets folder.
Since this component doesn't need any images you will not need this folder.
Edit component.json file and update author and label fields.
Replace all the default properties object with the ones from below:
{
"left": {
"value": 10,
"label": "Left",
"type": "number",
"group": "/Position"
},
"top": {
"value": 10,
"label": "Top",
"type": "number",
"group": "/Position"
},
"width": {
"type": "number",
"value": 80,
"group": "/Size",
"label": "Width"
},
"fontSize": {
"type": "number",
"value": 12,
"group": "/Content",
"label": "Font size"
}
}
Replace the content of the main div in component.html with:
<div class="book-now-badge-content">BOOK NOW<br>Norway</div>
Replace the content of the sass file with:
@font-face
font-family: 'ScandinavianHeadline'
src: url(http://s1.adform.net/Banners/Elements/Files/325/583275.woff) format('woff')
@font-face
font-family: 'ScandinavianHeadline'
src: url(http://s1.adform.net/Banners/Elements/Files/325/583276.ttf) format('truetype')
=keyframes-animated-circle
64%
transform: none
76%
transform: rotateY( 88deg )
88%
transform: none
@-webkit-keyframes animated-circle
+keyframes-animated-circle
@-moz-keyframes animated-circle
+keyframes-animated-circle
@keyframes animated-circle
+keyframes-animated-circle
=book-now-badge-setup($paramTop, $paramLeft, $paramWidth, $paramFontSize)
top: $paramTop + 0px
left: $paramLeft + 0px
width: $paramWidth + 0px
height: $paramWidth + 0px
border-radius: ($paramWidth + 0px) / 2
.book-now-badge-content
width: $paramWidth + 0px
font-size: $paramFontSize + 0px
top: ($paramWidth + 0px) / 2 - ($paramFontSize + 0px)
=commonStyle
.book-now-badge
position: absolute
background: #caa977
+book-now-badge-setup(0px, 0px, 80px, 12px)
-webkit-animation: animated-circle 2.5s infinite ease-in-out
-moz-animation: animated-circle 2.5s infinite ease-in-out
animation: animated-circle 2.5s infinite ease-in-out
.book-now-badge-content
font-family: 'ScandinavianHeadline', sans-serif
color: #fff
text-align: center
line-height: 1.1
position: absolute
=customStyle
.book-now-badge
+book-now-badge-setup($top, $left, $width, $fontSize)
3.Creating a click-tag component
Run: bnm create first-click-tag
Go to component.json update author and label and properties. The json should look similar to this one:
{
"name": "my-click-tag",
"version": "1.0",
"author": "mircea",
"agency": "los&co",
"label": "ClickTAG",
"path": "/commons/los&co",
"properties": {
"left": {
"value": 0,
"label": "Left",
"type": "number",
"group": "/Position",
"panel-order": 1
},
"top": {
"value": 0,
"label": "Top",
"type": "number",
"group": "/Position"
},
"width": {
"value": 100,
"label": "Width",
"type": "number",
"group": "/Size"
},
"height": {
"value": 100,
"label": "Height",
"type": "number",
"group": "/Size"
}
}
Replace the html file content with this one:
<div class="click-tag" id="click-tag"></div>
Replace the sass file content with:
=clicktag-setup ($paramWidth, $paramHeight, $paramTop, $paramLeft)
height: $paramHeight + 0px
top: $paramTop + 0px
left: $paramLeft + 0px
width: $paramWidth + 0px
=commonStyle
.click-tag
position: absolute
+clicktag-setup(100,100,0,0)
=customStyle
.click-tag
+clicktag-setup($width,$height,$top,$left)
4.Creating a logo component
Run: bnm create first-logo
Adjust the properties in the json file should look similar to the next object or according to your needs:
{
"left": {
"value": 0,
"label": "Left",
"type": "number",
"group": "/Position"
},
"top": {
"value": 0,
"label": "Top",
"type": "number",
"group": "/Position"
},
"width": {
"type": "number",
"value": 150,
"group": "/Size",
"label": "Width"
},
"color": {
"type": "select",
"options": [
{
"name": "white",
"value": "#fff"
},
{
"name": "blue",
"value": "#000099"
}
],
"value": "#000099",
"group": "/Content",
"label": "Color"
}
A possible approach of the html file would be:
<div class="sas-logo">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 185 68" enable-background="new 0 0 185 68" xml:space="preserve">
<path fill="${data.color}" d="M121.2,1.4h-18.7c-0.9,0-1.3,0.5-1.3,0.5L49.8,66c-0.3,0.4-0.2,0.7,0.3,0.7h7.6c0.8,0,0.8-0.2,1-0.4
l10.9-14.1c0,0,0.2-0.3,0.4-0.3c0.2,0,18.4,0,18.4,0s0.3,0,0.2,0.3c-0.1,0.3-2.7,13.8-2.7,13.8c0,0.2,0,0.7,0.7,0.7h22.2
c0.3,0,0.4-0.1,0.5-0.4l12.5-64.2C121.8,2.1,122,1.4,121.2,1.4z M94.8,20.4L90,45.2c0,0,0,0.1-0.1,0.1c0,0-0.2,0-0.2,0H75.3
c0,0-0.1,0-0.2-0.1c-0.1-0.1,0.1-0.2,0.1-0.2l19.2-24.7c0,0,0.1-0.2,0.3-0.2C94.9,20.1,94.8,20.4,94.8,20.4z M51.5,41.5
c-0.7-3.2-4.9-20-5.5-22.4c-1.7-6.9,1.6-11.8,8.1-11.8c5.6,0,9.1,2.1,12.1,4c0.6,0.4,1,0.6,1.1-0.1c0.1-0.4,1.1-5.6,1.1-5.6
s0.3-1-1-1.7C65.5,2.9,60.4,0,49.8,0C30,0,21.6,12.8,25,26.6c1.1,4.4,5.5,21,5.5,24.2c0,1.2,0.7,9.7-9.5,9.7
C11.6,60.4,5.1,54,3,51.7c-0.4-0.4-0.9-0.2-1.1,0.6C1.8,52.8,0,58.6,0,58.6c-0.2,0.8,0.2,1.4,1.6,2.6C4.3,63.3,12,68,24.2,68
C46.3,68,54.3,53.7,51.5,41.5z M184,3.9c-2-1.1-7.1-3.9-17.7-3.9c-19.8,0-28.2,12.7-24.8,26.6c1.1,4.4,5.5,21,5.5,24.2
c0,1.2,0.6,9.7-9.5,9.7c-9.4,0-15.6-6.2-17.8-8.4c-0.5-0.5-1.2-0.3-1.3,0.4c-0.1,0.4-1.2,6.6-1.2,6.6c-0.2,0.8,0.2,1.4,1.6,2.5
c2.6,2.2,9.7,6.5,22,6.5c22.1,0,30.1-14.3,27.3-26.4c-0.7-3.2-4.9-20-5.5-22.4c-1.7-6.9,1.6-11.8,8.1-11.8c5.6,0,9.1,2.1,12.1,4
c0.6,0.4,1,0.6,1.1-0.1c0.1-0.4,1.1-5.6,1.1-5.6S185.3,4.6,184,3.9z"/>
</svg>
</div>
An example of the sass file content would be:
=sas-logo-setup ($paramTop, $paramLeft, $paramWidth)
top: $paramTop + 0px
left: $paramLeft + 0px
width: $paramWidth + 0px
height: ($paramWidth + 0px) * 0.368
=commonStyle
.sas-logo
position: absolute
+sas-logo-setup(0px, 0px, 150px)
=customStyle
.sas-logo
+sas-logo-setup($top, $left, $width)
staging
This command will help you test the component locally.
Go to the component`s folder and run: bnm staging
You will be asked for your credentials. They are needed for rendering the component.
Then open a browser and go to http://localhost:9000/
You can change the .banner.css from the components folder to adjust the frame of the component.
The local server uses an authorization and rendering service that can be provided as below:
bnm staging -u "newURL"
The default URL is "http://banner-magic.webology.no/api"
upload
To upload your component to the banner-magic go the the component`s folder and run:
bnm upload
You will be asked for your credentials.
The upload URL can be provided as below:
```bnm upload -u "http://banner-magic.webology.no/api"```
The default URL for uploading and rendering service is: "http://banner-magic.webology.no/api"
update
After uploading a component the id of the newly created component will be added in the component.json (the local file). Running an upload again in the component folder will make an update of the component.
Development of this module
For development of this module and testing it locally:
- Install dependencies with
npm install - Run
npm linkin the root folder to make thebnmcommand available in console