From f1ec302756e624b0ab60a303f539a38bbf2c9e69 Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Sun, 4 Jan 2026 12:02:17 -0500
Subject: [PATCH] wip

---
 packages/docs-support/src/on-this-page.gts | 45 ++++++++++++++++++++++
 packages/docs-support/src/page-layout.gts  |  5 ++-
 2 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 packages/docs-support/src/on-this-page.gts

diff --git a/packages/docs-support/src/on-this-page.gts b/packages/docs-support/src/on-this-page.gts
new file mode 100644
index 000000000..43f2c53df
--- /dev/null
+++ b/packages/docs-support/src/on-this-page.gts
@@ -0,0 +1,45 @@
+import Component from '@glimmer/component';
+import { registerDestructor } from '@ember/destroyable';
+
+import type Owner from '@ember/owner';
+
+function findHeadings() {
+  const headings = document.querySelectorAll(
+    'main h1, main h2, main h3, main h4, main h5, main h6'
+  );
+
+  return [...headings].map((heading) => {
+    return {
+      level: heading.tagName.replace(/h/i, ''),
+      text: heading.textContent.trim().replace(/\s+/g, ' '),
+    };
+  });
+}
+
+export class OnThisPage extends Component<{
+  Blocks: [];
+}> {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  constructor(owner: Owner, args: {}) {
+    super(owner, args);
+
+    const observer = new MutationObserver(this.updateHeadings);
+
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    registerDestructor(this, () => {
+      observer.disconnect();
+    });
+  }
+
+  updateHeadings = (mutationList: unknown[]) => {
+    console.log(mutationList, findHeadings());
+  };
+
+  <template>
+    {{#each (findHeadings) as |heading|}}
+      {{heading.text}}
+
+    {{/each}}
+  </template>
+}
diff --git a/packages/docs-support/src/page-layout.gts b/packages/docs-support/src/page-layout.gts
index 163791fea..3a14a44a4 100644
--- a/packages/docs-support/src/page-layout.gts
+++ b/packages/docs-support/src/page-layout.gts
@@ -5,6 +5,7 @@ import { Page } from 'kolay/components';
 import { Article } from './article.gts';
 import { Link } from './links.gts';
 import { ResponsiveMenuLayout } from './menu-layout.gts';
+import { OnThisPage } from './on-this-page.gts';
 import { ThemeToggle } from './theme-toggle.gts';
 
 import type { TOC } from '@ember/component/template-only';
@@ -15,7 +16,6 @@ function removeLoader() {
   document.querySelector('#initial-loader')?.remove();
 }
 
- 
 function resetScroll(..._args: unknown[]) {
   document.querySelector('html')?.scrollTo(0, 0);
 }
@@ -118,6 +118,9 @@ export const PageLayout: TOC<{
           </div>
         {{/if}}
       </section>
+      <aside>
+        <OnThisPage />
+      </aside>
     </:content>
 
   </ResponsiveMenuLayout>