nest headings in outline

Author: kamoshi

content/posts/haskell-ffi/index.md

@@ -1,5 +1,5 @@
 ---
-title: Haskell FFI
+title: Calling Rust from Haskell, and vice versa.
 date: 2025-07-29T18:30:29.523Z
 tags: [haskell, rust, c, ffi]
 desc: >

content/posts/prerendering-svelte.md

@@ -23,7 +23,7 @@ interactivity" approach gives you the speed benefits of a static site with the
 rich user experience of a single-page application.
 
 
-### Getting Svelte to speak HTML
+## Getting Svelte to speak HTML
 
 Before I could think about interactivity, I needed a way to simply turn a Svelte
 component into static HTML during my Rust project's build process. This is the
@@ -37,7 +37,7 @@ the `build.rs` script. For the actual JavaScript bundling, I reached for
 script orchestrate esbuild to handle the Svelte compilation in two distinct
 passes:
 
-#### The server-side build:
+### The server-side build:
 
 The first task was to compile `Button.svelte` into code that could run on the
 server (in a Node.js environment) and spit out raw HTML. A neat trick here was
@@ -72,7 +72,7 @@ const html = data.out;
 // ... then this HTML is saved to Button.html
 ```
 
-#### The client-side build
+### The client-side build
 
 At the same time, a second esbuild process compiled the exact same
 `Button.svelte` component, but this time for the browser. This created a
@@ -118,7 +118,7 @@ But, of course, it was just an unresponsive and static button. We had our
 island, but it was still lifeless, waiting for that spark of hydration.
 
 
-### The hydration riddle
+## The hydration riddle
 
 With the static HTML already rendered, the next crucial step was to infuse it
 with interactivity. I uncommented the commented-out `<script>` tag, and reloaded
@@ -217,7 +217,7 @@ correct. Svelte 5 introduced a top-level `hydrate` function from its main
 export.
 
 
-### The Astro introspection
+## The Astro introspection
 
 When faced with a fundamental challenge, the wisest approach is often to study
 how other frameworks have already solved it. My investigation turned to
@@ -295,7 +295,7 @@ Svelte's internal state (like `first_child_getter`), allowing it to attach to
 the existing DOM without errors.
 
 
-### Deno detour
+## Deno detour
 
 Armed with this critical new understanding, the project embarked on a slight
 detour: migrating the build script from Node.js to **Deno**. Deno, a modern and
@@ -377,7 +377,7 @@ issue, and it seemed too brittle anyway, so I decided to try a different
 approach.
 
 
-### More robust architecture
+## More robust architecture
 
 Armed with the hard-won lessons from Astro and the battle scars from esbuild
 module resolution quirks, the final, elegant, and robust solution began to take
@@ -386,7 +386,7 @@ while adhering to the core architectural needs of Svelte's hydration model.
 
 Here's the detailed anatomy of the final implementation:
 
-#### Simplicity on the surface
+### Simplicity on the surface
 
 I've integrated this solution into my static site generator `hauchiwa`. The
 complexity of the underlying build process is encapsulated behind a clean,
@@ -457,7 +457,7 @@ where
 }
 ```
 
-#### Rust orchestrates Deno
+### Rust orchestrates Deno
 
 The core of the Svelte integration lies in three distinct Deno calls,
 meticulously orchestrated by Rust's `Command` API. This pattern allows us to
@@ -678,7 +678,7 @@ fn compile_svelte_init(file: &Utf8Path, hash_class: Hash32) -> anyhow::Result<St
   `JSON.parse`s this attribute.
 
 
-#### Bringing it all together
+### Bringing it all together
 
 The `html` closure within the `Svelte<P>` struct is where the final pieces of
 the puzzle align. It creates the final piece of HTML, which contains prerendered
@@ -734,7 +734,7 @@ When the browser receives this HTML:
   interactive, without re-rendering the entire DOM.
 
 
-### Some future considerations
+## Some future considerations
 
 The journey to a fully hydrated Svelte component in a Rust application is
 complete. However, the path of web development is ever-evolving. Here are some
@@ -755,7 +755,7 @@ advanced considerations and future directions for this architecture:
   from Rust.
 
 
-### Conclusion
+## Conclusion
 
 My quest to integrate Svelte with a Rust backend, aiming for truly interactive
 "islands" on a fast, server-rendered site, led me through some significant

src/main.rs

@@ -36,7 +36,6 @@ enum Mode {
 }
 
 pub struct Bibliography(pub Option<Vec<String>>);
