Merge pull request #16 from JayPanoz/pagination

Pagination

Gemfile

@@ -0,0 +1,7 @@
+source "https://rubygems.org"
+
+gem "jekyll"
+
+group :jekyll_plugins do
+  gem "jekyll-paginate-v2"
+end

_config.yml

@@ -22,7 +22,20 @@ collections:
   posts:
     permalink: /:collection/:title:output_ext
 
-exclude: ['Gemfile', 'Gemfile.lock', 'Rakefile', 'README.md']
+plugins:
+  - jekyll-paginate-v2
+
+pagination:
+  enabled: true
+  permalink: '/home-:num/'
+  collection: 'recipes'
+  per_page: 18
+  sort_field: 'title'
+  trail:
+    before: 1
+    after: 1
+
+exclude: ['Gemfile.lock', 'Rakefile', 'README.md']
 
 translation:
   en:
@@ -44,6 +57,8 @@ translation:
     storage: "Storage"
     tip: "Tip"
     more: "Discover more"
+    paginator_previous: "Previous"
+    paginator_next: "Next"
     browse_by: "Browse by:"
     collections: "Collections"
     collections_browse: "No recipes are marked as being part of a collection."
@@ -74,6 +89,8 @@ translation:
     storage: "Conservation"
     tip: "Astuce"
     more: "Découvrez plus"
+    paginator_previous: "Précédent"
+    paginator_next: "Suivant"
     browse_by: "Naviguer par:"
     collections: "Collections"
     collections_browse: "Aucune recette n’a encore été ajoutée à une collection."

_includes/nav.html

@@ -2,7 +2,7 @@
   {% assign current = page.name | downcase | split: '.' %}
   {% assign currentUrl = page.url | downcase %}
 
-	<a href="{{ site.baseurl }}/" class="nav-item nav-recipes {% if current[0] == 'index' or currentUrl contains 'recipes' %}active{% endif %}">
+	<a href="{{ site.baseurl }}/" class="nav-item nav-recipes {% if page.id == 'homepage' or currentUrl contains 'recipes' %}active{% endif %}">
 		<svg width="32" height="32" viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg">
 		  <g class="gingerbread">
 		    <path d="M73.231 60.003a3.186 3.186 0 1 0 0 6.375 3.186 3.186 0 0 0 0-6.375z"/>

css/main.scss

@@ -159,4 +159,32 @@ nav.main-nav .nav-item.active .nav-label{
 .tag-result-container {
 	display: block;
 	clear: both;
+}
+
+.paginator-list {
+	display: flex;
+	margin: 0 auto;
+	max-width: 100%;
+	justify-content: center;
+}
+.paginator-prev,
+.paginator-next,
+.paginator-trail {
+	margin: 0 0.5rem;
+	padding: 0 0.5rem;
+	box-sizing:border-box;
+}
+.paginator-trail {
+	text-align: center;
+}
+
+.paginator-trail.selected {
+	border: 1px solid #CB4E06;
+	background-color: #eeeeee;
+}
+
+@media all and (max-width:40em){
+	.paginator-list {
+		font-size: 0.875rem;
+	}
 }

index.html

@@ -1,20 +1,51 @@
 ---
 layout: default
+id: "homepage"
+pagination:
+  enabled: true
 ---
 
 <div class="home"> 
   <div class="recipes xs-px1 xs-mt2">
     <div class="clearfix">
-    {% assign sorted = site.recipes | sort:"title" %}
-    {% for post in sorted %}
+
+    {% for post in paginator.posts %}
 
       <div class="sm-col sm-col-6 md-col-6 lg-col-4 xs-px1 xs-mb2">
           <a class="block relative bg-accent" href="{{ post.url | prepend: site.baseurl }}">
             <div class="image ratio bg-cover"{% for image in post.image %} style="background-image:url({{site.baseurl}}/images/{{ image }});"{% endfor %}></div>
             <h1 class="title p2 m0 absolute bold white bottom-0 left-0">{{ post.title }}</h1>
           </a>
       </div>
-    {% endfor %}
+      {% endfor %}
+    </div>
   </div>
+
+  <div class="paginator-nav xs-px1 xs-mt2">
+    <div class="clearfix">
+    {% if paginator.total_pages > 1 %}
+      <ul class="paginator-list">
+        {% if paginator.previous_page %}
+        <li class="paginator-prev">
+          <a href="{{ paginator.previous_page_path | prepend: site.baseurl }}">{{ site.translation[site.language].paginator_previous }}</a>
+        </li>
+        {% endif %}
+
+        {% if paginator.page_trail %}
+          {% for trail in paginator.page_trail %}
+          <li class="paginator-trail{% if page.url == trail.path %} selected{% endif %}">
+            <a href="{{ trail.path | prepend: site.baseurl }}" title="{{trail.title}}">{{ trail.num }}</a>
+          </li>
+          {% endfor %}
+        {% endif %}
+
+        {% if paginator.next_page %}
+        <li class="paginator-next">
+          <a href="{{ paginator.next_page_path | prepend: site.baseurl }}">{{ site.translation[site.language].paginator_next }}</a>
+        </li>
+        {% endif %}
+      </ul>
+      {% endif %}
+    </div>
   </div>
 </div>