helper integration

system helper defined.
system css added

apps/posts/_attachments/css/posts.css

@@ -10,43 +10,6 @@
   width: 750px;
   padding-right: 40px;
 }
-.posts .main ul.tag-cloud {
-  margin-top: -20px;
-}
-.posts .main ul.tag-cloud li {
-  display: inline;
-  padding-left: 10px;
-}
-.posts .main ul.tag-cloud a.rank-10 {
-  font-size: 250%;
-}
-.posts .main ul.tag-cloud a.rank-9 {
-  font-size: 210%;
-}
-.posts .main ul.tag-cloud a.rank-8 {
-  font-size: 170%;
-}
-.posts .main ul.tag-cloud a.rank-7 {
-  font-size: 130%;
-}
-.posts .main ul.tag-cloud a.rank-6 {
-  font-size: 90%;
-}
-.posts .main ul.tag-cloud a.rank-5 {
-  font-size: 90%;
-}
-.posts .main ul.tag-cloud a.rank-4 {
-  font-size: 90%;
-}
-.posts .main ul.tag-cloud a.rank-3 {
-  font-size: 90%;
-}
-.posts .main ul.tag-cloud a.rank-2 {
-  font-size: 90%;
-}
-.posts .main ul.tag-cloud a.rank-1 {
-  font-size: 90%;
-}
 .posts .sidebar {
   float: left;
   margin-right: 10px;
@@ -58,88 +21,61 @@
 .posts .sidebar ul li {
   list-style: none;
 }
-.posts .main article.entry {
+.posts .main article.post {
   margin-bottom: 10px;
 }
-.posts .main article.entry header div.sns {
+.posts .main article.post header div.sns {
   float: right;
   padding-top: 5px;
 }
-.posts .main article.entry header h3 {
+.posts .main article.post header h3 {
   border-top: 1px solid #dddddd;
   padding-top: 5px;
   border-bottom: 3px double #dddddd;
   padding-bottom: 5px;
   margin-bottom: 0px;
 }
-.posts .main article.entry ul.tags {
+.posts .main article.post ul.tags {
   margin: 0;
   list-style: none;
   text-align: right;
   min-height: 1em;
 }
-.posts .main article.entry ul.tags li {
+.posts .main article.post ul.tags li {
   display: inline;
 }
-.posts .main article.entry div.content {
+.posts .main article.post div.content {
   clear: both;
   padding-left: 40px;
 }
-.posts .main article.entry footer {
+.posts .main article.post footer {
   border-top: 1px solid #dddddd;
   padding-top: 5px;
   text-align: right;
   vertical-align: top;
   margin-bottom: 30px;
 }
-.posts .main .pagination {
-  float: left;
-  margin-right: 10px;
-  width: 750px;
-}
-.posts .main .pagination .prev {
-  float: left;
-  margin-right: 10px;
-  width: 70px;
-  padding-right: 600px;
-  text-align: left;
-}
-.posts .main .pagination .next {
-  float: left;
-  margin-right: 10px;
-  width: 70px;
-  margin-right: 0;
-  padding-right: 0;
-  margin-right: 0;
-  text-align: right;
-}
-.posts .main #admin_list {
-  float: left;
-  margin-right: 10px;
-  width: 750px;
-}
-.posts #admin_list th.title, .posts #admin_list td.title {
-  text-align: left;
-}
-.posts #admin_list th.datetime, .posts #admin_list td.datetime {
-  width: 15em;
-}
-.posts #admin_list th.menu, .posts #admin_list td.menu {
-  text-align: center;
-  width: 5em;
-}
-.posts #admin_list tr.draft {
-  background-color: #ececec;
-}
-.posts #admin_list tr.draft td.title {
-  font-style: italic;
+.posts .main article.post footer time.created_at {
+  display: none;
 }
 .posts a.posts-new {
   background-image: url('./images/posts-new.png');
   background-repeat: no-repeat;
   padding-left: 20px;
   padding-bottom: 5px;
 }
+.posts a.posts-edit {
+  background-image: url('./images/posts-edit.png');
+  background-repeat: no-repeat;
+  padding-left: 20px;
+  padding-bottom: 5px;
+}
+.posts a.posts-delete {
+  background-image: url('./images/posts-delete.png');
+  background-repeat: no-repeat;
+  padding-left: 20px;
+  padding-bottom: 5px;
+}
 .posts a.posts-admin {
   background-image: url('./images/posts-admin.png');
   background-repeat: no-repeat;
@@ -164,8 +100,8 @@
   padding-left: 20px;
   padding-bottom: 5px;
 }
-.posts tr.draft a.permalink {
-  background-image: url('./images/draft.png');
+.posts time.updated_at {
+  background-image: url('./images/time.png');
   background-repeat: no-repeat;
   padding-left: 20px;
   padding-bottom: 5px;

apps/posts/_attachments/css/posts.less

@@ -4,23 +4,6 @@
     .main {
         .span-19;
         .append-1;
-        ul.tag-cloud {
-            margin-top: -20px;
-            li {
-                display: inline;
-                padding-left: 10px;
-            }
-            a.rank-10 { font-size: 250%; }
-            a.rank-9  { font-size: 210%; }
-            a.rank-8  { font-size: 170%; }
-            a.rank-7  { font-size: 130%; }
-            a.rank-6  { font-size: 90%; }
-            a.rank-5  { font-size: 90%; }
-            a.rank-4  { font-size: 90%; }
-            a.rank-3  { font-size: 90%; }
-            a.rank-2  { font-size: 90%; }
-            a.rank-1  { font-size: 90%; }
-        }
     }
 
     .sidebar {
@@ -31,7 +14,7 @@
         }
     }
 
-    .main article.entry {
+    .main article.post {
         margin-bottom: 10px;
         header {
             div.sns {
@@ -67,49 +50,9 @@
             vertical-align: top;
             margin-bottom: 30px;
         }
-    }
-
-    .main article.list {
-    }
-
-    .main article.permalink {
-    }
-
 
-    .main .pagination {
-        .span-19;
-        .prev {
-            .span-2;
-            .append-15;
-            text-align: left;
-        }
-        .next {
-            .span-2;
-            .last;
-            text-align: right;
-        }
-    }
-
-    .main #admin_list {
-        .span-19;
-    }
-
-    #admin_list {
-        th.title, td.title {
-            text-align: left;
-        }
-        th.datetime, td.datetime {
-            width: 15em;
-        }
-        th.menu, td.menu {
-            text-align: center;
-            width: 5em;
-        }
-        tr.draft {
-            td.title {
-                font-style : italic;
-            }
-            background-color: #ececec;
+        footer time.created_at {
+            display:none;
         }
     }
 
@@ -122,11 +65,15 @@
 
     /** icons **/
     a.posts-new    { .icon('./images/posts-new.png'); }
+    a.posts-edit   { .icon('./images/posts-edit.png'); }
+    a.posts-delete { .icon('./images/posts-delete.png'); }
     a.posts-admin  { .icon('./images/posts-admin.png'); }
     a.archive-link { .icon('./images/archive-link.png')}
     a.tag-link     { .icon('./images/tag-link.png')}
     a.permalink    { .icon('./images/permalink.png') }
-    tr.draft a.permalink { .icon('./images/draft.png') }
+    time.updated_at { .icon('./images/time.png') }
+
+
 
     /* editor */
     #postEditor {

apps/posts/_attachments/templates/parts/post.ejs

@@ -18,12 +18,13 @@
   <footer>
     <a class="permalink" title="<%= this.title %>"
        href="<%= url('/p/' + this._id) %>"><%= _("posts.permalink") %></a>
-    <a class="edit" title="<%= _('posts.edit') %>: <%= this.title %>"
+    <a class="posts-edit" title="<%= _('posts.edit') %>: <%= this.title %>"
        href="<%= url('/admin/edit/' + this._id) %>"><%= _("posts.edit") %></a>
-    <a class="delete" title="<%= _('posts.delete') %>: <%= this.title %>"
+    <a class="posts-delete" title="<%= _('posts.delete') %>: <%= this.title %>"
        href="<%= url('/p/' + this._id) %>"><%= _("posts.delete") %></a>
-    <span class="updated_by"><%= this.updated_by.user_name %></span>
     <time datetime="<%= this.updated_at %>" class="updated_at"><%= this.updated_at %></time>
+    <time datetime="<%= this.created_at %>" class="created_at"><%= this.updated_at %></time>
+    <%- $system.linkToUser(this.updated_by) %>
   </footer>
   <script type="text/javascript">
     $(function(){$('article.post[data-docid="<%= this._id %>"]').bindDelete();});

apps/system/_attachments/css/system_helper.css

@@ -0,0 +1,23 @@
+a.system.login.twitter {
+  background-image: url('./images/login-twitter.png');
+  background-repeat: no-repeat;
+  padding-left: 20px;
+  padding-bottom: 5px;
+}
+a.system.user.twitter {
+  border: none;
+  text-decoration: none;
+}
+a.system.user.twitter img {
+  padding-right: 3px;
+  vertical-align: middle;
+}
+a.system.user.twitter span {
+  padding-left: 3px;
+}
+a.system.user.undefined {
+  background-image: url('./images/user-undefined.png');
+  background-repeat: no-repeat;
+  padding-left: 20px;
+  padding-bottom: 5px;
+}

apps/system/_attachments/css/system_helper.less

@@ -0,0 +1,26 @@
+.icon (@file){
+    background-image: url(@file);
+    background-repeat: no-repeat;
+    padding-left: 20px;
+    padding-bottom: 5px;
+}
+
+a.system.login.twitter {
+    .icon('./images/login-twitter.png');
+}
+
+a.system.user.twitter {
+    border: none;
+    text-decoration: none;
+    img {
+        padding-right: 3px;
+        vertical-align: middle;
+    }
+    span {
+        padding-left: 3px;
+    }
+}
+
+a.system.user.undefined {
+    .icon('./images/user-undefined.png');
+}

apps/sunrise/app.js → apps/system/app.js

@@ -5,7 +5,7 @@ var merge = require('sunrise').utils.merge;
 var auth = require('sunrise').middleware.auth;
 
 var ddoc = {
-  _id: "_design/sunrise" ,
+  _id: "_design/system" ,
   version: require('sunrise').version,
   name: 'System',
   description: 'Sunrise system application',
@@ -17,6 +17,8 @@ var ddoc = {
 
 module.exports = ddoc;
 
+ddoc.helpers = require('./helpers');
+ddoc.dynamicHelpers = require('./dynamicHelpers');
 ddoc.init = function(app){
   var version = {
     node: process.version,
@@ -61,6 +63,44 @@ ddoc.init = function(app){
 
   // Logout endpoint.
   app.get('/logout', auth.logout({redirect: '../'}));
+
+
+  app.dynamicHelpers(ddoc.dynamicHelpers);
+  app.helpers(ddoc.helpers);
+
+
+  app.helpers({
+    required: function(){
+      // saying that the layout uses $system helpers;
+      this.css(app.set('home') + 'css/system_helper.css');
+    },
+
+    linkToLogin: function(provider, label){
+      this.css(app.set('home') + 'css/system_helper.css');
+      var url = app.set('home') + 'login/' + provider;
+      return '<a href="' + url + '" class="system login ' + provider + '">' + label + '</a>';
+    },
+
+    linkToLogout: function(label){
+      this.css(app.set('home') + 'css/system_helper.css');
+      var url = app.set('home') + 'logout';
+      return '<a href="' + url + '" class="system logout">' + label + '</a>';
+    },
+
+    linkToUser: function(userObj){
+      this.css(app.set('home') + 'css/system_helper.css');
+      var url = app.set('home') + 'profiles/' + encodeURIComponent(userObj.user_id);
+      var klass = this.htmlescape(userObj.provider) || 'undefined';
+      var label;
+      if( klass == 'twitter' ){
+        // http://tweetimag.es/
+        label = this.sprintf('<img width="18" height="18" src="http://img.tweetimag.es/i/%s_m" /><span>%s</span>', userObj.user_name, this.htmlescape(userObj.user_name));
+      }else{
+        label = this.htmlescape(userObj.user_name);
+      }
+      return '<a href="' + url + '" class="system user ' + klass + '">' + label + '</a>';
+    }
+  });
 };
 
 couchapp.loadAttachments(ddoc, path.join(__dirname, '_attachments'));