Multi Part Series Navigation

COPY-TO-ROOT-SASS/abridge.scss

@@ -183,6 +183,7 @@
   //$top: true,//back to top button using CSS
   //$search: true,//search feature
   //$toc: true,//Table of Contents, page index / recent posts block
+  //$series: true,//Allows for posts to display in a series
   //$modifiers: true,//tiny modifier classes for sizing and spacing
   //$misc: false,
   //$grid: false,//Infinity Grid, column based layouts.

config.toml

@@ -67,6 +67,8 @@ Tags = "Mots-clés"
 Contact = "Contact"
 Privacy = "Confidentialité"
 Sitemap = "Plan du site"
+## Describtion of the number of parts in a series of posts
+Series_parts = "Série de $NUMBER_OF_PARTS parties"
 ### Page not found, maybe moved or not in this language
 404_not_found = "Page introuvable, peut-être déplacée ou non dans cette langue"
 ### Try searching or

content/overview-math.fr.md

@@ -12,6 +12,7 @@ toc = true
 math = true
 math_auto_render = true
 keywords = "Math, Matematics, Notation, KaTeX, Mathematical Notation"
+section = "Features"
 +++
 
 Vous pouvez utiliser [KaTeX](https://katex.org) pour rendre des notations mathématiques.

content/overview-math.md

@@ -12,6 +12,7 @@ toc = true
 math = true
 math_auto_render = true
 keywords = "Math, Matematics, Notation, KaTeX, Mathematical Notation"
+section = "Features"
 +++
 
 You can use [KaTeX](https://katex.org) to render mathematical notations.

sass/abridge.scss

@@ -217,6 +217,7 @@ $imgswap: true !default;//Image Swap on hover/click
 $misc: false !default;
 $grid: false !default;//Infinity Grid, column based layouts.
 $syntax: true !default;//syntax highlighting for code blocks
+$series: true !default;//series of posts
 
 /******************************************************************************
  *   Root element
@@ -1554,3 +1555,65 @@ $syntax: true !default;//syntax highlighting for code blocks
   //    color: var(--h1);
   //}
 }
+
+@if $series {
+  .series-mobile {
+    max-width: 30rem;
+    margin: var(--s2) auto;
+    border-radius: var(--br);
+    background-color: var(--c2);
+  }
+
+  .series {
+    background-color: var(--c2);
+    max-height: 100vh;
+    padding: 0 var(--s2) var(--s2);
+    border-radius: var(--br);
+    border-top: 5px solid var(--a1);
+    overflow: auto;
+  }
+
+  .series h4 a {
+    color: var(--f1);
+    font-weight: 700;
+    &:hover {
+      color: var(--a3);
+    }
+  }
+
+  .series ol {
+    margin: 0;
+  }
+
+  .series ol a {
+    color: var(--f1);
+    &:hover {
+      color: var(--a2);
+      text-decoration: underline;
+    }
+  }
+
+  .series li {
+    font-size: .875rem;
+  }
+}
+
+@if $series and $toc {
+  .series-toc {
+    margin-top: var(--s2);
+    max-height: 100vh;
+  }
+
+  @if map-get($breakpoints, "md") {
+    // mobile first is min-width for desktop instead of max-width for mobile
+    @media (min-width: map-get($breakpoints, "md")) {
+      .series-mobile {
+        display: none;
+      }
+    }
+  }
+}
+
+.toc h1 {
+  margin: 0;
+}

templates/page.html

@@ -45,6 +45,35 @@
     {{- macros::meta_post(page=page, config=config) }}
     {%- endif %}{%- endif %}
 
+
+    {%- if page.extra.section %}
+
+      {%- set tag = get_taxonomy_term(kind="tags", term=page.extra.section, lang=lang) %}
+      {%- set page_num = tag.page_count | as_str %}
+
+        {%- if lang != config.default_language %}
+          {%- set parts_string = trans(key="Series_parts", lang=lang) | replace(from="$NUMBER_OF_PARTS", to=page_num) %}
+        {% else %}
+          {%- set parts_string = page_num ~ " part Series" %}
+        {% endif -%}
+
+
+
+    <div class="series-mobile series">
+      <a class="si" href="{{ tag.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ tag.name }} ({{ parts_string }})</a>
+      <ol>
+      {%- for inner in tag.pages | sort(attribute="year") %}
+      {%- if inner.content == page.content %}
+      <li><a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}"><b>{{ inner.title }}</b></a></li>
+      {% else %}
+      <li><a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a></li>
+      {%- endif %}
+      {%- endfor %}
+      </ol>
+    </div>
+    {%- endif %}
+
+
 {{ page.content | safe }}
 
     {%- if config.extra.meta_post.position %}
@@ -67,7 +96,23 @@
     {%- set toc = page.toc %}
     {%- endif %}
     {%- if toc %}
+
     <div class="toc">
+      {%- if page.extra.section %}
+      <div class="series-toc series">
+        <a class="si" href="{{ tag.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ parts_string }}</a>
+        <ol>
+        {%- for inner in tag.pages | sort(attribute="year") %}
+        {%- if inner.content == page.content %}
+        <li><a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}"><b>{{ inner.title }}</b></a></li>
+        {% else %}
+        <li><a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a></li>
+        {%- endif %}
+        {%- endfor %}
+        </ol>
+      </div>
+      {%- endif %}
+
       <div class="toc-sticky">
         <a class="si" href="#">{%- if lang != config.default_language %}{{ trans(key="Index" | safe, lang=lang) }}{% else %}Index{% endif %}</a>
         {%- for h in toc %}