Update pagination

jrhalket · May 2, 2020 · 6e9de53 · 6e9de53
1 parent 60ed29e
commit 6e9de53
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 48 deletions.
diff --git a/Gemfile b/Gemfile
@@ -3,7 +3,7 @@ group :jekyll_plugins do
     gem 'github-pages'
     gem 'jekyll'
     gem 'jekyll-email-protect'
-    gem 'jekyll-paginate'
+    gem 'jekyll-paginate-v2'
     gem 'jekyll-scholar'
     gem 'jemoji'
     gem 'unicode_utils'

diff --git a/_config.yml b/_config.yml
@@ -20,7 +20,7 @@ last_updated: false # set to true if you want to display last updated in the foo
 # -----------------------------------------------------------------------------
 
 navbar_fixed: true
-footer_fixed: false
+footer_fixed: true
 # TODO: add layout settings (single page vs. multi-page)
 
 # -----------------------------------------------------------------------------
@@ -43,16 +43,17 @@ google_analytics: UA-XXXXXXXXX # out your google-analytics code
 
 blog_name: al-folio
 blog_description: a simple whitespace theme for academics
-
-# Pagination
-paginate: 4
 permalink: /blog/:year/:title/
-paginate_path: /blog/page:num/
 
-text:
-  pagination:
-    newer: 'Newer'
-    older: 'Older'
+# Pagination
+pagination:
+  enabled: true
+  collection: 'posts'
+  permalink: /page/:num/
+  per_page: 3
+  trail:
+    before: 1 # The number of links before the current page
+    after: 3  # The number of links after the current page
 
 # Comments
 disqus_shortname: al-folio # put your disqus shortname
@@ -98,7 +99,7 @@ exclude: [vendor]
 # Plug-ins
 plugins:
     - jekyll-email-protect
-    - jekyll-paginate
+    - jekyll-paginate-v2
     - jekyll/scholar
     - jemoji
 

diff --git a/_includes/header.html b/_includes/header.html
@@ -41,11 +41,11 @@
           </li>
           <!-- Other pages -->
           {% for p in site.pages %}
-          {% if p.title and p.url != "/" %}
+          {% if p.nav %}
           <li class="nav-item {% if page.title == p.title %}active{% endif %}">
               <a class="nav-link" href="{{ p.url | prepend: site.baseurl | prepend: site.url }}">
                 {{ p.title }}
-                {% if page.nav == p.nav %}
+                {% if page.title == p.title %}
                 <span class="sr-only">(current)</span>
                 {% endif %}
               </a>

diff --git a/_includes/pagination.html b/_includes/pagination.html
@@ -1,23 +1,17 @@
-{% if paginator.total_pages != 1 %}
-<div class="pagination clearfix mb1 mt4">
-  <div class="left">
-    {% if paginator.previous_page %}
-      {% if paginator.page == 2 %}
-        <a class="pagination-item" href="{{ site.baseurl }}/blog/">{{ site.text.pagination.newer }}</a>
-      {% else %}
-        <a class="pagination-item" href="{{ paginator.previous_page_path | prepend: site.baseurl }}">{{ site.text.pagination.newer }}</a>
-      {% endif %}
-    {% else %}
-      <span class="pagination-item disabled">{{ site.text.pagination.newer }}</span>
+{% if paginator.total_pages > 1 %}
+<nav aria-label="Blog page naviation">
+  <ul class="pagination pagination-lg justify-content-center">
+    <li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}">
+      <a class="page-link" href="{{ paginator.previous_page_path | prepend: site.baseurl }}" tabindex="-1" aria-disabled="{{ paginator.previous_page }}">Newer</a>
+    </li>
+    {% if paginator.page_trail %}
+      {% for trail in paginator.page_trail %}
+        <li class="page-item {% if page.url == trail.path %}active{% endif %}"><a class="page-link" href="{{ trail.path | prepend: site.baseurl }}" title="{{trail.title}}">{{ trail.num }}</a></li>
+      {% endfor %}
     {% endif %}
-  </div>
-  <div class="right">
-    {% if paginator.next_page %}
-      <a class="pagination-item" href="{{ paginator.next_page_path | prepend: site.baseurl }}">{{ site.text.pagination.older }}</a>
-    {% else %}
-      <span class="pagination-item disabled">{{ site.text.pagination.older }}</span>
-    {% endif %}
-  </div>
-  <div class="pagination-meta">Page {{ paginator.page }} of {{ paginator.total_pages }}</div>
-</div>
+    <li class="page-item {% unless paginator.next_page %}disabled{% endunless %}">
+      <a class="page-link" href="{{ paginator.next_page_path | prepend: site.baseurl }}">Older</a>
+    </li>
+  </ul>
+</nav>
 {% endif %}
diff --git a/_layouts/about.html b/_layouts/about.html
@@ -9,7 +9,7 @@
     {% if page.profile %}
     <div class="profile col-4 {% if page.profile.align == 'left' %}order-first{% endif %}">
       {% if page.profile.image %}
