## What is it?

The config contains the whole configuration of the project. If there is none,
the default configuration defined by us will be used. If there is one present,
this config will be combined with the one we have defined and every value you
define overwrites the default values.

## Structure

In order to customise your setup a bit more you should add a config folder on
the root of your project. Within that folder, add the underlying structure

* **base**: folder containing the main/base configuration of the project
  * **index.js**: file containing configuration applied in both
  local and production
  * **local.js**: file containing configuration when working locally
  * **production.js**: file containing configuration when deploying
* **scripts.js**: file containing the js build structure

## Base

The base folder contains the main/base configuration of the project. This is
mainly linking directories or naming instances within the project.

### index.js

By default this should contain a simple export of a small object:

```js
module.exports = {
	/**
	 * General info
	 * -------------------------------------------------------------------------
	 */
	app: {
		name: "Name of the project",
		logo: "/assets/images/brand/logo.svg",
		favicon: "/assets/images/meta/favicon.ico",
	},
};
```

### local.js

This contains the configuration that is different when deploying the project.
This is the configuration that should only be used locally. By default this
should be something simple like the port the server makes use of:

```js
module.exports = {
	server: {
		port: 9999
	}
};
```

### production.js

This contains the configuration that is different when the project is deployed.
This is the configuration that should only be used when the project is deployed.
By default this should be something simple like the port the server makes use
of. This can be anything, depends on your own server.

```js
module.exports = {
	server: {
		port: 12000
	}
};
```

## Script.js

This file contains the configuration necessary to build and minify the
JavaScript structure. By default the brandplatform already contains the build
for general:

```js
module.exports = {
	general: "./src/js/general.js",
};
```

But don't worry, this can be overwritten by your own scripts.js. You should
consider this object to be the entry point of webpack when building the files.
This can be written in 2 different ways:

1. Multiple entry points with just one file:

```js
module.exports = {
	general: "./src/js/general.js",
	marketing: "./src/js/marketing.js",
	tools: "./src/js/tools.js",
};
```

2. Multiple entry points with multiple files:

```js
module.exports = {
	general: [
		"./src/js/general1.js",
		"./src/js/general2.js",
		"./src/js/general3.js",
	],
	marketing: "./src/js/marketing.js",
	tools: "./src/js/tools.js",
	leapforward: [
		"./src/js/little-miss-robot.js",
		"./src/js/knight-moves.js",
		"./src/js/once.js",
	],
};
```

## Options

### App

* **name**: The name that will be shown as the `<title>` of the browser
* **logo**: The location of the logo of the brand. This will be used in the
header of the brandplatform
* **favicon**: The location of the favicon used in the brandplatform. This will
be used in the tab of the browser
* **description**: Description of the project used in the meta tag
`<meta type="description">`
* **version**: **DO NOT OVERWRITE** The current/latest version of the project
because this is linked to the package.json

```js
module.exports = {
	app: {
		name: "Little Miss Robot",
		logo: "/assets/images/brand/logo.svg",
		favicon: "/assets/images/meta/favicon.ico",
		description: "",
		version: "",
	}
};
```

### Environment

**DO NOT OVERWRITE**

* **node**: The type of environment used by this project. Can either be
**local** or **production**.
* **core**: The type of environment used by the core NPM package. When working
on the NPM package this is **local**, by default this is **production**

```js
module.exports = {
	environment: {
		node: process.env.NODE_ENV,
		core: process.env.CORE_ENV
	}
};
```

### Project

* **dir**: The directory where all the Nunjucks templates are placed within
* **dist**: The directory where the build will be placed within
* **changelog**: The directory where all the changelog files are placed within

```js
module.exports = {
	project: {
		dir: "./src/styleguide/",
		dist: "./dist",
		changelog: "./changelog"
	}
};
```

### Taxonomy

* **library**: Used to change how we call the component library
	* **name**: the name of the component library. Changes the copy in the main
	navigation from component library to the new value.
	* **route**: the copy in the route when navigating to the component library.
	This should **NOT** contain any spaces or special characters.
* **fundamentals**: The name given to the category within the component library
where the colors, typography and iconography is documented. Changing this will
change the name in the sidebar and the route. This should **NOT** contain any
spaces or special characters.
* **pages**: The name given to the category where we collect all the pages or
views build up with the components and building-blocks of the component library.
This should **NOT** contain any spaces or special characters.

```js
module.exports = {
	taxonomy: {
		library: {
			name: "Component library",
			route: "library"
		},
		fundamentals: "fundamentals",
		pages: "pages"
	}
};
```

### Styles

* **dir**: The directory where the scss files is placed within. This is used to
compile to CSS
* **vendors**: The directory where the vendors are placed within. This is used
to make sure the compiler ignores these
* **linter**: The directory to where the linter is located for linting the SCSS.
* **ignore**: The directory to where the ignore for the linter is located to
ignore linting certain files.

```js
module.exports = {
	styles: {
		dir: "./src/scss/",
		vendors: "./src/scss/_vendors/",
		linter: "./.stylelintrc",
		ignore: "./.stylelintignore"
	}
};
```

### Scripts

* **dir**: The directory where the JavaScript files are located. This is used
to compile ES6 to readable JavaScript for the browser. **Very important** to
know is that you **ALWAYS** have to place your main JavaScript file directly
in the folder because we loop over these files and see these as the main entry
points. No other JavaScript file, except the main ones need to be placed here.
The result is each file compiled with its imports.
* **vendors**: The location of the JavaScript vendors te be ignored by the
linters and the compiles
* **linter**: The location of the JavaScript linter

```js
module.exports = {
	scripts: {
		dir: "./src/js/",
		vendors: "src/js/vendors/",
		linter: "./eslintrc.json"
	}
};
```

### Assets

* **images**: The directory in which the images are located
* **fonts**: The directory in which the fonts are located
* **videos**: The directory in which the videos are located
* **audio**: The directory in which the audio is located

```js
module.exports = {
	assets: {
		images: "./src/assets/images/",
		fonts: "./src/assets/fonts/",
		videos: "./src/assets/videos/",
		audio: "./src/assets/audio/"
	}
};
```

### Server

* **localhost**: The port used to run the localhost on. When the project runs
you need to navigate to **localhost:9000** or you own defined port to view the
brandplatform in the browser.
* **port**: The port used by the server to listen to any changes
* **api**: The API that is used to display content on the brand and resources
pages. [This API is build by Little Miss Robot](https://bitbucket.org/leapforward/little-miss-robot-brandplatform-cms-2019/src/develop/).

```js
module.exports = {
	server: {
		localhost: 9000,
		port: 9999,
		api: ""
	}
};
```

### Release

* **zipname**: The name of the zip file created when deploying

```js
module.exports = {
	release: {
		zipname: "package.zip"
	}
};
```