Migrate to New Paginator (#22)

* Closes #20

* Migrate to new paginator gem

* Configure paginate

* Style pagination nav

Gemfile

@@ -11,9 +11,8 @@ group :jekyll_plugins do
   gem 'jekyll-assets', '~> 2.2', '>= 2.2.8'
   gem 'jekyll-compose', '~> 0.4.1'
   gem 'jekyll-livereload'
-  gem 'jekyll-paginate', '~> 1.1'
+  gem 'jekyll-paginate-v2'
   gem 'jekyll-sitemap'
   gem 'jekyll-tagging-related_posts'
   gem 'jekyll-typogrify'
-
 end

Gemfile.lock

@@ -40,7 +40,8 @@ GEM
     jekyll-livereload (0.2.2)
       em-websocket (~> 0.5)
       jekyll (~> 3.0)
-    jekyll-paginate (1.1.0)
+    jekyll-paginate-v2 (1.9.0)
+      jekyll (~> 3.0)
     jekyll-sass-converter (1.5.0)
       sass (~> 3.4)
     jekyll-sitemap (1.1.1)
@@ -93,7 +94,7 @@ DEPENDENCIES
   jekyll-assets (~> 2.2, >= 2.2.8)
   jekyll-compose (~> 0.4.1)
   jekyll-livereload
-  jekyll-paginate (~> 1.1)
+  jekyll-paginate-v2
   jekyll-sitemap
   jekyll-tagging-related_posts
   jekyll-typogrify

_assets/stylesheets/_layout/_maincontent.scss

@@ -339,8 +339,7 @@
 .highlighter-rouge > *,
 .extendout > *:not(img),
 .photo-grid > *:not(img),
-.post__footer > *:not(.card),
-.pagination > * {
+.post__footer > *:not(.card) {
   margin-left: auto;
   margin-right: auto;
   width: 90%;

_assets/stylesheets/_redbat/_buttons.scss

@@ -34,6 +34,18 @@
   }
 }
 
+.button--paginate {
+  @extend %sans-con;
+  // font-size: .75rem;
+  text-transform: uppercase;
+  &[disabled] {
+    cursor: not-allowed;
+    background-color: $border-color;
+    color: rgba($body-color, .6);
+    pointer-events: none;
+  }
+}
+
 .button--small {
   font-size: .75rem;
   padding: .5rem;

_assets/stylesheets/_redbat/_pagenavi.scss

@@ -2,44 +2,10 @@
 // PAGE NAVIGATION
 // -------------------------------
 
-%nav-button {
-  font-size: .85rem;
-  font-weight: 600;
-  margin: 0;
-  padding: 8px 14px;
-}
-
-.page-nav {
-  @extend %sans;
-  list-style-type: none;
-  margin-bottom: 0;
-  text-align: center;
-  li {
-    display: inline-block;
+.pagination {
+  display: flex;
+  justify-content: center;
+  li + li {
+    margin-left: .5rem;
   }
 }
-
-.page-nav__previous:not(.page-nav__disabled),
-.page-nav__next:not(.page-nav__disabled) {
-  margin: 0;
-  padding: 0;
-  a {
-    background-color: $dark-color;
-    border-radius: 3px;
-    color: white;
-    @extend %nav-button;
-    text-decoration: none;
-    &:hover,
-    &:focus {
-      background-color: $primary-color;
-    }
-    &:focus {
-      outline: 1px dotted $primary-color;
-    }
-  }
-}
-
-.page-nav__disabled {
-  color: lighten($dark-color, 30%);
-  @extend %nav-button;
-}

_config.yml

@@ -4,13 +4,21 @@ url: http://localhost:4000
 description: 'An exploration of design, development, tech, Geek culture, Apple, and more.'
 timezone: America/Chicago
 permalink: /:year/:month/:title/
-paginate: 10
 exclude: ['README.md', 'Rakefile', 'Gemfile', 'Gemfile.lock', '.asset-cache']
 lunr_excludes: ['atom.xml', 'atom.articles.xml', 'sitemap.xml']
 
 # Where Things Are
 plugins_dir:  ./_plugins
 
+# Pagination
+pagination:
+  enabled: true
+  permalink: '/page/:num/'
+  sort_reverse: true
+  collection: 'posts'
+  per_page: 10
+  title: ':title - Page :num'
+
 # Syntax Highlighting
 highlighter: rouge
 

index.html

@@ -3,6 +3,8 @@
 exclude_from_search: true
 custom_css_class: home
 excerpt: Brightly Colored is a personal blog written by Tim Smith about design, development, technology, Apple, and whatever else he finds himself curious about.
+pagination:
+  enabled: true
 ---
 
 
@@ -55,31 +57,13 @@ <h2 class="post__lead">{{ post.lead }}</h2>
   {% endfor %}
 </section>
 
-<div class="pagination">
-  <ul class="page-nav">
-  {% if paginator.previous_page %}
-    <li class="page-nav__previous">
-      {% if paginator.previous_page == 1 %}
-        <a href="/">Prev</a>
-      {% else %}
-        <a href="{{ paginator.previous_page_path }}">Prev</a>
-      {% endif %}
-    </li>
-  {% else %}
-    <li class="page-nav__previous page-nav__disabled">
-      Prev
-    </li>
-  {% endif %}
-
-
-  {% if paginator.next_page %}
-    <li class="page-nav__next">
-      <a href="{{ paginator.next_page_path }}">Next</a>
-    </li>
-  {% else %}
-    <li class="page-nav__next page-nav__disabled">
-      Next
-    </li>
-  {% endif %}
-  </ul>
-</div><!-- .pagination -->
+{% if paginator.total_pages > 1 %}
+<ul class="pagination">
+  <li>
+    <a class="button button--primary button--paginate" href="{{ paginator.previous_page_path | prepend: site.baseurl }}" {% unless paginator.previous_page %}disabled{% endunless %}>Newer</a>
+  </li>
+  <li>
+    <a class="button button--primary button--paginate" href="{{ paginator.next_page_path | prepend: site.baseurl }}" {% unless paginator.next_page %}disabled{% endunless %}>Older</a>
+  </li>
+</ul>
+{% endif %}