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

prototype page creation from submodule

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

2
external/dev-ocean vendored

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

View File

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

View File

@ -7,8 +7,17 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
if (node.internal.type === 'MarkdownRemark') { if (node.internal.type === 'MarkdownRemark') {
const fileNode = getNode(node.parent) const fileNode = getNode(node.parent)
const parsedFilePath = path.parse(fileNode.relativePath) 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({ createNodeField({
node, node,
@ -22,47 +31,8 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
value: section 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 }) => { exports.createPages = ({ graphql, actions }) => {
const { createPage } = 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"
) { ) {
... on GitHub_Blob { edges {
text node {
fields {
slug
section
} }
} }
} }
@ -130,34 +95,56 @@ exports.createPages = ({ graphql, actions }) => {
}) })
// Create Architecture section from dev-ocean contents // Create Architecture section from dev-ocean contents
const docRepoTemplate = path.resolve( const postsArchitecture = result.data.architectureDocs.edges
'./src/templates/DocRepo.jsx'
)
postsArchitecture.forEach(post => {
createPage({ createPage({
path: '/concepts/architecture/', path: `${post.node.fields.slug}`,
component: docRepoTemplate, component: docTemplate,
context: { context: {
slug: '/concepts/architecture/', slug: post.node.fields.slug,
section: 'concepts', section: post.node.fields.section
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}`
}
}) })
// 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() resolve()
}) })
) )

View File

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

View File

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

View File

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

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