NodeJS HTML template generator pure JavaScript

Raw

00.src.md

    src/
├── pages
│   ├── posts
│   │   └── post-1.js
│   └── index.js
├── static
│   ├── assets
│   │   ├── images
│   │   ├── scripts
│   │   │   └── main.js
│   │   └── styles
│   │       ├── main.css
│   │       ├── normalize.css
│   │       └── reset.css
│   └── robots.txt
└── templates
    ├── master
    │   ├── foot.js
    │   └── head.js
    ├── pages
    │   ├── posts.js
    │   └── post.js
    └── article.js


  

Raw

01.pages.md

    
  pages/index.js
const data = require('../../content/data.json')

const head = require('../templates/master/head')
const index = `
  <ul>
    ${Object.keys(data.heroes).map(hero => `
      <li><a href="heroes/${hero}">${data.heroes[hero]['hero.md'].attr.name}</a></li>
    `).join('')}
  </ul>
`
const foot = require('../templates/master/foot')

module.exports = head + index + foot

  pages/posts/post-1.js
const template = require('../../templates/pages/hero')
const data = require('../../../content/data.json')
module.exports = template({ data, hero: 'the-envisioner' })

Raw

02.templates.md

    
  templates/master/head.js
module.exports = `<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1" />
    <title>Blog posts</title>
    <link rel="stylesheet" href="/assets/styles/main.min.css" />
  </head>
  <body>
`



  templates/pages/post.js
module.exports = (props) => (
  ((data) => {
    return [
      require('../../templates/master/head'),
      require('../../templates/breadcrumbs')(data.hero),
      require('../../templates/hero')(data.hero),
      require('../../templates/origin')(data.story),
      require('../../templates/planet')(data.planet),
      require('../../templates/medals')(data.medals),
      require('../../templates/master/foot'),
    ].join('')
  })({
    hero: props.data.heroes[props.hero]['hero.md'],
    story: props.data.heroes[props.hero]['story.md'],
    planet: props.data.planets[props.data.heroes[props.hero]['hero.md'].attr.planet]['planet.md'],
    medals: props.data.heroes[props.hero]['hero.md'].attr.medals.map(medal => props.data.medals[medal]),
  })
)



  templates/article.js
module.exports = function (props) {
  return `
    <section class="hero" style="background-image: url('/content/heroes/the-envisioner/poster.png')">
      <h1>
        <a name="hero" href="#hero">${props.attr.name}</a>
      </h1>
      <p>Class: ${props.attr.class}</p>
    </section>
  `
}



  

bernardodiasc/00.src.md