From c8f7739326c5ddcf35fc40eed1717fc344c51e32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leon=20Schwarz=C3=A4ugl?=
 <leon.schwarzaeugl@imba.oeaw.ac.at>
Date: Wed, 31 Dec 2025 12:42:10 +0100
Subject: [PATCH] fix: build full ToC for web version

---
 .github/workflows/build-and-deploy.yml | 16 ++---
 SwarselSystems.org                     | 91 ++++++++++++++++++--------
 2 files changed, 67 insertions(+), 40 deletions(-)

diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml
index e088887..e6777f4 100644
--- a/.github/workflows/build-and-deploy.yml
+++ b/.github/workflows/build-and-deploy.yml
@@ -3,8 +3,8 @@ name: Build and Deploy
 on:
   push:
     branches:
-      - feat/router  # or master, depending on your default branch
-  workflow_dispatch:  # allows manual trigger
+      - feat/router
+  workflow_dispatch:
 
 permissions:
   contents: read
@@ -27,22 +27,16 @@ jobs:
           sudo apt-get update
           sudo apt-get install -y emacs-nox elpa-htmlize
 
-      - name: Tangle Org files
-        run: |
-          emacs --batch \
-            --eval "(require 'org)" \
-            --eval "(setq org-confirm-babel-evaluate nil)" \
-            --visit=SwarselSystems.org \
-            --funcall org-babel-tangle
-
-      - name: Export Org to HTML
+      - name: Tangle files & export to HTML
         run: |
           emacs --batch \
             --eval "(require 'org)" \
             --eval "(setq org-confirm-babel-evaluate nil
                      org-html-validation-link nil
+                     org-export-headline-levels 6
                      org-export-with-broken-links 'mark)" \
             --visit=SwarselSystems.org \
+            --funcall org-babel-tangle \
             --funcall org-html-export-to-html
 
       - name: Setup Pages
diff --git a/SwarselSystems.org b/SwarselSystems.org
index b86d9d2..103c9aa 100644
--- a/SwarselSystems.org
+++ b/SwarselSystems.org
@@ -200,7 +200,7 @@ I also add this javascript to add header pinning functionality to the site, usin
         showBtn = document.createElement('button');
         showBtn.id = 'show-pinned-btn';
         showBtn.type = 'button';
-        showBtn.textContent = 'Show Pinned';
+        showBtn.textContent = 'Pinned';
         document.body.appendChild(showBtn);
       }
 
@@ -414,7 +414,7 @@ I also add this javascript to add header pinning functionality to the site, usin
         attachPinBehavior(pinBtn, href, text);
       });
 
-      const headers = content.querySelectorAll('h2, h3, h4, h5');
+      const headers = content.querySelectorAll('h2, h3, h4, h5, h6');
       headers.forEach(header => {
         const id = header.getAttribute('id');
         if (!id) return;
@@ -31433,7 +31433,7 @@ This is the stylesheet used by the [[#h:12880c64-229c-4063-9eea-387a97490676][HT
     width: calc(100vw - 300px);
   }
 
-  h1, h2, h3, h4, h5 {
+  h1, h2, h3, h4, h5, h6 {
     color: #70e1e8;
     font-weight: 500;
     margin-top: 2.2rem;
@@ -31451,6 +31451,18 @@ This is the stylesheet used by the [[#h:12880c64-229c-4063-9eea-387a97490676][HT
     font-size: 1.3rem;
   }
 
+  h4 {
+    font-size: 1.2rem;
+  }
+
+  h5 {
+    font-size: 1.1rem;
+  }
+
+  h6 {
+    font-size: 1.0rem;
+  }
+
   a {
     color: #5ec4ff;
   }
@@ -31629,30 +31641,6 @@ This is the stylesheet used by the [[#h:12880c64-229c-4063-9eea-387a97490676][HT
     display: block;
   }
 
-  @media (max-width: 1600px) {
-    #content {
-      max-width: 100%;
-    }
-  }
-
-  @media (max-width: 1300px) {
-    #pinned-panel {
-      display: none !important;
-    }
-
-    #show-pinned-btn {
-      display: none !important;
-    }
-
-    #content,
-    #content.pinned-hidden {
-      margin-right: 0;
-      width: calc(100vw - 300px);
-      max-width: 100%;
-      padding: 1.8rem 2.2rem;
-    }
-  }
-
   #mobile-toc-toggle,
   #mobile-pinned-toggle {
     position: fixed;
@@ -31682,6 +31670,49 @@ This is the stylesheet used by the [[#h:12880c64-229c-4063-9eea-387a97490676][HT
     color: #5ec4ff;
   }
 
+  @media (max-width: 1600px) {
+    #content {
+      max-width: 100%;
+    }
+  }
+
+  @media (max-width: 1300px) {
+    #mobile-pinned-toggle {
+      display: block;
+    }
+
+    #pinned-panel {
+      display: block !important;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 260px;
+      max-width: 80vw;
+      height: 100vh;
+      overflow-y: auto;
+      transform: translateX(100%);
+      transition: transform 0.25s ease;
+      z-index: 1000;
+    }
+
+    #pinned-panel.mobile-visible {
+      transform: translateX(0);
+    }
+
+    #show-pinned-btn {
+      display: none !important;
+    }
+
+    #content,
+    #content.pinned-hidden {
+      margin-right: 0;
+      width: calc(100vw - 300px);
+      max-width: 100%;
+      padding: 1.8rem 2.2rem;
+    }
+  }
+
+
   @media (max-width: 1000px) {
     #mobile-toc-toggle,
     #mobile-pinned-toggle {
@@ -31754,7 +31785,8 @@ This is the stylesheet used by the [[#h:12880c64-229c-4063-9eea-387a97490676][HT
   h2 .toc-pin-btn,
   h3 .toc-pin-btn,
   h4 .toc-pin-btn,
-  h5 .toc-pin-btn {
+  h5 .toc-pin-btn,
+  h6 .toc-pin-btn {
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.2s, visibility 0.2s;
@@ -31764,7 +31796,8 @@ This is the stylesheet used by the [[#h:12880c64-229c-4063-9eea-387a97490676][HT
   h2:hover .toc-pin-btn,
   h3:hover .toc-pin-btn,
   h4:hover .toc-pin-btn,
-  h5:hover .toc-pin-btn {
+  h5:hover .toc-pin-btn,
+  h6:hover .toc-pin-btn {
     opacity: 1;
     visibility: visible;
   }