display rendered HTML in the demo

broccoli/demo.js

@@ -12,6 +12,13 @@ module.exports = function() {
       require.resolve('mobiledoc-dom-renderer')
     )
   );
+  // find the global build relative to the commonjs `main` entrypoint
+  var htmlrendererDir = path.join(
+    path.dirname(
+      require.resolve('mobiledoc-html-renderer')
+    ),
+    '..', '..', 'global'
+  );
   return mergeTrees([
     funnel(demoDir, {
       include: [
@@ -27,6 +34,12 @@ module.exports = function() {
         'mobiledoc-dom-renderer.js'
       ],
       destDir: '/demo'
+    }),
+    funnel(htmlrendererDir, {
+      include: [
+        'mobiledoc-html-renderer.js'
+      ],
+      destDir: '/demo'
     })
   ]);
 };

demo/demo.css

@@ -23,7 +23,7 @@ body {
 }
 
 .pane {
-  max-width: 25%;
+  max-width: 20%;
   padding: 0 1em;
 }
 

demo/demo.js

@@ -3,19 +3,28 @@
 'use strict';
 
 var ContentKit = exports.ContentKit,
-    $ = exports.$;
+    $ = exports.$,
+    MobiledocHTMLRenderer = exports.MobiledocHTMLRenderer,
+    MobiledocDOMRenderer = exports.MobiledocDOMRenderer;
 
 var ContentKitDemo = exports.ContentKitDemo = {
   syncCodePane: function(editor) {
     var codePaneJSON = document.getElementById('serialized-mobiledoc');
-    var json = editor.serialize();
-    codePaneJSON.innerHTML = this.syntaxHighlight(json);
+    var mobiledoc = editor.serialize();
+    codePaneJSON.innerHTML = this.syntaxHighlight(mobiledoc);
 
     var renderer = new MobiledocDOMRenderer();
-    var rendered = renderer.render(json);
+    var rendered = renderer.render(mobiledoc);
 
     $('#rendered-mobiledoc').empty();
     $('#rendered-mobiledoc')[0].appendChild(rendered);
+
+    var htmlRenderer = new MobiledocHTMLRenderer();
+    var html = htmlRenderer.render(mobiledoc);
+
+    html = html.replace(/&/g,'&amp;').replace(/</g, '&lt;').replace(/>/g,'&gt;');
+
+    $('#rendered-mobiledoc-html').html(html);
   },
 
   syntaxHighlight: function(json) {

demo/index.html

@@ -61,21 +61,32 @@ <h2>serialized mobiledoc</h2>
     </div>
 
     <div class="pane">
-      <h2>rendered mobiledoc</h2>
+      <h2>rendered mobiledoc (dom)</h2>
       <p class='desc'>
         This is the output of using the runtime (client-side)
-        <a href='http://github.com/bustlelabs/mobiledoc-dom-render'>mobiledoc-dom-renderer</a>
+        <a href='http://github.com/bustlelabs/mobiledoc-dom-renderer'>mobiledoc-dom-renderer</a>
         on the serialized mobiledoc.
       </p>
       <div id="rendered-mobiledoc"></div>
     </div>
 
+    <div class="pane">
+      <h2>rendered mobiledoc (html)</h2>
+      <p class='desc'>
+        This is the output of using the server-side
+        <a href='http://github.com/bustlelabs/mobiledoc-html-renderer'>mobiledoc-html-renderer</a>
+        on the serialized mobiledoc.
+      </p>
+      <div id="rendered-mobiledoc-html"></div>
+    </div>
+
   </div>
 
   <!-- Include ContentKit JS -->
   <script src="../global/content-kit-editor.js"></script>
   <!-- JS just for the demo page -->
   <script src="./mobiledoc-dom-renderer.js"></script>
+  <script src="./mobiledoc-html-renderer.js"></script>
   <script src="./jquery/jquery.js"></script>
   <script src="demo.js"></script>
 </body>

package.json

@@ -58,6 +58,7 @@
     "gulp-uglify": "^1.1.0",
     "jquery": "^2.1.4",
     "mobiledoc-dom-renderer": "^0.1.3",
+    "mobiledoc-html-renderer": "^0.1.0",
     "testem": "^0.8.4"
   }
 }