exothermicjs v1.3.0
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
<nav aria-label="Top navigation">
<ul role="menubar">
<li role="none">
<a href="/" role="menuitem">Home</a>
</li>
<li role="none">
<a href="https://example.com" role="menuitem">
All kinds of links
</a>
</li>
<li role="none">
<a href="#on-page-link" role="menuitem">
Here's a link
</a>
</li>
<ul>
</nav>
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
<section class=”row”>
<h1>First!</h1>
<div class="col">
<h2>Here is a column</h2>
</div>
<div class="col">
<h2>Here is another column</h2>
<p>You can add images and tables in here, too.</p>
<p>from adam-p/markdown-here</p>
<table>
...
</table>
</div>
</section>
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'