Merge branch 'feature/new-docs' of github.com:0xProject/0x-monorepo into feature/new-docs

packages/website/ts/components/docs/sidebar/table_of_contents.tsx

@@ -68,7 +68,7 @@ const ContentLink = styled(Link)<{ level: number }>`
     span {
         color: #939393;
         font-weight: 300;
-        transition: all 250ms ease-in-out;
+        transition: all 150ms ease-in-out;
     }
 
     &:hover span,
@@ -92,7 +92,6 @@ const ContentLink = styled(Link)<{ level: number }>`
         level !== 1 &&
         `
         line-height: 2;
-        padding-left: 0.7rem;
         border-left: 1px solid #efefef;
         transition: all 150ms ease-in-out;
 
@@ -105,12 +104,15 @@ const ContentLink = styled(Link)<{ level: number }>`
     ${({ level }) =>
         level === 2 &&
         `
-        font-size: 0.61rem;
+        font-size: 0.72rem;
+        padding-left: 0.7rem;
+
     `}
 
     ${({ level }) =>
         level === 3 &&
         `
         font-size: 0.61rem;
+        padding-left: 1.4rem;
     `}
 `;

packages/website/webpack/mdx_table_of_contents.js

@@ -1,5 +1,3 @@
-const { toJSX } = require('@mdx-js/mdx/mdx-hast-to-jsx');
-
 const MIN_HEADING_LEVEL = 1;
 const MAX_HEADING_LEVEL = 3;
 
@@ -63,15 +61,28 @@ function isSlugifiedSection(node) {
     return node.tagName === 'section' && node.properties && node.properties.id && node.properties.depth;
 }
 
+// Because of autolinking headings earlier (at remark stage), the headings (nodes)
+// contain an anchor tag next to the title, we only want to render the title.
+// Unless there is no title, then we render whatever nodes we get after the anchor
+
 function toFragment(nodes) {
-    // Because of autolinking headings earlier (at remark stage), the headings (nodes)
-    // contain an anchor tag next to the title, we only want to render the text.
-    // Unless there is no text, then we render whatever nodes we get in a Fragment
-    const textNode = nodes.find(node => node.type === 'text');
-    if (textNode) {
-        return JSON.stringify(textNode.value);
+    const nodesCopy = [...nodes]; // We copy not to mutate the original nodes array
+    nodesCopy.shift(); // Remove the heading anchor created by remark_autolink_headings
+    if (nodesCopy.length === 1 && nodesCopy[0].type === 'text') {
+        return JSON.stringify(nodesCopy[0].value);
+    } else {
+        const textNodes = [];
+        for (node of nodesCopy) {
+            if (node.type === 'text') {
+                textNodes.push(node.value);
+            } else {
+                // For nodes other than text (e.g. anchors) find child node that containes the text
+                childTextNode = node.children.find(child => child.type === 'text');
+                textNodes.push(childTextNode.value);
+            }
+        }
+        return `<React.Fragment>${textNodes.join('')}</React.Fragment>`;
     }
-    return '<React.Fragment>' + nodes.map(toJSX).join('') + '</React.Fragment>';
 }
 
 function tableOfContentsListSerializer(nodes, indent = 0) {