proof of concept for generating pages from selected repo contents

content/concepts/architecture.md

@@ -1,10 +0,0 @@
----
-title: Architecture
-description: The architecture of Ocean Protocol with all its components and how they work together.
----
-
-See the page about the [Ocean network components](/concepts/components/).
-
-See the (somewhat-dated) diagram on the page https://github.com/oceanprotocol/dev-ocean/blob/master/doc/architecture.md
-
-![Ocean Protocol Components](images/components.png 'Ocean Protocol Components')

data/sidebars/concepts.yml

@@ -6,13 +6,13 @@
       link: /concepts/terminology/
     - title: Software Components
       link: /concepts/components/
-    - title: Architecture
-      link: /concepts/architecture/
 
-- group: Details
+- group: Architecture
   items:
-    - title: Coming Soon
+    - title: Overview
-      link: /
+      link: /concepts/architecture/
+    - title: Squid
+      link: /concepts/squid/
 
 - group: Contribute
   items:

gatsby-node.js

@@ -22,8 +22,47 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
             value: section
         })
     }
+
+    //     // console.log(node)
+
+    //     // if (node.internal.owner === 'gatsby-source-graphql') {
+    //     //     console.log(node)
+    //     // }
 }
 
+// exports.sourceNodes = (
+//     { actions, createNodeId, createContentDigest },
+//     configOptions
+// ) => {
+//     const { createNode } = actions
+
+//     // Gatsby adds a configOption that's not needed for this plugin, delete it
+//     delete configOptions.plugins
+
+//     createNode({
+//         // Data for the node.
+//         field1: `a string`,
+//         field2: 10,
+//         field3: true,
+//         ...arbitraryOtherData,
+
+//         // Required fields.
+//         id: `a-node-id`,
+//         parent: `the-id-of-the-parent-node`, // or null if it's a source node without a parent
+//         children: [],
+//         internal: {
+//             type: `CoolServiceMarkdownField`,
+//             contentDigest: crypto
+//                 .createHash(`md5`)
+//                 .update(JSON.stringify(fieldData))
+//                 .digest(`hex`),
+//             mediaType: `text/markdown`, // optional
+//             content: JSON.stringify(fieldData), // optional
+//             description: `Cool Service: "Title of entry"` // optional
+//         }
+//     })
+// }
+
 exports.createPages = ({ graphql, actions }) => {
     const { createPage } = actions
 
@@ -44,6 +83,28 @@ exports.createPages = ({ graphql, actions }) => {
                                 }
                             }
                         }
