built website from 558499e

bustle · Jul 9, 2015 · 9512f1d · 9512f1d
1 parent 558499e
commit 9512f1d
Show file tree

Hide file tree

Showing 6 changed files with 830 additions and 177 deletions.
diff --git a/website/demo/demo.css b/website/demo/demo.css
@@ -23,7 +23,7 @@ body {
 }
 
 .pane {
-  max-width: 25%;
+  max-width: 20%;
   padding: 0 1em;
 }
 

diff --git a/website/demo/demo.js b/website/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 ContentKit.Runtime.DOMRenderer();
-    var rendered = renderer.render(json);
+    var renderer = new MobiledocDOMRenderer();
+    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) {
@@ -65,7 +74,7 @@ function readMobiledoc(string) {
 
 function isValidJSON(string) {
   try {
-    JSON.parse(string);
+    window.JSON.parse(string);
     return true;
   } catch(e) {
     return false;
@@ -144,7 +153,7 @@ $(function() {
   var mobiledoc = sampleMobiledocs.simpleMobiledoc;
 
   var textarea = $('#mobiledoc-to-load textarea');
-  textarea.val(JSON.stringify(mobiledoc, false, 2));
+  textarea.val(window.JSON.stringify(mobiledoc, false, 2));
 
   textarea.on('input', function() {
     attemptEditorReboot(editor, textarea);
@@ -153,7 +162,7 @@ $(function() {
   $('#select-mobiledoc').on('change', function() {
     var mobiledocName = $(this).val();
     var mobiledoc = sampleMobiledocs[mobiledocName];
-    textarea.val(JSON.stringify(mobiledoc, false, 2));
+    textarea.val(window.JSON.stringify(mobiledoc, false, 2));
     textarea.trigger('input');
   });
 

diff --git a/website/demo/index.html b/website/demo/index.html
@@ -61,20 +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>