Merge pull request #31 from oceanprotocol/feature/principles

add principles document

data/sidebars/concepts.yml

@@ -8,6 +8,8 @@
       link: /concepts/components/
     - title: Tools & Examples
       link: /concepts/tools/
+    - title: Engineering Principles
+      link: /concepts/principles/
 
 - group: Architecture
   items:

external/dev-ocean

@@ -1 +1 @@
-Subproject commit 6bbf269da9eaf75c0fd42bd2a71944af52db6f04
+Subproject commit b082789e850b6cdf5af129352f58e029b4a8637b

gatsby-node.js

@@ -54,7 +54,7 @@ exports.createPages = ({ graphql, actions }) => {
                             }
                         }
 
-                        architectureDocs: allMarkdownRemark(
+                        devOceanDocs: allMarkdownRemark(
                             filter: {
                                 fileAbsolutePath: { regex: "/dev-ocean/doc/" }
                             }
@@ -98,13 +98,14 @@ exports.createPages = ({ graphql, actions }) => {
                     })
                 })
 
-                // Create Architecture section from dev-ocean contents
-                const postsArchitecture = result.data.architectureDocs.edges
+                // Create pages from dev-ocean contents
+                const postsDevOcean = result.data.devOceanDocs.edges
 
-                postsArchitecture
+                postsDevOcean
                     // only grab files with required frontmatter defined
                     .filter(
                         post =>
+                            post.node.frontmatter &&
                             post.node.frontmatter.slug &&
                             post.node.frontmatter.title &&
                             post.node.frontmatter.description &&

src/components/DocContent.module.scss

@@ -21,6 +21,12 @@
         padding-bottom: $spacer / $line-height;
         border-bottom: 1px solid $brand-grey-lighter;
     }
+
+    table {
+        overflow-wrap: normal;
+        word-wrap: normal;
+        word-break: normal;
+    }
 }
 
 .empty {

src/components/DocHeader.jsx

@@ -1,13 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import remark from 'remark'
+import remarkReact from 'remark-react'
 import styles from './DocHeader.module.scss'
 
-const DocHeader = ({ title, description }) => (
-    <header className={styles.header}>
-        <h1 className={styles.title}>{title}</h1>
-        {description && <p className={styles.lead}>{description}</p>}
-    </header>
-)
+const DocHeader = ({ title, description }) => {
+    const descriptionHtml =
+        description &&
+        remark()
+            .use(remarkReact)
+            .processSync(description).contents
+
+    return (
+        <header className={styles.header}>
+            <h1 className={styles.title}>{title}</h1>
+            {description && <p className={styles.lead}>{descriptionHtml}</p>}
+        </header>
+    )
+}
 
 DocHeader.propTypes = {
     title: PropTypes.string.isRequired,

src/styles/global.scss

@@ -219,6 +219,11 @@ table {
     width: 100%;
     margin-bottom: $spacer * $line-height;
     border-collapse: collapse;
+    display: block;
+
+    // make 'em scrollable
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
 
     th,
     td {
@@ -227,6 +232,7 @@ table {
         padding: $spacer / 2;
         border-bottom: 1px solid $brand-grey-lighter;
         text-align: left;
+        font-size: 90%;
 
         &[align='center'] {
             text-align: center;