Toggleable table of contents

templates/header.html

@@ -1,4 +1,5 @@
 <header>
+    <h1 class="site-title">{{ config.title }}</h1>
     <nav>
         {% for item in config.extra.menu %}
         <a href="{{ item.url | safe | replace(from="$BASE_URL", to=config.base_url) }}">

templates/page.html

@@ -3,7 +3,10 @@
 {% block title %}{{ page.title }} - Hazelnut{% endblock title %}
 
 {% block content %}
-<h1>Table of Contents</h1>
+
+{% if page.extra.toc %}
+<h1>Table of Contents <span id="toc-toggle">[-]</span></h1>
+<div id="toc">
 <ul>
 {% for h1 in page.toc %}
     <li>
@@ -20,6 +23,31 @@
     </li>
 {% endfor %}
 </ul>
+</div>
+<script>
+ var shown = false;
+ var toggle = document.getElementById("toc-toggle");
+ var toc = document.getElementById("toc");
+
+ function update() {
+     if (shown) {
+         toc.style.display = "block";
+         toggle.innerHTML = "[-]";
+     } else {
+         toc.style.display = "none";
+         toggle.innerHTML = "[+]";
+     }
+ }
+ 
+ toggle.parentNode.addEventListener("click", function() {
+     shown = !shown;
+     update();
+ });
+
+ update();
+</script>
+{% endif %}
 
 {{ page.content | safe }}
+
 {% endblock content %}