From 6055a2e3424c521963c611f25198e06da85a3db1 Mon Sep 17 00:00:00 2001
From: Philipp Oppermann <dev@phil-opp.com>
Date: Tue, 19 Mar 2019 12:55:18 +0100
Subject: [PATCH] Add an inline table of contents for small screens

This ToC is only shown when the screen is too small for the sticky sidebar ToC.

We use a `<!-- toc -->` comment and the `replace` function to allow inserting the ToC at well defined points of the page. We don't use the shortcode feature of Zola because of https://github.com/getzola/zola/issues/584.
---
 blog/static/css/main.css                |  4 ++++
 blog/templates/macros.html              | 16 ++++++++++++++++
 blog/templates/second-edition/page.html |  2 +-
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/blog/static/css/main.css b/blog/static/css/main.css
index 74f058bd..7e04ef97 100644
--- a/blog/static/css/main.css
+++ b/blog/static/css/main.css
@@ -172,6 +172,10 @@ aside#all-posts-link {
 }
 
 @media (min-width: 80rem) {
+  #toc-inline {
+    display: none;
+  }
+
   #toc-aside {
     display: block;
     width: 12rem;
diff --git a/blog/templates/macros.html b/blog/templates/macros.html
index 0e6622da..85909670 100644
--- a/blog/templates/macros.html
+++ b/blog/templates/macros.html
@@ -17,3 +17,19 @@
         async>
     </script>
 {% endmacro utterances %}
+
+{% macro toc(page) %}
+    <details id = "toc-inline">
+        <summary><b>Table of Contents</b></summary>
+        <ul>
+            {% for h2 in page.toc %}<li>
+                <a href="#{{h2.id | safe}}">{{ h2.title | safe }}</a>
+                {% if h2.children %}<ul>
+                    {% for h3 in h2.children %}<li>
+                        <a href="#{{h3.id | safe}}">{{ h3.title | safe }}</a>
+                    </li>{% endfor %}
+                </ul>{% endif %}
+            </li>{% endfor %}
+        </ul>
+    </details>
+{% endmacro toc %}
diff --git a/blog/templates/second-edition/page.html b/blog/templates/second-edition/page.html
index 99f02bda..822f31ca 100644
--- a/blog/templates/second-edition/page.html
+++ b/blog/templates/second-edition/page.html
@@ -34,7 +34,7 @@
             </li>{% endfor %}
         </ol>
     </aside>
-    {{ page.content | safe }}
+    {{ page.content | safe | replace(from="<!-- toc -->", to=macros::toc(page=page))}}
 
     <div class="post-footer-support">
         <h2>Support Me</h2>