website: move into monorepo

apps/website/src/theme/TOC/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import clsx from 'clsx';
+import TOCItems from '@theme/TOCItems';
+import styles from './styles.module.css'; // Using a custom className
+import SidebarAd from '../../components/SidebarAd';
+// This prevents TOC highlighting to highlight TOCInline/TOCCollapsible by mistake
+
+const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
+const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
+
+function TOC({ className, ...props }) {
+  return (
+    <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
+      <div className="margin--md">
+        <SidebarAd position="table_of_contents" />
+      </div>
+      <h3
+        className="padding-left--md padding-top--md margin-bottom--none"
+        style={{
+          textTransform: 'uppercase',
+          fontSize: '0.75em',
+          color: 'var(--ifm-color-emphasis-700)',
+          letterSpacing: '0.5px',
+        }}>
+        Table of Contents
+      </h3>
+      <TOCItems
+        {...props}
+        linkClassName={LINK_CLASS_NAME}
+        linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
+      />
+    </div>
+  );
+}
+
+export default TOC;

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

@@ -0,0 +1,29 @@
+.tableOfContents {
+  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+  overflow-y: auto;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 1rem);
+}
+
+@media (max-width: 996px) {
+  .tableOfContents {
+    display: none;
+  }
+
+  .docItemContainer {
+    padding: 0 0.3rem;
+  }
+}
+
+.socialLinksContainer {
+  background-color: var(--ifm-color-emphasis-100);
+  border-radius: var(--ifm-global-radius);
+}
+
+.socialLinks {
+  align-items: center;
+  display: flex;
+  font-size: 0.9rem;
+  justify-content: center;
+  gap: 1rem;
+}