feat: add series roadmap and navigation feature

sass/_site.scss

@@ -531,7 +531,7 @@ a.zola-anchor {
     margin-bottom: 10px;
     display: block;
   }
-  a:not(.btn):not(.pagination_pager):not(.zola-anchor) {
+  a:not(.btn):not(.pagination_pager):not(.zola-anchor):not(.series-nav-btn) {
     color: $shamrock-green;
     &:not(.toc) {
       border-bottom: 1px dotted $green;
@@ -1140,3 +1140,130 @@ a.zola-anchor {
     }
   }
 }
+
+// Series styling
+.series-nav-top {
+  display: block;
+  width: 100%;
+  margin: 1rem 0;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px dashed rgba($green, 0.2);
+  clear: both;
+}
+
+.series-nav-info {
+  display: block;
+  font-family: $caps-font;
+  font-size: 0.9rem;
+  color: $green;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  margin-bottom: 0.75rem;
+  opacity: 0.6;
+  text-align: center;
+}
+
+.series-nav-buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.series-nav-left,
+.series-nav-right {
+  flex: 1;
+  display: flex;
+}
+
+.series-nav-left { justify-content: flex-start; }
+.series-nav-right { justify-content: flex-end; }
+
+.series-nav-btn {
+  text-decoration: none;
+  border-bottom: 1px dotted transparent;
+  color: $shamrock-green;
+  font-family: $caps-font;
+  font-size: 1.3rem;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+
+  &:hover {
+    border-bottom-color: $shamrock-green;
+    opacity: 0.8;
+  }
+}
+
+.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;
+
+    &:hover { border-bottom-color: $green; }
+  }
+
+  .series-roadmap-list {
+    .current { color: $green; }
+    a:hover { border-bottom-color: $green; }
+  }
+}
+

templates/page.html

@@ -35,6 +35,9 @@ <h1 class="section-title">{{ page.title | safe }}</h1>
       {% endif %}
       {% endblock music %}
       </div>
+      {% if page.extra.series %}
+        {% include "partials/series_nav.html" %}
+      {% endif %}
       {% if config.extra.toc == true and not page.extra.disable_toc %}{% if page.toc %}{% if page.toc | length >= 2 %}
       <div class="toc-block">
         <ul>
@@ -47,6 +50,9 @@ <h1 class="section-title">{{ page.title | safe }}</h1>
       </div>
       {% endif %}{% endif %}{% endif %}{% endif %}
       {{ page.content | safe }}
+      {% if page.extra.series %}
+        {% include "partials/series_roadmap.html" %}
+      {% endif %}
       <br>
       {% if page.lower or page.higher %}
         <nav class="pagination">

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 %}

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 %}