prototype page creation from submodule

external/dev-ocean

@@ -1 +1 @@
-Subproject commit 6d3378fb8ac3d55bcf51ed44c3aacff750eecc39
+Subproject commit 90d07bfa55df97951835545c188c38bc46682048

gatsby-config.js

@@ -37,7 +37,6 @@ module.exports = {
                 path: `${__dirname}/data`
             }
         },
-
         {
             resolve: 'gatsby-source-filesystem',
             options: {
@@ -45,6 +44,13 @@ module.exports = {
                 path: `${__dirname}/node_modules/@oceanprotocol/art`
             }
         },
+        {
+            resolve: 'gatsby-source-filesystem',
+            options: {
+                name: 'dev-ocean',
+                path: `${__dirname}/external/dev-ocean/doc`
+            }
+        },
         {
             resolve: 'gatsby-source-graphql',
             options: {

gatsby-node.js

@@ -7,8 +7,17 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
     if (node.internal.type === 'MarkdownRemark') {
         const fileNode = getNode(node.parent)
         const parsedFilePath = path.parse(fileNode.relativePath)
-        const slug = createFilePath({ node, getNode, basePath: 'content' })
+
-        const section = parsedFilePath.dir
+        let slug = createFilePath({ node, getNode, basePath: 'content' })
+        let section = parsedFilePath.dir
+
+        if (node.frontmatter.slug) {
+            ;({ slug } = node.frontmatter)
+        }
+
+        if (node.frontmatter.section) {
+            ;({ section } = node.frontmatter)
+        }
 
         createNodeField({
             node,
@@ -22,47 +31,8 @@ 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
 
@@ -84,23 +54,18 @@ exports.createPages = ({ graphql, actions }) => {
                             }
                         }
 
-                        github {
+                        architectureDocs: allMarkdownRemark(
-                            repository(
+                            filter: {
-                                owner: "oceanprotocol"
+                                fileAbsolutePath: {
-                                name: "dev-ocean"
+                                    regex: "/dev-ocean/doc/architecture.md/"
-                            ) {
-                                root: object(
-                                    expression: "master:doc/architecture.md"
-                                ) {
-                                    ... on GitHub_Blob {
-                                        text
-                                    }
                                 }
-                                squid: object(
+                            }
-                                    expression: "master:doc/architecture/squid.md"
+                        ) {
-                                ) {
+                            edges {
-                                    ... on GitHub_Blob {
+                                node {
-                                        text
+                                    fields {
+                                        slug
+                                        section
                                     }
                                 }
                             }
@@ -130,33 +95,55 @@ exports.createPages = ({ graphql, actions }) => {
                 })
 
                 // Create Architecture section from dev-ocean contents
-                const docRepoTemplate = path.resolve(
+                const postsArchitecture = result.data.architectureDocs.edges
-                    './src/templates/DocRepo.jsx'
-                )
 
-                createPage({
+                postsArchitecture.forEach(post => {
-                    path: '/concepts/architecture/',
+                    createPage({
-                    component: docRepoTemplate,
+                        path: `${post.node.fields.slug}`,
-                    context: {
+                        component: docTemplate,
-                        slug: '/concepts/architecture/',
+                        context: {
-                        section: 'concepts',
+                            slug: post.node.fields.slug,
-                        title: 'Architecture',
+                            section: post.node.fields.section
-                        description: 'Hello description',
+                        }
-                        content: `${result.data.github.repository.root.text}`
+                    })
-                    }
                 })
 
-                createPage({
+                // createPage({
-                    path: '/concepts/squid/',
+                //     path: '/concepts/architecture/',
-                    component: docRepoTemplate,
+                //     component: docTemplate,
-                    context: {
+                //     context: {
-                        slug: '/concepts/squid/',
+                //         slug: post.node.fields.slug,
-                        section: 'concepts',
+                //         section: post.node.fields.section
-                        title: 'Squid',
+                //     }
-                        description: 'Hello description',
+                // })
-                        content: `${result.data.github.repository.squid.text}`
+
-                    }
+                // 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,24 +9,18 @@ const renderAst = new RehypeReact({
     components: { repo: Repository }
 }).Compiler
 
-const DocContent = ({ html, htmlAst, github }) => {
+const DocContent = ({ html, htmlAst }) =>
-    if (github) {
+    html ? (
-        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/components/DocToc.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './DocToc.module.scss'
+
+const DocToc = ({ tableOfContents }) => (
+    <aside
+        className={styles.toc}
+        dangerouslySetInnerHTML={{ __html: tableOfContents }}
+    />
+)
+
+DocToc.propTypes = {
+    tableOfContents: PropTypes.string.isRequired
+}
+
+export default DocToc

src/components/DocToc.module.scss

@@ -0,0 +1,11 @@
+@import 'variables';
+
+.toc {
+    background: darken($brand-white, 2%);
+    padding: $spacer;
+    margin-bottom: $spacer;
+
+    ul {
+        margin: 0;
+    }
+}

src/templates/Doc.jsx

@@ -6,6 +6,7 @@ import Layout from '../components/Layout'
 import Content from '../components/Content'
 import HeaderSection from '../components/HeaderSection'
 import Sidebar from '../components/Sidebar'
+import DocToc from '../components/DocToc'
 import DocContent from '../components/DocContent'
 import DocHeader from '../components/DocHeader'
 import DocFooter from '../components/DocFooter'
@@ -14,17 +15,16 @@ 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 ? post.fields : this.props.pageContext
+        const { section } = post.fields
-        const { title, description } =
+        const { title, description } = post.frontmatter
-            post.frontmatter || this.props.pageContext
+        const { tableOfContents } = post
 
         // output section title as defined in sections.yml
         const sectionTitle = sections.map(({ node }) => {
@@ -58,6 +58,13 @@ export default class DocTemplate extends Component {
                                         title={title}
                                         description={description}
                                     />
+
+                                    {tableOfContents && (
+                                        <DocToc
+                                            tableOfContents={tableOfContents}
+                                        />
+                                    )}
+
                                     <DocContent
                                         html={post.html}
                                         htmlAst={post.htmlAst}
@@ -71,6 +78,11 @@ export default class DocTemplate extends Component {
                                     title={title}
                                     description={description}
                                 />
+
+                                {tableOfContents && (
+                                    <DocToc tableOfContents={tableOfContents} />
+                                )}
+
                                 <DocContent
                                     html={post.html}
                                     htmlAst={post.htmlAst}
@@ -90,6 +102,7 @@ export const pageQuery = graphql`
         markdownRemark(fields: { slug: { eq: $slug } }) {
             id
             excerpt
+            tableOfContents
             html
             htmlAst
             fileAbsolutePath

src/templates/DocRepo.jsx

@@ -1,89 +0,0 @@
-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
-                }
-            }
-        }
-    }
-`