Add pagination component

_config.yml

@@ -30,10 +30,13 @@ sass:
 # Blog settings
 permalink: "/blog/:year/:title:output_ext"
 date_format: "%B %-d, %Y"
+paginate: 12
+paginate_path: "/blog/page:num/"
 
 # Build settings
 plugins:
   - jekyll-feed
+  - jekyll-paginate
 
 # Exclude from processing.
 # The following items will not be processed, by default.

_includes/featured-post-hero.html

@@ -88,7 +88,7 @@
 
                 <!-- All posts button (if not on a blog page already) -->
                 {% unless page.url contains "blog" %}
-                <a href="{% link blog.html %}#all-posts" class="mt-4 btn btn-primary btn-icon-right">
+                <a href="{% link blog/index.html %}#all-posts" class="mt-4 btn btn-primary btn-icon-right">
                     All Posts
                     <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#arrow-right' | relative_url }}"></use></svg>
                 </a>

_includes/pagination.html

@@ -0,0 +1,53 @@
+{% if paginator.total_pages > 1 %}
+<nav aria-label="pagination">
+    <ul class="pagination">
+
+        <!-- Previous arrow -->
+        {% if paginator.previous_page %}
+        <li class="pagination__item">
+            <a class="older-posts" href="{{ paginator.previous_page_path | relative_url }}">
+               <span class="visually-hidden">Previous Page</span>
+               <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#arrow-left' | relative_url }}"></use></svg>
+            </a>
+        </li>
+        {% endif %}
+
+        {% for page in (1..paginator.total_pages) %}
+        {% assign class = nil %}
+        {% assign aria = nil %}
+        {% if page == paginator.page %}
+            {% assign class = 'current' %}
+            {% assign aria = 'aria-current="page"' %}
+        {% endif %}
+
+        <li class="pagination__item">
+
+            <!-- Page 1 -->
+            {% if page == 1 %}
+            <a class="pagination__link {{ class }}"  href="{{ paginator.previous_page_path | relative_url }}" {{ aria }}>
+                <span class="visually-hidden">Page </span>{{ page }}
+            </a>
+
+            <!-- Page 2, 3, 4, etc -->
+            {% else %}
+            <a class="pagination__link {{ class }}" href="{{ site.paginate_path | relative_url | replace: ':num', page }}" {{ aria }}>
+                <span class="visually-hidden">Page </span>{{ page }}
+            </a>
+
+            {% endif %}
+        </li>
+        {% endfor %}
+
+        <!-- Next arrow -->
+        {% if paginator.next_page %}
+        <li class="pagination__item">
+            <a class="older-posts" href="{{ paginator.next_page_path | relative_url }}">
+               <span class="visually-hidden">Next Page</span>
+               <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#arrow-right' | relative_url }}"></use></svg>
+            </a>
+        </li>
+        {% endif %}
+
+    </ul>
+</nav>
+{% endif %}

assets/_sass/component/_pagination.scss

@@ -0,0 +1,38 @@
+.pagination {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: rem-calc(30px);
+    @extend .list--plain;
+    @extend .monospace;
+}
+
+.pagination__item {
+    margin: rem-calc(0 5px 5px 0);
+}
+
+.pagination a {
+    display: inline-block;
+    padding: rem-calc(4px);
+    min-width: rem-calc(36px);
+    background-color: $white;
+    border: 2px solid transparent;
+    border-radius: $border-radius;
+    text-align: center;
+    font-size: rem-calc(16px);
+    color: $slate-600;
+    transition: .2s all ease-in-out;
+    transition-property: color, background-color, border-color;
+    text-decoration: none;
+
+    &:hover,
+    &:focus,
+    &.current {
+        border-color: $teal;
+    }
+
+    &.current {
+        font-weight: 700;
+        border-color: $slate-200;
+    }
+
+}

assets/css/main.scss

@@ -41,6 +41,7 @@
 @import "component/post-index";
 @import "component/post-content";
 @import "component/featured-post-hero";
+@import "component/pagination";
 
 // Import the syntax highlighting theme, see:
 // https://richleland.github.io/pygments-css/

assets/images/icons/icon-sprite.svg

@@ -35,6 +35,11 @@
         <path d="M3.96825397,5.1875 L3.96825397,3.5 L11.968254,3.5 L11.968254,5.1875 L8.88888889,5.1875 L8.88888889,12.5 L7.11111111,12.5 L7.11111111,5.1875 L3.96825397,5.1875 Z M2.85714286,6.875 L5.71428571,10.25 L0,10.25 L2.85714286,6.875 Z M13.1428571,6.875 L16,10.25 L10.2857143,10.25 L13.1428571,6.875 Z" />
     </symbol>
 
+    <!-- arrow-left -->
+    <symbol id="arrow-left" viewBox="0 0 16 16">
+        <path d="M8.19925,3.28786949 C8.55540893,3.63568237 8.58902783,4.18549466 8.29733929,4.57138952 L8.20160132,4.68037011 L5.823,7.01883867 L13.0102479,7.01883867 C13.5568729,7.01883867 14,7.45811956 14,8 C14,8.54188044 13.5568729,8.98116133 13.0102479,8.98116133 L5.823,8.98116133 L8.20160132,11.3196299 C8.55658365,11.6686228 8.58834559,12.2185436 8.29535548,12.6034683 L8.19925,12.7121305 C7.80495721,13.0971836 7.17144872,13.0957752 6.77890214,12.7089727 L2,8 L6.77890214,3.29102728 C7.17144872,2.90422481 7.80495721,2.90281636 8.19925,3.28786949 Z" />
+    </symbol>
+
     <!-- arrow-right -->
     <symbol id="arrow-right" viewBox="0 0 16 16">
         <path d="M7.80075,3.28786949 C7.44459107,3.63568237 7.41097217,4.18549466 7.70266071,4.57138952 L7.79839868,4.68037011 L10.177,7.01883867 L2.98975207,7.01883867 C2.44312709,7.01883867 2,7.45811956 2,8 C2,8.54188044 2.44312709,8.98116133 2.98975207,8.98116133 L10.177,8.98116133 L7.79839868,11.3196299 C7.44341635,11.6686228 7.41165441,12.2185436 7.70464452,12.6034683 L7.80075,12.7121305 C8.19504279,13.0971836 8.82855128,13.0957752 9.22109786,12.7089727 L14,8 L9.22109786,3.29102728 C8.82855128,2.90422481 8.19504279,2.90281636 7.80075,3.28786949 Z" />

blog/index.html

@@ -1,7 +1,6 @@
 ---
 layout: default
 title: Blog
-permalink: /blog/
 ---
 
 <!-- Featured post hero -->
@@ -19,7 +18,7 @@ permalink: /blog/
         <ul class="post-list text-length-md">
 
             <!-- Post -->
-            {%- for post in site.posts -%}
+            {%- for post in paginator.posts -%}
             <li class="post-list__item">
 
                 <!-- Post title -->
@@ -47,6 +46,9 @@ permalink: /blog/
 
         </ul>
         {%- endif -%}
+
+        <!-- pagination -->
+        {% include pagination.html %}
     </section>
 
 </div>