make it more generic

Author: mydea

docs/platforms/javascript/common/options.mdx

@@ -9,7 +9,7 @@ sidebar_order: 2
 
 ## Available Options
 
-<SdkOptionsOverview />
+<TableOfContents ignoreIds={['available-options']} />
 
 ## Core Options
 

src/components/docPage/index.tsx

@@ -19,7 +19,7 @@ import Mermaid from '../mermaid';
 import {PaginationNav} from '../paginationNav';
 import {PlatformSdkDetail} from '../platformSdkDetail';
 import {Sidebar} from '../sidebar';
-import {TableOfContents} from '../tableOfContents';
+import {SidebarTableOfContents} from '../sidebarTableOfContents';
 import {ReaderDepthTracker} from '../track-reader-depth';
 
 type Props = {
@@ -110,7 +110,7 @@ export function DocPage({
           {hasToc && (
             <aside className="sticky h-[calc(100vh-var(--header-height))] top-[var(--header-height)] overflow-y-auto hidden xl:block w-[250px]">
               <div className="sidebar">
-                <TableOfContents />
+                <SidebarTableOfContents />
                 <PlatformSdkDetail />
               </div>
             </aside>

src/components/tableOfContents/index.tsx renamed to src/components/sidebarTableOfContents/index.tsx

@@ -78,7 +78,7 @@ function buildTocTree(toc: TocItem[]): TocItem[] {
 // https://github.com/vercel/next.js/discussions/57631
 //
 // For now, calculate the table of contents on the client.
-export function TableOfContents() {
+export function SidebarTableOfContents() {
   const [tocItems, setTocItems] = useState<TocItem[]>([]);
 
   // gather the toc items on mount

src/components/tableOfContents/style.module.scss renamed to src/components/sidebarTableOfContents/style.module.scss

@@ -15,7 +15,11 @@ type TreeNode = {
   name: string;
 };
 
-export function SdkOptionsOverview() {
+interface Props {
+  ignoreIds?: string[];
+}
+
+export function TableOfContents({ignoreIds = []}: Props) {
   const [treeItems, setTreeItems] = useState<TreeItem[]>([]);
 
   // gather the sdk option items on mount
@@ -25,13 +29,13 @@ export function SdkOptionsOverview() {
     }
     const main = document.getElementById('main');
     if (!main) {
-      throw new Error('#main element not found');
+      return;
     }
     const nodes = Array.from(main.querySelectorAll('h2, h3'))
       .map(el => {
         const name = el.textContent?.trim() ?? '';
         const id = el.id;
-        if (!id || !name) {
+        if (!id || !name || ignoreIds.includes(id)) {
           return null;
         }
         return {
@@ -56,7 +60,7 @@ export function SdkOptionsOverview() {
           children: [],
         };
         _tocItems.push(currentItem);
-      } else if (node.element.hasAttribute('data-sdk-option')) {
+      } else {
         currentItem.children.push({
           id: node.id,
           name: node.name,
@@ -67,7 +71,7 @@ export function SdkOptionsOverview() {
 
     // Remove groups without children
     setTreeItems(_tocItems.filter(item => item.children.length > 0));
-  }, []);
+  }, [ignoreIds]);
 
   return (
     <ul>

src/components/sdkOptionOverview.tsx renamed to src/components/tableOfContents.tsx

@@ -32,9 +32,9 @@ import {PlatformSection} from './components/platformSection';
 import {RelayMetrics} from './components/relayMetrics';
 import {SandboxLink} from './components/sandboxLink';
 import {SdkOption} from './components/sdkOption';
-import {SdkOptionsOverview} from './components/sdkOptionOverview';
 import {SignInNote} from './components/signInNote';
 import {SmartLink} from './components/smartLink';
+import {TableOfContents} from './components/tableOfContents';
 import {VimeoEmbed} from './components/video';
 
 export function mdxComponents(
@@ -52,7 +52,7 @@ export function mdxComponents(
     CodeTabs,
     ConfigKey,
     SdkOption,
-    SdkOptionsOverview,
+    TableOfContents,
     CreateGitHubAppForm,
     ConfigValue,
     DefinitionList,