add working prev and next links

Author: Robin Marillia

docs/Gemfile.lock

@@ -98,6 +98,7 @@ GEM
       faraday (> 0.8, < 2.0)
 
 PLATFORMS
+  universal-darwin-21
   x86_64-linux
 
 DEPENDENCIES

docs/_layouts/guide.html

@@ -2,26 +2,41 @@
 layout: default
 ---
 
+{% assign sidebarItems = site.guide | sort: 'chapter' %}
+
+{% for item in sidebarItems  %}
+  {% if item.title == page.title %}
+    {% unless forloop.first %}
+      {% assign prevIndex = forloop.index| minus: 2 %}
+      {% assign prev = sidebarItems[prevIndex] %}
+    {% endunless %}
+    {% unless forloop.last %}
+      {% assign nextIndex = forloop.index %}
+      {% assign next = sidebarItems[nextIndex] %}
+    {% endunless %}
+  {% endif %}
+{% endfor %}
+
 <div class="d-md-flex flex-1">
-  {% assign sidebarItems = site.guide | sort: 'chapter' %} {% include sidebar.html %}
+  {% include sidebar.html %}
 
   <section class="col-lg-9 px-5 f4">
     <div class="container-md markdown-body mb-5">
       <h1 class="mb-4 f0-light">{{ page.title }}</h1>
       {{ content }}
-      <div class="mt-4 Box">
-        <nav class="paginate-container Box-body" aria-label="Pagination">
-          <div class="pagination">
-            {% if page.previous %}
-            <span class="previous_page" aria-disabled="true">Previous</span>
-            {% else %}
-            <a class="previous_page" rel="previous" href="{{page.previous.url}}" aria-label="Previous Page">Previous</a>
-            {% endif %} {% if page.next %}
-            <span class="next_page" aria-disabled="true">Next</span>
-            {% else %}
-            <a class="next_page" rel="next" href="{{page.next.url}}" aria-label="Next Page">Next</a>
-            {% endif %}
-          </div>
+      <div class="mt-4">
+        <nav class="prev-next-links" aria-label="Pagination">
+          {% if prev %}
+          <a class="prev-next-links__button" rel="previous" href="{{prev.url}}" aria-label="Previous Page">
+            <div class="f6 text-uppercase">Previous</div>
+            {{prev.title}}
+          </a>
+          {% endif %} {% if next %}
+          <a class="prev-next-links__button" rel="next" href="{{next.url}}" aria-label="Next Page">
+            <div class="f6 text-uppercase">Next</div>
+            {{next.title}}
+          </a>
+          {% endif %}
         </nav>
       </div>
     </div>

docs/custom.css

@@ -103,3 +103,17 @@ a {
 .code-tooltip {
   scroll-margin-top: 150px;
 }
+
+
+/* Prev and next links */
+.prev-next-links {
+  display: flex;
+  gap: 16px;
+}
+
+.prev-next-links__button {
+  border: solid 1px;
+  padding: 16px;
+  border-radius: 4px;
+  flex: 1;
+}