quick fixes to codemirror example

Author: nateps

codemirror/index.html

@@ -1,19 +1,12 @@
 <Head:>
   <view is="d-codemirror:includes" static='/cm'></view>
   <view is="d-showdown:includes" static='/showdown'></view>
-<Body:>
-  <!--Templates define both HTML and model-view bindings-->
-  <header>
-    <h1>CodeMirror Example</h1>
-  </header>
-
-  <section id="mirror-wrapper">
-    <view is="d-codemirror" text="{{codemirror.text}}" options="{{ { tabSize: 2, mode: 'markdown' } }}"></view>
-  </section>
-  <section>
-    <view is="d-showdown" text="{{codemirror.text}}" html="{{_page.markdown}}" options="{{ {} }}"></view>
-    <div as="md">
-      {{markdown(_page.markdown)}}
-    </div>
-  </section>
 
+<Body:>
+  <div class="editor">
+    <view is="d-codemirror" text="{{codemirror.text}}" options="{{ {tabSize: 2, mode: 'markdown'} }}"></view>
+  </div>
+  <div class="preview">
+    <view is="d-showdown" text="{{codemirror.text}}" html="{{_page.markdown}}"></view>
+    {{unescaped _page.markdown}}
+  </div>

codemirror/index.js

@@ -9,14 +9,12 @@ app.component(require('d-showdown'));
 // Routes render on client as well as server
 app.get('/', function(page, model) {
   // Subscribe specifies the data to sync
-  model.subscribe('codemirror.text', function() {
+  var text = model.at('codemirror.text');
+  text.subscribe(function() {
     // we set default content if none has been set
-    model.setNull('codemirror.text', '<style>.example{ border: 1px solid orange; }</style>\n<div class="example">hello world</div>')
+    if (text.get() == null) {
+      text.create('# Hello world');
+    }
     page.render();
   });
 });
-
-app.proto.markdown = function(html) {
-  if(!this.md) return;
-  this.md.innerHTML = html;
-};

codemirror/index.styl

@@ -1,30 +1,9 @@
-@import "../node_modules/derby-starter/styles/reset.css"
-
-body {
-  color: #000;
-  background: #f7f7f7;
-}
-h1 {
-  font: 26px/24px "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: bold;
-  letter-spacing: -1px;
-  margin-bottom: 12px;
-  color: #111;
-  text-shadow: 0 1px #f7f7f7;
-}
-
-header {
-  background: #ddd;
-  background: linear-gradient(#e7e7e7, #d0d0d0);
-  box-shadow: inset 0 1px #f7f7f7, 0 1px #888, 0 2px #e7e7e7;
-  padding: 12px 16px;
-  white-space: nowrap;
-}
-
-section {
-  padding: 12px 16px;
-}
-
-section#mirror-wrapper {
-  background-color: white;
-}
+body
+  background: #e7e7e7
+
+.editor,.preview
+  box-sizing: border-box
+  padding: 10px
+  width: 50%
+  display: inline-block
+  vertical-align: top