+
+                        github {
+                            repository(
+                                owner: "oceanprotocol"
+                                name: "dev-ocean"
+                            ) {
+                                root: object(
+                                    expression: "master:doc/architecture.md"
+                                ) {
+                                    ... on GitHub_Blob {
+                                        text
+                                    }
+                                }
+                                squid: object(
+                                    expression: "master:doc/architecture/squid.md"
+                                ) {
+                                    ... on GitHub_Blob {
+                                        text
+                                    }
+                                }
+                            }
+                        }
                     }
                 `
             ).then(result => {
@@ -53,8 +114,8 @@ exports.createPages = ({ graphql, actions }) => {
                     reject(result.errors)
                 }
 
-                const posts = result.data.allMarkdownRemark.edges
                 const docTemplate = path.resolve('./src/templates/Doc.jsx')
+                const posts = result.data.allMarkdownRemark.edges
 
                 // Create Doc pages
                 posts.forEach(post => {
@@ -68,6 +129,35 @@ exports.createPages = ({ graphql, actions }) => {
                     })
                 })
 
+                // Create Architecture section from dev-ocean contents
+                const docRepoTemplate = path.resolve(
+                    './src/templates/DocRepo.jsx'
+                )
+
+                createPage({
+                    path: '/concepts/architecture/',
+                    component: docRepoTemplate,
+                    context: {
+                        slug: '/concepts/architecture/',
+                        section: 'concepts',
+                        title: 'Architecture',
+                        description: 'Hello description',
+                        content: `${result.data.github.repository.root.text}`
+                    }
+                })
+
+                createPage({
+                    path: '/concepts/squid/',
+                    component: docRepoTemplate,
+                    context: {
+                        slug: '/concepts/squid/',
+                        section: 'concepts',
+                        title: 'Squid',
+                        description: 'Hello description',
+                        content: `${result.data.github.repository.squid.text}`
+                    }
+                })
+
                 resolve()
             })
         )

src/components/DocContent.jsx

@@ -9,18 +9,24 @@ const renderAst = new RehypeReact({
     components: { repo: Repository }
 }).Compiler
 
-const DocContent = ({ html, htmlAst }) =>
+const DocContent = ({ html, htmlAst, github }) => {
-    html ? (
+    if (github) {
+        return <div className={styles.docContent}>{html}</div>
+    }
+
+    return html ? (
         <div className={styles.docContent}>{renderAst(htmlAst)}</div>
     ) : (
         <div className={styles.empty}>
             This is a placeholder for now. Help creating it.
         </div>
     )
+}
 
 DocContent.propTypes = {
     html: PropTypes.string,
-    htmlAst: PropTypes.object
+    htmlAst: PropTypes.object,
+    github: PropTypes.bool
 }
 
 export default DocContent

src/templates/Doc.jsx

@@ -14,15 +14,17 @@ import styles from './Doc.module.scss'
 export default class DocTemplate extends Component {
     static propTypes = {
         data: PropTypes.object.isRequired,
-        location: PropTypes.object.isRequired
+        location: PropTypes.object.isRequired,
+        pageContext: PropTypes.object
     }
 
     render() {
         const { location } = this.props
         const post = this.props.data.markdownRemark
         const sections = this.props.data.allSectionsYaml.edges
-        const { section } = post.fields
+        const { section } = post.fields ? post.fields : this.props.pageContext
-        const { title, description } = post.frontmatter
+        const { title, description } =
+            post.frontmatter || this.props.pageContext
 
         // output section title as defined in sections.yml
         const sectionTitle = sections.map(({ node }) => {

src/templates/DocRepo.jsx

@@ -0,0 +1,89 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { graphql } from 'gatsby'
+import Helmet from 'react-helmet'
+import Layout from '../components/Layout'
+import Content from '../components/Content'
+import HeaderSection from '../components/HeaderSection'
+import Sidebar from '../components/Sidebar'
+import DocContent from '../components/DocContent'
+import DocHeader from '../components/DocHeader'
+import styles from './Doc.module.scss'
+
+export default class DocRepoTemplate extends Component {
+    static propTypes = {
+        data: PropTypes.object.isRequired,
+        location: PropTypes.object.isRequired,
+        pageContext: PropTypes.object
+    }
+
+    render() {
+        const { location } = this.props
+        const sections = this.props.data.allSectionsYaml.edges
+        const { section } = this.props.pageContext
+        const { title, description, content } = this.props.pageContext
+
+        // output section title as defined in sections.yml
+        const sectionTitle = sections.map(({ node }) => {
+            // compare section against section title from sections.yml
+            if (node.title.toLowerCase().includes(section)) {
+                return node.title
+            }
+        })
+
+        return (
+            <>
+                <Helmet>
+                    <title>{title}</title>
+                    <meta name="description" content={description} />
+                    <body className={section} />
+                </Helmet>
+                <Layout location={location}>
+                    <HeaderSection title={section ? sectionTitle : title} />
+
+                    <Content>
+                        {section ? (
+                            <main className={styles.wrapper}>
+                                <aside className={styles.sidebar}>
+                                    <Sidebar
+                                        location={location}
+                                        sidebar={section}
+                                    />
+                                </aside>
+                                <article className={styles.main}>
+                                    <DocHeader
+                                        title={title}
+                                        description={description}
+                                    />
+                                    <DocContent html={content} github />
+                                </article>
+                            </main>
+                        ) : (
+                            <article className={styles.mainSingle}>
+                                <DocHeader
+                                    title={title}
+                                    description={description}
+                                />
+                                <DocContent html={content} github />
+                            </article>
+                        )}
+                    </Content>
+                </Layout>
+            </>
+        )
+    }
+}
+
+export const pageQuery = graphql`
+    query {
+        allSectionsYaml {
+            edges {
+                node {
+                    title
+                    description
+                    link
+                }
+            }
+        }
+    }
+`