Merge pull request #647 from oceanprotocol/feature/read-the-docs

Feature/read the docs

gatsby-node.js

@@ -286,7 +286,9 @@ const createSwaggerPages = async (createPage) => {
 }
 
 const createReadTheDocsPage = async (createPage, name, list) => {
-  const markdownListTemplate = path.resolve('./src/templates/MarkdownList.jsx')
+  const markdownListTemplate = path.resolve(
+    './src/templates/Markdown/MarkdownList.jsx'
+  )
   createPage({
     path: `/read-the-docs/${name}`,
     component: markdownListTemplate,

src/templates/Markdown/Markdown.module.scss

@@ -0,0 +1,32 @@
+@import 'variables';
+
+.link {
+  color: $brand-grey;
+  display: inline-block;
+  padding: $spacer / 6 $spacer / 2;
+  border-left: 0.1rem solid transparent;
+  margin-left: -0.05rem;
+  cursor: 'pointer';
+
+  &:hover,
+  &:focus {
+    transform: none;
+    color: $brand-purple;
+
+    :global(.setup) & {
+      color: $brand-blue;
+    }
+  }
+}
+
+.active {
+  composes: link;
+  color: $brand-purple;
+  border-left-color: $brand-purple;
+  cursor: 'pointer';
+
+  :global(.setup) & {
+    color: $brand-blue;
+    border-left-color: $brand-blue;
+  }
+}

src/templates/Markdown/MarkdownList.jsx

@@ -0,0 +1,105 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import Layout from '../../components/Layout'
+import HeaderSection from '../../components/HeaderSection'
+import Content from '../../components/Content'
+import styles from '../../templates/Doc.module.scss'
+import MarkdownTemplate from '../MarkdownTemplate'
+import sidebarStyles from '../../components/Sidebar.module.scss'
+import moduleStyles from './Markdown.module.scss'
+
+import { generatedNestedObject } from './utils'
+
+export default function MarkdownList({ pageContext }) {
+  const flattenedModules = {}
+  const nestedModules = {}
+
+  pageContext.markdownList.map(({ node }) => {
+    const modulePath = node.frontmatter.module.split('.')
+    const key =
+      modulePath.slice(0, modulePath.length - 1).join('.') ||
+      modulePath.join('.')
+    if (!flattenedModules[key]) {
+      flattenedModules[key] = []
+    }
+    flattenedModules[key].push(node)
+    generatedNestedObject(nestedModules, modulePath, node)
+  })
+
+  const moduleKeys = Object.keys(flattenedModules).sort()
+
+  const [selectedModule, setSelectedModule] = useState(
+    flattenedModules[moduleKeys[0]][0]
+  )
+
+  const changeNodeid = (id) => {
+    const found = pageContext.markdownList.find(({ node }) => {
+      return node.id === id
+    })
+
+    setSelectedModule(found.node)
+  }
+
+  const generateModuleListElement = (id, label) => {
+    const className =
+      selectedModule.id === id ? moduleStyles.active : moduleStyles.link
+
+    return (
+      <li key={id} id={id}>
+        <a className={className} onClick={() => changeNodeid(id)}>
+          {label}
+        </a>
+      </li>
+    )
+  }
+
+  const sidebarList = (title, nestedModules) => {
+    const { id } = nestedModules
+
+    if (id)
+      return generateModuleListElement(nestedModules.id, nestedModules.label)
+
+    const keys = Object.keys(nestedModules).sort()
+    const children = []
+    children.push(
+      <li key={title}>
+        <b>{title}</b>
+      </li>
+    )
+    keys.forEach((element) => {
+      children.push(
+        <ul className={sidebarStyles.list}>
+          {sidebarList(element, nestedModules[element])}
+        </ul>
+      )
+    })
+    return children
+  }
+
+  const nestedSidebarList = sidebarList(null, nestedModules)
+
+  return (
+    <Layout>
+      <HeaderSection title={pageContext.name} />
+      <Content>
+        <div style={{ color: '#ff8c00' }}>
+          <span>&#9888;</span>
+          This documentation is a work in progess. Please feel free to report
+          any issues.
+        </div>
+        <main className={styles.wrapper}>
+          <aside className={styles.sidebar}>
+            <div className={sidebarStyles.sidebar}>{nestedSidebarList}</div>
+          </aside>
+          <article className={styles.main}>
+            <MarkdownTemplate data={selectedModule} />
+          </article>
+        </main>
+      </Content>
+    </Layout>
+  )
+}
+
+MarkdownList.propTypes = {
+  pageContext: PropTypes.object.isRequired
+}

src/templates/Markdown/utils.js

@@ -0,0 +1,16 @@
+export const generatedNestedObject = (object, keyPath, node) => {
+  const lastKeyIndex = keyPath.length - 1
+  for (var i = 0; i < lastKeyIndex; ++i) {
+    var key = keyPath[i]
+    if (!(key in object)) {
+      object[key] = {}
+    }
+    object = object[key]
+  }
+  if (!object[keyPath[lastKeyIndex]]) {
+    object[keyPath[lastKeyIndex]] = {
+      id: node.id,
+      label: node.frontmatter.title
+    }
+  }
+}

src/templates/MarkdownList.jsx

@@ -1,113 +0,0 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import Layout from '../components/Layout'
-import HeaderSection from '../components/HeaderSection'
-import Content from '../components/Content'
-import styles from '../templates/Doc.module.scss'
-import MarkdownTemplate from './MarkdownTemplate'
-import sidebarStyles from '../components/Sidebar.module.scss'
-
-export default function MarkdownList({ pageContext }) {
-  const modules = {}
-
-  pageContext.markdownList.map(({ node }) => {
-    const modulePath = node.frontmatter.module.split('.')
-    const key =
-      modulePath.slice(0, modulePath.length - 1).join('.') ||
-      modulePath.join('.')
-
-    if (!modules[key]) {
-      modules[key] = []
-    }
-    modules[key].push(node)
-  })
-
-  const moduleKeys = Object.keys(modules).sort()
-
-  const [selectedSubSection, setSelectedSubSection] = useState(0)
-  const [elem, setElem] = useState(modules[moduleKeys[selectedSubSection]][0])
-
-  const changePage = (subSectionIndex, node) => {
-    setElem(node)
-    setSelectedSubSection(subSectionIndex)
-  }
-
-  const changeSubsection = (index) => {
-    setSelectedSubSection(index)
-    setElem(modules[moduleKeys[index]][0])
-  }
-
-  return (
-    <Layout>
-      <HeaderSection title={pageContext.name} />
-      <Content>
-        <div style={{ color: '#ff8c00' }}>
-          <span>&#9888;</span>
-          This documentation is a work in progess. Please feel free to report
-          any issues.
-        </div>
-        <main className={styles.wrapper}>
-          <aside className={styles.sidebar}>
-            <nav className={sidebarStyles.sidebar}>
-              {moduleKeys.map((ele, subSectionIndex) => {
-                return selectedSubSection === subSectionIndex ? (
-                  <div key={subSectionIndex}>
-                    <h4 className={sidebarStyles.groupTitle}>
-                      <a
-                        style={{ cursor: 'pointer', color: 'black' }}
-                        onClick={() => changeSubsection(subSectionIndex)}
-                      >
-                        {ele}
-                      </a>
-                      <div className={sidebarStyles.list}>
-                        <ul>
-                          {modules[ele].map((node) => (
-                            <li
-                              className={
-                                elem.id === node.id
-                                  ? sidebarStyles.active
-                                  : sidebarStyles.link
-                              }
-                              key={node.id}
-                              onClick={() => changePage(subSectionIndex, node)}
-                            >
-                              <a
-                                style={{
-                                  cursor: 'pointer'
-                                }}
-                              >
-                                {node.frontmatter.title}
-                              </a>
-                            </li>
-                          ))}
-                        </ul>
-                      </div>
-                    </h4>
-                  </div>
-                ) : (
-                  <div>
-                    <h4 className={sidebarStyles.groupTitle}>
-                      <a
-                        onClick={() => changeSubsection(subSectionIndex)}
-                        style={{ cursor: 'pointer', color: '#8b98a9' }}
-                      >
-                        {ele}
-                      </a>
-                    </h4>
-                  </div>
-                )
-              })}
-            </nav>
-          </aside>
-          <article className={styles.main}>
-            <MarkdownTemplate data={elem} />
-          </article>
-        </main>
-      </Content>
-    </Layout>
-  )
-}
-
-MarkdownList.propTypes = {
-  pageContext: PropTypes.object.isRequired
-}