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

Feature/read the docs

gatsby-config.js

@@ -99,7 +99,6 @@ module.exports = {
               }
             }
           },
-          'gatsby-remark-copy-linked-files',
           {
             resolve: 'gatsby-remark-component',
             options: {

gatsby-node.js

@@ -69,6 +69,7 @@ exports.createPages = ({ graphql, actions }) => {
                   tableOfContents
                   frontmatter {
                     slug
+                    source
                     title
                     app
                     module
@@ -291,25 +292,14 @@ const createReadTheDocsPage = async (createPage, name, list) => {
   )
   createPage({
     path: `/read-the-docs/${name}`,
+    matchPath: `/read-the-docs/${name}/*`,
     component: markdownListTemplate,
     context: {
       markdownList: list,
-      name: name
+      name: name,
+      baseUrl: `/read-the-docs/${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) => {

src/templates/Markdown/Markdown.module.scss

@@ -6,7 +6,6 @@
   padding: $spacer / 6 $spacer / 2;
   border-left: 0.1rem solid transparent;
   margin-left: -0.05rem;
-  cursor: 'pointer';
 
   &:hover,
   &:focus {
@@ -23,7 +22,6 @@
   composes: link;
   color: $brand-purple;
   border-left-color: $brand-purple;
-  cursor: 'pointer';
 
   :global(.setup) & {
     color: $brand-blue;

src/templates/Markdown/MarkdownList.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import Layout from '../../components/Layout'
 import HeaderSection from '../../components/HeaderSection'
@@ -7,13 +7,12 @@ 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'
 
-export default function MarkdownList({ pageContext }) {
+export default function MarkdownList({ location, pageContext }) {
   const flattenedModules = {}
   const nestedModules = {}
-
   pageContext.markdownList.map(({ node }) => {
     const modulePath = node.frontmatter.module.split('.')
     const key =
@@ -28,16 +27,19 @@ export default function MarkdownList({ pageContext }) {
 
   const moduleKeys = Object.keys(flattenedModules).sort()
 
-  const [selectedModule, setSelectedModule] = useState(
-    flattenedModules[moduleKeys[0]][0]
-  )
+  const path = location.pathname.replace(pageContext.baseUrl + '/', '')
+  const found = pageContext.markdownList.find(({ node }) => {
+    return node.frontmatter.slug === path
+  })
+
+  const selectedModule = found ? found.node : flattenedModules[moduleKeys[0]][0]
 
   const changeNodeid = (id) => {
     const found = pageContext.markdownList.find(({ node }) => {
       return node.id === id
     })
 
-    setSelectedModule(found.node)
+    navigate(pageContext.baseUrl + '/' + found.node.frontmatter.slug)
   }
 
   const generateModuleListElement = (id, label) => {
@@ -45,7 +47,7 @@ export default function MarkdownList({ pageContext }) {
       selectedModule.id === id ? moduleStyles.active : moduleStyles.link
 
     return (
-      <li key={id} id={id}>
+      <li key={id} id={id} style={{ cursor: 'pointer' }}>
         <a className={className} onClick={() => changeNodeid(id)}>
           {label}
         </a>
@@ -101,5 +103,6 @@ export default function MarkdownList({ pageContext }) {
 }
 
 MarkdownList.propTypes = {
-  pageContext: PropTypes.object.isRequired
+  pageContext: PropTypes.object.isRequired,
+  location: PropTypes.object.isRequired
 }

src/templates/MarkdownTemplate.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import DocContent from '../components/DocContent'
+import styles from '../components/DocFooter.module.scss'
 import Content from '../components/Content'
 
 export default function MarkdownTemplate({ data }) {
@@ -13,6 +14,16 @@ export default function MarkdownTemplate({ data }) {
         ) : (
           <div>No content present</div>
         )}
+        <footer className={styles.footer}>
+          <a
+            style={{ cursor: 'pointer' }}
+            href={post.frontmatter.source}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            View source on Github
+          </a>
+        </footer>
       </Content>
     </>
   )