feat: support displaying h3 subtitles

Author: innocenzi

src/Web/Documentation/ChapterView.php

@@ -35,12 +35,44 @@ public function isCurrent(Chapter $other): bool
 
     public function getSubChapters(): array
     {
-        preg_match_all('/<h2.*>.*<a.*href="(?<uri>.*?)".*<\/span>(?<title>.*)<\/a><\/h2>/', $this->currentChapter->body, $matches);
+        // TODO: clean up
+        preg_match_all('/<h2.*>.*<a.*href="(?<uri>.*?)".*<\/span>(?<title>.*)<\/a><\/h2>/', $this->currentChapter->body, $h2Matches);
+        preg_match_all('/<h3.*>.*<a.*href="(?<h3uri>.*?)".*<\/span>(?<h3title>.*)<\/a><\/h3>/', $this->currentChapter->body, $h3Matches);
 
         $subChapters = [];
 
-        foreach ($matches[0] as $key => $match) {
-            $subChapters[$matches['uri'][$key]] = $matches['title'][$key];
+        foreach ($h2Matches[0] as $key => $match) {
+            $h2Uri = $h2Matches['uri'][$key];
+            $h2Title = $h2Matches['title'][$key];
+            $subChapters[$h2Uri] = [
+                'title' => $h2Title,
+                'children' => [],
+            ];
+        }
+
+        foreach ($h3Matches[0] as $key => $match) {
+            $h3Uri = $h3Matches['h3uri'][$key];
+            $h3Title = $h3Matches['h3title'][$key];
+            $parentH2Uri = null;
+            $h3Position = strpos($this->currentChapter->body, $match);
+
+            foreach ($h2Matches[0] as $h2Key => $h2Match) {
+                $h2Position = strpos($this->currentChapter->body, $h2Match);
+                if ($h2Position < $h3Position) {
+                    $parentH2Uri = $h2Matches['uri'][$h2Key];
+                } else {
+                    break;
+                }
+            }
+
+            if ($parentH2Uri !== null && isset($subChapters[$parentH2Uri])) {
+                $subChapters[$parentH2Uri]['children'][$h3Uri] = $h3Title;
+            } else {
+                $subChapters[$h3Uri] = [
+                    'title' => $h3Title,
+                    'children' => [],
+                ];
+            }
         }
 
         return $subChapters;

src/Web/Documentation/show.view.php

@@ -96,11 +96,18 @@
         <div :if="($subChapters = $this->getSubChapters()) !== []" class="text-sm flex flex-col grow">
           <span class="inline-block font-bold text-[--primary] mb-3">On this page</span>
           <ul class="flex flex-col">
-            <li :foreach="$subChapters as $url => $title">
-              <a :href="$url" :data-on-this-page="$title" class="group relative text-sm flex items-center focus-visible:outline-(--ui-primary) py-1 text-(--ui-text-muted) hover:text-(--ui-text) data-[active]:text-(--ui-primary) transition-colors">
-                {{ \Tempest\Support\Str\strip_tags($title) }}
-              </a>
-            </li>
+						<x-template :foreach="$subChapters as $url => $chapter">
+							<li>
+								<a :href="$url" :data-on-this-page="$chapter['title']" class="group relative text-sm flex items-center focus-visible:outline-(--ui-primary) py-1 text-(--ui-text-muted) hover:text-(--ui-text) data-[active]:text-(--ui-primary) transition-colors">
+									{{ \Tempest\Support\Str\strip_tags($chapter['title']) }}
+								</a>
+							</li>
+							<li :foreach="$chapter['children'] as $url => $title">
+								<a :href="$url" :data-on-this-page="$title" class="pl-4 group relative text-sm flex items-center focus-visible:outline-(--ui-primary) py-1 text-(--ui-text-dimmed) hover:text-(--ui-text) data-[active]:text-(--ui-primary) transition-colors">
+									{{ \Tempest\Support\Str\strip_tags($title) }}</span>
+								</a>
+							</li>
+						</x-template>
           </ul>
 					<div class="my-10 mt-auto flex">
 						<a href="#top" class="border border-(--ui-border) bg-(--ui-bg-elevated) text-(--ui-text-muted) hover:text-(--ui-text) transition rounded-lg p-2">

src/Web/assets/highlight-current-prose-title.ts

@@ -1,7 +1,7 @@
 function findPreviousH2(element: Element | null): HTMLHeadingElement | null {
 	while (element && element.previousElementSibling) {
 		element = element.previousElementSibling
-		if (element.tagName === 'H2') {
+		if (element.tagName === 'H2' || element.tagName === 'H3') {
 			return element as HTMLHeadingElement
 		}
 	}
@@ -17,7 +17,7 @@ function updateActiveChapters(): void {
 	for (const el of elements) {
 		const rect = el.getBoundingClientRect()
 		if (rect.top - topMargin >= 0 && rect.bottom <= window.innerHeight) {
-			if (el.tagName === 'H2' || el.tagName === 'H1') {
+			if (el.tagName === 'H3' || el.tagName === 'H2' || el.tagName === 'H1') {
 				if (el.textContent) {
 					visibleH2s.add(el.textContent.trim())
 				}