oceanprotocol/docs
1
0
Fork 0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-11-26 19:49:26 +01:00
Code Releases Activity

prototype page creation from submodule

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-11-14 15:17:19 +01:00
parent a01dc54baa
commit e66dbd334b
Signed by: m
GPG Key ID: 606EEEF3C479A91F
8 changed files with 124 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
external/dev-ocean vendored

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

8
gatsby-config.js
View File

@ -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: {

149
gatsby-node.js
View File

@ -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 {
repository(
owner: "oceanprotocol"
name: "dev-ocean"
) {
root: object(
expression: "master:doc/architecture.md"
) {
... on GitHub_Blob {
text
}
architectureDocs: allMarkdownRemark(
filter: {
fileAbsolutePath: {
regex: "/dev-ocean/doc/architecture.md/"
}
squid: object(
expression: "master:doc/architecture/squid.md"
) {
... on GitHub_Blob {
text
}
) {
edges {
node {
fields {
slug
section
}
}
}
@ -130,33 +95,55 @@ exports.createPages = ({ graphql, actions }) => {
})
// Create Architecture section from dev-ocean contents
const docRepoTemplate = path.resolve(
'./src/templates/DocRepo.jsx'
)
const postsArchitecture = result.data.architectureDocs.edges
createPage({
path: '/concepts/architecture/',
component: docRepoTemplate,
context: {
slug: '/concepts/architecture/',
section: 'concepts',
title: 'Architecture',
description: 'Hello description',
content: `${result.data.github.repository.root.text}`
}
postsArchitecture.forEach(post => {
createPage({
path: `${post.node.fields.slug}`,
component: docTemplate,
context: {
slug: post.node.fields.slug,
section: post.node.fields.section
}
})
})
createPage({
path: '/concepts/squid/',
component: docRepoTemplate,
context: {
slug: '/concepts/squid/',
section: 'concepts',
title: 'Squid',
description: 'Hello description',
content: `${result.data.github.repository.squid.text}`
}
})
// createPage({
// path: '/concepts/architecture/',
// component: docTemplate,
// context: {
// slug: post.node.fields.slug,
// section: post.node.fields.section
// }
// })
// 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()
})

12
src/components/DocContent.jsx
View File

@ -9,24 +9,18 @@ const renderAst = new RehypeReact({
components: { repo: Repository }
}).Compiler
const DocContent = ({ html, htmlAst, github }) => {
if (github) {
return <div className={styles.docContent}>{html}</div>
}
return html ? (
const DocContent = ({ html, htmlAst }) =>
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,
github: PropTypes.bool
htmlAst: PropTypes.object
}
export default DocContent

16
src/components/DocToc.jsx Normal file
View File

@ -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

11
src/components/DocToc.module.scss Normal file
View File

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

23
src/templates/Doc.jsx
View File

@ -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,
pageContext: PropTypes.object
location: PropTypes.object.isRequired
}
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 { title, description } =
post.frontmatter || this.props.pageContext
const { section } = post.fields
const { title, description } = post.frontmatter
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

89
src/templates/DocRepo.jsx
View File

@ -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
}
}
}
}
`