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,51 +4,99 @@ layout: default
 
 {% assign menu = site.data.menu %}
 
-<header class="site-masthead">
+{% if site.paginate and site.paginate_path and paginator.page > 1 %}
-  {% if site.title %}
+  {% include back-link.html %}
-    <h1>
+{% else %}
-      {{ site.title }}
+  <header class="site-masthead">
-    </h1>
+    {% if site.title %}
-  {% endif %}
+      <h1>
-  {% if site.title %}
+        {{ site.title }}
-    <h2>
+      </h1>
-      {{ site.description }}
+    {% endif %}
-    </h2>
+    {% if site.title %}
-  {% endif %}
+      <h2>
-  {% if menu %}
+        {{ site.description }}
-    <nav class="site-navigation">
+      </h2>
-      <ul>
+    {% endif %}
-      {% for item in site.data.menu %}
+    {% if menu %}
-        <li>
+      <nav class="site-navigation">
-          <a href="{{ item.url | prepend: baseurl }}">
+        <ul>
-            {{ item.title }}
+        {% for item in site.data.menu %}
-          </a>
+          <li>
-        </li>
+            <a href="{{ item.url | prepend: baseurl }}">
-      {% endfor %}
+              {{ item.title }}
-      </ul>
+            </a>
-    </nav>
+          </li>
-  {% endif %}
+        {% endfor %}
-</header>
+        </ul>
+      </nav>
+    {% endif %}
+  </header>
+{% endif %}
 
 <main class="home" aria-label="Content">
 
   <h1 class="divided">
-    Contents
+    {% if site.paginate and site.paginate_path and paginator.page > 1 %}
+      Page {{ paginator.page }}
+    {% else %}
+      Contents
+    {% endif %}
   </h1>
 
-  <ul class="post-list">
+  {% if site.paginate and site.paginate_path %}
-    {% for post in site.posts %}
+    
-      <li>
+    <ul class="post-list">
-        <a href="{{ post.url | absolute_url }}" class="post-link">
+      {% for post in paginator.posts %}
-          <span class="post-title">
+        <li>
-            {{ post.title }}
+          <a href="{{ post.url | absolute_url }}" class="post-link">
-          </span>
+            <span class="post-title">
-          <span class="post-date">
+              {{ post.title }}
-            {{ post.date | date: "%b %-d, '%y" }}
+            </span>
-          </span>
+            <span class="post-date">
-        </a>
+              {{ post.date | date: "%b %-d, '%y" }}
-      </li>
+            </span>
-    {% endfor %}
+          </a>
-  </ul>
+        </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>
+          <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>
+  
+  {% 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"
 ;