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