Add render logic

snics · May 23, 2018 · 0569cae · 0569cae
1 parent 52af9f0
commit 0569cae
Show file tree

Hide file tree

Showing 6 changed files with 184 additions and 9 deletions.
diff --git a/lib/__tests__/fixtures/render/data-header.html b/lib/__tests__/fixtures/render/data-header.html
@@ -0,0 +1,4 @@
+---
+name: John doe
+---
+<h1>Hallo {{name}}</h1>
diff --git a/lib/__tests__/fixtures/render/layouts/default.html b/lib/__tests__/fixtures/render/layouts/default.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>{{title}}</title>
+</head>
+<body>
+{{> body}}
+</body>
+</html>
diff --git a/lib/__tests__/render.test.js b/lib/__tests__/render.test.js
@@ -1,8 +1,21 @@
 const _ = require('lodash');
+const handlebars = require('handlebars');
+const cheerio = require('cheerio');
+const path = require('path');
+const fs = require('fs');
+
 const render = require('../render');
+const loadLayouts = require('../loadLayouts');
+
+function Engine() {
+  this.layouts = {};
+  this.Handlebars = handlebars;
+}
+
+Engine.prototype.render = render.render;
 
 describe('render', () => {
-  describe('loadFiles', () => {
+  describe('_renderInky', () => {
     it('should display an empty array by not found files', () => {
       const content = '<h1>Hello Wold</h1>';
       const buildContent = render._renderInky(content);
@@ -21,4 +34,113 @@ describe('render', () => {
       return expect(buildContent).resolves.toEqual(_.trim(output));
     });
   });
+
+  describe('render', () => {
+    it('should render with out of data', () => {
+      const engine = new Engine();
+      const input = '<h1>Hallo!</h1>';
+
+      const _render = engine.render(input);
+
+      return expect(
+        _render.then(html => {
+          const $ = cheerio.load(html);
+          return $('h1').html();
+        })
+      ).resolves.toEqual('Hallo!');
+    });
+
+    it('should render with hbs data', () => {
+      const engine = new Engine();
+      const input = '<h1>Hallo {{name}}</h1>';
+      const data = { name: 'John' };
+
+      const _render = engine.render(input, data);
+
+      return expect(
+        _render.then(html => {
+          const $ = cheerio.load(html);
+          return $('h1').html();
+        })
+      ).resolves.toEqual('Hallo John');
+    });
+
+    it('should render with data from file header', () => {
+      const engine = new Engine();
+      const input = fs.readFileSync(
+        path.join(__dirname, 'fixtures/render/data-header.html')
+      );
+      const data = { name: 'John' };
+
+      const _render = engine.render(input, data);
+
+      return expect(
+        _render.then(html => {
+          const $ = cheerio.load(html);
+          return $('h1').html();
+        })
+      ).resolves.toEqual('Hallo John doe');
+    });
+
+    it('should render with Inky html tag', () => {
+      const engine = new Engine();
+      const input = '<button href="#">Click Me</button>';
+      const data = { name: 'John' };
+
+      const _render = engine.render(input, data);
+
+      return expect(
+        _render.then(html => {
+          console.log(html);
+          const $ = cheerio.load(html);
+          return $('a').html();
+        })
+      ).resolves.toEqual('Click Me');
+    });
+
+    it('should render with default', () => {
+      function Engine() {
+        this.layouts = {};
+        this.Handlebars = handlebars;
+
+        this.loadLayouts(path.join(__dirname, 'fixtures/render/layouts'));
+      }
+
+      Engine.prototype.render = render.render;
+      Engine.prototype.loadLayouts = loadLayouts;
+
+      const engine = new Engine();
+      const input = '<h1>Hallo {{name}}</h1>';
+      const data = {
+        name: 'John',
+        title: 'This is a page title',
+        layout: 'default'
+      };
+
+      const _render = engine.render(input, data);
+
+      expect(
+        _render.then(html => {
+          const $ = cheerio.load(html);
+          console.log();
+          return $('title').html();
+        })
+      ).resolves.toEqual('This is a page title');
+
+      expect(
+        _render.then(html => {
+          const $ = cheerio.load(html);
+          console.log();
+          return $('html').length;
+        })
+      ).resolves.toEqual(1);
+
+      return expect(
+        _render.then(html => {
+          const $ = cheerio.load(html);
+          return $('body h1').html();
+        })
+      ).resolves.toEqual('Hallo John');
+    });
+  });
 });
diff --git a/lib/render.js b/lib/render.js
@@ -3,9 +3,17 @@
 const Promise = require('bluebird');
 const Inky = require('inky').Inky;
 const cheerio = require('cheerio');
+const _ = require('lodash');
+const stripBom = require('strip-bom');
+const fm = require('front-matter');
 
 const utils = require('./utils');
 
+/**
+ * Render all Inky HTML tags
+ * @param {string} htmlContent
+ * @private
+ */
 const _renderInky = function(htmlContent) {
   return new Promise(resolve => {
     if (!utils.hasInkyCode(htmlContent)) return resolve(htmlContent);
@@ -17,6 +25,32 @@ const _renderInky = function(htmlContent) {
   });
 };
 
+/**
+ * A final render function and combined Handlebars and Inky rendering
+ * @param {string} html
+ * @param {object} options
+ * @return {PromiseLike<string>}
+ */
+const render = function(html, options = {}) {
+  const engine = this.Handlebars;
+  const page = fm(stripBom(_.toString(html)));
+  const layout = page.attributes.layout || 'default';
+  const layoutTemplate = this.layouts[layout];
+  const date = _.merge(options, page.attributes);
+
+  return Promise.resolve()
+    .then(() => _renderInky(page.body))
+    .then(content => {
+      const pageTemplate = engine.compile(content + '\n');
+      if (!_.isUndefined(layoutTemplate)) {
+        engine.registerPartial('body', pageTemplate);
+        return layoutTemplate(date);
+      }
+      return pageTemplate(date);
+    });
+};
+
 module.exports = {
-  _renderInky
+  _renderInky,
+  render
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
   "dependencies": {
     "bluebird": "^3.5.1",
     "cheerio": "^1.0.0-rc.2",
+    "front-matter": "^2.3.0",
     "glob": "^7.1.2",
     "handlebars": "^4.0.11",
     "inky": "^1.3.7",
@@ -48,7 +49,7 @@
     "prettier": "^1.11.1"
   },
   "engines": {
-    "npm": ">= 6.0.0"
+    "node": ">= 6.0.0"
   },
   "license": "MIT"
 }