## 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.

## How to config?

1. Create a **config folder** on the root of your project
2. Add a file called **index.js**.
3. Add an **export** with an **empty object** to it:

```js
module.exports = {

};
```

4. **Optional** if you want to update the port used when developing or when
running the project on production. Add a folder **env** and put two files in
there. These should only be filled in when you want to use a different config
based on the environment the project is ran:

	* **local.js**: Contains the port that the server listens to

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

	* **production.js**: Contains the port that the production server listens to

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

5. Fill up your `config/index.js` up with diffenent options to update the paths
or folder structure. Find the options below:

## 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/general/brand/logo.svg",
		favicon: "/assets/images/general/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"
	}
};
```