feat: implement content reveal mechanism via DOM traversal

Add `addRevealedClasses` to apply `revealed` or `concealed` CSS classes
to article elements based on the current heading hierarchy and
revealed paths. Update `Article` to expose its DOM element via an
`onDom` callback.

src/components/Sidebar.tsx

@@ -3,6 +3,7 @@ import { generateToc, type FileNode, type TocNode } from "../data-loader";
 import { useLocation } from "@solidjs/router";
 import { FileTreeNode, HeadingNode } from "./FileTree";
 import { isPathRevealed } from "./stores/journalStream";
+import { createEffect } from "solid-js";
 
 export interface SidebarProps {
   isOpen: boolean;
@@ -43,8 +44,8 @@ const SidebarContent: Component<SidebarContentProps> = (props) => {
     }
     for (const node of currentFileHeadings()) {
       traverse(node, (anode) => {
-        if (isPathRevealed(pathname, anode.title)) {
-          traverse(anode, (each) => set.add(each.title));
+        if (isPathRevealed(pathname, anode.id ?? anode.title)) {
+          traverse(anode, (each) => set.add(anode.id ?? anode.title));
         }
       });
     }
@@ -56,10 +57,13 @@ const SidebarContent: Component<SidebarContentProps> = (props) => {
     return true;
   };
   const isHeadingHidden = (node: TocNode): boolean => {
-    if (revealedHeadings().has(node.title)) return false;
+    if (revealedHeadings().has(node.id ?? node.title)) return false;
     if (node.children?.some((child) => !isHeadingHidden(child))) return false;
     return true;
   };
+  createEffect(() => {
+    console.log(currentFileHeadings(), revealedHeadings());
+  });
 
   return (
     <div class="flex flex-col h-full">