Added dynamic table of content

Author: AndreasArvidsson

packages/cursorless-org-docs/sidebar.js

@@ -1,9 +1,7 @@
 // @ts-check
 
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
-const sidebars = {
+export default {
   user: [{ type: "autogenerated", dirName: "user" }],
   contributing: [{ type: "autogenerated", dirName: "contributing" }],
 };
-
-export default sidebars;

packages/cursorless-org-docs/src/docs/user/languages/components/DynamicTOC.tsx

@@ -0,0 +1,53 @@
+import { useEffect } from "react";
+
+export default function DynamicTOC() {
+  useEffect(() => {
+    const row = document.querySelector("main .row");
+
+    if (row == null) {
+      console.error("No row found in the main element");
+      return;
+    }
+
+    row.appendChild(getTOC());
+  }, []);
+
+  return null;
+}
+
+function getTOC() {
+  const headingElements = Array.from(document.querySelectorAll("h3")).map(
+    (el) => ({
+      id: el.id,
+      text: el.textContent?.replace("#", "") ?? "",
+    }),
+  );
+
+  const col = document.createElement("div");
+  col.className = "col col--3";
+
+  const toc = document.createElement("div");
+  toc.className = "tableOfContents_tkZC thin-scrollbar";
+  toc.style.position = "fixed";
+  toc.style.right = "1rem";
+  toc.style.width = "14rem";
+  col.appendChild(toc);
+
+  const ul = document.createElement("ul");
+  ul.className = "table-of-contents table-of-contents__left-border";
+  toc.appendChild(ul);
+
+  headingElements.forEach((h) => {
+    const li = document.createElement("li");
+
+    const a = document.createElement("a");
+    a.href = `#${h.id}`;
+    a.className = "table-of-contents__link";
+    a.textContent = h.text;
+
+    li.appendChild(a);
+    ul.appendChild(li);
+  });
+
+  return col;
+}

packages/cursorless-org-docs/src/docs/user/languages/components/Language.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import DynamicTOC from "./DynamicTOC";
 import { ScopeSupport } from "./ScopeSupport";
 
 interface Props {
@@ -8,6 +9,7 @@ interface Props {
 export function Language({ languageId }: Props) {
   return (
     <>
+      <DynamicTOC />
       <ScopeSupport languageId={languageId} />
     </>
   );