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

Improvment: Add null check

data/sidebars/references.yml

@@ -16,7 +16,7 @@
 - group: Aquarius Py Module
   items:
     - title: API Reference
-      link: /read-the-docs/aquarius/
+      link: /references/read-the-docs/aquarius/
 
 - group: provider REST API
   items:
@@ -26,7 +26,7 @@
 - group: Provider Py Module
   items:
     - title: API Reference
-      link: /read-the-docs/provider/
+      link: /references/read-the-docs/provider/
 
 - group: react
   items:
@@ -36,7 +36,7 @@
 - group: ocean.py
   items:
     - title: API Reference
-      link: /read-the-docs/ocean-py/
+      link: /references/read-the-docs/ocean-py/
 
 - group: Smart Contracts
   items:
@@ -51,4 +51,4 @@
 - group: Ocean Subgraph
   items:
     - title: Readme References
-      link: /read-the-docs/ocean-subgraph/
+      link: /references/read-the-docs/ocean-subgraph/

gatsby-node.js

@@ -266,13 +266,13 @@ const createReadTheDocsPage = async (createPage, name, list) => {
     './src/templates/Markdown/MarkdownList.jsx'
   )
   createPage({
-    path: `/read-the-docs/${name}`,
-    matchPath: `/read-the-docs/${name}/*`,
+    path: `/references/read-the-docs/${name}`,
+    matchPath: `/references/read-the-docs/${name}/*`,
     component: markdownListTemplate,
     context: {
       markdownList: list,
       name: name,
-      baseUrl: `/read-the-docs/${name}`
+      baseUrl: `/references/read-the-docs/${name}`
     }
   })
 }

src/components/Sidebar.jsx

@@ -122,7 +122,10 @@ export default class Sidebar extends Component {
         {sidebarfile.map((group, i) => (
           <div key={i}>
             {collapsed ? (
-              group.items.some((item) => item.link === location.pathname) ? (
+              group.items.some(
+                (item) =>
+                  location.pathname.substring(0, item.link.length) === item.link
+              ) ? (
                 <SidebarGroup
                   i={i}
                   group={group}

src/templates/ContentWrapperTemplate.jsx

@@ -15,7 +15,7 @@ export default class ContentWrapperTemplate extends Component {
     data: PropTypes.object.isRequired,
     location: PropTypes.object.isRequired,
     slug: PropTypes.string.isRequired,
-    toc: PropTypes.object.isRequired,
+    toc: PropTypes.any.isRequired,
     info: PropTypes.object.isRequired,
     children: PropTypes.any
   }

src/templates/Markdown/MarkdownList.jsx

@@ -1,16 +1,12 @@
 import React 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'
-import { navigate } from 'gatsby'
+import { navigate, graphql } from 'gatsby'
+import ContentWrapperTemplate from '../ContentWrapperTemplate'
 
-export default function MarkdownList({ location, pageContext }) {
+export default function MarkdownList({ data, location, pageContext }) {
   const flattenedModules = {}
   const nestedModules = {}
   pageContext.markdownList.map(({ node }) => {
@@ -44,7 +40,7 @@ export default function MarkdownList({ location, pageContext }) {
 
   const generateModuleListElement = (id, label) => {
     const className =
-      selectedModule.id === id ? moduleStyles.active : moduleStyles.link
+      selectedModule.id === id ? sidebarStyles.active : sidebarStyles.link
 
     return (
       <li key={id} id={id} style={{ cursor: 'pointer' }}>
@@ -63,41 +59,63 @@ export default function MarkdownList({ location, pageContext }) {
 
     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>
+        <ul key={element}>{sidebarList(element, nestedModules[element])}</ul>
       )
     })
     return children
   }
 
-  const nestedSidebarList = sidebarList(null, nestedModules)
+  const nestedSidebarList = sidebarList('', nestedModules)
 
   return (
-    <Layout>
-      <HeaderSection title={pageContext.name} />
-      <Content>
-        <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>
+    <>
+      <ContentWrapperTemplate
+        data={data}
+        path={path}
+        location={location}
+        slug={pageContext.baseUrl}
+        info={{
+          title: selectedModule.frontmatter.title,
+          description: null,
+          version: selectedModule.frontmatter.version
+        }}
+        toc={nestedSidebarList}
+      >
+        <MarkdownTemplate data={selectedModule} />
+      </ContentWrapperTemplate>
+    </>
   )
 }
 
 MarkdownList.propTypes = {
-  pageContext: PropTypes.object.isRequired,
-  location: PropTypes.object.isRequired
+  pageContext: PropTypes.shape({
+    name: PropTypes.string,
+    baseUrl: PropTypes.string,
+    markdownList: PropTypes.arrayOf(PropTypes.object)
+  }),
+  location: PropTypes.object.isRequired,
+  data: PropTypes.object
 }
+
+export const MarkdownListQuery = graphql`
+  query {
+    allSectionsYaml {
+      edges {
+        node {
+          title
+          description
+          link
+        }
+      }
+    }
+  }
+`