Content Builder App

Content Builder includes several views for:
- Content builder view itself;
- Web Form view;
- Slack block-kit builder;

Structure of project source:

- ./src/assets - scss, fonts, images files (static stuff)

- ./src/components - for each view / channel create specific folder. You could use components from common folder in any view or component
📦 components
┣ 📂 common
┣ 📂 content-builder
┣ 📂 slack
┗ 📂 webform

- ./src/constants - labels and texts constants.
// TODO - all labels and text have to be brought to constants

- ./src/data - Static data. Channels components structure.

!alt text

``javascript
{
"web": [
{
"type": "input", // name of auto imported component field.
"props": {
"icon": "input", // (1) name of icon from https://material.io/
"label": "Input", // (2) just a visible lable for user
"helpText": "Input element", // (3) help text (visible on hover)
"codeMode": true // (4) ability to use codemode for one field
}
},
...
],
"slack": [
...
],
...
}
`

- ./src/helpers - just js helpers.

- ./src/mixins - just vue helpers mixins.

- ./src/router - just Vue router (https://router.vuejs.org/). If you want to create a new view, don't forget to add the path to the router and restart dev server.

- ./src/store - app vuex.

- ./src/utils - just js helpers.
// TODO merge this folder with helpers.

- ./src/views - this app is created for several projects which connected to content builder.

- ./src/lib.js - this file create wrapper around webform view and published as npm package for usage as library in html scripts or in vue / reac component.
`html
// Sample of usage of webform




















`

- ./src/main.ts - app start point. We try to integrate ts.
// TODO: intergate ts to components.

Dev process


1) `npm install`
2) `npm run dev` (served dev and dev:lib)

or

2) ` or run [env] .`

Build process


1) `npm run build` - build lib and app files
2) If you want to update lib version, in package.json increment version and run command: `npm publish`

Deploy

1) `or deploy [env] .``