Fix navigation links and add prev/next chapter navigation

- Fixed sidebar navigation to use proper relative_url filter
- Added prev/next navigation at bottom of each chapter
- Updated homepage link formatting
- Improved page navigation CSS styling
- Added nav_order to homepage

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: DavidLiedle

_includes/navigation.html

@@ -1,9 +1,9 @@
 <nav class="book-nav">
-  <h2>{{ site.title }}</h2>
+  <h2>Chapters</h2>
   <ul>
     {% for item in site.navigation %}
     <li>
-      <a href="{{ site.baseurl }}{{ item.url }}" {% if page.url == item.url %}class="active"{% endif %}>
+      <a href="{{ item.url | relative_url }}" {% if page.url contains item.url %}class="active"{% endif %}>
         {{ item.title }}
       </a>
     </li>

_includes/page-nav.html

@@ -0,0 +1,32 @@
+{% comment %}
+  Generate previous/next navigation links based on nav_order
+{% endcomment %}
+
+{% assign current_order = page.nav_order | default: 1 %}
+{% assign prev_page = nil %}
+{% assign next_page = nil %}
+
+{% comment %} Find all pages and sort by nav_order {% endcomment %}
+{% assign sorted_pages = site.pages | where_exp: "item", "item.nav_order" | sort: "nav_order" %}
+
+{% for p in sorted_pages %}
+  {% if p.nav_order < current_order %}
+    {% assign prev_page = p %}
+  {% endif %}
+  {% if p.nav_order > current_order and next_page == nil %}
+    {% assign next_page = p %}
+  {% endif %}
+{% endfor %}
+
+<nav class="page-navigation">
+  <div class="prev">
+    {% if prev_page %}
+      <a href="{{ prev_page.url | relative_url }}">← {{ prev_page.title }}</a>
+    {% endif %}
+  </div>
+  <div class="next">
+    {% if next_page %}
+      <a href="{{ next_page.url | relative_url }}">{{ next_page.title }} →</a>
+    {% endif %}
+  </div>
+</nav>

_layouts/default.html

@@ -32,6 +32,10 @@ <h1><a href="{{ '/' | relative_url }}">{{ site.title }}</a></h1>
 
       {{ content }}
 
+      {% if page.nav_order %}
+        {% include page-nav.html %}
+      {% endif %}
+
       </section>
       <footer>
         <p><small>{{ site.tagline }}</small></p>

assets/css/custom.css

@@ -133,19 +133,34 @@ ul, ol {
 .page-navigation {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   margin-top: 40px;
   padding-top: 20px;
   border-top: 1px solid #e5e5e5;
+  gap: 20px;
+}
+
+.page-navigation .prev {
+  flex: 1;
+  text-align: left;
+}
+
+.page-navigation .next {
+  flex: 1;
+  text-align: right;
 }
 
 .page-navigation a {
+  display: inline-block;
   padding: 10px 15px;
   background-color: #f5f5f5;
   border-radius: 3px;
   text-decoration: none;
   color: #333;
+  transition: all 0.2s;
 }
 
 .page-navigation a:hover {
-  background-color: #e5e5e5;
+  background-color: #4078c0;
+  color: white;
 }

index.md

@@ -1,6 +1,7 @@
 ---
 layout: default
-title: "Reactive: A React Book for the Reluctant"
+title: "Home"
+nav_order: 1
 ---
 
 # Reactive: A React Book for the Reluctant
@@ -78,7 +79,7 @@ Everything you need to know about React, including:
 
 <div align="center">
 
-**[Start Reading →](01-table-of-contents)**
+**[Start Reading →]({{ '/01-table-of-contents' | relative_url }})**
 
 *Warning: Reading this book will teach you React.*
 *We apologize in advance.*