From 85f0e122de4089cf7ac4d5265ee6a42443c64a9b Mon Sep 17 00:00:00 2001
From: deadrat <jay@covai.org>
Date: Mon, 11 May 2026 09:56:14 +0530
Subject: [PATCH] feat: add series roadmap and navigation feature

---
 sass/_site.scss                        | 124 +++++++++++++++++++++++++
 templates/page.html                    |   6 ++
 templates/partials/series_nav.html     |  42 +++++++++
 templates/partials/series_roadmap.html |  27 ++++++
 4 files changed, 199 insertions(+)
 create mode 100644 templates/partials/series_nav.html
 create mode 100644 templates/partials/series_roadmap.html

diff --git a/sass/_site.scss b/sass/_site.scss
index 29b1a14..5702f97 100644
--- a/sass/_site.scss
+++ b/sass/_site.scss
@@ -1140,3 +1140,127 @@ a.zola-anchor {
     }
   }
 }
+
+// Series styling
+.series-nav-top {
+  display: block !important;
+  width: 100% !important;
+  margin: 2rem 0 !important;
+  padding-bottom: 1.5rem !important;
+  border-bottom: 1px dashed rgba($green, 0.2) !important;
+  clear: both !important;
+}
+
+.series-nav-info {
+  display: block !important;
+  font-family: $caps-font !important;
+  font-size: 0.9rem !important;
+  color: $green !important;
+  text-transform: uppercase !important;
+  letter-spacing: 1.5px !important;
+  margin-bottom: 1.5rem !important;
+  opacity: 0.6 !important;
+  text-align: center !important;
+}
+
+.series-nav-buttons {
+  display: flex !important;
+  flex-direction: row !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  width: 100% !important;
+}
+
+.series-nav-left, .series-nav-right {
+  flex: 1 !important;
+  display: flex !important;
+}
+
+.series-nav-left { justify-content: flex-start !important; }
+.series-nav-right { justify-content: flex-end !important; }
+
+.series-nav-btn {
+  text-decoration: none !important;
+  border-bottom: 1px dotted transparent !important;
+  color: $shamrock-green !important;
+  font-family: $caps-font !important;
+  font-size: 1.3rem !important;
+  transition: all 0.2s ease !important;
+  white-space: nowrap !important;
+  
+  &:hover {
+    border-bottom-color: $shamrock-green !important;
+    opacity: 0.8 !important;
+  }
+}
+
+.series-roadmap-bottom {
+  margin: 4rem 0 2rem;
+  padding: 2rem 0;
+  border-top: 1px solid rgba($green, 0.15);
+  font-family: $body-font;
+}
+
+.series-roadmap-header {
+  font-family: $caps-font;
+  font-size: 1.2rem;
+  color: $green;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-bottom: 1.5rem;
+  display: block;
+  opacity: 0.8;
+}
+
+.series-roadmap-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  border-left: 2px solid rgba($green, 0.2);
+  padding-left: 1.5rem;
+  
+  li {
+    margin: 0.8rem 0;
+    font-size: 1.1rem;
+    line-height: 1.5;
+  }
+  
+  a {
+    color: inherit;
+    text-decoration: none;
+    opacity: 0.7;
+    border-bottom: 1px dotted transparent;
+    transition: all 0.2s;
+    
+    &:hover {
+      opacity: 1;
+      border-bottom-color: $shamrock-green;
+    }
+  }
+  
+  .current {
+    color: $shamrock-green;
+    font-weight: bold;
+    
+    &::after {
+      content: " (Current Post)";
+      font-size: 0.8rem;
+      opacity: 0.5;
+      font-weight: normal;
+      margin-left: 0.5rem;
+      font-family: $caps-font;
+    }
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .series-nav-btn { 
+    color: $green !important; 
+    &:hover { border-bottom-color: $green !important; }
+  }
+  
+  .series-roadmap-list {
+    .current { color: $green; }
+    a:hover { border-bottom-color: $green; }
+  }
+}
diff --git a/templates/page.html b/templates/page.html
index c072ac8..237c221 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -46,7 +46,13 @@ <h1 class="section-title">{{ page.title | safe }}</h1>
         </ul>
       </div>
       {% endif %}{% endif %}{% endif %}{% endif %}
