New component: <OnThisPage>

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>
+}

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>