website: remove hacky component injection code

website/docusaurus.config.js

@@ -64,7 +64,6 @@ module.exports = {
       },
     ],
   ],
-  clientModules: [require.resolve('./src/components/SidebarAd')],
   scripts: [
     {
       src: "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4984084888641317",

website/src/components/SidebarAd/index.js

@@ -4,10 +4,7 @@ import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 
 import styles from './styles.module.css';
 
-const AD_ELEMENT_ID = 'ad-element-id';
-const CONTAINER_SELECTOR = '[class^="tableOfContents"]';
-
-function SidebarAd() {
+export default function SidebarAd() {
   return (
     <a
       className={styles.container}
@@ -24,45 +21,3 @@ function SidebarAd() {
     </a>
   );
 }
-
-function initAd() {
-  const $adEl = (() => {
-    const $el = document.getElementById(AD_ELEMENT_ID);
-    if ($el) {
-      return $el;
-    }
-
-    const $tocEl = document.querySelector(CONTAINER_SELECTOR);
-    if ($tocEl == null) {
-      return null;
-    }
-
-    const $newEl = document.createElement('div');
-    $newEl.id = AD_ELEMENT_ID;
-    $tocEl.prepend($newEl);
-
-    return $newEl;
-  })();
-
-  if ($adEl == null) {
-    return;
-  }
-
-  ReactDOM.render(<SidebarAd />, $adEl);
-}
-
-if (ExecutionEnvironment.canUseDOM) {
-  window.onload = initAd;
-}
-
-export default (function (context, options) {
-  return {
-    name: 'sidebar-ad',
-    onRouteUpdate() {
-      // Render only after the page renders.
-      setTimeout(() => {
-        initAd();
-      }, 0);
-    },
-  };
-})();

website/src/components/SidebarAd/styles.module.css

@@ -1,11 +1,10 @@
 .container {
-  background-color: var(--ifm-color-primary);
+  background: linear-gradient(138deg, rgb(69, 104, 220), rgb(176, 106, 179));
   background-repeat: no-repeat;
   background-size: contain;
   border-radius: var(--ifm-global-radius);
   color: #fff;
   display: block;
-  margin: 1rem;
   padding: 1rem;
   transition: background-color var(--ifm-transition-fast)
     var(--ifm-transition-timing-default);

website/src/theme/DocPaginator/index.js

@@ -6,52 +6,58 @@
  */
 import React from 'react';
 import Translate, {translate} from '@docusaurus/Translate';
+import SidebarAd from '../../components/SidebarAd';
 
 function DocPaginator(props) {
   const {metadata} = props;
   return (
-    <nav
-      className="pagination-nav docusaurus-mt-lg"
-      aria-label={translate({
-        id: 'theme.docs.paginator.navAriaLabel',
-        message: 'Docs pages navigation',
-        description: 'The ARIA label for the docs pagination',
-      })}>
-      <div className="pagination-nav__item">
-        {metadata.previous && (
-          <a
-            className="pagination-nav__link"
-            href={metadata.previous.permalink}>
-            <div className="pagination-nav__sublabel">
-              <Translate
-                id="theme.docs.paginator.previous"
-                description="The label used to navigate to the previous doc">
-                Previous
-              </Translate>
-            </div>
-            <div className="pagination-nav__label">
-              &laquo; {metadata.previous.title}
-            </div>
-          </a>
-        )}
+    <>
+      <nav
+        className="pagination-nav docusaurus-mt-lg"
+        aria-label={translate({
+          id: 'theme.docs.paginator.navAriaLabel',
+          message: 'Docs pages navigation',
+          description: 'The ARIA label for the docs pagination',
+        })}>
+        <div className="pagination-nav__item">
+          {metadata.previous && (
+            <a
+              className="pagination-nav__link"
+              href={metadata.previous.permalink}>
+              <div className="pagination-nav__sublabel">
+                <Translate
+                  id="theme.docs.paginator.previous"
+                  description="The label used to navigate to the previous doc">
+                  Previous
+                </Translate>
+              </div>
+              <div className="pagination-nav__label">
+                &laquo; {metadata.previous.title}
+              </div>
+            </a>
+          )}
+        </div>
+        <div className="pagination-nav__item pagination-nav__item--next">
+          {metadata.next && (
+            <a className="pagination-nav__link" href={metadata.next.permalink}>
+              <div className="pagination-nav__sublabel">
+                <Translate
+                  id="theme.docs.paginator.next"
+                  description="The label used to navigate to the next doc">
+                  Next
+                </Translate>
+              </div>
+              <div className="pagination-nav__label">
+                {metadata.next.title} &raquo;
+              </div>
+            </a>
+          )}
+        </div>
+      </nav>
+      <div className="margin-top--md">
+        <SidebarAd />
       </div>
-      <div className="pagination-nav__item pagination-nav__item--next">
-        {metadata.next && (
-          <a className="pagination-nav__link" href={metadata.next.permalink}>
-            <div className="pagination-nav__sublabel">
-              <Translate
-                id="theme.docs.paginator.next"
-                description="The label used to navigate to the next doc">
-                Next
-              </Translate>
-            </div>
-            <div className="pagination-nav__label">
-              {metadata.next.title} &raquo;
-            </div>
-          </a>
-        )}
-      </div>
-    </nav>
+    </>
   );
 }
 

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