✨ Switch blog pages to include TOC

berkus · berkus · commit f2ede368f093 · 2025-11-05T18:28:05.000+02:00
diff --git a/content/blog/2013-10-25-bootstrapping-node-problem.md b/content/blog/2013-10-25-bootstrapping-node-problem.md
@@ -1,5 +1,6 @@
 +++
 title = "Bootstrapping node problem"
+template = "page-with-toc.html"
 [taxonomies]
 tags = ["decentralized"]
 +++
diff --git a/content/blog/2013-10-30-using-libssu-for-communication.md b/content/blog/2013-10-30-using-libssu-for-communication.md
@@ -1,5 +1,6 @@
 +++
 title = "Using libsss for communication"
+template = "page-with-toc.html"
 [taxonomies]
 tags = ["structured-secure-streams","howto","uvvy"]
 +++
diff --git a/content/blog/2013-12-28-progress-report-audio-services.md b/content/blog/2013-12-28-progress-report-audio-services.md
@@ -1,5 +1,6 @@
 +++
 title = "Progress report: Audio services, congestion control"
+template = "page-with-toc.html"
 [taxonomies]
 tags = ["report","structured-secure-streams","network","uvvy"]
 +++
diff --git a/content/blog/2018-03-09-reboot-to-rust.md b/content/blog/2018-03-09-reboot-to-rust.md
@@ -1,5 +1,6 @@
 +++
 title = "Reboot to Rust"
+template = "page-with-toc.html"
 [taxonomies]
 tags = ["rust","osdev","cargo"]
 +++
diff --git a/content/blog/2019-11-17-rust-on-longan-nano.md b/content/blog/2019-11-17-rust-on-longan-nano.md
@@ -1,5 +1,6 @@
 +++
 title = "Rust on Sipeed Longan Nano board"
+template = "page-with-toc.html"
 [taxonomies]
 tags = ["rust","embedded"]
 +++
diff --git a/content/blog/2021-11-11-osdev-tooling.md b/content/blog/2021-11-11-osdev-tooling.md
@@ -1,5 +1,6 @@
 +++
 title = "OSdev tooling"
+template = "page-with-toc.html"
 [taxonomies]
 tags = ["rust","osdev","tools"]
 +++
diff --git a/content/blog/2021-12-28-osdev-tooling-2.md b/content/blog/2021-12-28-osdev-tooling-2.md
@@ -1,5 +1,6 @@
 +++
 title = "OSdev tooling continued"
+template = "page-with-toc.html"
 [taxonomies]
 tags = ["rust","osdev","tools"]
 +++
diff --git a/content/blog/2022-05-03-osdev-tooling-3.md b/content/blog/2022-05-03-osdev-tooling-3.md
@@ -1,5 +1,6 @@
 +++
 title = "OSdev tooling finished"
+template = "page-with-toc.html"
 [taxonomies]
 tags = ["rust","osdev","tools"]
 +++
diff --git a/sass/classic-blue.scss b/sass/classic-blue.scss
@@ -17,6 +17,9 @@ $header_menu_item_border_shadow_color: #8bbef3;
 
 $section_bg_color: #fafafa;
 
+$toc_bg_color: #c6eafa;
+$toc_border_color: #77b9fb;
+
 /* $title_fg_color: #222;
 $title2_fg_color: #393939;
 $title3_fg_color: #494949; */
diff --git a/sass/modernist.scss b/sass/modernist.scss
@@ -35,23 +35,28 @@ html {
             50% 100%,
             color-stop(0%, $bg_color_start),
             color-stop(100%, $bg_color_end)
-        ) fixed;
+        )
+        fixed;
     background: $bg_color_start -webkit-linear-gradient(
             $bg_color_start,
             $bg_color_end
-        ) fixed;
+        )
+        fixed;
     background: $bg_color_start -moz-linear-gradient(
             $bg_color_start,
             $bg_color_end
-        ) fixed;
+        )
+        fixed;
     background: $bg_color_start -o-linear-gradient(
             $bg_color_start,
             $bg_color_end
-        ) fixed;
+        )
+        fixed;
     background: $bg_color_start -ms-linear-gradient(
             $bg_color_start,
             $bg_color_end
-        ) fixed;
+        )
+        fixed;
     background: $bg_color_start linear-gradient($bg_color_start, $bg_color_end)
         fixed;
 }
