cb341 · Sep 23, 2026 · Sep 23, 2026 · Sep 23, 2026 · Sep 23, 2026 · Sep 23, 2026
diff --git a/_config.yml b/_config.yml
@@ -26,6 +26,11 @@ defaults:
       path: "_posts"
     values:
       layout: post
+      toc: true
+  - scope:
+      path: "_projects"
+    values:
+      toc: true
 
 date_format: "%d.%m.%Y"
 

diff --git a/_gallery/ao-test.md b/_gallery/ao-test.md
@@ -7,4 +7,4 @@ image: "/webp-gallery/ao_test.webp"
 alt: "Ambient Occlusion Test"
 ---
 
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/blahaj-on-the-road.md b/_gallery/blahaj-on-the-road.md
@@ -7,4 +7,4 @@ image: "/webp-gallery/blahaj_on_the_road.webp"
 alt: "Blahaj Shark on a Road Trip"
 ---
 
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/blahaj.md b/_gallery/blahaj.md
@@ -7,4 +7,4 @@ image: "/webp-gallery/blahaj_fixed.webp"
 alt: "Blahaj the Shark"
 ---
 
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/cat-review.md b/_gallery/cat-review.md
@@ -7,4 +7,4 @@ image: "/webp-gallery/cat_on_laptop_fixed.webp"
 alt: "Feline Code Review"
 ---
 
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/cube-march.md b/_gallery/cube-march.md
@@ -7,4 +7,4 @@ image: "/webp-gallery/cube_marcher.webp"
 alt: "Cube Marching Algorithm"
 ---
 
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/mars-probe-at-uzh.md b/_gallery/mars-probe-at-uzh.md
@@ -8,4 +8,4 @@ alt: "Mars Probe at University of Zurich"
 ---
 
 A Mars probe exhibit or model at the University of Zurich. Where aerospace engineering meets computer science education.
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/packing-day.md b/_gallery/packing-day.md
@@ -7,4 +7,4 @@ image: "/webp-gallery/packing_day.webp"
 alt: "Packing Day Photo"
 ---
 
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/plushies.md b/_gallery/plushies.md
@@ -7,4 +7,4 @@ image: "/webp-gallery/plushees_fixed.webp"
 alt: "Collection of Plush Toys"
 ---
 
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/raymarching-artefacts.md b/_gallery/raymarching-artefacts.md
@@ -7,4 +7,4 @@ image: "/webp-gallery/raymarching_artefacts.webp"
 alt: "Raymarching Artefacts"
 ---
 
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/terrain-edges.md b/_gallery/terrain-edges.md
@@ -7,4 +7,4 @@ image: "/webp-gallery/voxel_terrain_edge_detection.webp"
 alt: "Voxel Terrain Edge Detection"
 ---
 
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/tired-penguin-study.md b/_gallery/tired-penguin-study.md
@@ -8,4 +8,4 @@ alt: "Tired Penguin with Calculator"
 ---
 
 A tired penguin plushie sitting with a calculator during exam study season. A relatable companion for every student grinding through problem sets.
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/transparency-issues.md b/_gallery/transparency-issues.md
@@ -8,4 +8,4 @@ alt: "Transparency Rendering Issues"
 ---
 
 Artifacts from transparency rendering - a notoriously tricky problem in real-time graphics. Shows the visual glitches that appear when transparent surfaces aren't sorted correctly.
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/voxel-distance-map.md b/_gallery/voxel-distance-map.md
@@ -7,4 +7,4 @@ image: "/webp-gallery/voxel_raymarching_distance_map.webp"
 alt: "Voxel Raymarching Distance Map"
 ---
 
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_layouts/base.html b/_layouts/base.html
@@ -205,6 +205,30 @@
       }
       pre code { background: transparent; padding: 0; }
       main :is(h2,h3,h4,h5,h6)[id] > a { text-decoration: none; }
