Merge pull request #66 from prometheus/blog

[WIP] Add initial blog code.

Rules

@@ -22,6 +22,8 @@ route '/assets/*' do
 end
 
 compile '*' do
+  filter :erb
+
   if item[:extension] == 'md'
     #filter :kramdown
     filter :redcarpet, options: {filter_html: true, autolink: true, no_intraemphasis: true, fenced_code_blocks: true, gh_blockcode: true, tables: true}, renderer_options: {with_toc_data: true}
@@ -29,7 +31,11 @@ compile '*' do
     filter :bootstrappify
     filter :admonition
     filter :colorize_syntax, :default_colorizer => :pygmentsrb
+    if item[:kind] == 'article'
+      layout 'blog'
+    else
       layout 'docs'
+    end
   elsif item[:extension] == 'css'
     # don’t filter stylesheets
   elsif item.binary?
@@ -41,6 +47,18 @@ compile '*' do
   end
 end
 
+route '/blog/' do
+  '/blog/index.html'
+end
+
+# Transform /blog/<YYYY>-<MM>-<DD>-<post title> to
+# /blog/<YYYY>/<MM>/<DD>/<post title>.
+route '/blog/*' do
+  y, m, d, slug = /([0-9]+)\-([0-9]+)\-([0-9]+)\-([^\/]+)/.match(item.identifier).captures
+
+  "/blog/#{y}/#{m}/#{d}/#{slug}/index.html"
+end
+
 route '*' do
   if item[:extension] == 'css'
     # Write item with identifier /foo/ to /foo.css

content/blog/2015-04-19-my-first-post.md

+---
+title: "This is a long title about doing something with Prometheus"
+created_at: 2015-04-19
+kind: article
+author: Julius Volz
+---
+
+## Introduction
+
+This is the first post about Prometheus.
+
+### Some stuff about Prometheus.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor ac
+nisl sit amet molestie. Duis ut dignissim massa, vel tristique nibh. Ut vel
+libero vehicula, maximus tellus dignissim, accumsan turpis. Ut eget justo sit
+amet elit iaculis dictum. Donec tincidunt fringilla libero, ac aliquet nulla
+vulputate eu. Nunc sagittis nulla in tortor elementum placerat. Maecenas et
+velit ac ex malesuada eleifend. Suspendisse consequat orci eu arcu aliquam
+tristique. Vivamus eu molestie neque. Maecenas in dolor gravida, blandit tortor
+vel, egestas odio. Nulla placerat non nisl et luctus. Quisque molestie quam ac
+rhoncus gravida.
+
+<!-- more -->
+
+### More stuff about Prometheus
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor ac
+nisl sit amet molestie. Duis ut dignissim massa, vel tristique nibh. Ut vel
+libero vehicula, maximus tellus dignissim, accumsan turpis. Ut eget justo sit
+amet elit iaculis dictum. Donec tincidunt fringilla libero, ac aliquet nulla
+vulputate eu. Nunc sagittis nulla in tortor elementum placerat. Maecenas et
+velit ac ex malesuada eleifend. Suspendisse consequat orci eu arcu aliquam
+tristique. Vivamus eu molestie neque. Maecenas in dolor gravida, blandit tortor
+vel, egestas odio. Nulla placerat non nisl et luctus. Quisque molestie quam ac
+rhoncus gravida.

content/blog/2015-04-20-my-second-post.md

+---
+title: "Monitoring HAProxy with Prometheus"
+created_at: 2015-04-20
+kind: article
+author: Tobias Schmidt
+---
+
+## Introduction
+
+This is the second post about Prometheus.
+
+### Some stuff about Prometheus.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor ac
+nisl sit amet molestie. Duis ut dignissim massa, vel tristique nibh. Ut vel
+libero vehicula, maximus tellus dignissim, accumsan turpis. Ut eget justo sit
+amet elit iaculis dictum. Donec tincidunt fringilla libero, ac aliquet nulla
+vulputate eu. Nunc sagittis nulla in tortor elementum placerat. Maecenas et
+velit ac ex malesuada eleifend. Suspendisse consequat orci eu arcu aliquam
+tristique. Vivamus eu molestie neque. Maecenas in dolor gravida, blandit tortor
+vel, egestas odio. Nulla placerat non nisl et luctus. Quisque molestie quam ac
+rhoncus gravida.
+
+<!-- more -->
+
+### More stuff about Prometheus
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor ac
+nisl sit amet molestie. Duis ut dignissim massa, vel tristique nibh. Ut vel
+libero vehicula, maximus tellus dignissim, accumsan turpis. Ut eget justo sit
+amet elit iaculis dictum. Donec tincidunt fringilla libero, ac aliquet nulla
+vulputate eu. Nunc sagittis nulla in tortor elementum placerat. Maecenas et
+velit ac ex malesuada eleifend. Suspendisse consequat orci eu arcu aliquam
+tristique. Vivamus eu molestie neque. Maecenas in dolor gravida, blandit tortor
+vel, egestas odio. Nulla placerat non nisl et luctus. Quisque molestie quam ac
+rhoncus gravida.

content/blog/2015-04-22-my-third-post.md