-pub struct Outline(pub Vec<(String, String)>);
 
 #[derive(Debug, Clone)]
 struct Global {

src/markdown.rs

@@ -17,7 +17,7 @@ use pulldown_cmark::{
 };
 use regex::Regex;
 
-use crate::{Bibliography, Context, Outline, ts, typst};
+use crate::{Bibliography, Context, ts, typst};
 
 const OPTS_MARKDOWN: OptsMarkdown = OptsMarkdown::empty()
     .union(OptsMarkdown::ENABLE_MATH)
@@ -125,14 +125,81 @@ pub fn parse(
 
     Ok(Article {
         text,
-        outline: Outline(outline),
+        outline: outline.into(),
         scripts,
         bibliography: Bibliography(bibliography),
     })
 }
 
 // StreamHeading
 
+pub struct Heading(String, String, Vec<Heading>);
+pub struct Outline(Vec<Heading>);
+
+impl hypertext::Renderable for Outline {
+    fn render_to(&self, output: &mut String) {
+        use hypertext::prelude::*;
+
+        fn render_heading_list(headings: &[Heading]) -> impl Renderable {
+            maud!(
+                ul {
+                    @for Heading(title, id, children) in headings {
+                        li {
+                            a href=(format!("#{id}")) { (title) }
+
+                            @if !children.is_empty() {
+                                (render_heading_list(children))
+                            }
+                        }
+                    }
+                }
+            )
+        }
+
+        maud!(
+            aside .outline {
+                section {
+                    h2 {
+                        a href="#top" { "Outline" }
+                    }
+                    nav #table-of-contents {
+                        (render_heading_list(&self.0))
+                    }
+                }
+            }
+        )
+        .render_to(output);
+    }
+}
+
+impl From<Vec<(String, String, usize)>> for Outline {
+    fn from(flat_vec: Vec<(String, String, usize)>) -> Self {
+        let mut res = Vec::new();
+
+        for (title, url, level) in flat_vec {
+            let mut ptr = &mut res;
+            let new = Heading(title, url, vec![]);
+
+            for _ in 2..level {
+                if ptr.is_empty() {
+                    break;
+                }
+
+                match ptr.last_mut() {
+                    Some(Heading(_, _, children)) => {
+                        ptr = children;
+                    }
+                    None => unreachable!(),
+                }
+            }
+
+            ptr.push(new);
+        }
+
+        Outline(res)
+    }
+}
+
 struct StreamHeading<'a, I>
 where
     I: Iterator<Item = Event<'a>>,
@@ -142,22 +209,20 @@ where
     buffer: String,
     handle: Option<Tag<'a>>,
     events: VecDeque<Event<'a>>,
-    finish: bool,
-    out: &'a mut Vec<(String, String)>,
+    out: &'a mut Vec<(String, String, usize)>,
 }
 
 impl<'a, I> StreamHeading<'a, I>
 where
     I: Iterator<Item = Event<'a>>,
 {
-    pub fn new(iter: I, out: &'a mut Vec<(String, String)>) -> Self {
+    pub fn new(iter: I, out: &'a mut Vec<(String, String, usize)>) -> Self {
         Self {
             iter,
             counts: HashMap::new(),
             buffer: String::new(),
             handle: None,
             events: VecDeque::new(),
-            finish: false,
             out,
         }
     }
@@ -170,9 +235,8 @@ where
     type Item = Event<'a>;
 
     fn next(&mut self) -> Option<Self::Item> {
-        match self.finish && !self.events.is_empty() {
-            true => return self.events.pop_front(),
-            false => self.finish = false,
+        if self.handle.is_none() && !self.events.is_empty() {
+            return self.events.pop_front();
         }
 
         for event in self.iter.by_ref() {
@@ -181,37 +245,41 @@ where
                     debug_assert!(self.handle.is_none());
                     self.handle = Some(tag);
                 }
-                Event::Text(text) if self.handle.is_some() => {
-                    self.buffer.push_str(&text);
-                    self.events.push_back(Event::Text(text));
-                }
                 event @ Event::End(TagEnd::Heading(..)) => {
                     debug_assert!(self.handle.is_some());
                     self.events.push_back(event);
 
-                    let txt = std::mem::take(&mut self.buffer);
-                    let mut url = txt.to_lowercase().replace(' ', "-");
+                    let text = std::mem::take(&mut self.buffer);
+                    let mut slug = text.to_lowercase().replace(' ', "-");
 
-                    match self.counts.get_mut(&url) {
+                    match self.counts.get_mut(&slug) {
                         Some(count) => {
                             *count += 1;
-                            url = format!("{url}-{count}");
+                            slug = format!("{slug}-{count}");
                         }
                         None => {
-                            self.counts.insert(url.clone(), 0);
+                            self.counts.insert(slug.clone(), 0);
                         }
                     }
 
                     let mut handle = self.handle.take().unwrap();
-                    match handle {
-                        Tag::Heading { ref mut id, .. } => *id = Some(url.clone().into()),
+                    let level = match &mut handle {
+                        Tag::Heading { id, level, .. } => {
+                            *id = Some(slug.clone().into());
+                            *level as usize
+                        }
                         _ => unreachable!(),
-                    }
+                    };
 
-                    self.out.push((txt, url.clone()));
-                    self.finish = true;
+                    self.out.push((text, slug.clone(), level));
                     return Some(Event::Start(handle));
                 }
+                event if self.handle.is_some() => {
+                    if let Event::Text(text) = &event {
+                        self.buffer.push_str(text);
+                    }
+                    self.events.push_back(event);
+                }
                 _ => return Some(event),
             }
         }

src/plugin/about.rs

@@ -6,7 +6,7 @@ use sequoia_openpgp::parse::Parse;
 
 use crate::markdown::Article;
 use crate::model::{Post, Pubkey};
-use crate::{CONTENT, Context, Global, Outline};
+use crate::{CONTENT, Context, Global};
 
 use super::make_page;
 use super::posts::render_metadata;
@@ -58,7 +58,7 @@ pub fn render<'ctx>(
     let main = maud!(
         main {
             // Outline (left)
-            (render_outline(&article.outline))
+            (&article.outline)
             // Article (center)
             article .article {
                 section .paper {
@@ -101,26 +101,3 @@ pub fn render<'ctx>(
         Default::default(),
     )
 }
-
-fn render_outline(outline: &Outline) -> impl Renderable {
-    maud!(
-        aside .outline {
-            section {
-                h2 {
-                    a href="#top" { "Outline" }
-                }
-                nav #table-of-contents {
-                    ul {
-                        @for (title, id) in &outline.0 {
-                            li {
-                                a href=(format!("#{id}")) {
-                                    (title)
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    )
-}