Include category pages, links

_includes/sidebar.html

@@ -15,9 +15,8 @@ <h1>
 
       {% comment %}
         The code below dynamically generates a sidebar nav of pages with
-        `layout: page` in the front-matter. See readme for usage.
+        `sidebar_link: true` in the front-matter. See readme for usage.
       {% endcomment %}
-
       {% assign pages_list = site.pages %}
       {% for node in pages_list %}
         {% if node.title != null %}
@@ -27,6 +26,18 @@ <h1>
           {% endif %}
         {% endif %}
       {% endfor %}
+
+      {% comment %}
+        Now do it again, but for category pages
+      {% endcomment %}
+      {% for node in pages_list %}
+        {% if node.title != null %}
+          {% if node.layout == "category" %}
+            <a class="sidebar-nav-item{% if page.url == node.url %} active{% endif %}"
+               href="{{ site.baseurl }}{{ node.url }}">{{ node.title }}</a>
+          {% endif %}
+        {% endif %}
+      {% endfor %}
       <span class="sidebar-nav-item">Currently v{{ site.version }}</span>
     </nav>
 

_layouts/category.html

@@ -0,0 +1,21 @@
+---
+layout: page
+---
+
+{% unless page.content == '' %}
+  {{ content }}
+{% endunless %}
+
+<ul class="posts-list">
+  {% assign category = page.category | default: page.title %}
+  {% for post in site.categories[category] %}
+    <li>
+      <h3>
+        <a href="{{ site.baseurl }}{{ post.url }}">
+          {{ post.title }}
+          <small>{{ post.date | date_to_string }}</small>
+        </a>
+      </h3>
+    </li>
+  {% endfor %}
+</ul>

_layouts/post.html

@@ -4,14 +4,45 @@
 
 <div class="post">
   <h1 class="post-title">{{ page.title }}</h1>
-  <span class="post-date">{{ page.date | date_to_string }}</span>
+  <div class="post-meta">
+    <span class="post-date">{{ page.date | date_to_string }}</span>
+    <span class="post-categories">
+      {% for category in page.categories %}
+        &bull;
+
+        {% comment %}
+          Check if this category has a corresponding page before decide
+          to link to it. This is an O(n^2) operations so consider removing
+          it and linking for all categories (or no categories) if this
+          site has a lot of pages and/or a lot of categories.
+        {% endcomment %}
+        {% assign category_page = false %}
+        {% for node in site.pages %}
+          {{ node.category }}
+          {% if node.category == category or node.title == category %}
+            {% assign category_page = node %}
+          {% endif %}
+        {% endfor %}
+
+        {% if category_page %}
+          <a href="{{ site.baseurl }}{{ category_page.url }}">
+            {{ category }}
+          </a>
+        {% else %}
+          {{ category }}
+        {% endif %}
+      {% endfor %}
+    </span>
+  </div>
+
   {{ content }}
 
   <div class="post-tags">
     {% for tag in page.tags %}
       <a href="{{ site.baseurl }}/tags#{{ tag | slugify }}">
-        <span class="icon">{% include svg/tags.svg %}</span>
-        <span class="tag-name">{{ tag }}</span>
+        <span class="icon">
+          {% include svg/tags.svg %}
+        </span>&nbsp;<span class="tag-name">{{ tag }}</span>
       </a>
     {% endfor %}
   </div>

_posts/2012-01-29-markup-text-readability.md

@@ -2,6 +2,8 @@
 layout: post
 title: "Markup: Text Readability Test"
 excerpt: "A large amount of sample text to test readability of a text heavy page."
+categories:
+  - Markup
 tags:
   - sample post
   - readability

_posts/2012-01-30-markup-title-with-markup.md

@@ -2,7 +2,7 @@
 layout: post
 title: "Markup: Title *with* **Markdown**"
 categories:
-  - Markdown
+  - Markup
 tags:
   - css
   - html

_sass/_posts.scss

@@ -24,13 +24,24 @@
 }
 
 // Meta data line below post title
-.post-date {
-  display: block;
+.post-meta {
   margin-top: -.5rem;
   margin-bottom: 1rem;
   color: #9a9a9a;
 }
 
+.post-tags a {
+  font-size: 0.8em;
+  margin-right: 0.5rem;
+  white-space:nowrap;
+  .tag-name { text-transform: capitalize; }
+
+  opacity: 0.75;
+  &:hover {
+    text-decoration: none;
+    opacity: 1;
+  }
+}
 
 // Related posts
 .related {

_sass/_tags.scss

@@ -21,16 +21,3 @@
     }
   }
 }
-
-.post-tags a {
-  font-size: 0.8em;
-  margin-right: 0.5rem;
-  white-space:nowrap;
-  .tag-name { text-transform: capitalize; }
-
-  opacity: 0.75;
-  &:hover {
-    text-decoration: none;
-    opacity: 1;
-  }
-}

category/edge-case.md

@@ -0,0 +1,27 @@
+---
+layout: category
+title: Edge Case
+---
+
+Sample category page. You need to create a page for each category.
+The category is inferred from the title of the page, but you can also
+specify it with the `category` attribute in the front matter.
+
+```md
+---
+layout: category
+title: My Category
+---
+```
+
+Or ...
+
+```md
+---
+layout: category
+title: Fancy Tital
+category: My Category
+---
+```
+
+Posts get listed below here.

category/markup.md

@@ -0,0 +1,6 @@
+---
+layout: category
+title: Markup
+---
+
+Another sample category page.