Display TOC in project page

sass/style.scss

@@ -16,6 +16,8 @@ $col-offwhite: darken($col-white, 25);
 	box-sizing: border-box;
 }
 
+html { scroll-behavior: smooth }
+
 body {
 	display: flex;
 	flex-direction: column;
@@ -152,6 +154,12 @@ body>main {
 			padding: 1.5rem;
 		}
 	}
+
+	section.toc {
+		ul {
+			padding-left: 1rem;
+		}
+	}
 }
 
 body>footer {

templates/macros.html

@@ -23,3 +23,18 @@
 		</a>
 	{% endfor %}
 {% endmacro %}
+
+{% macro toc() %}
+	<ul>
+		{% for h1 in page.toc %}
+		<li><a href="{{ h1.permalink | safe }}">{{ h1.title }}</a></li>
+			{% if h1.children %}
+				<ul>
+					{% for h2 in h1.children %}
+					<li><a href="{{ h2.permalink | safe }}">{{ h2.title }}</a></li>
+					{% endfor %}
+				</ul>
+			{% endif %}
+		{% endfor %}
+	</ul>
+{% endmacro %}

templates/project.html

@@ -5,6 +5,16 @@
 		<h1>{{ page.title }}</h1>
 		{{ page.description }}
 	</section>
+	<section class="flex toc">
+		{% if page.toc %}
+			<div>
+				{{ macros::toc() }}
+			</div>
+		{% endif %}
+		<div>
+			meta
+		</div>
+	</section>
 	<section>
 		{{ page.content | safe }}
 	</section>