Feature: Render markdowns

gatsby-config.js

@@ -150,6 +150,14 @@ module.exports = {
       }
     },
     'gatsby-plugin-webpack-size',
-    'gatsby-plugin-offline'
+    'gatsby-plugin-offline',
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: `${__dirname}/markdowns`,
+        name: `markdowns`,
+      },
+    },
+    `gatsby-transformer-remark`,
   ]
 }

gatsby-node.js

@@ -58,6 +58,21 @@ exports.createPages = ({ graphql, actions }) => {
               }
             }
 
+            allRepoMarkdown: allMarkdownRemark (
+                filter: { fileAbsolutePath: { regex: "/markdowns/" } }
+              ) {
+                edges {
+                  node {
+                    id
+                    html
+                    frontmatter {
+                      slug
+                      title
+                    }
+                  }
+                }
+              }
+
             oceanJs: github {
               repository(name: "ocean.js", owner: "oceanprotocol") {
                 name
@@ -92,7 +107,7 @@ exports.createPages = ({ graphql, actions }) => {
 
         const docTemplate = path.resolve('./src/templates/Doc.jsx')
         const posts = result.data.allMarkdownRemark.edges
-
+        
         //
         // Create Doc pages
         //
@@ -134,6 +149,30 @@ exports.createPages = ({ graphql, actions }) => {
           console.log('Create redirect: ' + from + ' --> ' + to)
         })
 
+        // console.log("Query result:", JSON.stringify(result))
+        const markdowns = result.data.allRepoMarkdown.edges
+        const prefix = '/read-the-docs'
+        let oceanPyList = markdowns.filter(({node}) => node.frontmatter.slug.startsWith(prefix + '/oceanpy/'))
+        let aquariusList = markdowns.filter(({node}) => node.frontmatter.slug.startsWith(prefix + '/aquarius/'))
+        let providerList = markdowns.filter(({node}) => node.frontmatter.slug.startsWith(prefix + '/provider/'))
+        // const docMarkdownTemplate = path.resolve('./src/templates/DocMarkdown.jsx')
+        // oceanPyList.forEach((post) => {
+        //   createPage({
+        //     path: `${post.node.fields.slug}`,
+        //     component: docMarkdownTemplate,
+        //     context: {
+        //       slug: post.node.fields.slug,
+        //       section: post.node.fields.section
+        //     }
+        //   })
+        // })
+
+
+        // console.log("OceanpyList:", JSON.stringify(oceanPyList))
+        // console.log("aquariusList:", JSON.stringify(aquariusList))
+        // console.log("providerList:", JSON.stringify(providerList))
+        await createOceanPyPage(createPage, 'oceanpy', oceanPyList)
+
         resolve()
       })
     )
@@ -256,3 +295,30 @@ const createSwaggerPages = async (createPage) => {
     console.error(error.message)
   }
 }
+
+const createOceanPyPage = async (createPage, name, list)=>{
+  const markdownListTemplate = path.resolve('./src/templates/MarkdownList.jsx')
+  createPage({
+    path: `/read-the-docs/${name}`,
+    component: markdownListTemplate,
+    context: {
+      markdownList: list,
+      name: name
+    }
+  })
+
+  list.forEach((element)=>{
+    createMarkdownPage(createPage, element)
+  })
+
+}
+
+
+const createMarkdownPage = async (createPage, element)=>{
+  console.log("element", JSON.stringify(element.node.frontmatter))
+  const markdownTemplate = path.resolve('./src/templates/MarkdownTemplate.jsx')
+  createPage({
+    path: element.node.frontmatter.slug,
+    component: markdownTemplate
+  })
+}

src/templates/MarkdownList.jsx

@@ -0,0 +1,16 @@
+import { Link } from "gatsby"
+import React from "react"
+import Layout from "../components/Layout"
+
+export default function MarkdownList({pageContext}) {
+  return (
+    <Layout>
+        <div>{pageContext.name}</div>
+        <ul>
+         {pageContext.markdownList.map(({node})=><li><Link to={node.frontmatter.slug}>{node.frontmatter.title}</Link></li>)}
+        </ul>
+    </Layout>
+  )
+}
+
+

src/templates/MarkdownTemplate.jsx

@@ -0,0 +1,25 @@
+import { graphql, Link } from "gatsby"
+import React from "react"
+import Layout from "../components/Layout"
+
+export default function MarkdownTemplate({data}) {
+    const post = data.markdownRemark
+  return (
+    <Layout>
+        <div dangerouslySetInnerHTML={{__html:post.html}}></div>
+    </Layout>
+  )
+}
+
+export const postQuery = graphql`
+  query BlogPostByPath($path: String!) {
+    markdownRemark(frontmatter: { slug: { eq: $path } }) {
+      html
+      frontmatter {
+        slug
+        title
+      }
+    }
+  }
+`
+