website: remove hacky component injection code

website/src/theme/TOC/index.js

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import clsx from 'clsx';
+import useTOCHighlight from '@theme/hooks/useTOCHighlight';
+import styles from './styles.module.css';
+import SidebarAd from '../../components/SidebarAd';
+
+const LINK_CLASS_NAME = 'table-of-contents__link';
+const ACTIVE_LINK_CLASS_NAME = 'table-of-contents__link--active';
+const TOP_OFFSET = 100;
+/* eslint-disable jsx-a11y/control-has-associated-label */
+
+export function TOCHeadings({toc, isChild}) {
+  if (!toc.length) {
+    return null;
+  }
+
+  return (
+    <ul
+      className={
+        isChild ? '' : 'table-of-contents table-of-contents__left-border'
+      }>
+      {toc.map((heading) => (
+        <li key={heading.id}>
+          <a
+            href={`#${heading.id}`}
+            className={LINK_CLASS_NAME} // Developer provided the HTML, so assume it's safe.
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{
+              __html: heading.value,
+            }}
+          />
+          <TOCHeadings isChild toc={heading.children} />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function TOC({toc}) {
+  useTOCHighlight(LINK_CLASS_NAME, ACTIVE_LINK_CLASS_NAME, TOP_OFFSET);
+  return (
+    <div className={clsx(styles.tableOfContents, 'thin-scrollbar')}>
+      <div className="margin--md">
+        <SidebarAd />
+      </div>
+      <TOCHeadings toc={toc} />
+    </div>
+  );
+}
+
+export default TOC;

website/src/theme/TOC/styles.module.css

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.tableOfContents {
+  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+  overflow-y: auto;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 1rem);
+}
+
+@media only screen and (max-width: 996px) {
+  .tableOfContents {
+    display: none;
+  }
+
+  .docItemContainer {
+    padding: 0 0.3rem;
+  }
+}