docs: split and expand backend docs (#3350)

website/src/components/table-of-contents.js

@@ -33,6 +33,7 @@ const TableOfContents = () => {
   const [headings, setHeadings] = useState([]);
 
   useEffect(() => {
+    // TODO: we should be generating headings during the build
     const contentHeadings = document.querySelectorAll('[data-docs-content] h2');
     const headings = [];
     contentHeadings.forEach(h => {
@@ -46,13 +47,15 @@ const TableOfContents = () => {
   }, []);
 
   return (
-    <TocList>
-      {headings.map(h => (
-        <li key={h.id}>
-          <TocLink href={`#${h.id}`}>{h.text}</TocLink>
-        </li>
-      ))}
-    </TocList>
+    headings.length > 0 && (
+      <TocList>
+        {headings.map(h => (
+          <li key={h.id}>
+            <TocLink href={`#${h.id}`}>{h.text}</TocLink>
+          </li>
+        ))}
+      </TocList>
+    )
   );
 };