@@ -496,14 +501,16 @@ blockquote {
         color: $blockquote_fg_color;
         padding: 0;
         margin: 0;
-        font-family: Helvetica, sans-serif; // TODO: fix font style, try B612 for quotes?
+        font-family:
+            Helvetica, sans-serif; // TODO: fix font style, try B612 for quotes?
         text-align: right;
     }
 }
 
 .post-quote {
     p {
-        font-family: Helvetica, sans-serif; // TODO: fix font style, try B612 for quotes?
+        font-family:
+            Helvetica, sans-serif; // TODO: fix font style, try B612 for quotes?
         text-align: right;
     }
 
@@ -554,6 +561,26 @@ article.post-preview {
     margin-bottom: 4em;
 }
 
+/* TOC for a page */
+
+.post-toc {
+    float: right;
+    font-size: x-small;
+    border: 1px dotted $toc_border_color;
+    background-color: $toc_bg_color;
+    padding: 1rem;
+    margin: 0.5rem;
+
+    ul {
+        padding: 0;
+        margin: 0;
+
+        li {
+            list-style-type: none;
+        }
+    }
+}
+
 /* Posts feed pagination */
 
 .paginator {
diff --git a/templates/index.html b/templates/index.html
@@ -5,15 +5,15 @@
 {% if not paginator %}
 
     {% for page in section.pages %}
-        {{ post::show(post=page, link=true, read_more=true) }}
+        {{ post::show(post=page, link=true, read_more=true, toc_depth=0) }}
     {% endfor %}
 
 {% else %}
 
     {% include "partial/paginator_navigation.html" %}
 
     {% for page in paginator.pages %}
-        {{ post::show(post=page, link=true, read_more=true) }}
+        {{ post::show(post=page, link=true, read_more=true, toc_depth=0) }}
     {% endfor %}
 
     {% include "partial/paginator_navigation.html" %}
diff --git a/templates/macros/post.html b/templates/macros/post.html
@@ -1,4 +1,4 @@
-{% macro show(post, link, read_more) %}
+{% macro show(post, link, read_more, toc_depth) %}
 
 {% if post.taxonomies %}
 {% if not post.taxonomies.category %}
@@ -31,6 +31,30 @@ <h1 class="post-title">{{ post.title }}</h1>
             <span class="post-date">{{ post_meta::show(post=post) }}</span>
         </column>
     </post-header>
+    {% if toc_depth > 0 %}
+    <div class="post-toc">
+        {% if page.toc %}
+            <ul>
+            {% for h1 in page.toc %}
+                <li>
+                    <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
+                    {% if toc_depth > 1 %}
+                    {% if h1.children %}
+                        <ul>
+                            {% for h2 in h1.children %}
+                                <li>
+                                    <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    {% endif %}
+                    {% endif %}
+                </li>
+            {% endfor %}
+            </ul>
+        {% endif %}
+    </div>
+    {% endif %}
     <div class="post-body">
         {% if read_more %}
             {% if post.summary %}
diff --git a/templates/page-with-toc.html b/templates/page-with-toc.html
@@ -0,0 +1,14 @@
+{% extends "base.html" %}
+{% import "macros/post.html" as post %}
+
+{% block title %}
+    {% if page.title %}
+        {{ page.title }} &middot; {{ config.title }}
+    {% else %}
+        {{ config.title }}
+    {% endif %}
+{% endblock title %}
+
+{% block content %}
+{{ post::show(post=page, link=false, read_more=false, toc_depth=2) }}
+{% endblock content %}
diff --git a/templates/page.html b/templates/page.html
@@ -10,5 +10,5 @@
 {% endblock title %}
 
 {% block content %}
-{{ post::show(post=page, link=false, read_more=false) }}
+{{ post::show(post=page, link=false, read_more=false, toc_depth=0) }}
 {% endblock content %}
