chore(ui): add toc

Author: avivkeller

npm-shrinkwrap.json

@@ -43,7 +43,7 @@
     "@clack/prompts": "^0.11.0",
     "@heroicons/react": "^2.2.0",
     "@node-core/rehype-shiki": "1.3.0",
-    "@node-core/ui-components": "1.5.3",
+    "@node-core/ui-components": "1.5.6",
     "@orama/orama": "^3.1.18",
     "@orama/ui": "^1.5.4",
     "@rollup/plugin-virtual": "^3.0.2",

package.json

@@ -258,8 +258,8 @@ export const processEntry = (entry, remark) => {
 /**
  * Builds the overall document layout tree
  * @param {Array<ApiDocMetadataEntry>} entries - API documentation metadata entries
- * @param {Record<string, any>} sideBarProps - Props for the sidebar component
- * @param {Record<string, any>} metaBarProps - Props for the meta bar component
+ * @param {ReturnType<import('./buildJSXProps.mjs').buildSideBarProps>} sideBarProps - Props for the sidebar component
+ * @param {ReturnType<buildMetaBarProps>} metaBarProps - Props for the meta bar component
  * @param {import('unified').Processor} remark - The remark processor
  */
 export const createDocumentLayout = (
@@ -274,10 +274,17 @@ export const createDocumentLayout = (
       children: [
         createJSXElement(JSX_IMPORTS.SideBar.name, sideBarProps),
         createElement('div', [
-          createElement(
-            'main',
-            entries.map(entry => processEntry(entry, remark))
-          ),
+          createElement('div', [
+            createJSXElement(JSX_IMPORTS.TableOfContents.name, {
+              headings: metaBarProps.headings,
+              summaryTitle: 'On this page',
+            }),
+            createElement('br'),
+            createElement(
+              'main',
+              entries.map(entry => processEntry(entry, remark))
+            ),
+          ]),
           createJSXElement(JSX_IMPORTS.MetaBar.name, metaBarProps),
         ]),
       ],

src/generators/jsx-ast/utils/buildContent.mjs

@@ -11,7 +11,6 @@ export const ROOT = dirname(fileURLToPath(import.meta.url));
  */
 
 /**
- * @type {Record<string, JSXImportConfig>}
  * An object containing mappings for various JSX components to their import paths.
  */
 export const JSX_IMPORTS = {
@@ -50,6 +49,10 @@ export const JSX_IMPORTS = {
     isDefaultExport: false,
     source: '@node-core/ui-components/MDX/Tooltip',
   },
+  TableOfContents: {
+    name: 'TableOfContents',
+    source: '@node-core/ui-components/Common/TableOfContents',
+  },
   ChangeHistory: {
     name: 'ChangeHistory',
     source: '@node-core/ui-components/Common/ChangeHistory',