Feature: Read the docs

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

@@ -132,8 +132,7 @@ exports.createPages = ({ graphql, actions }) => {
         await createSwaggerPages(createPage)
 
         // API: ocean.js
-        const lastRelease =
-          result.data.oceanJs.repository.releases.edges.filter(
+        const lastRelease = result.data.oceanJs.repository.releases.edges.filter(
           ({ node }) =>
             !node.isPrerelease &&
             !node.isDraft &&
@@ -266,13 +265,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,7 @@ 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.startsWith(item.link)) ? (
                 <SidebarGroup
                   i={i}
                   group={group}

src/templates/Markdown/MarkdownList.jsx

@@ -1,16 +1,13 @@
 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 ContentWrapperTemplate from '../ContentWrapperTemplate'
 
-export default function MarkdownList({ location, pageContext }) {
+export default function MarkdownList({ data, location, pageContext }) {
   const flattenedModules = {}
   const nestedModules = {}
   pageContext.markdownList.map(({ node }) => {
@@ -63,13 +60,12 @@ export default function MarkdownList({ location, pageContext }) {
 
     const keys = Object.keys(nestedModules).sort()
     const children = []
-    if (title) {
+    if (title)
       children.push(
         <li key={title}>
           <b>{title}</b>
         </li>
       )
-    }
 
     keys.forEach((element) => {
       children.push(
@@ -84,19 +80,23 @@ export default function MarkdownList({ location, pageContext }) {
   const nestedSidebarList = sidebarList(null, 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}>
+    <>
+      <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} />
-          </article>
-        </main>
-      </Content>
-    </Layout>
+
+      </ContentWrapperTemplate>
+    </>
   )
 }
 
@@ -104,3 +104,19 @@ MarkdownList.propTypes = {
   pageContext: PropTypes.object.isRequired,
   location: PropTypes.object.isRequired
 }
+
+
+export const MarkdownListQuery = graphql`
+      query {
+        allSectionsYaml {
+        edges {
+        node {
+        title
+          description
+      link
+        }
+      }
+    }
+  }
+      `
+