From e259b73404d6dca7f83a79bf2ae656a203398a2e Mon Sep 17 00:00:00 2001
From: Yan Lin <github@yanlincs.com>
Date: Tue, 3 Feb 2026 10:40:02 +0100
Subject: [PATCH] add TOC

---
 content/dl4traj/end-to-end/index.md |  3 +++
 sass/style.scss                     | 27 +++++++++++++++++++++++++++
 templates/page.html                 | 19 +++++++++++++++++++
 3 files changed, 49 insertions(+)

diff --git a/content/dl4traj/end-to-end/index.md b/content/dl4traj/end-to-end/index.md
index 933d907..6e8c4c8 100644
--- a/content/dl4traj/end-to-end/index.md
+++ b/content/dl4traj/end-to-end/index.md
@@ -2,6 +2,9 @@
 title = "End-to-end Learning of Spatiotemporal Trajectories"
 date = 2026-02-02
 description = ""
+
+[extra]
+toc = true
 +++
 
 End-to-end learning means training a model to perform a task from input to output, supervising only on how the output aligns with the task's ground truth.
diff --git a/sass/style.scss b/sass/style.scss
index 8581edd..3876ac7 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -224,6 +224,33 @@ table {
   }
 }
 
+.toc {
+  background: var(--code-bg);
+  border-radius: 4px;
+  padding: 1rem 1.5rem;
+  margin: 1.5rem 0;
+
+  .toc-title {
+    font-size: 1rem;
+    font-weight: bold;
+    margin: 0 0 0.5rem;
+  }
+
+  ul {
+    margin: 0;
+    padding-left: 1.25rem;
+    list-style: none;
+  }
+
+  > ul {
+    padding-left: 0;
+  }
+
+  li {
+    margin: 0.25rem 0;
+  }
+}
+
 footer {
   margin-top: 3rem;
   padding-top: 1rem;
diff --git a/templates/page.html b/templates/page.html
index d2352da..7dee6ca 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -12,6 +12,25 @@
         <time datetime="{{ page.date }}">{{ page.date | date(format="%B %d, %Y") }}</time>
         {% endif %}
     </header>
+    {% if page.extra.toc | default(value=false) %}
+    <nav class="toc">
+        <p class="toc-title">Table of Contents</p>
+        <ul>
+        {% for h2 in page.toc %}
+            <li>
+                <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
+                {% if h2.children %}
+                <ul>
+                    {% for h3 in h2.children %}
+                    <li><a href="{{ h3.permalink | safe }}">{{ h3.title }}</a></li>
+                    {% endfor %}
+                </ul>
+                {% endif %}
+            </li>
+        {% endfor %}
+        </ul>
+    </nav>
+    {% endif %}
     <div class="content">
         {{ page.content | safe }}
     </div>