react-yaml-templator
Advanced tools
Create dynamic page content using YAML and Markdown
npm install --save react-yaml-templator
Folder structure
.
├── public/
│ ├── pages/
│ │ ├── index.yml
│ │ ├── base.yml
│ │ └── about.yml
│ └── static/
│ ├── css/
│ ├── js/
│ └── index.html
└── index.js
index.js
var Reacty = require("react-yaml-templator");
var path = require('path');
var express = require('express');
var app = express();
var pages = path.resolve(__dirname, './public/pages');
app.get('*', (req, res) => {
if (req.url.indexOf('.') === -1) {
res.send(Reacty.build(req.url, pages));
} else {
var path = req.params[0] ? req.params[0] : 'index.html';
res.sendFile(path, {root: './public/static'});
}
}).listen(3001, () => {
console.log('React app listening on port 3001!')
});
index.html
<!doctype html>
<html lang="en">
<head>
<meta name="generator" content="reacty">
</head>
<body>
$body-placeholder
</body>
</html>
- !navbar
items:
- "Home": '/'
- "All kinds of links": 'https://example.com'
- "Here's a link": '#on-page-link'
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
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>
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.
Custom defined types that you inject with Yaml tags.
Example (not included in default modules):
top_slideshow:
- !slideshow
items:
- 'https://example.com/img1.png'
- 'https://example.com/img2.png'
- 'https://example.com/img3.png'
FAQs
ReactY Templator | Yaml based templating for ReactJS
We found that react-yaml-templator demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.