Merge pull request #3 from patdryburgh/feat/pagination

add pagination support

_includes/back-link.html

@@ -0,0 +1,3 @@
+<a href="{{ "/" | prepend: site.baseurl }}" class="back-link">
+  &#10094; Home
+</a>

_layouts/home.html

@@ -4,6 +4,9 @@ layout: default
 
 {% assign menu = site.data.menu %}
 
+{% if site.paginate and site.paginate_path and paginator.page > 1 %}
+  {% include back-link.html %}
+{% else %}
   <header class="site-masthead">
     {% if site.title %}
       <h1>
@@ -29,13 +32,55 @@ layout: default
       </nav>
     {% endif %}
   </header>
+{% endif %}
 
 <main class="home" aria-label="Content">
 
   <h1 class="divided">
+    {% if site.paginate and site.paginate_path and paginator.page > 1 %}
+      Page {{ paginator.page }}
+    {% else %}
       Contents
+    {% endif %}
   </h1>
 
+  {% if site.paginate and site.paginate_path %}
+    
+    <ul class="post-list">
+      {% for post in paginator.posts %}
+        <li>
+          <a href="{{ post.url | absolute_url }}" class="post-link">
+            <span class="post-title">
+              {{ post.title }}
+            </span>
+            <span class="post-date">
+              {{ post.date | date: "%b %-d, '%y" }}
+            </span>
+          </a>
+        </li>
+      {% endfor %}
+    </ul>
+
+    {% if paginator.page > 1 %}
+
+      <div class="post-pagination">
+        {% if paginator.next_page %}
+          <a href="{{ paginator.next_page_path | prepend: site.baseurl  }}" class="pagination-next btn">&lang; Older</a>
+        {% else %}
+          <span>&nbsp;</span>
+        {% endif %}
+        <span class="pagination-number">{{ paginator.page }} of {{ paginator.total_pages }}</span>
+        {% if paginator.previous_page %}
+          <a href="{{ paginator.previous_page_path | prepend: site.baseurl }}" class="pagination-previous btn">Newer &rang;</a>
+        {% else %}
+          <span>&nbsp;</span>
+        {% endif %}
+      </div>
+
+    {% endif %}
+
+  {% else %}
+
     <ul class="post-list">
       {% for post in site.posts %}
         <li>
@@ -51,4 +96,7 @@ layout: default
       {% endfor %}
     </ul>
   
+  {% endif %}
+    
+
 </main>

_layouts/post.html

@@ -2,9 +2,7 @@
 layout: default
 ---
 
-<a href="{{ "/" | prepend: site.baseurl }}" class="back-link">
+{% include back-link.html %}
-  &#10094; Home
-</a>
 
 <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
 

_sass/_base.scss

@@ -87,35 +87,6 @@ hr {
   text-align: center;
 }
 
-.post-list {
-  margin: 1em 0;
-  list-style: none;
-}
-
-.post-link {
-  color: $text-color;
-  display: flex;
-  flex-direction: column-reverse;
-  text-decoration: none;
-  padding: .25em 0;
-  .post-title {
-    display: block;
-    padding: .25em 0;
-  }
-  &:hover .post-title,
-  &:focus .post-title {
-    text-decoration: underline;
-  }
-  @media (min-width: $on-tablet) {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    .post-title {
-      margin-right: 4em;
-    }
-  }
-}
-
 .post-date {
   color: $muted-text-color;
   display: block;

_sass/_post-list.scss

@@ -0,0 +1,48 @@
+.post-list {
+  margin: 1em 0;
+  list-style: none;
+}
+
+.post-link {
+  color: $text-color;
+  display: flex;
+  flex-direction: column-reverse;
+  text-decoration: none;
+  padding: .25em 0;
+  .post-title {
+    display: block;
+    padding: .25em 0;
+  }
+  &:hover .post-title,
+  &:focus .post-title {
+    text-decoration: underline;
+  }
+  @media (min-width: $on-tablet) {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    .post-title {
+      margin-right: 4em;
+    }
+  }
+}
+
+.post-pagination {
+  margin-top: 4rem;
+  font-size: .75em;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  * > {
+    flex-grow: 1;
+    flex-basis: 0;
+  }
+  a {
+    text-decoration: none;
+    text-transform: uppercase;
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+}

assets/css/main.scss

@@ -13,5 +13,6 @@ $asset_url: '{{ '/assets' | absolute_url }}';
   "font",
   "base",
   "masthead",
+  "post-list",
   "article"
 ;