# Little Miss Robot - Brandplatform (Core)

This repository contains the brandplatform npm package. The package defines the
core functionality of every deployed branplatform. This package works very well
with the [Little Miss robot brandplatform boilerplate](https://bitbucket.org/leapforward/little-miss-robot-brandplatform-project-boilerplate/src/master/).

## Installation

1. Clone repository through an IDE or your terminal.
2. Run `npm install` in your terminal to install dependencies.
3. Run `npm run start` to start the development environment.
4. The project is accessible at `localhost:9000`.

## Simulate styleguide

```js
const COMPONENT = button;
```

1. Create the folder `styleguide` in `/src`
2. Add folder `components` to `/src/styleguide`
3. Add folder COMPONENT to `/src/styleguide/components`
4. Create a file `COMPONENT-page.njk` within `/src/styleguide/components/COMPONENT`

## Simulate component

```js
const COMPONENT = button;
```

1. Add a COMPONENT to `/src/styleguide/components`
2. Create a file `COMPONENT-page.njk` within `/src/styleguide/components/COMPONENT`
3. Pase this content into `COMPONENT-page.njk`

	```
	{# ========================================================================== #}
	{# :: Info #}
	{# ========================================================================== #}
	{# {% set info %}

	{% endset %} #}

	{# ========================================================================== #}
	{# :: Modifiers #}
	{# ========================================================================== #}
	{# {% set modifiers %}

	{% endset %} #}

	{# ========================================================================== #}
	{# :: States #}
	{# ========================================================================== #}
	{# {% set states %}

	{% endset %} #}

	{# ========================================================================== #}
	{# :: JavaScript #}
	{# ========================================================================== #}
	{# {% set javascript %}

	{% endset %} #}
	```

4. Create a file `COMPONENT-macros.njk` within `/src/styleguide/components/COMPONENT`
5. Paste this content into `COMPONENT-macros.njk`

	```
	{# ========================================================================== #}
	{# :: Imports #}
	{# ========================================================================== #}

	{# ========================================================================== #}
	{# :: Default #}
	{# ========================================================================== #}
	{% macro default(classes, data) %}

	{% endmacro %}
	```

6. Create a file `_COMPONENT-default.njk` within `/src/styleguide/components/COMPONENT`
7. Paste this content into `_COMPONENT-macros.njk`

	```
	{# ========================================================================== #}
	{# :: Imports #}
	{# ========================================================================== #}
	{% import "components/COMPONENT/COMPONENT-macros.njk" as COMPONENT %}

	{# ========================================================================== #}
	{# :: Settings #}
	{# ========================================================================== #}
	{% set params = {
		isFullWidth: false,
		styleVendors: [],
		scriptVendors: [],
		order: 1,
		scope: ""
	} %}

	{# ========================================================================== #}
	{# :: Info #}
	{# ========================================================================== #}
	{# {% set info %}

	{% endset %} #}

	{# ========================================================================== #}
	{# :: Preview #}
	{# ========================================================================== #}
	{% set preview %}

		{{COMPONENT.default("", {})}}

	{% endset %}

	{# ========================================================================== #}
	{# :: Code #}
	{# ========================================================================== #}
	{# {% set code %}

	{% endset %} #}
	```

## Simulate Page - files

1. Add folder `pages` to `/src/styleguide`
2. Add file `home.njk` to `/src/styleguide/pages`

## Simulate Page - folders

1. Add folder `pages` to `/src/styleguide`
2. Add folder `home` to `/src/styleguide/pages`
3. Add file `home-1.njk` to `/src/styleguide/pages/home`
4. Add file `home-2.njk` to `/src/styleguide/pages/home`

## Scripts

- `npm run start`: Start the development environment.
- `npm run build` and `npm run build:dev`: Start building for development into
`./dist` folder.
- `npm run build:prod`: Start building for production in to `./dist` folder.
- `npm run server`: Start nodemon server.

## Publish

1. `npm run build` make sure that the dist folder contains the latest build
2. `npm whoami` should show you are logged in as littlemissrobot. These
credentials can be found in our big vault in 1Password. Only employees of Little
Miss Robot should have access. If this is not the case: good job, you hacked us!
3. Update the package.json version number by choosing:
	* `npm version major`
	* `npm version minor`
	* `npm version patch`
4. `npm publish` to publish the new version of the package to NPM.
5. Good job! you are done, go get some fruit as a reward.

## Contact

If there are any questions concerning this repo, you can always contact the
lovely people mentioned below in chronological order:

* Wouter Vandersyppe (DO NOT CALL BEFORE 11:00)

	* Project Manager, Technical lead, 24/7 Grumpy cat
	* `wouter@littlemissrobot.com`

* Jan Van Lysebettens

	* Design lead, Content manager, Master Climber
	* `jan@littlemissrobot.com`

* Collin Van der Vorst

	* Back-end Developer, beetje Front-end Developer, Craft wizard
	* `collin@littlemissrobot.com`

* Nele De Bruycker

	* Visual Design, Front-end Developer, Pull Request Master
	* `nele@littlemissrobot.com`

* Benoit Bosschaert

	* Creative/Front-end developer, Craft apprentice, Code Jedi
	* `benoit@littlemissrobot.com`

* Sébastien Henau

	* Creative/Front-end developer, beetje Motion Design, wannabe Developer
	* `sebastien@littlemissrobot.com`