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 getzola/zola#584.

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;

blog/templates/macros.html

@@ -17,3 +17,19 @@ <h2 class="post-title"><a href="/{{ page.path | safe }}">{{ page.title }}</a></h
         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 %}

blog/templates/second-edition/page.html

@@ -34,7 +34,7 @@ <h2>Table of Contents</h2>
             </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>