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

Feature/read the docs

.gitignore

@@ -6,3 +6,5 @@ yarn-error.log
 .DS_Store
 .env
 .env.*
+markdowns/
+.vscode/

data/sidebars/references.yml

@@ -26,7 +26,17 @@
 - group: ocean.py
   items:
     - title: API Reference
-      link: https://github.com/oceanprotocol/ocean.py
+      link: /read-the-docs/ocean-py/
+
+- group: Aquarius read the docs
+  items:
+    - title: API Reference
+      link: /read-the-docs/aquarius/
+
+- group: Provider read the docs
+  items:
+    - title: API Reference
+      link: /read-the-docs/provider/
 
 - group: Smart Contracts
   items:

gatsby-config.js

@@ -150,6 +150,28 @@ module.exports = {
       }
     },
     'gatsby-plugin-webpack-size',
-    'gatsby-plugin-offline'
+    'gatsby-plugin-offline',
+    {
+      resolve: `gatsby-source-git`,
+      options: {
+        name: 'repo-read-the-docs',
+        remote: `https://github.com/oceanprotocol/readthedocs.git`,
+        local: 'markdowns/',
+        branch: 'gatsby',
+        patterns: [
+          'markdowns/ocean-py',
+          'markdowns/aquarius',
+          'markdowns/provider'
+        ]
+      }
+    },
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        path: `${__dirname}/markdowns/markdowns`,
+        name: 'markdowns'
+      }
+    },
+    'gatsby-transformer-remark'
   ]
 }

gatsby-node.js

@@ -58,6 +58,25 @@ exports.createPages = ({ graphql, actions }) => {
               }
             }
 
+            allRepoMarkdown: allMarkdownRemark(
+              filter: { fileAbsolutePath: { regex: "/markdowns/markdowns/" } }
+            ) {
+              edges {
+                node {
+                  id
+                  html
+                  htmlAst
+                  tableOfContents
+                  frontmatter {
+                    slug
+                    title
+                    app
+                    module
+                  }
+                }
+              }
+            }
+
             oceanJs: github {
               repository(name: "ocean.js", owner: "oceanprotocol") {
                 name
@@ -134,6 +153,15 @@ exports.createPages = ({ graphql, actions }) => {
           console.log('Create redirect: ' + from + ' --> ' + to)
         })
 
+        const markdowns = result.data.allRepoMarkdown.edges
+        const oceanPyList = filterMarkdownList(markdowns, 'ocean.py')
+        const aquariusList = filterMarkdownList(markdowns, 'aquarius')
+        const providerList = filterMarkdownList(markdowns, 'provider')
+
+        await createReadTheDocsPage(createPage, 'ocean-py', oceanPyList)
+        await createReadTheDocsPage(createPage, 'aquarius', aquariusList)
+        await createReadTheDocsPage(createPage, 'provider', providerList)
+
         resolve()
       })
     )
@@ -256,3 +284,32 @@ const createSwaggerPages = async (createPage) => {
     console.error(error.message)
   }
 }
+
+const createReadTheDocsPage = 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
+  })
+}
+
+const filterMarkdownList = (markdownList, string) => {
+  return markdownList.filter(({ node }) => node.frontmatter.app === string)
+}

package-lock.json

@@ -4090,6 +4090,15 @@
       "resolved": "https://registry.npmjs.org/@mikaelkristiansson/domready/-/domready-1.0.11.tgz",
       "integrity": "sha512-nEBLOa0JgtqahmPrnJZ18epLiFBzxhdKgo4uhN3TaBFRmM30pEVrS9FAEV4tg92d8PTdU+dYQx2lnpPyFMgMcg=="
     },
+    "@mrmlnc/readdir-enhanced": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
+      "integrity": "sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==",
+      "requires": {
+        "call-me-maybe": "^1.0.1",
+        "glob-to-regexp": "^0.3.0"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
@@ -6927,6 +6936,11 @@
         "get-intrinsic": "^1.0.2"
       }
     },
+    "call-me-maybe": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.1.tgz",
+      "integrity": "sha1-JtII6onje1y95gJQoV8DHBak1ms="
+    },
     "caller-callsite": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
@@ -13780,6 +13794,176 @@
         }
       }
     },
