Implement pagination and auto-sitemap

Gemfile

@@ -2,9 +2,10 @@ source "https://rubygems.org"
 gem "jekyll", "~> 4.3.3"
 group :jekyll_plugins do
   gem "jekyll-feed", "~> 0.12"
+  gem "jekyll-paginate-v2"
+  gem "jekyll-sitemap"
 end
 
-
 platforms :mingw, :x64_mingw, :mswin, :jruby do
   gem "tzinfo", ">= 1", "< 3"
   gem "tzinfo-data"

Gemfile.lock

@@ -44,8 +44,12 @@ GEM
       webrick (~> 1.7)
     jekyll-feed (0.17.0)
       jekyll (>= 3.7, < 5.0)
+    jekyll-paginate-v2 (3.0.0)
+      jekyll (>= 3.0, < 5.0)
     jekyll-sass-converter (3.0.0)
       sass-embedded (~> 1.54)
+    jekyll-sitemap (1.4.0)
+      jekyll (>= 3.7, < 5.0)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
     kramdown (2.4.0)
@@ -147,6 +151,8 @@ DEPENDENCIES
   http_parser.rb (~> 0.6.0)
   jekyll (~> 4.3.3)
   jekyll-feed (~> 0.12)
+  jekyll-paginate-v2
+  jekyll-sitemap
   tzinfo (>= 1, < 3)
   tzinfo-data
   wdm (~> 0.1.1)

_config.yml

@@ -1,8 +1,11 @@
 title: shr4pnelblog !!
 description: Ruminations on music, the world and whatever rubbish pops into my head delivered straight to you.
-url: blog.shr4pnel.com
+url: https://blog.shr4pnel.com
 author: tyler!
-plugins:
-    - jekyll-feed
 exclude:
     - .idea
+pagination:
+    enabled: true
+    per_page: 5
+    sort_reverse: true
+    permalink: /page/:num/

_layouts/post.html

@@ -30,9 +30,9 @@
                 {{ content }}
             </div>
         </article>
-        <a href="/">back home!</a>
+        <a id="generate-path" href="/">back home!</a>
     </div>
 </main>
-
+<script src="/assets/js/get-correct-path.js"></script>
 </body>
 </html>

_layouts/shr4pnel.html

@@ -19,15 +19,21 @@
         <div class="container">
             <h2 class="highlighted">article</h2>
             <div id="articles">
-                {% for post in site.posts %}
+                {% for post in paginator.posts %}
-                    <article>
+                    <div class="card">
-                        <div class="card">
+                        <img src="/assets/graphics/anon.png" alt="little face with sunglasses">
-                            <img src="/assets/graphics/anon.png" alt="little face with sunglasses">
+                        <a href="{{ post.url }}">{{ post.title }}</a>
-                            <a href="{{ post.url }}">{{ post.title }}</a>
+                        <p>{{ post.date | date: "%d/%m/%y" }}</p>
-                            <p>{{ post.date | date: "%d/%m/%y" }}</p>
+                    </div>
-                        </div>
-                    </article>
                 {% endfor %}
+                <div class="paginate">
+                    {% if paginator.previous_page %}
+                        <a href="{{ paginator.previous_page_path }}">Previous page</a>
+                    {% endif %}
+                    {% if paginator.next_page %}
+                        <a href="{{ paginator.next_page_path }}">Next page</a>
+                    {% endif %}
+                </div>
                 <p>or uhh just play <a href="#">minesweeper</a> :3</p>
                 <img src="/assets/graphics/cutiecat.png" alt="little animated cats in a line">
             </div>

assets/css/index.css

@@ -85,6 +85,7 @@ p > img {
     flex-direction: row;
     align-items: center;
     margin-bottom: 10px;
+    min-width: 880px;
 }
 
 .card > a {

assets/js/get-correct-path.js

@@ -0,0 +1,8 @@
+// this puts you back on the page you came from
+const referrer = document.referrer
+let anchor = document.getElementById("generate-path")
+if (referrer.includes("blog.shr4pnel.com") || referrer.includes("localhost:4000")) {
+    anchor.href = referrer
+} else {
+    anchor.href = "/"
+}

index.html

@@ -0,0 +1,9 @@
+---
+layout: shr4pnel
+title: shr4pnelblog!!
+pagination:
+    enabled: true
+per_page: 5
+debug: true
+sort_reverse: true
+---

index.markdown

@@ -1,4 +0,0 @@
----
-layout: shr4pnel
-title: shr4pnelblog!!
----