Templar is a React to HTML converter. It is created for developer friendly e-mail template development. By leveraging the component structure with React, it composes a reusable and maintainable pipeline for the projects.
Benefits:
- Allow themable components with the help of React-JSS & Styled Components.
- Easy of use, instead of dealing with huge table based layouts, you are only dealing with small/simple React components.
- Automatic HTML conversion and e-mail friendly CSS creation.
The use case of this library is to create e-mail templates to improve the development process.
adidas is not responsible for the usage of this software for different purposes that the ones described in the use cases.
You need NodeJS/NPM to install and run the tool.
npm install htmplar --save
or
yarn add htmplar
Then in your package.json, add the following
"scripts": {
"serve": "htmplar serve",
"develop": "htmplar dev"
}All set, you can start to develop your emails by running npm run develop or yarn run develop
You can extend default configuration by creating a htmplar config file (.htmplarrc, .htmplar.json).
{
"source": "src",
"output": "content",
"assets": "assets",
"extension": "html",
"block": {
"convert": true,
"prefix": "block-"
},
"server": {
"port": 3000
},
"logs": "detailed",
"linting": [
true,
{
"exitOnError": true
}
]
}| Option | Default | Description |
|---|---|---|
| source | src |
The folder where your components' source files |
| output | content |
The output folder where the converted HTML files will be saved |
| extension | html |
The extension of the saved files |
| exclude | [] |
Array of folder or file paths inside of your source folder. The matched files will be excluded from convertion. |
| blocks | {} |
An object for block definitions. Normally htmplar converts all matched components to HTML. You can define a prefix and convert option. Then, htmplar will look for, file names with a defined prefix and convert these blocks along with the other components. The difference between normal conversion and block conversion is, block only converts the HTML of that component where normal convert, adds also DOCTYPE, html, head and body tags |
| server | {} |
An object for development server options like server port, assets path etc. |
| logs | detailed |
The amount of logging visible in the CLI output. detailed will display logs for each file converted. summary will display only command starting and endings, none will display nothing. |
| linting | true |
Linting of the JS code with the help of the ESLint. You can create an .eslintrc file to define/overwrite defaults. |
Check out the CONTRIBUTING.md to know how to contribute to this project.
© adidas AG
adidas AG publishes this software and accompanied documentation (if any) subject to the terms of the MIT license with the aim of helping the community with our tools and libraries which we think can be also useful for other people. You will find a copy of the MIT license in the root folder of this package. All rights not explicitly granted to you under the MIT license remain the sole and exclusive property of adidas AG.
NOTICE: The software has been designed solely for the purpose of generating e-mail templates. The software is NOT designed, tested or verified for productive use whatsoever, nor or for any use related to high risk environments, such as health care, highly or fully autonomous driving, power plants, or other critical infrastructures or services.
If you want to contact adidas regarding the software, you can mail us at [email protected].
For further information open the adidas terms and conditions page.