❤
npm
Sign UpSign In

This package has been deprecated

Author message:

This package has been deprecated in favor of exothermicjs

react-yaml-templator

0.2.11 • Public • Published

ReactY Templator - Yaml based templating for ReactJS

Build Status NPM version

Create dynamic page content using YAML and Markdown

Installation

npm install --save react-yaml-templator

Basic usage

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>

Template Examples

Navigation Bar

- !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

- !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 modules):

top_slideshow:
- !slideshow
  items:
  - 'https://example.com/img1.png'
  - 'https://example.com/img2.png'
  - 'https://example.com/img3.png'

Readme

Keywords

none

Package Sidebar

Install

npm i react-yaml-templator

Repository

github.com/suhay/reacty

Homepage

github.com/suhay/reacty#readme

Weekly Downloads

2

Version

0.2.11

License

MIT

Unpacked Size

286 kB

Total Files

45

Last publish

Collaborators

  • suhay
Try on RunKit
Report malware