+      {% if page.toc %}
+      .article-toc { display: none; }
+      @media (min-width: 1120px) {
+        .article-toc {
+          display: block;
+          position: fixed;
+          top: 36px;
+          left: calc(50% + 33.5ch + 24px);
+          width: 220px;
+          max-height: calc(100vh - 72px);
+          overflow: auto;
+          font-size: 15px;
+          line-height: 1.45;
+        }
+        .article-toc-title,
+        .article-toc ol { font-size: 12px; }
+        .article-toc-title { font-weight: bold; }
+        .article-toc ol { margin: 0; padding: 0; list-style: none; }
+        .article-toc li { margin: .5em 0; }
+        .article-toc li:not([data-level="2"]) { padding-left: 1em; }
+        .toc-teaser { display: block; margin-left: 1em; }
+      }
+      @media print { .article-toc { display: none !important; } }
+      {% endif %}
       @media (prefers-color-scheme: dark) {
         html { color-scheme: dark; background: #000; }
         body { background: #000; color: #fff; }
@@ -291,6 +315,7 @@
       </header>
 
       <main id="main-content" role="main">
+        {% if page.toc %}{{ content | table_of_contents }}{% endif %}
         {{ content }}
         <nav role="navigation" aria-label="Post navigation">
           <hr>

diff --git a/_plugins/table_of_contents.rb b/_plugins/table_of_contents.rb
@@ -0,0 +1,35 @@
+require "cgi"
+
+module TableOfContents
+  HEADING = /<h([2-6])\b([^>]*)>(.*?)<\/h\1>/im
+  ID = /\s+id\s*=\s*(["'])(.*?)\1/m
+  TEASER = /\s+data-toc-teaser\s*=\s*(["'])(.*?)\1/m
+
+  def table_of_contents(html)
+    items = html.to_s.scan(HEADING).filter_map do |level, attributes, body|
+      id = attributes.match(ID)&.captures&.last
+      next unless id
+
+      label = CGI.unescapeHTML(body.gsub(/<[^>]*>/m, "")).strip
+      next if label.empty?
+
+      teaser = attributes.match(TEASER)&.captures&.last
+      link = %(<a href="##{CGI.escapeHTML(CGI.unescapeHTML(id))}">#{CGI.escapeHTML(label)}</a>)
+      text = teaser && !teaser.empty? ? %(#{link}<span class="toc-teaser">#{CGI.escapeHTML(CGI.unescapeHTML(teaser))}...</span>) : link
+
+      %(<li data-level="#{level}">#{text}</li>)
+    end
+    return "" if items.empty?
+
+    <<~HTML
+      <nav class="article-toc" aria-label="Table of contents">
+        <div class="article-toc-title">On this page</div>
+        <ol>
+          #{items.join("\n    ")}
+        </ol>
+      </nav>
+    HTML
+  end
+end
+
+Liquid::Template.register_filter(TableOfContents)
diff --git a/_threads/2026-04-10.md b/_threads/2026-04-10.md
@@ -6,7 +6,7 @@ seems like my physical health has finally caught up to my mental health. having
 
 dug a bit into philosophers this week, mainly Socrates, Nietzsche, Singer. first time actually engaging with them. these are rough impressions, not (yet) positions.
 
-### Thoughts
+**Thoughts**
 
 * starting to think knowledge might be one of the more honest ways to spend time
 * been looking into nihilism for a while now, still seems like one of the more honest ways to look at things  

diff --git a/pages/how-to-apporach.md b/pages/how-to-apporach.md
@@ -2,6 +2,7 @@
 title: "How To Approach Dani"
 description: "Communication defaults for less guessing."
 permalink: /how-to-approach/
+toc: true
 ---
 
 # How To Approach Dani

diff --git a/pages/threads.md b/pages/threads.md
@@ -3,6 +3,7 @@ title: "Threads"
 description: "Conversations, thoughts, half-ideas, things I am starting to explore."
 permalink: /threads/
 math: true
+toc: true
 ---
 
 # Threads
@@ -12,31 +13,15 @@ Conversations, thoughts, half-ideas, things I am starting to explore.
 {% assign feedback_form = "https://docs.google.com/forms/d/e/1FAIpQLSeRD0Q9wYYZelAkRXEu2cCFN89-cvoAfOtyTY9vaz9-FUvYXQ/viewform?usp=pp_url&entry.2083454847=" %}
 {% assign entries = site.threads | sort: "date" | reverse %}
 
-<style>
-.threads-toc { font-size: .9em; }
-.threads-toc ul { list-style: none; padding-left: 1em; margin: .3em 0 .8em; }
-</style>
-
-{% assign months = entries | group_by_exp: "entry", "entry.date | date: '%B %Y'" %}
-<nav class="threads-toc" aria-label="Entry index">
-{%- for month in months %}
-  <b>{{ month.name }}</b>
-  <ul>
-  {%- for entry in month.items %}
-    {%- assign slug = entry.title | replace: ".", "" | slugify %}
-    {%- assign teaser = entry.content | strip_html | normalize_whitespace | truncatewords: 9, "" %}
-    {%- assign last_char = teaser | slice: -1, 1 %}
-    {%- if last_char == "." or last_char == "," or last_char == ";" or last_char == ":" %}
-      {%- assign trimmed_length = teaser | size | minus: 1 %}
-      {%- assign teaser = teaser | slice: 0, trimmed_length %}
-    {%- endif %}
-    <li><a href="#{{ slug }}" title="{{ entry.title }}">{{ entry.date | date: "%d" }}</a> {{ teaser | escape }}...</li>
-  {%- endfor %}
-  </ul>
-{%- endfor %}
-</nav>
 {% for entry in entries %}
+{% assign teaser = entry.content | strip_html | normalize_whitespace | truncatewords: 9, "" %}
+{% assign last_char = teaser | slice: -1, 1 %}
+{% if last_char == "." or last_char == "," or last_char == ";" or last_char == ":" %}
+  {% assign trimmed_length = teaser | size | minus: 1 %}
+  {% assign teaser = teaser | slice: 0, trimmed_length %}
+{% endif %}
 ## {{ entry.title }}
+{: data-toc-teaser="{{ teaser | escape }}" }
 
 {::nomarkdown}
 {{ entry.content }}

diff --git a/pages/til.md b/pages/til.md
@@ -1,6 +1,7 @@
 ---
 title: "Today I Learned"
 permalink: /til/
+toc: true
 ---
 
 # Today I Learned (TIL)