Feature: Render the generated docs in list

data/sidebars/references.yml

@@ -26,7 +26,7 @@
 - group: ocean.py
   items:
     - title: API Reference
-      link: /read-the-docs/oceanpy/
+      link: /read-the-docs/ocean-py/
 
 - group: Aquarius read the docs
   items:

gatsby-node.js

@@ -65,9 +65,12 @@ exports.createPages = ({ graphql, actions }) => {
                   node {
                     id
                     html
+                    htmlAst
+                    tableOfContents
                     frontmatter {
                       slug
                       title
+                      section
                     }
                   }
                 }
@@ -157,7 +160,7 @@ exports.createPages = ({ graphql, actions }) => {
         let providerList = markdowns.filter(({node}) => node.frontmatter.slug.startsWith(prefix + '/provider/'))
 
 
-        await createReadTheDocsPage(createPage, 'oceanpy', oceanPyList)
+        await createReadTheDocsPage(createPage, 'ocean-py', oceanPyList)
         await createReadTheDocsPage(createPage, 'aquarius', aquariusList)
         await createReadTheDocsPage(createPage, 'provider', providerList)
 

src/templates/MarkdownList.jsx

@@ -1,12 +1,18 @@
 import { Link } from "gatsby"
-import React from "react"
+import React, {useState} from "react"
 import Layout from "../components/Layout"
 import HeaderSection from '../components/HeaderSection'
 import Content from '../components/Content'
-import styles from './Doc.module.scss'
-import MarkdownTemplate from "./MarkdownTemplate"
+import styles from '../templates/Doc.module.scss'
+import MarkdownTemplate from './MarkdownTemplate'
+import stylesDoc from '../templates/Doc.module.scss'
 
 export default function MarkdownList({pageContext}) {
+  const [elem, setElem] = useState(0);
+  const changePage= (index)=>{
+    console.log("Onclickj")
+    setElem(index)
+  };
   return (
     <Layout>
         <HeaderSection title={pageContext.name} />
@@ -14,11 +20,14 @@ export default function MarkdownList({pageContext}) {
         <main className={styles.wrapper}>
         <aside className={styles.sidebar}>
         <ul>
-         {pageContext.markdownList.map(({node})=><li><Link to={node.frontmatter.slug}>{node.frontmatter.title}</Link></li>)}
+         {pageContext.markdownList.map(({node}, index)=><li onClick={()=>changePage(index)} key={node.id}>
+           {node.frontmatter.title}</li>)}
         </ul>
         </aside>
         {/* <MarkdownTemplate path={pageContext.markdownList[0]}></MarkdownTemplate> */}
-        {/* {pageContext.markdownList[0]} */}
+        <article className={stylesDoc.main}>
+          <MarkdownTemplate data={pageContext.markdownList[elem].node}></MarkdownTemplate>
+        </article>
         </main>
         </Content>
     </Layout>

src/templates/MarkdownTemplate.jsx

@@ -8,41 +8,41 @@ import HeaderSection from '../components/HeaderSection'
 import Content from '../components/Content'
 
 export default function MarkdownTemplate({data}) {
-    const post = data.markdownRemark
+  const post = data
   return (
-    <Layout>
+    <>
         {/* <div dangerouslySetInnerHTML={{__html:post.html}}></div> */}
         {/* <DocHeader title={post.frontmatter.title}/> */}
-        <HeaderSection title={post.frontmatter.title} />
-        {post.tableOfContents && <DocToc tableOfContents={post.tableOfContents} />}
+        {/* <HeaderSection title={post.frontmatter.title} />
+        {post.tableOfContents && <DocToc tableOfContents={post.tableOfContents} />}*/}
         <Content>
         <DocContent html={post.html} htmlAst={post.htmlAst} />
-        </Content>
-    </Layout>
+        </Content> 
+    </>
   )
 }
 
-export const postQuery = graphql`
-  query BlogPostByPath($path: String!) {
-    markdownRemark(frontmatter: { slug: { eq: $path } }) {
-      html
-      htmlAst
-      tableOfContents(maxDepth: 2)
-      frontmatter {
-        slug
-        title
-        section
-      }
-      ...PageFooter
-    }
-  }
-  fragment PageFooter on MarkdownRemark {
-    parent {
-      ... on File {
-        relativePath
-        sourceInstanceName
-      }
-    }
-  }
-`
+// export const postQuery = graphql`
+//   query BlogPostByPath($path: String!) {
+//     markdownRemark(frontmatter: { slug: { eq: $path } }) {
+//       html
+//       htmlAst
+//       tableOfContents
+//       frontmatter {
+//         slug
+//         title
+//         section
+//       }
+//       ...PageFooter
+//     }
+//   }
+//   fragment PageFooter on MarkdownRemark {
+//     parent {
+//       ... on File {
+//         relativePath
+//         sourceInstanceName
+//       }
+//     }
+//   }
+//`