npm

Join us for the "JavaScript Supply Chain Security" tech talk, presented by VP of Security, Adam Baldwin. 6/20 at 10am PT.Sign up here »

bnm-cli

0.1.17 • Public • Published

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:

  1. Install dependencies with npm install
  2. Run npm link in the root folder to make the bnm command available in console

install

npm i bnm-cli

Downloadsweekly downloads

21

version

0.1.17

license

Private

last publish

collaborators

  • avatar
Report a vulnerability