convert website from hugo to gatsby (#1369)

website/src/components/docs-nav.js

@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import Link from 'gatsby-link';
+
+/**
+ * Maually get table of contents since tableOfContents from markdown
+ * nodes have code added.
+ *
+ * https://github.com/gatsbyjs/gatsby/issues/5436
+ */
+class TableOfContents extends Component {
+  state = {
+    headings: []
+  };
+
+  componentDidMount() {
+    const contentHeadings = document.querySelectorAll('.docs-content h2');
+
+    const headings = [];
+    contentHeadings.forEach(h => {
+      headings.push({
+        id: h.id,
+        text: h.innerText
+      });
+    });
+
+    this.setState({
+      headings
+    });
+  }
+
+  render() {
+    const { headings } = this.state;
+    return (
+      <ul className="nav-subsections">
+        {headings.map(h => (
+          <li key={h.id}>
+            <a href={`#${h.id}`} className="subnav-link">
+              {h.text}
+            </a>
+          </li>
+        ))}
+      </ul>
+    );
+  }
+}
+
+const DocsNav = ({ items, location }) => (
+  <nav className="docs-nav" id="docs-nav">
+    {items.map(item => (
+      <div className="docs-nav-section" key={item.title}>
+        <div className="docs-nav-section-title">{item.title}</div>
+        <ul className="docs-nav-section-list">
+          {item.group.edges.map(({ node }) => (
+            <li className="docs-nav-item" key={node.fields.slug}>
+              <Link
+                to={node.fields.slug}
+                className="nav-link"
+                activeClassName="active">
+                {node.frontmatter.title}
+              </Link>
+              {location.pathname === node.fields.slug && <TableOfContents />}
+            </li>
+          ))}
+        </ul>
+      </div>
+    ))}
+  </nav>
+);
+
+export default DocsNav;