+---
+title: "Monitoring your nodes with Prometheus"
+created_at: 2015-04-20
+kind: article
+author: Brian Brazil
+---
+
+## Introduction
+
+This is the third post about Prometheus.
+
+### Some stuff about Prometheus.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor ac
+nisl sit amet molestie. Duis ut dignissim massa, vel tristique nibh. Ut vel
+libero vehicula, maximus tellus dignissim, accumsan turpis. Ut eget justo sit
+amet elit iaculis dictum. Donec tincidunt fringilla libero, ac aliquet nulla
+vulputate eu. Nunc sagittis nulla in tortor elementum placerat. Maecenas et
+velit ac ex malesuada eleifend. Suspendisse consequat orci eu arcu aliquam
+tristique. Vivamus eu molestie neque. Maecenas in dolor gravida, blandit tortor
+vel, egestas odio. Nulla placerat non nisl et luctus. Quisque molestie quam ac
+rhoncus gravida.
+
+<!-- more -->
+
+### More stuff about Prometheus
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor ac
+nisl sit amet molestie. Duis ut dignissim massa, vel tristique nibh. Ut vel
+libero vehicula, maximus tellus dignissim, accumsan turpis. Ut eget justo sit
+amet elit iaculis dictum. Donec tincidunt fringilla libero, ac aliquet nulla
+vulputate eu. Nunc sagittis nulla in tortor elementum placerat. Maecenas et
+velit ac ex malesuada eleifend. Suspendisse consequat orci eu arcu aliquam
+tristique. Vivamus eu molestie neque. Maecenas in dolor gravida, blandit tortor
+vel, egestas odio. Nulla placerat non nisl et luctus. Quisque molestie quam ac
+rhoncus gravida.

content/blog/index.html

+---
+title: Prometheus Blog
+---
+<div class="col-md-9">
+  <% sorted_articles.each do |post| %>
+    <div class="blog doc-content">
+      <h1><%= link_to post[:title], post.path %></h1>
+      <aside>Posted at: <%= get_pretty_date(post) %> by <%= post[:author]%></aside>
+      <article class="doc-content">
+        <%= get_post_start(post) %>
+      </article>
+    </div>
+  <% end %>
+</div>
+<%= render 'blog_sidebar' %>

layouts/blog.html

+<% render 'default' do %>
+  <div class="col-md-9 blog doc-content">
+    <h1><%= item[:title] %></h1>
+    <aside>Posted at: <%= get_pretty_date(item) %></aside>
+    <article class="doc-content">
+      <%= yield %>
+    <article>
+
+    <div id="disqus_thread"></div>
+    <script type="text/javascript">
+        /* * * CONFIGURATION VARIABLES * * */
+        var disqus_shortname = 'prometheus-blog';
+     
+        /* * * DON'T EDIT BELOW THIS LINE * * */
+        (function() {
+            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+        })();
+    </script>
+    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
+  </div>
+
+  <%= render 'blog_sidebar' %>
+<% end %>

layouts/blog_sidebar.html

+<div class="col-md-3 side-nav-col">
+  <ul class="nav navbar-nav side-nav">
+    <li>
+      <span class="nav-header">Blog posts</span>
+      <ul class="nav">
+      <% sorted_articles.each do |post| %>
+        <li><%= link_to post[:title], post.path %></li>
+      <% end %>
+    </ul>
+  </ul>
+</div>

layouts/header.html

@@ -64,6 +64,12 @@
             <li><a href="/">Overview</a></li>
             <li><a href="/docs/introduction/overview/">Documentation</a></li>
             <li><a href="/community/">Community</a></li>
+            <!--
+
+            UNCOMMENT THIS WHEN WE HAVE OUR FIRST BLOG ARTICLE.
+
+            <li><a href="/blog/">Blog</a></li>
+            -->
             <li><a href="https://github.com/prometheus"><i class="fa fa-github"></i> Github</a></li>
           </ul>
         </div>

lib/default.rb

@@ -3,3 +3,22 @@
 
 include Nanoc::Helpers::LinkTo
 include Nanoc::Helpers::Rendering
+include Nanoc3::Helpers::Blogging
+include Nanoc3::Helpers::Tagging
+
+module BlogHelper
+  def get_pretty_date(post)
+    attribute_to_time(post[:created_at]).strftime('%B %-d, %Y')
+  end
+
+  def get_post_start(post)
+    content = post.compiled_content
+    if content =~ /\s<!-- more -->\s/
+      content = content.partition('<!-- more -->').first +
+      "<div class='read-more'><a href='#{post.path}'>Continue reading &rsaquo;</a></div>"
+    end
+    return content
+  end  
+end
+
+include BlogHelper

static/docs.css

@@ -131,6 +131,14 @@ a.sc-logo img {
   margin: 40px 0 10px 0;
 }
 
+.doc-content > h1 a {
+  color: #e6522c;
+}
+
+.doc-content.blog > h1 {
+  text-transform: none;
+}
+
 .doc-content > h2 {
   color: #e6522c;
   font-size: 25px;
@@ -221,3 +229,17 @@ code {
   font-weight: 500;
   text-transform: uppercase;
 }
+
+aside {
+  color: #888;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #aaa;
+}
+
+article {
+  margin: 10px 0 60px 0;
+}
+
+.read-more > a {
+  color: #888;
+}