Add base blog functionality

content/blog/react-native-intro-dev-meeting.md

@@ -0,0 +1,16 @@
+title: React-Native intro dev meeting
+gittime: off
+date: 2016-03-16
+template: blog
+
+Recently, at DabApps, we've been migrating our mobile app workflow over to using [react-native](https://facebook.github.io/react-native/) instead of [Ionic](http://ionicframework.com/), mainly because of its near native performance and cross-platform codebase. For the first few projects, there were only a couple of us that knew how to use React Native effectively, and work around the _qwerks_ it has. With the number of app projects growing, we needed to get more people up to speed with the react native workflow, as quickly as possible.
+
+The workflow that we needed to adopt to use react native is an odd one. To keep the quality of our code at the highest possible, whilst keeping the codebase as maintainable as possible. The workflow we use was created by 4 of us, through experiences with both work and personal projects using the framework, and it works rather well. The only problem was that only 4 of us actually knew it very well.
+
+After one of the developers wanted to know our workflow, with a couple of potential app projects on the horizon, I set about creating a talk for our (_usually_) bi-weekly dev meetings. With the aim of trying to get everyone up to speed all in 1 go.
+
+The slides from my talk are available on my [GitHub]({{ SOCIAL.github.url }}/react-native-intro-dev-meeting) page, and whilst they are primarily relevant to our workflow, I hope they will be able to help anyone else looking to get started with React Native.
+
+React Native is a tricky platform to get started on, but once you understand the _qwerks_, it truly is the future of cross-platform mobile development!
+
+[Click here to view the slides](http://realorangeone.github.io/react-native-intro-dev-meeting/)

content/pages/homepage.html

@@ -72,7 +72,7 @@
     </div>
   </section>
 
-  <section class="no-padding" id="projects">
+  <section id="projects">
     <div class="container-fluid">
       <div class="row no-gutter">
         {% for project in INDEX_PROJECTS %}
@@ -104,9 +104,22 @@
   <section class="bg-primary" id="blog">
     <div class="container">
       <div class="row">
-        <div class="col-lg-8 col-lg-offset-2 text-center">
+        <div class="col-lg-10 col-lg-offset-1 text-center">
           <h2 class="section-heading">Blog</h2>
           <hr class="light">
+          <div class="row">
+            <div class="col-sm-10 col-sm-offset-1">
+              {% for article in categories|category_find("blog") %}
+                <div class="row">
+                  <div class="col-xs-12 text-left">
+                    <h3>{{ article.title }}</h3>
+                    <p>{{ article.summary|raw|limit(30) }}</p>
+                  </div>
+                </div>
+                <hr class="light">
+              {% endfor %}
+            </div>
+          </div>
           <a href="/blog/" class="btn btn-primary-dark btn-xl">View all posts</a>
         </div>
       </div>

pelicanconf.py

@@ -77,5 +77,6 @@ import filters
 JINJA_FILTERS = {
     "datetime": filters.format_datetime,
     "raw": filters.html_to_raw,
-    "category_find": filters.category_find
+    "category_find": filters.category_find,
+    "limit": filters.limit
 }

plugins/filters.py

@@ -3,7 +3,7 @@ from bs4 import BeautifulSoup
 
 
 def format_datetime(value):
-    return iso8601.parse_date(str(value)).strftime("%x %-H:%M")
+    return iso8601.parse_date(str(value)).strftime("%x")
 
 
 def html_to_raw(html):
@@ -18,3 +18,9 @@ def category_find(categories, name):
         if category_name == name:
             return articles
     return []
+
+
+def limit(line, length):
+    if len(line) <= length:
+        return line
+    return " ".join(line.split(" ")[:length]) + '...'

theme/templates/blog.html

@@ -0,0 +1,22 @@
+{% extends "base.html" %}
+
+{% block htmltitle %}
+  {{ article.title }}
+{% endblock %}
+
+{% block content %}
+  <section class="bg-primary">
+    <div class="container text-center text-uppercase">
+      <h1 class="section-heading uppercase">{{ article.title }}</h1>
+      <hr class="light">
+    </div>
+  </section>
+  <section>
+    <div class="container">
+      <p class="text-right small">
+          Published: {{ article.date|datetime }}
+      </p>
+      {{ article.content }}
+    </div>
+  </section>
+{% endblock %}