+    "gatsby-source-git": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/gatsby-source-git/-/gatsby-source-git-1.1.0.tgz",
+      "integrity": "sha512-f5HllxwS+ivVn6SitSJPEQe8tf/apjwq5TOZRiEIRJtlrm9eSBqM2hO6ZIOK5na6UuvI+BH8xxbgj0qrwNTznA==",
+      "requires": {
+        "fast-glob": "^2.2.3",
+        "fs-extra": "^5.0.0",
+        "gatsby-source-filesystem": "^2.1.19",
+        "git-url-parse": "^11.1.1",
+        "rimraf": "^2.6.2",
+        "simple-git": "^1.105.0"
+      },
+      "dependencies": {
+        "@nodelib/fs.stat": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
+          "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
+        },
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "requires": {
+            "arr-flatten": "^1.1.0",
+            "array-unique": "^0.3.2",
+            "extend-shallow": "^2.0.1",
+            "fill-range": "^4.0.0",
+            "isobject": "^3.0.1",
+            "repeat-element": "^1.1.2",
+            "snapdragon": "^0.8.1",
+            "snapdragon-node": "^2.0.1",
+            "split-string": "^3.0.2",
+            "to-regex": "^3.0.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "fast-glob": {
+          "version": "2.2.7",
+          "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
+          "integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==",
+          "requires": {
+            "@mrmlnc/readdir-enhanced": "^2.2.1",
+            "@nodelib/fs.stat": "^1.1.2",
+            "glob-parent": "^3.1.0",
+            "is-glob": "^4.0.0",
+            "merge2": "^1.2.3",
+            "micromatch": "^3.1.10"
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "fs-extra": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-5.0.0.tgz",
+          "integrity": "sha512-66Pm4RYbjzdyeuqudYqhFiNBbCIuI9kgRqLPSHIlXHidW8NIQtVdkM1yeZ4lXwuhbTETv3EUGMNHAAw6hiundQ==",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "glob-parent": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+          "requires": {
+            "is-glob": "^3.1.0",
+            "path-dirname": "^1.0.0"
+          },
+          "dependencies": {
+            "is-glob": {
+              "version": "3.1.0",
+              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+              "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+              "requires": {
+                "is-extglob": "^2.1.0"
+              }
+            }
+          }
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "requires": {
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+        },
+        "micromatch": {
+          "version": "3.1.10",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+          "requires": {
+            "arr-diff": "^4.0.0",
+            "array-unique": "^0.3.2",
+            "braces": "^2.3.1",
+            "define-property": "^2.0.2",
+            "extend-shallow": "^3.0.2",
+            "extglob": "^2.0.4",
+            "fragment-cache": "^0.2.1",
+            "kind-of": "^6.0.2",
+            "nanomatch": "^1.2.9",
+            "object.pick": "^1.3.0",
+            "regex-not": "^1.0.0",
+            "snapdragon": "^0.8.1",
+            "to-regex": "^3.0.2"
+          }
+        },
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "to-regex-range": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+          "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+          "requires": {
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1"
+          }
+        }
+      }
+    },
     "gatsby-source-graphql": {
       "version": "2.14.0",
       "resolved": "https://registry.npmjs.org/gatsby-source-graphql/-/gatsby-source-graphql-2.14.0.tgz",
@@ -14405,6 +14589,14 @@
         "parse-url": "^5.0.0"
       }
     },
+    "git-url-parse": {
+      "version": "11.4.4",
+      "resolved": "https://registry.npmjs.org/git-url-parse/-/git-url-parse-11.4.4.tgz",
+      "integrity": "sha512-Y4o9o7vQngQDIU9IjyCmRJBin5iYjI5u9ZITnddRZpD7dcCFQj2sL2XuMNbLRE4b4B/4ENPsp2Q8P44fjAZ0Pw==",
+      "requires": {
+        "git-up": "^4.0.0"
+      }
+    },
     "github-from-package": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
@@ -14451,6 +14643,11 @@
         "is-glob": "^4.0.1"
       }
     },
+    "glob-to-regexp": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz",
+      "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs="
+    },
     "global": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
@@ -22551,6 +22748,14 @@
         }
       }
     },
+    "simple-git": {
+      "version": "1.132.0",
+      "resolved": "https://registry.npmjs.org/simple-git/-/simple-git-1.132.0.tgz",
+      "integrity": "sha512-xauHm1YqCTom1sC9eOjfq3/9RKiUA9iPnxBbrY2DdL8l4ADMu0jjM5l5lphQP5YWNqAL2aXC/OeuQ76vHtW5fg==",
+      "requires": {
+        "debug": "^4.0.1"
+      }
+    },
     "simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",

package.json

@@ -41,6 +41,7 @@
     "gatsby-remark-smartypants": "^2.10.0",
     "gatsby-remark-vscode": "^3.2.1",
     "gatsby-source-filesystem": "^2.11.1",
+    "gatsby-source-git": "^1.1.0",
     "gatsby-source-graphql": "^2.14.0",
     "gatsby-transformer-remark": "^2.16.1",
     "gatsby-transformer-sharp": "^2.12.1",

src/templates/MarkdownList.jsx

@@ -0,0 +1,117 @@
+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 [selectedSubSection, setSelectedSubSection] = useState(0)
+  const [elem, setElem] = useState(
+    modules[Object.keys(modules)[selectedSubSection]][0]
+  )
+
+  const changePage = (subSectionIndex, node) => {
+    setElem(node)
+    setSelectedSubSection(subSectionIndex)
+  }
+
+  const changeSubsection = (index) => {
+    setSelectedSubSection(index)
+    setElem(modules[Object.keys(modules)[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}>
+              {Object.keys(modules)
+                .sort()
+                .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
+}

src/templates/MarkdownTemplate.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import DocContent from '../components/DocContent'
+import Content from '../components/Content'
+
+export default function MarkdownTemplate({ data }) {
+  const post = data
+  return (
+    <>
+      <Content>
+        {post && post.html ? (
+          <DocContent html={post.html} htmlAst={post.htmlAst} />
+        ) : (
+          <div>No content present</div>
+        )}
+      </Content>
+    </>
+  )
+}
+
+MarkdownTemplate.propTypes = {
+  data: PropTypes.object.isRequired
+}