-        <img src="{{ page.profile.image | prepend: '/assets/img/' | prepend: site.baseurl | prepend: site.url }}">
+        <img class="img-fluid z-depth-1 rounded" src="{{ page.profile.image | prepend: '/assets/img/' | prepend: site.baseurl | prepend: site.url }}">
       {% endif %}
       {% if page.profile.address %}
         <div class="address">

diff --git a/_pages/projects.md b/_pages/projects.md
@@ -3,6 +3,7 @@ layout: page
 title: projects
 permalink: /projects/
 description: A growing collection of your cool projects.
+nav: true
 ---
 
 {% for project in site.projects %}

diff --git a/_pages/publications.md b/_pages/publications.md
@@ -4,6 +4,7 @@ permalink: /publications/
 title: publications
 description: Publications by categories in reversed chronological order. Generated by jekyll-scholar.
 years: [1956, 1950, 1935, 1905]
+nav: true
 ---
 
 {% for y in page.years %}

diff --git a/_pages/teaching.md b/_pages/teaching.md
@@ -3,6 +3,7 @@ layout: page
 permalink: /teaching/
 title: teaching
 description: Materials for courses you taught. Replace this text with your description.
+nav: true
 ---
 
 For now, this page is assumed to be a static description of your courses. You can convert it to a collection similar to `_projects/` so that you can have a dedicated page for each course.

diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -5,10 +5,10 @@
  // Typography
 
 a, table.table a {
-  color: $link-color;
+  color: $theme-color;
   display: inline-block;
   &:hover {
-    color: $link-color;
+    color: $theme-color;
     text-decoration: underline;
   }
   &:hover:after {
@@ -17,6 +17,7 @@ a, table.table a {
 }
 
 // Math
+
 .equation {
   margin-bottom: 1rem;
   text-align: center;
@@ -26,9 +27,6 @@ a, table.table a {
 // Profile
 
 .profile {
-    img {
-        box-shadow: 0 0 5px $grey-color;
-    }
     .address {
       font-family: monospace;
       font-size: 1.2rem;
@@ -46,7 +44,6 @@ a, table.table a {
   border-bottom: 1px solid $grey-color-light;
   opacity: 0.95;
 }
-
 .navbar.navbar-light {
   // Remove link decoration
   a {
@@ -56,23 +53,23 @@ a, table.table a {
   }
   .navbar-nav .nav-item .nav-link {
     &:hover {
-      color: $link-color;
+      color: $theme-color;
     }
   }
   .navbar-nav .nav-item.active>.nav-link {
       background-color: inherit;
-      color: $link-color;
+      color: $theme-color;
       font-weight: bolder;
       &:hover {
-        color: $link-color;
+        color: $theme-color;
       }
   }
   .contact-icon {
     font-size: 2rem;
     a {
       color: $grey-color-dark;
       &:hover {
-        color: $link-color;
+        color: $theme-color;
       }
     }
   }
@@ -115,19 +112,22 @@ a, table.table a {
 
 
 // News
+
 .news table td {
   font-size: 1rem;
 }
 
+
 // Social (bottom)
+
 .social {
   text-align: center;
   .contact-icon {
     font-size: 4rem;
     a {
       color: $grey-color-dark;
       &:hover {
-        color: $link-color;
+        color: $theme-color;
       }
     }
   }
@@ -147,7 +147,7 @@ footer.fixed-bottom {
   a {
     color: white;
     &:hover {
-      color: lighten($link-color, 25%);
+      color: lighten($theme-color, 25%);
       text-decoration: none;
     }
   }
@@ -159,3 +159,48 @@ footer.sticky-bottom {
   padding-bottom: 40px;
   font-size: 0.9rem;
 }
+
+
+// Blog
+
+.header-bar {
+  border-bottom: 1px solid $grey-color-light;
+  text-align: center;
+  padding-top: 2rem;
+  padding-bottom: 5rem;
+  h1 {
+    color: $theme-color;
+    font-size: 5rem;
+  }
+}
+
+.post-list {
+  margin: 0;
+  margin-bottom: 40px;
+  padding: 0;
+  li {
+    border-bottom: 1px solid $grey-color-light;
+    list-style: none;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    .post-meta {
+      color: $grey-color;
+      font-size: 0.875rem;
+      margin-bottom: 0;
+    }
+    a {
+      color: black;
+      text-decoration: none;
+      &:hover {
+        color: $theme-color;
+      }
+    }
+  }
+}
+
+.pagination .page-item.active .page-link {
+  background-color: $theme-color;
+  &:hover {
+    background-color: $theme-color;
+  }
+}
diff --git a/blog/index.html b/blog/index.html
@@ -1,5 +1,7 @@
 ---
 layout: default
+pagination:
+  enabled: true
 ---
 
 <div class="post">
@@ -13,7 +15,7 @@ <h2>{{ site.blog_description }}</h2>
   <ul class="post-list">
     {% for post in paginator.posts %}
       <li>
-        <h2><a class="post-title" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h2>
+        <h3><a class="post-title" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h3>
         <p class="post-meta">{{ post.date | date: '%B %-d, %Y' }}</p>
         <p>{{ post.description }}</p>
       </li>