blogelator 0.1.0

data/app/assets/javascripts/blogelator/templates/components/markdown-editor.handlebars

@@ -0,0 +1,8 @@
+{{view Ember.TextArea class="body-markdown" valueBinding="content"}}
+<div class="html-preview">
+  <div class="post">
+    <div class="body">
+      {{{html}}}
+    </div>
+  </div>
+</div>

data/app/assets/javascripts/blogelator/templates/components/save-button.handlebars

@@ -0,0 +1,8 @@
+<span class="button-label">{{yield}}</span>
+<span class="confirm">
+  <i class="fa fa-check yes"></i>
+  <i class="fa fa-times no"></i>
+</span>
+<span class="saving"><i class="fa fa-refresh fa-spin"></i></span>
+<i class="fa fa-check-circle saved"></i>
+<i class="fa fa-exclamation-circle error"></i>

data/app/assets/javascripts/blogelator/templates/posts/_form.handlebars

@@ -0,0 +1,6 @@
+<div class="post-form">
+  <div>
+    {{view Ember.TextField class="title" placeholder="Blog Post Title" valueBinding="title"}}
+  </div>
+  {{markdown-editor contentBinding="bodyMarkdown" action="save"}}
+</div>

data/app/assets/javascripts/blogelator/templates/posts/_form_action_bar.handlebars

