tree for blog

pub/tree/src/css/main.css

@@ -357,6 +357,54 @@ li:before {
 .list h1 {
   font-size: 0.7rem;
 }
+.list.posts .post {
+  margin-bottom: 2rem;
+}
+.list.posts .post h1 {
+  text-transform: none;
+  font-size: 1.6rem;
+  line-height: 1.8rem;
+  margin-bottom: 1rem;
+  display: block;
+}
+.list.posts .post h2 {
+  font-size: 0.7rem;
+  font-weight: 400;
+  line-height: 1rem;
+  margin-top: 0;
+}
+.list.posts li.post:before {
+  content: "";
+}
+div.post h1 {
+  font-size: 2.8rem;
+  line-height: 4rem;
+  display: block;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+div.post h2,
+div.post h2.sub {
+  line-height: 1rem;
+  letter-spacing: 1px;
+}
+div.post h2.sub {
+  font-size: 0.7rem;
+  font-weight: 400;
+  margin-top: 0;
+  text-transform: uppercase;
+}
+div.post h2 {
+  font-size: 1.2rem;
+  font-weight: 500;
+}
+div.post p {
+  font-size: 1.2rem;
+  line-height: 2.2rem;
+}
+div.post li p {
+  display: inline;
+}
 #body .CodeMirror {
   font-size: 0.8rem;
   line-height: 1rem;

pub/tree/src/css/main.styl

@@ -282,6 +282,56 @@ li:before
 .list h1
   font-size .7rem
 
+.list.posts
+  .post
+    margin-bottom 2rem
+  
+  .post h1
+    text-transform none
+    font-size 1.6rem
+    line-height 1.8rem
+    margin-bottom 1rem
+    display block
+  
+  .post h2
+    font-size .7rem
+    font-weight 400
+    line-height 1rem
+    margin-top 0
+  
+  li.post:before 
+    content ""
+
+div.post
+  h1
+    font-size 2.8rem
+    line-height 4rem
+    display block
+    margin-top 1rem
+    margin-bottom 1rem
+  
+  h2
+  h2.sub
+    line-height 1rem
+    letter-spacing 1px
+  
+  h2.sub
+    font-size .7rem
+    font-weight 400
+    margin-top 0
+    text-transform uppercase
+  
+  h2
+    font-size 1.2rem
+    font-weight 500
+  
+  p
+    font-size 1.2rem
+    line-height 2.2rem
+  
+  li p
+    display inline
+
 #body .CodeMirror
   font-size .8rem
   line-height 1rem

pub/tree/src/js/components/ListComponent.coffee

@@ -43,7 +43,10 @@ module.exports = recl
     if not @getCont()
       _list = (div {className:"loading"}, (load {}, ""))
     else
-      _list = _.map _.keys(doc).sort(), (v) =>
+      _keys = _.keys(doc).sort()
+      if @props.dataType is 'post' then _keys=_keys.reverse()
+      _list = _.map _keys,(v) =>
+        _k = ""
         _path = @state.path+"/"+v
         if @props.dataPreview?
           c = "preview"
@@ -51,11 +54,22 @@ module.exports = recl
             prev = @state.snip[_path].head
           else
             prev = @state.snip[_path]
+
+          if @props.dataType is 'post'
+            orig = @state.snip[_path].orig
+            c = orig.body.c.slice(0,2)
+            c.unshift orig.head
+            prev = 
+              gn: 'div'
+              c: c
+            _k += " post"
+            prev = window.tree.reactify prev
         else
           c = ""
           prev = (h1 {},v)
         href = window.tree.basepath _path
-        (li {}, (a {href:href,className:c,key:"list-a-"+_path}, prev))
+        (li {className:_k}, (a {href:href,className:c,key:"list-a-"+_path}, prev))
     k = "list"
     if @props['data-source'] is 'default' then k += " default"
+    if @props.dataType is 'post' then k += " posts"
     (ul {className:k,key:"list-"+@state.path}, _list)

pub/tree/src/js/main.coffee

@@ -12,7 +12,11 @@ $ ->
   kids              = React.createFactory require './components/KidsComponent.coffee'
   lost              = React.createClass
     render: -> (React.DOM.div {}, "lost")
-  components = {kids:kids,list:list,lost:lost, codemirror:codemirror}
+  components = 
+    kids:kids
+    list:list
+    lost:lost
+    codemirror:codemirror
   
   
   window.tree._basepath = window.location.pathname

pub/tree/src/js/main.js

@@ -71,7 +71,6 @@ module.exports = {
 };
 
 
-
 },{"../dispatcher/Dispatcher.coffee":8,"../persistence/TreePersistence.coffee":13}],2:[function(require,module,exports){
 var BodyComponent, TreeActions, TreeStore, a, div, recl, ref;
 
@@ -306,7 +305,6 @@ module.exports = recl({
 });
 
 
-
 },{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":14,"./BodyComponent.coffee":3}],3:[function(require,module,exports){
 var TreeActions, TreeStore, div, input, load, recl, ref, textarea;
 
@@ -374,7 +372,6 @@ module.exports = recl({
 });
 
 
-
 },{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":14,"./LoadComponent.coffee":7}],4:[function(require,module,exports){
 var div, recl, ref, textarea;
 
@@ -398,7 +395,6 @@ module.exports = recl({
 });
 
 
-
 },{}],5:[function(require,module,exports){
 var TreeActions, TreeStore, a, div, hr, li, recl, ref, ul;
 
@@ -465,7 +461,6 @@ module.exports = recl({
 });
 
 
-
 },{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":14}],6:[function(require,module,exports){
 var TreeActions, TreeStore, a, div, h1, li, load, recl, ref, ul;
 
@@ -522,16 +517,21 @@ module.exports = recl({
     }
   },
   render: function() {
-    var _list, doc, k, ref1;
+    var _keys, _list, doc, k, ref1;
     doc = (ref1 = this.state.tree) != null ? ref1 : [];
     if (!this.getCont()) {
       _list = div({
         className: "loading"
       }, load({}, ""));
     } else {
-      _list = _.map(_.keys(doc).sort(), (function(_this) {
+      _keys = _.keys(doc).sort();
+      if (this.props.dataType === 'post') {
+        _keys = _keys.reverse();
+      }
+      _list = _.map(_keys, (function(_this) {
         return function(v) {
-          var _path, c, href, prev;
+          var _k, _path, c, href, orig, prev;
+          _k = "";
           _path = _this.state.path + "/" + v;
           if (_this.props.dataPreview != null) {
             c = "preview";
@@ -540,12 +540,25 @@ module.exports = recl({
             } else {
               prev = _this.state.snip[_path];
             }
+            if (_this.props.dataType === 'post') {
+              orig = _this.state.snip[_path].orig;
+              c = orig.body.c.slice(0, 2);
+              c.unshift(orig.head);
+              prev = {
+                gn: 'div',
+                c: c
+              };
+              _k += " post";
+              prev = window.tree.reactify(prev);
+            }
           } else {
             c = "";
             prev = h1({}, v);
           }
           href = window.tree.basepath(_path);
-          return li({}, a({
+          return li({
+            className: _k
+          }, a({
             href: href,
             className: c,
             key: "list-a-" + _path
@@ -557,6 +570,9 @@ module.exports = recl({
     if (this.props['data-source'] === 'default') {
       k += " default";
     }
+    if (this.props.dataType === 'post') {
+      k += " posts";
+    }
     return ul({
       className: k,
       key: "list-" + this.state.path
@@ -565,7 +581,6 @@ module.exports = recl({
 });
 
 
-
 },{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":14,"./LoadComponent.coffee":7}],7:[function(require,module,exports){
 var div, input, recl, ref, textarea;
 
@@ -603,7 +618,6 @@ module.exports = recl({
 });
 
 
-
 },{}],8:[function(require,module,exports){
 var Dispatcher;
 
@@ -625,7 +639,6 @@ module.exports = _.extend(new Dispatcher(), {
 });
 
 
-
 },{"flux":10}],9:[function(require,module,exports){
 var rend;
 
@@ -793,7 +806,6 @@ $(function() {
 });
 
 
-
 },{"./actions/TreeActions.coffee":1,"./components/AnchorComponent.coffee":2,"./components/BodyComponent.coffee":3,"./components/CodeMirror.coffee":4,"./components/KidsComponent.coffee":5,"./components/ListComponent.coffee":6,"./persistence/TreePersistence.coffee":13}],10:[function(require,module,exports){
 /**
  * Copyright (c) 2014-2015, Facebook, Inc.
@@ -1134,7 +1146,6 @@ module.exports = {
 };
 
 
-
 },{"../actions/TreeActions.coffee":1}],14:[function(require,module,exports){
 var EventEmitter, MessageDispatcher, TreeStore, _cont, _curr, _load, _snip, _tree;
 
@@ -1226,7 +1237,8 @@ TreeStore = _.extend(EventEmitter.prototype, {
         v = snip[k];
         results.push(_snip[path + "/" + v.name] = {
           head: window.tree.reactify(v.body.head),
-          body: window.tree.reactify(v.body.body)
+          body: window.tree.reactify(v.body.body),
+          orig: v.body
         });
       }
       return results;
@@ -1374,7 +1386,6 @@ TreeStore.dispatchToken = MessageDispatcher.register(function(payload) {
 module.exports = TreeStore;
 
 
-
 },{"../dispatcher/Dispatcher.coffee":8,"events":15}],15:[function(require,module,exports){
 // Copyright Joyent, Inc. and other Node contributors.
 //

pub/tree/src/js/stores/TreeStore.coffee

@@ -59,6 +59,7 @@ TreeStore = _.extend EventEmitter.prototype, {
         _snip[path+"/"+v.name] = 
           head: window.tree.reactify v.body.head
           body: window.tree.reactify v.body.body
+          orig: v.body
     else
       _cont[path] = window.tree.reactify
         gn: 'div'