Enable pagination at top and bottom of posts list

Author: csswizardry

_config.yml

@@ -5,7 +5,7 @@ description: "Write an awesome description for your new site here. You can edit
 baseurl: ""
 url: "https://csswizardry.com"
 future: true
-sw: "0017"
+sw: "0018"
 
 # Build settings
 markdown: kramdown

_includes/pagination.html

@@ -0,0 +1,18 @@
+<ol class="layout" data-ui-component="Pagination">
+
+  <li class="layout__item  lap-and-up-one-half  mb">
+    {% if paginator.next_page %}
+      <a href="/page{{paginator.next_page}}#section:articles" class="btn  btn--full  btn--secondary">Older articles</a>
+    {% endif %}
+
+    {% if paginator.previous_page %}
+      <li class="layout__item  lap-and-up-one-half  mb">
+        {% if paginator.previous_page == 1 %}
+          <a href="/#section:articles" class="btn  btn--full">Newer articles</a>
+        {% else %}
+          <a href="/page{{paginator.previous_page}}#section:articles" class="btn  btn--full">Newer articles</a>
+        {% endif %}
+    {% endif %}
+
+</ol>
+

index.html

@@ -30,6 +30,10 @@ <h3 class="heading">Articles</h3>
             <p>There are <b>{{ site.posts | size  }}</b> articles on this blog.
             Find them all on the <a href="/archive/">archive page</a>.</p>
 
+            {% if paginator.page != 1 %}
+              {% include pagination.html %}
+            {% endif %}
+
             <ul class="list-ui  post__list  mb">
                 {% for post in paginator.posts %}
                 <li class="list-ui__item">
@@ -39,25 +43,9 @@ <h3 class="post__title"><a href="{{ post.url }}">{{ post.title }}</a></h3>
                 {% endfor %}
             </ul>
 
-        </section>
-
-        <ol class="layout" data-ui-component="Pagination">
+            {% include pagination.html %}
 
-            <li class="layout__item  lap-and-up-one-half  mb">
-                {% if paginator.next_page %}
-                    <a href="/page{{paginator.next_page}}#section:articles" class="btn  btn--full  btn--secondary">Older articles</a>
-                {% endif %}
-
-                {% if paginator.previous_page %}
-                    <li class="layout__item  lap-and-up-one-half  mb">
-                        {% if paginator.previous_page == 1 %}
-                            <a href="/#section:articles" class="btn  btn--full">Newer articles</a>
-                        {% else %}
-                            <a href="/page{{paginator.previous_page}}#section:articles" class="btn  btn--full">Newer articles</a>
-                        {% endif %}
-                {% endif %}
-
-        </ol>
+        </section>
 
     </div
 

sw.js

@@ -1,4 +1,4 @@
-var cacheName = 'csswizardry:0017';
+var cacheName = 'csswizardry:0018';
 var cacheFiles = [
   '/',
   '/about/',
@@ -53,7 +53,7 @@ self.addEventListener('fetch', function(event) {
 // Empty out any caches that don’t match the ones listed.
 self.addEventListener('activate', function(event) {
 
-  var cacheWhitelist = ['csswizardry:0017'];
+  var cacheWhitelist = ['csswizardry:0018'];
 
   event.waitUntil(
     caches.keys().then(function(cacheNames) {