+      {% if page.extra.series %}
+        {% include "partials/series_nav.html" %}
+      {% endif %}
       {{ page.content | safe }}
+      {% if page.extra.series %}
+        {% include "partials/series_roadmap.html" %}
+      {% endif %}
       <br>
       {% if page.lower or page.higher %}
         <nav class="pagination">
diff --git a/templates/partials/series_nav.html b/templates/partials/series_nav.html
new file mode 100644
index 0000000..b6d1250
--- /dev/null
+++ b/templates/partials/series_nav.html
@@ -0,0 +1,42 @@
+{% if page.extra.series %}
+    {% set posts_section = get_section(path="posts/_index.md") %}
+    {% set series_posts = [] %}
+    {% for p in posts_section.pages %}
+        {% if p.extra.series and p.extra.series == page.extra.series %}
+            {% set_global series_posts = series_posts | concat(with=p) %}
+        {% endif %}
+    {% endfor %}
+    {% set series_posts = series_posts | sort(attribute="extra.series_order") %}
+
+    {% if series_posts | length > 1 %}
+        {% set series_len = series_posts | length %}
+        {% set max_index = series_len - 1 %}
+        {% set current_index = 0 %}
+        {% for p in series_posts %}
+            {% if p.permalink == page.permalink %}
+                {% set_global current_index = loop.index0 %}
+            {% endif %}
+        {% endfor %}
+
+        <div class="series-nav-top">
+            <span class="series-nav-info">Part {{ current_index + 1 }} of "{{ page.extra.series }}" series</span>
+            <div class="series-nav-buttons">
+                <div class="series-nav-left">
+                    {% if current_index > 0 %}
+                        {% set prev_idx = current_index - 1 %}
+                        {% set prev_p = series_posts[prev_idx] %}
+                        <a class="series-nav-btn prev" href="{{ prev_p.permalink }}">← Previous Part</a>
+                    {% endif %}
+                </div>
+                
+                <div class="series-nav-right">
+                    {% if current_index < max_index %}
+                        {% set next_idx = current_index + 1 %}
+                        {% set next_p = series_posts[next_idx] %}
+                        <a class="series-nav-btn next" href="{{ next_p.permalink }}">Next Part →</a>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    {% endif %}
+{% endif %}
\ No newline at end of file
diff --git a/templates/partials/series_roadmap.html b/templates/partials/series_roadmap.html
new file mode 100644
index 0000000..606d6e3
--- /dev/null
+++ b/templates/partials/series_roadmap.html
@@ -0,0 +1,27 @@
+{% if page.extra.series %}
+    {% set posts_section = get_section(path="posts/_index.md") %}
+    {% set series_posts = [] %}
+    {% for p in posts_section.pages %}
+        {% if p.extra.series and p.extra.series == page.extra.series %}
+            {% set_global series_posts = series_posts | concat(with=p) %}
+        {% endif %}
+    {% endfor %}
+    {% set series_posts = series_posts | sort(attribute="extra.series_order") %}
+
+    {% if series_posts | length > 1 %}
+        <div class="series-roadmap-bottom">
+            <span class="series-roadmap-header">Series Roadmap: {{ page.extra.series }}</span>
+            <ul class="series-roadmap-list">
+                {% for p in series_posts %}
+                    <li>
+                        {% if p.permalink == page.permalink %}
+                            <span class="current">Part {{ loop.index }}: {{ p.title }}</span>
+                        {% else %}
+                            <a href="{{ p.permalink }}">Part {{ loop.index }}: {{ p.title }}</a>
+                        {% endif %}
+                    </li>
+                {% endfor %}
+            </ul>
+        </div>
+    {% endif %}
+{% endif %}
\ No newline at end of file