Update: infinite scroll on index page and posts

_includes/inf.html

@@ -0,0 +1,21 @@
+
+<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.3.5/jquery.jscroll.min.js"></script>
+
+<script type="text/javascript">
+// content selector is used to extract the additional items 
+var repat = new RegExp("https?://");
+$('.content').jscroll({
+    contentSelector: '#posts-content',
+    nextSelector: '#next-page',
+    loadingFunction: function(){
+      var new_page = $('#next-page')[0].href.replace(/(https:\/\/)|(http:\/\/)/, '');
+      var xhr = new XMLHttpRequest();
+      xhr.open("GET","https://page.rweekly.org/?page="+ new_page);
+      xhr.send();
+    }
+});
+</script>

_layouts/default.html

@@ -104,5 +104,6 @@ <h3 class="masthead-title">
   })();
 
     </script>
+
   </body>
 </html>

_layouts/post.html

@@ -2,11 +2,24 @@
 layout: default
 ---
 
-<article class="post">
+<article id='posts-content' class="post">
   <h1 class="post-title">{{ page.title }}</h1>
   <time datetime="{{ page.date | date_to_xmlschema }}" class="post-date">{{ page.date | date_to_string }}</time>
   {{ content }}
   <p><small id="page_view">&nbsp;</small></p>
+  <div class="pagination">
+  {% if page.previous.url %}
+
+  <a id="next-page" class="pagination-item older" href="{{ page.previous.url }}">Older</a>
+  {% else %}
+    <span class="pagination-item older">Older</span>
+  {% endif %}
+  {% if page.next.url %}
+    <a class="pagination-item newer" href="{{  page.next.url  }}">Newer</a>
+  {% else %}
+    <span class="pagination-item newer">Newer</span>
+  {% endif %}
+  </div>
 </article>
 
 {% if site.related_posts != empty %}
@@ -25,4 +38,4 @@ <h3>Related posts</h3>
 </aside>
 {% endif %}
 
-<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
+{% include inf.html %}

index.html

@@ -3,7 +3,7 @@
 title: Home
 ---
 
-<div class="posts">
+<div id="posts-content" class="posts">
   {% for post in paginator.posts %}
   <article class="post">
     <h1 class="post-title">
@@ -18,11 +18,10 @@ <h1 class="post-title">
     <p><small id="page_view">&nbsp;</small></p>
   </article>
   {% endfor %}
-</div>
 
-<div class="pagination">
+  <div class="pagination">
   {% if paginator.next_page %}
-    <a class="pagination-item older" href="{{ paginator.next_page_path | prepend: site.baseurl }}">Older</a>
+    <a id="next-page" class="pagination-item older" href="{{ paginator.next_page_path | prepend: site.baseurl }}">Older</a>
   {% else %}
     <span class="pagination-item older">Older</span>
   {% endif %}
@@ -31,6 +30,7 @@ <h1 class="post-title">
   {% else %}
     <span class="pagination-item newer">Newer</span>
   {% endif %}
+  </div>
 </div>
 
-<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
+{% include inf.html %}