Changed some code structure, added some elements + styling to blog views

docpad.js

@@ -7,12 +7,18 @@ var docpadConfig = {
 				return this.getCollection("html").findAllLive({relativeOutDirPath: "."}, [{order: 1}]);
 		},
 		posts: function(){
-				return this.getCollection("html").findAll({relativeOutDirPath: "blog"});
+				var posts = this.getCollection("html").findAllLive({relativeOutDirPath: "blog"});
+				posts.on("add", function(post){
+					post.setMetaDefaults({
+						layout: "blogpost"
+					});
+				});
+				return posts;
 		},
 		projects: function(){
 			var projects = this.getCollection("html").findAllLive({relativeOutDirPath: "projects"});
-			projects.on("add", function(model){
-				model.setMetaDefaults({
+			projects.on("add", function(project){
+				project.setMetaDefaults({
 					layout: "contentpage"
 				});
 			});

src/documents/blog.html.ejs

@@ -8,10 +8,12 @@ referencesOthers: true
 <% var posts = getCollection("posts").toJSON() %>
 <% posts.forEach(function(post){ %>
   <div class="post">
-  <h2><a href="<%- post.url %>"><%= post.title %></a></h2>
-  <div class="date"><%- post.formattedDate %></div>
-  <div class="firstcontent blogpost">
-    <%- post.contentRenderedWithoutLayouts.split("-split-")[0] %>
-  </div>
+    <h2 class="title"><a href="<%- post.url %>"><%= post.title %></a></h2>
+    <h3 class="subtitle"><%- post.subtitle %></h3>
+    <h4 class="date"><%- post.formattedDate %></h4>
+    <div class="firstcontent blogpost">
+      <%- post.contentRenderedWithoutLayouts.split("-split-")[0] %>
+    </div>
+    <a class="morelink" href="<%- post.url %>">Read More...</a>
   </div>
 <% }) %>

src/documents/blog/2016-04-11-tvheadend-vm.html.md

@@ -1,5 +1,4 @@
 ---
-layout: "blogpost"
 title: "Running TVheadend in a VM"
 date: 2016-04-11
 subtitle: "Or how I went from trying to watch HD TV to changing hypervisor..."

src/documents/styles.css.scss

@@ -87,12 +87,9 @@ body{
       margin-right: auto;
       margin-top: 10px;
     }
-    h1, h2, h3.date{
+    h1, h2, h3{
       text-align: center;
     }
-    h3.date{
-      margin-top: 0px;
-    }
     h1{
       margin-bottom: 5px;
     }
@@ -439,14 +436,31 @@ body{
     margin-right: auto;
     padding-top: 10px;
     padding-bottom: 10px;
-    h2, .date{
+
+    h2.title a{
+      color: inherit;
+    }
+    h2.title, h3.subtitle, h4.date{
       text-align: center;
       margin: 0;
     }
+    h3.subtitle, h4.date{
+      font-weight: normal;
+    }
   }
 }
 
-.blogpost{
+#content[data-slug^="blog-"]{
+  h1#title{
+    margin-bottom: 3px;
+  }
+  h2#subtitle, h3#date{
+    margin: 0;
+    font-weight: normal;
+  }
+}
+
+#content[data-slug^="blog"] .blogpost{
   width: 100%;
   max-width: 800px;
   margin-left: auto;

src/layouts/blogpost.html.ejs

@@ -2,10 +2,10 @@
 layout: contentpage
 ---
 
-<h3 class="date"><%- document.formattedDate %></h3>
 <% if(document.subtitle){ %>
-  <h2><%- document.subtitle %></h2>
+  <h2 id="subtitle"><%- document.subtitle %></h2>
 <% } %>
+<h3 id="date"><%- document.formattedDate %></h3>
 <div class="blogpost">
   <%- content %>
 </div>

src/layouts/contentpage.html.ejs

@@ -4,7 +4,7 @@ layout: core.html
 
 <div id="lightcontent" class="animated">
   <div>
-    <h1><%- document.title %></h1>
+    <h1 id="title"><%- document.title %></h1>
     <%- content %>
   </div>
 </div>

src/layouts/core.html.ejs

@@ -18,18 +18,18 @@
           <% var pages = getCollection("pages").toJSON() %>
           <% pages.forEach(function(page){ %>
             <% if(!page.hidden){ %>
-            <a class="fa fa-<%= page.icon %> <% if(page.url.split("/")[1] == document.url.split("/")[1]){ %>active<% } %>" href="<%= page.url %>" data-rooturl="<%= page.url.split("/")[1] %>"></a>
+              <a class="fa fa-<%= page.icon %> <% if(page.url.split("/")[1] == document.url.split("/")[1]){ %>active<% } %>" href="<%= page.url %>" data-rooturl="<%= page.url.split("/")[1] %>"></a>
             <% } %>
           <% }) %>
         </div>
       </div>
-      <div id="content" class="animations" data-slug="<%- document.slug %>">
+      <div id="content" class="animations<% if(document.addclass){ %> <%= document.addclass %><% } %>" data-slug="<%- document.slug %>">
         <meta data-menu="<%= document.url.split("/")[1] %>" data-slug="<%- document.slug %>" />
         <%- content.replace("-split-", "") %>
       </div>
     </div>
     <div id="footer">
-      <h3>&copy; Tim Stallard 2015</h3>
+      <h3>&copy; Tim Stallard <%- new Date().getFullYear() %></h3>
       Hand crafted in the UK with DocPad, SmoothState.js, and lots of other magic<% /* - see the code <a href="https://github.com/TimStallard/timstallard.me.uk">on GitHub</a> */ %>
       <br>
       Mugshot by the awesome <a href="http://lws.io/">Kevin Lewis</a> at <a href="http://rebelmakers.co.uk/">Rebel Makers</a>