first public version ready

README.md

@@ -0,0 +1,150 @@
+xolvio:md-blog
+==============
+
+This is the blog package currently used on The Meteor Testing Manual. It will give you a
+markdown powered blog on your site.
+
+ * Full Markdown support
+ * Syntax highlighting using [highlight.js](https://highlightjs.org/)
+ * Customizable styling with the ability to add your own classes to elements!
+ * Publish / Unpublish / Archive / Unarchive workflows
+
+[Try the demo site](http://mdblog.meteor.com)
+
+[See the demo site code](https://github.com/xolvio/md-blog)
+
+##Installation
+
+`> meteor add xolvio:md-blog`
+
+##Getting Started
+
+There are a couple of steps to carry out before you can start using this package. Don't worry
+it's very easy!
+
+### 1. Define Layouts
+First you need to define two templates that the blog in your app that look like this:
+
+```html
+<template name="blogListLayout">
+  {{> yield}}
+</template>
+
+<template name="blogPostLayout">
+  {{> yield}}
+</template>
+```
+
+These are iron-router layouts that you be available at `<your site>/blog` and `<your site>/blog/:_id/:slug`.
+
+You may want to customize these template further like adding disqus for instance:
+
+```html
+<template name="blogPostLayout">
+  {{> yield}}
+  {{> disqus}}
+</template>
+```
+
+### 2. Setup Accounts & Roles
+You need to ensure you are using a Meteor accounts package like accounts-password, and that the
+user you are logged has 'roles' array with the element `mdblog-author`. Here's an example of a
+user object:
+
+```json
+{
+  "_id": "ixoreoJY5wzmNYMcY",
+  "emails": [ {
+    "address" : "[email protected]",
+    "verified" : true
+  } ],
+  "profile": { "name" : "Sam Hatoum" },
+  "roles": [ "mdblog-author" ]
+}
+```
+
+You can also the above pragmatically by calling
+`Roles.addUsersToRoles(user._id, ['mdblog-author']);`
+
+For more information about roles, have a look at the
+[alanning:roles](https://github.com/alanning/meteor-roles) package.
+
+
+You're ready to go!
+
+### 3. Customize
+
+This blog is designed to be fully customizable and as unopinionated as possible. Here are some of
+the ways you can configure it.
+
+####Styling
+
+To style the blog list and posts, apply css
+[just like in the demo app](https://github.com/xolvio/md-blog/blob/master/app/client/blog/blog.less).
+
+For syntax highlighting style, you need to add the hljs css file of your choice.
+[Pick a css template from here](https://highlightjs.org/static/demo/). You can see this in the
+demo app,
+[there is a file named hljs.css](https://github.com/xolvio/md-blog/tree/master/app/client/blog).
+
+####Custom Classes
+You can also add classes to any element of your choice! For this you need to use the settings.json
+file. Have a look at the settings.json file below. You can see there's a field named
+`element-classes`. The example above is adding the class
+`pure-img` to all `img` elements. This is very powerful as it allows you to use your CSS
+framework of your choice.
+
+####Sorting
+By default, the blog sorts your posts by date. You can change this by modifying the `sortBy`
+field in the settings file.
+
+####Settings File Example
+```json
+{
+  "public": {
+    "blog": {
+      "name": "The Xolv.io md-blog",
+      "Description": "Get verbal on your websites.",
+      "prettify": {
+        "syntax-highlighting": true,
+        "element-classes": [
+          {
+            "locator": "img",
+            "classes": ["pure-img"]
+          },
+          {
+            "locator": "button",
+            "classes": ["pure-button"]
+          }
+        ]
+      },
+      "sortBy": {"date": -1}
+    }
+  }
+}
+```
+
+##Additional Info
+
+###URL Format
+The URL format of your blog will look lik this:
+
+`www.your-site.com/blog`
+
+`www.your-site.com/blog/7yh22/your-latest-blog-post`
+
+The format is `/:_id/:slug`
+
+The `:slug` is the title of the blog post with all the spaces replaced with dashes. It's believed
+this is good for SEO purposes.
+
+The `:_id` is a truncated version of the mongo id for the blog entry. This allows you to have
+multiple posts with the same title over time.
+
+
+##Contribution
+Yes please!
+
+Todo list:
+ * [ ] Pagination
+ * [ ] Auto draft saving + history

app/.meteor/versions

@@ -75,5 +75,4 @@ useraccounts:[email protected]
 [email protected]
 [email protected]
 xolvio:[email protected]
-xolvio:[email protected]
-yasinuslu:[email protected]
+xolvio:[email protected]

app/client/accounts/accounts.js

@@ -1,5 +1,6 @@
 (function () {
 
+  AccountsTemplates.configureRoute('signUp');
   AccountsTemplates.configureRoute('signIn');
 
   AccountsTemplates.configure({
@@ -47,10 +48,4 @@
     }
   });
 
-  Template.atForm.rendered = function() {
-    $('.at-form').addClass('pure-form');
-    $('.at-form button').addClass('pure-button');
-  }
-
-
 })();

app/client/accounts/accounts.less

@@ -7,6 +7,16 @@
 }
 
 .at-form {
+  input {
+    width: 60% !important;
+  }
+  label {
+    display: inline-block;
+    width: 30% !important;
+  }
+  button[type="submit"] {
+    float: right;
+  }
   width: 50%;
-  margin: 0 auto;
+  margin: 7em auto;
 }

app/client/blog/blog.html

@@ -1,9 +1,18 @@
+<template name="instructions">
+  {{#unless currentUser}}
+      <p id="instructions" class="blink"><a href="/sign-in">Sign In</a> or <a
+              href="/sign-up">Register</a> to author posts</p>
+  {{/unless}}
+</template>
+
 <template name="blogListLayout">
   {{> header}}
+  {{> instructions}}
   {{> yield}}
 </template>
 
 <template name="blogPostLayout">
   {{> header}}
+  {{> instructions}}
   {{> yield}}
 </template>

app/client/blog/blog.less

@@ -1,7 +1,19 @@
+@import '../constants.import.less';
+
+.blog-controls {
+  width: inherit;
+  button {
+    background-color: @xolvio-grey-03;
+    &#mdblog-new {
+      float: right;
+    }
+  }
+}
+
 .blog-list {
 
-  width: 80%;
-  margin: 80px auto;
+  width: 90%;
+  margin: 120px auto;
 
   .blog-post {
 
@@ -12,9 +24,6 @@
       h2 {
         text-transform: uppercase;
         border: none;
-        a {
-//          color: #333;
-        }
       }
       summary {
         font-style: italic;
@@ -33,6 +42,10 @@
 
 .blog-post {
 
+  .blog-controls {
+    margin-top: -30px;
+  }
+
   width: 80%;
   margin: 100px auto;
   header {
@@ -42,8 +55,7 @@
       margin: 1.5em 0;
       color: #666;
       text-transform: uppercase;
-
-
+      line-height: 1em;
     }
     #summary {
       font-style: italic;
@@ -67,3 +79,32 @@
   }
 }
 
+// The styling below is only required by this demo app
+
+#instructions {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  top: 65px;
+  @media (min-width: 48em) {
+    top: 40px;
+  }
+  color: @xolvio-orange;
+  text-transform: uppercase;
+
+}
+
+@-webkit-keyframes blinker {
+  0% { opacity: 0.0; }
+  10% { opacity: 1.0; }
+  90% { opacity: 1.0; }
+  100% { opacity: 0.0; }
+}
+.blink {
+  -webkit-animation-name: blinker;
+  animation-direction: alternate;
+
+  -webkit-animation-iteration-count: infinite;
+  animation-timing-function: ease-out;
+  -webkit-animation-duration: 5s;
+}