@@ -0,0 +1,22 @@
+<div class="form-action-bar">
+  {{#save-button action="destroy" confirm="true" class="destroy"}}
+    Delete
+  {{/save-button}}
+  
+  {{#save-button action="togglePublished" confirm="true" class="publish"}}
+    {{#if publishedAt}}
+      Unpublish
+    {{else}}
+      Publish
+    {{/if}}
+  {{/save-button}}
+  
+  {{#save-button action="save" isDisabledBinding="isClean"}}
+    Save
+  {{/save-button}}
+  
+  <div class="last-saved">
+    <label>Last Saved:</label>
+    {{updatedAtFormatted}}
+  </div>
+</div>

data/app/assets/javascripts/blogelator/templates/posts/_show_action_bar.handlebars

@@ -0,0 +1,20 @@
+<div class="form-action-bar">
+  {{#save-button action="togglePublished" confirm="true" class="publish"}}
+    {{#if publishedAt}}
+      Unpublish
+    {{else}}
+      Publish
+    {{/if}}
+  {{/save-button}}
+  
+  {{#link-to "posts.edit" content class="save-button edit"}}
+    <div class="button-label">
+      Edit
+    </div>
+  {{/link-to}}
+
+  <div class="last-saved">
+    <label>Last Saved:</label>
+    {{updatedAtFormatted}}
+  </div>
+</div>

data/app/assets/javascripts/blogelator/templates/posts/edit.handlebars

@@ -0,0 +1 @@
+{{render "posts/_form" controller="postsEdit"}}

data/app/assets/javascripts/blogelator/templates/posts/index.handlebars

@@ -0,0 +1,30 @@
+<section class="posts-list">
+  {{#if content.isUpdating}}
+    Loading...
+  {{else}}
+    {{#each post in content}}
+      {{#link-to "posts.show" post class="post" tagName="div"}}
+        <h2>{{post.title}}</h2>
+        <div class="date">
+          {{post.publishedAtFormatted}}
+        </div>
+        <div class="summary">
+          {{{post.summary}}}
+        </div>
+      {{/link-to}}
+    {{else}}
+      <p>
+        No Posts :(
+      </p>
+    {{/each}}
+  {{/if}}
+</section>
+<article class="post">
+  <p>
+    Select a post from the left to view, edit, or publish.
+  </p>
+  <p>
+    {{#link-to "posts.new"}}Create a New Post{{/link-to}}
+  </p>
+  <a href="https://github.com/codelation/blogelator" class="logo" target="_blank">Powered by Blogelator</a>
+</article>

data/app/assets/javascripts/blogelator/templates/posts/new.handlebars

@@ -0,0 +1 @@
+{{render "posts/_form" controller="postsNew"}}

data/app/assets/javascripts/blogelator/templates/posts/show.handlebars

@@ -0,0 +1,22 @@
+<section class="posts-list">
+  {{#each post in controllers.posts}}
+    {{#link-to "posts.show" post class="post" tagName="div"}}
+      <h2>{{post.title}}</h2>
+      <div class="date">
+        {{post.publishedAtFormatted}}
+      </div>
+      <div class="summary">
+        {{{post.summary}}}
+      </div>
+    {{/link-to}}
+  {{/each}}
+</section>
+<article class="post">
+  <h1>{{title}}</h1>
+  <div class="date">
+    {{publishedAtFormatted}}
+  </div>
+  <div class="body">
+    {{{bodyHtml}}}
+  </div>
+</article>

data/app/assets/stylesheets/blogelator/admin/all.scss

@@ -0,0 +1,7 @@
+/*
+ *= require normalize
+ *= require font-awesome
+ *= require_tree ../shared
+ *= require_tree .
+ *= require_self
+ */

data/app/assets/stylesheets/blogelator/admin/components/markdown_editor.scss

@@ -0,0 +1,142 @@
+/*
+ *= require codemirror
+ *= require_self
+ */
+@import "bourbon";
+@import "blogelator/variables";
+
+.blogelator-markdown-editor {
+  bottom: -0.5em;
+  left: 0.5em;
+  margin-bottom: 1em;
+  position: absolute;
+  right: 0.5em;
+  top: 3.5em;
+  
+  .CodeMirror {
+    background-color: $base-body-color;
+    border: 1px solid $base-border-color;
+    color: $base-font-color;
+    float: left;
+    font-family: "Menlo", "Monaco", monospace;
+    height: 100%;
+    padding: 0.5em;
+    position: relative;
+    width: 49.8%;
+    @include box-sizing(border-box);
+    
+    &:before {
+      background-color: rgba($base-body-color, 0.92);
+      content: "GitHub Flavored Markdown";
+      color: #aaa;
+      display: block;
+      font-family: $base-font-family;
+      left: 0;
+      line-height: normal;
+      padding: 10px;
+      position: absolute;
+      text-transform: uppercase;
+      top: 0;
+      width: 100%;
+      z-index: 10;
+      @include box-sizing(border-box);
+    }
+    
+    .CodeMirror-lines {
+      padding-top: 2em;
+    }
+    
+    .CodeMirror-scroll {
+      font-size: 14px;
+      line-height: 1.5em;
+    }
+  }
+  .html-preview {
+    background-color: $base-body-color;
+    border: 1px solid $base-border-color;
+    float: right;
+    height: 100%;
+    margin-top: 0em;
+    padding: 0.5em 0.5em 0 0.5em;
+    position: relative;
+    width: 49.8%;
+    @include box-sizing(border-box);
+    
+    &:before {
+      background-color: rgba($base-body-color, 0.92);
+      content: "Preview";
+      color: #aaa;
+      display: block;
+      font-family: $base-font-family;
+      left: 0;
+      line-height: normal;
+      padding: 10px;
+      position: absolute;
+      text-transform: uppercase;
+      top: 0;
+      width: 100%;
+      z-index: 10;
+      @include box-sizing(border-box);
+    }
+    
+    .post {
+      height: 100%;
+      overflow: auto;
+      padding-top: 2em;
+    }
+  }
+  
+  // Markdown styles
+  // ------------------------------------
+  .cm-header-1,
+  .cm-header-2,
+  .cm-header-3,
+  .cm-header-4,
+  .cm-header-5,
+  .cm-header-6 {
+    color: #222;
+    font-size: 1.1em;
+    font-weight: bold;
+  }
+  .cm-em {
+    font-style: italic;
+  }
+  .cm-strong {
+    color: #222;
+    font-weight: bold;
+  }
+  .cm-comment {
+    color: #aaa;
+  }
+  
+  .cm-link {
+    color: $base-link-color;
+    & + .cm-tag {
+      color: $base-link-color;
+    }
+    & + .cm-string,
+    & + .cm-tag + .cm-string {
+      color: #aaa;
+    }
+  }
+  
+  // Code Styles
+  // ------------------------------------
+  .cm-atom,
+  .cm-tag {
+    color: #477dca;
+  }
+  .cm-keyword {
+    color: #814ede;
+  }
+  .cm-number {
+    color: #83c53d;
+  }
+  .cm-operator {
+    color: #777;
+  }
+  .cm-string {
+    color: #ca2969;
+  }
+  
+}

data/app/assets/stylesheets/blogelator/admin/components/save_button.scss

@@ -0,0 +1,121 @@
+@import "bourbon";
+@import "blogelator/variables";
+
+.save-button {
+  overflow: hidden;
+  position: relative;
+  
+  .button-label {
+    display: block;
+    opacity: 1;
+    @include transform(scale(1));
+    @include transition-duration(0.3s);
+    @include transition-property(all);
+  }
+  
+  .confirm {
+    bottom: 0;
+    display: block;
+    font-size: 20px;
+    left: 100%;
+    position: absolute;
+    text-align: center;
+    top: 0;
+    width: 100%;
+    z-index: 10;
+    @include transition-duration(0.3s);
+    @include transition-property(all);
+    
+    .no,
+    .yes {
+      bottom: 0;
+      padding: 3px 0;
+      position: absolute;
+      top: 0;
+      width: 50%;
+    }
+    
+    .no {
+      background-color: adjust-hue($base-accent-color, 210deg);
+      color: $base-body-color;
+      right: 0;
+    }
+    .yes {
+      background-color: $base-accent-color;
+      color: $base-body-color;
+      left: 0;
+    } 
+  }
+  
+  &.confirm {
+    .confirm {
+      left: 0;
+    }
+  }
+  
+  .error,
+  .saved,
+  .saving {
+    background-color: $base-body-color;
+    color: $base-accent-color;
+    bottom: 0;
+    display: block;
+    font-size: 20px;
+    left: 0;
+    opacity: 0;
+    padding: 4px 0;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    top: 0;
+    @include transform(scale(2));
+    @include transition-duration(0.3s);
+    @include transition-property(all);
+  }
+  
+  .saving {
+    background-color: $base-accent-color;
+    color: $base-body-color;
+    font-size: 16px;
+    padding: 6px 0;
+  }
+  
+  &.error,
+  &.saved,
+  &.saving {
+    .button-label {
+      opacity: 0;
+      @include transform(scale(0));
+    }
+  }
+  
+  &.error {
+    .error {
+      opacity: 1;
+      @include transform(scale(1));
+    }
+    .saving {
+      opacity: 0;
+      @include transform(scale(0));
+    }
+  }
+  
+  &.saved {
+    .saved {
+      opacity: 1;
+      @include transform(scale(1));
+    }
+    .saving {
+      opacity: 0;
+      @include transform(scale(0));
+    }
+  }
+  
+  &.saving {
+    .saving {
+      opacity: 1;
+      @include transform(scale(1));
+    }
+  }
+  
+}

data/app/assets/stylesheets/blogelator/admin/layout.scss

@@ -0,0 +1,94 @@
+@import "bourbon";
+@import "blogelator/variables";
+@import "blogelator/mixins/blogelator_logo";
+@import "neat";
+
+body.blogelator.admin {
+  header,
+  footer {
+    background-color: $admin-header-color;
+    border-bottom: 5px solid $admin-header-accent-color;
+    height: 45px;
+    left: 0;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+}
+  
+body.blogelator.admin {
+  header,
+  footer {
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      @include clearfix;
+      
+      li {
+        display: block;
+        float: left;
+        margin: 0;
+        
+        a {
+          border-bottom: 5px solid $base-accent-color;
+          color: lighten($admin-header-accent-color, 5%);
+          display: block;
+          font-size: 1.2em;
+          height: 45px;
+          line-height: 40px;
+          margin: 0 0 -5px;
+          padding: 0 0.5em;
+          text-decoration: none;
+          @include transition(color 0.1s linear);
+          
+          &:hover {
+            border-bottom: 5px solid $admin-header-highlight-color;
+            color: $admin-header-highlight-color;
+          }
+          &.active {
+            border-bottom: 5px solid $admin-header-active-color;
+            color: $admin-header-active-color;
+          }
+        }
+      }
+    }
+  }
+}
+
+body.blogelator.admin {
+  main {
+    bottom: 45px;
+    overflow: hidden;
+    position: absolute;
+    top: 45px;
+    width: 100%;
+    
+    section.posts-list {
+      @include span-columns(4);
+      height: 100%;
+      overflow: auto;
+      padding: 0.5em;
+    }
+    article.post {
+      @include span-columns(8);
+      height: 100%;
+      margin: 0;
+      padding: 0.5em;
+      overflow: auto;
+    }
+  }
+}
+
+body.blogelator.admin {
+  footer {
+    bottom: 0;
+    top: auto;
+    
+    .logo {
+      @include blogelator-logo(30);
+      margin: 5px 0 0 5px;
+    }
+  }
+}