Merge branch 'fix-frontmatter-pr'

Author: javiercf

package.json

@@ -47,8 +47,10 @@
     "statements": 100
   },
   "dependencies": {
+    "camelize": "^1.0.0",
+    "except": "^0.1.3",
     "front-matter": "^2.1.0",
-    "prismjs": "^1.5.1",
+    "node-prismjs": "^0.1.0",
     "remarkable": "^1.6.2"
   },
   "devDependencies": {

src/build.js

@@ -1,4 +1,6 @@
 'use strict';
+const camelize = require('camelize');
+const except = require('except');
 
 /**
  * @typedef HTMLObject
@@ -17,9 +19,11 @@ module.exports = function build(markdown) {
 
   let doImports = 'import React from \'react\';\n';
   const
-    imports = markdown.imports || {},
+    imports = markdown.attributes.imports || {},
     jsx = markdown.html.replace(/class=/g, 'className=');
 
+  const frontMatterAttributes = except(markdown.attributes, 'imports');
+
   for (const variable in imports) {
     // eslint-disable-next-line no-prototype-builtins
     if (imports.hasOwnProperty(variable)) {
@@ -30,7 +34,8 @@ module.exports = function build(markdown) {
   return `
 ${doImports}
 
-module.exports = function() {
+export const attributes = ${JSON.stringify(camelize(frontMatterAttributes))};
+export default function() {
   return (
     <div>
       ${jsx}

src/parser.js

@@ -2,13 +2,11 @@
 
 const
   frontMatter = require('front-matter'),
-  Prism = require('prismjs'),
+  Prism = require('node-prismjs'),
   Remarkable = require('remarkable'),
   escapeHtml = require('remarkable/lib/common/utils').escapeHtml,
   md = new Remarkable();
 
-require('prismjs/components/prism-jsx');
-
 /**
  * Wraps the code and jsx in an html component
  * for styling it later
@@ -83,7 +81,8 @@ function parseMarkdown(markdown) {
 
     const options = {
       highlight(code, lang) {
-        return Prism.highlight(code, Prism.languages[lang]);
+        const language = Prism.languages[lang] || Prism.languages.autoit;
+        return Prism.highlight(code, language);
       },
       xhtmlOut: true
     };
@@ -103,7 +102,7 @@ function parseMarkdown(markdown) {
 
     try {
       html = md.render(markdown.body);
-      resolve({ html, imports: markdown.attributes.imports });
+      resolve({ html, attributes: markdown.attributes });
     } catch (err) {
       return reject(err);
     }

test/build.spec.js

@@ -36,4 +36,8 @@ describe('Build Component', () => {
     component.should.contain('import HelloWorld from \'./hello-world.js\';\n');
   });
 
+  it('exports the front-matter attributes', () => {
+    component.should.contain('export const attributes = {"testFrontMatter":"hello world"}');
+  });
+
 });

test/examples/hello-world.md

@@ -1,4 +1,5 @@
 ---
+test-front-matter: 'hello world'
 imports:
   Button: './button.js'
   HelloWorld: './hello-world.js'

test/parser.spec.js

@@ -51,20 +51,32 @@ describe('Parse Markdown', () => {
 </div>`);
   });
 
-  it('parses markdown with live code blocks', () =>
+  it('parses markdown with live code blocks', done => {
     parser.parse(mdExample).then(result => {
       result.html.should.contain(`<div class="run"><HelloWorld />
 <Button label="Hello World" />
 </div>`);
     })
-  );
+    .then(done)
+    .catch(done);
+  });
 
-  it('parses markdown and created valid html for JSX', () => {
+  it('parses markdown and created valid html for JSX', done => {
     const
       exampleCode = '![](myImage.png)';
     parser.parse(exampleCode).then(result => {
-      result.html.should.ewual('<p><img src="myImage.png" alt="" /></p>\n');
-    });
+      result.html.should.equal('<p><img src="myImage.png" alt="" /></p>\n');
+    })
+    .then(done)
+    .catch(done);
+  });
+
+  it('provides the front-matter attributes', done => {
+    parser.parse(mdExample).then(result => {
+      result.attributes['test-front-matter'].should.equal('hello world');
+    })
+    .then(done)
+    .catch(done);
   });
 
 });