ExothermicJS - Yaml based templating for ReactJS
Create dynamic page content using YAML and Markdown without lengthy build times.
Installation
yarn add exothermicjs
Basic usage
Folder structure
.
├── public/
├── pages/
│ ├── fragments/
│ │ └── about.exo
│ ├── index.exo
│ └── page2.exo
└── static/
├── css/
└── js/
Place all page templates within the public/pages
directory. the fragments
directory is meant to hold template files that are to be included within a page (not full pages, but fragments of one).
The package comes with a pre built base.exo
and error.exo
templates. Either of these can be overwritten by adding like named files to your pages
directory, but they are required
for the app to work so that's why we included them by default.
Exothermic comes pre-packaged with its own Express server. To start the server, simply run:
npx exothermic-server
.env file
It is recommended that you include a .env
file within the root of your project. Here is an example of a few configurable keys:
PORT=3001
PUBLIC=./public
NODE_ENV=production
SSR_ONLY=false
Template Examples
Navigation Bar
- !navbar items: - 'Home': '/' - "Nav test": '/test' - "Nave test 2 - 404": '/test/more'
Renders as
Home All kinds of links Here's a link
Section
- !section id: first title: '# First!' class: row items: - !col id: maybe-col content: | ## Here is a column - !col id: maybe-col-also content: | ## Here is another column You can add images and tables in here, too. from adam-p/markdown-here | Tables | Are | Cool | | ------------- |:-------------:| -----:| | col 3 is | right-aligned | $1600 |
Renders as
First! Here is a column Here is another column You can add images and tables in here, too. from adam-p/markdown-here ...
Template Referencing
top_template:- !get 'another-template.yml'
Loads the content of the referenced Yaml file. Good for content reuse, keeping file sizes smaller, and keeping similar collections of information together.
Modules
Custom defined types that you inject with Yaml tags.
Example (not included in default module):
top_slideshow:- !slideshow items: - 'https://example.com/img1.png' - 'https://example.com/img2.png' - 'https://example.com/img3.png'