mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-11-26 19:49:26 +01:00
Merge pull request #647 from oceanprotocol/feature/read-the-docs
Feature/read the docs
This commit is contained in:
commit
97377bf9ea
@ -286,7 +286,9 @@ const createSwaggerPages = async (createPage) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const createReadTheDocsPage = async (createPage, name, list) => {
|
const createReadTheDocsPage = async (createPage, name, list) => {
|
||||||
const markdownListTemplate = path.resolve('./src/templates/MarkdownList.jsx')
|
const markdownListTemplate = path.resolve(
|
||||||
|
'./src/templates/Markdown/MarkdownList.jsx'
|
||||||
|
)
|
||||||
createPage({
|
createPage({
|
||||||
path: `/read-the-docs/${name}`,
|
path: `/read-the-docs/${name}`,
|
||||||
component: markdownListTemplate,
|
component: markdownListTemplate,
|
||||||
|
32
src/templates/Markdown/Markdown.module.scss
Normal file
32
src/templates/Markdown/Markdown.module.scss
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
@import 'variables';
|
||||||
|
|
||||||
|
.link {
|
||||||
|
color: $brand-grey;
|
||||||
|
display: inline-block;
|
||||||
|
padding: $spacer / 6 $spacer / 2;
|
||||||
|
border-left: 0.1rem solid transparent;
|
||||||
|
margin-left: -0.05rem;
|
||||||
|
cursor: 'pointer';
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
transform: none;
|
||||||
|
color: $brand-purple;
|
||||||
|
|
||||||
|
:global(.setup) & {
|
||||||
|
color: $brand-blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
composes: link;
|
||||||
|
color: $brand-purple;
|
||||||
|
border-left-color: $brand-purple;
|
||||||
|
cursor: 'pointer';
|
||||||
|
|
||||||
|
:global(.setup) & {
|
||||||
|
color: $brand-blue;
|
||||||
|
border-left-color: $brand-blue;
|
||||||
|
}
|
||||||
|
}
|
105
src/templates/Markdown/MarkdownList.jsx
Normal file
105
src/templates/Markdown/MarkdownList.jsx
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
import React, { useState } from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import Layout from '../../components/Layout'
|
||||||
|
import HeaderSection from '../../components/HeaderSection'
|
||||||
|
import Content from '../../components/Content'
|
||||||
|
import styles from '../../templates/Doc.module.scss'
|
||||||
|
import MarkdownTemplate from '../MarkdownTemplate'
|
||||||
|
import sidebarStyles from '../../components/Sidebar.module.scss'
|
||||||
|
import moduleStyles from './Markdown.module.scss'
|
||||||
|
|
||||||
|
import { generatedNestedObject } from './utils'
|
||||||
|
|
||||||
|
export default function MarkdownList({ pageContext }) {
|
||||||
|
const flattenedModules = {}
|
||||||
|
const nestedModules = {}
|
||||||
|
|
||||||
|
pageContext.markdownList.map(({ node }) => {
|
||||||
|
const modulePath = node.frontmatter.module.split('.')
|
||||||
|
const key =
|
||||||
|
modulePath.slice(0, modulePath.length - 1).join('.') ||
|
||||||
|
modulePath.join('.')
|
||||||
|
if (!flattenedModules[key]) {
|
||||||
|
flattenedModules[key] = []
|
||||||
|
}
|
||||||
|
flattenedModules[key].push(node)
|
||||||
|
generatedNestedObject(nestedModules, modulePath, node)
|
||||||
|
})
|
||||||
|
|
||||||
|
const moduleKeys = Object.keys(flattenedModules).sort()
|
||||||
|
|
||||||
|
const [selectedModule, setSelectedModule] = useState(
|
||||||
|
flattenedModules[moduleKeys[0]][0]
|
||||||
|
)
|
||||||
|
|
||||||
|
const changeNodeid = (id) => {
|
||||||
|
const found = pageContext.markdownList.find(({ node }) => {
|
||||||
|
return node.id === id
|
||||||
|
})
|
||||||
|
|
||||||
|
setSelectedModule(found.node)
|
||||||
|
}
|
||||||
|
|
||||||
|
const generateModuleListElement = (id, label) => {
|
||||||
|
const className =
|
||||||
|
selectedModule.id === id ? moduleStyles.active : moduleStyles.link
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li key={id} id={id}>
|
||||||
|
<a className={className} onClick={() => changeNodeid(id)}>
|
||||||
|
{label}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const sidebarList = (title, nestedModules) => {
|
||||||
|
const { id } = nestedModules
|
||||||
|
|
||||||
|
if (id)
|
||||||
|
return generateModuleListElement(nestedModules.id, nestedModules.label)
|
||||||
|
|
||||||
|
const keys = Object.keys(nestedModules).sort()
|
||||||
|
const children = []
|
||||||
|
children.push(
|
||||||
|
<li key={title}>
|
||||||
|
<b>{title}</b>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
keys.forEach((element) => {
|
||||||
|
children.push(
|
||||||
|
<ul className={sidebarStyles.list}>
|
||||||
|
{sidebarList(element, nestedModules[element])}
|
||||||
|
</ul>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
return children
|
||||||
|
}
|
||||||
|
|
||||||
|
const nestedSidebarList = sidebarList(null, nestedModules)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<HeaderSection title={pageContext.name} />
|
||||||
|
<Content>
|
||||||
|
<div style={{ color: '#ff8c00' }}>
|
||||||
|
<span>⚠</span>
|
||||||
|
This documentation is a work in progess. Please feel free to report
|
||||||
|
any issues.
|
||||||
|
</div>
|
||||||
|
<main className={styles.wrapper}>
|
||||||
|
<aside className={styles.sidebar}>
|
||||||
|
<div className={sidebarStyles.sidebar}>{nestedSidebarList}</div>
|
||||||
|
</aside>
|
||||||
|
<article className={styles.main}>
|
||||||
|
<MarkdownTemplate data={selectedModule} />
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
</Content>
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
MarkdownList.propTypes = {
|
||||||
|
pageContext: PropTypes.object.isRequired
|
||||||
|
}
|
16
src/templates/Markdown/utils.js
Normal file
16
src/templates/Markdown/utils.js
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
export const generatedNestedObject = (object, keyPath, node) => {
|
||||||
|
const lastKeyIndex = keyPath.length - 1
|
||||||
|
for (var i = 0; i < lastKeyIndex; ++i) {
|
||||||
|
var key = keyPath[i]
|
||||||
|
if (!(key in object)) {
|
||||||
|
object[key] = {}
|
||||||
|
}
|
||||||
|
object = object[key]
|
||||||
|
}
|
||||||
|
if (!object[keyPath[lastKeyIndex]]) {
|
||||||
|
object[keyPath[lastKeyIndex]] = {
|
||||||
|
id: node.id,
|
||||||
|
label: node.frontmatter.title
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -1,113 +0,0 @@
|
|||||||
import React, { useState } from 'react'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import Layout from '../components/Layout'
|
|
||||||
import HeaderSection from '../components/HeaderSection'
|
|
||||||
import Content from '../components/Content'
|
|
||||||
import styles from '../templates/Doc.module.scss'
|
|
||||||
import MarkdownTemplate from './MarkdownTemplate'
|
|
||||||
import sidebarStyles from '../components/Sidebar.module.scss'
|
|
||||||
|
|
||||||
export default function MarkdownList({ pageContext }) {
|
|
||||||
const modules = {}
|
|
||||||
|
|
||||||
pageContext.markdownList.map(({ node }) => {
|
|
||||||
const modulePath = node.frontmatter.module.split('.')
|
|
||||||
const key =
|
|
||||||
modulePath.slice(0, modulePath.length - 1).join('.') ||
|
|
||||||
modulePath.join('.')
|
|
||||||
|
|
||||||
if (!modules[key]) {
|
|
||||||
modules[key] = []
|
|
||||||
}
|
|
||||||
modules[key].push(node)
|
|
||||||
})
|
|
||||||
|
|
||||||
const moduleKeys = Object.keys(modules).sort()
|
|
||||||
|
|
||||||
const [selectedSubSection, setSelectedSubSection] = useState(0)
|
|
||||||
const [elem, setElem] = useState(modules[moduleKeys[selectedSubSection]][0])
|
|
||||||
|
|
||||||
const changePage = (subSectionIndex, node) => {
|
|
||||||
setElem(node)
|
|
||||||
setSelectedSubSection(subSectionIndex)
|
|
||||||
}
|
|
||||||
|
|
||||||
const changeSubsection = (index) => {
|
|
||||||
setSelectedSubSection(index)
|
|
||||||
setElem(modules[moduleKeys[index]][0])
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Layout>
|
|
||||||
<HeaderSection title={pageContext.name} />
|
|
||||||
<Content>
|
|
||||||
<div style={{ color: '#ff8c00' }}>
|
|
||||||
<span>⚠</span>
|
|
||||||
This documentation is a work in progess. Please feel free to report
|
|
||||||
any issues.
|
|
||||||
</div>
|
|
||||||
<main className={styles.wrapper}>
|
|
||||||
<aside className={styles.sidebar}>
|
|
||||||
<nav className={sidebarStyles.sidebar}>
|
|
||||||
{moduleKeys.map((ele, subSectionIndex) => {
|
|
||||||
return selectedSubSection === subSectionIndex ? (
|
|
||||||
<div key={subSectionIndex}>
|
|
||||||
<h4 className={sidebarStyles.groupTitle}>
|
|
||||||
<a
|
|
||||||
style={{ cursor: 'pointer', color: 'black' }}
|
|
||||||
onClick={() => changeSubsection(subSectionIndex)}
|
|
||||||
>
|
|
||||||
{ele}
|
|
||||||
</a>
|
|
||||||
<div className={sidebarStyles.list}>
|
|
||||||
<ul>
|
|
||||||
{modules[ele].map((node) => (
|
|
||||||
<li
|
|
||||||
className={
|
|
||||||
elem.id === node.id
|
|
||||||
? sidebarStyles.active
|
|
||||||
: sidebarStyles.link
|
|
||||||
}
|
|
||||||
key={node.id}
|
|
||||||
onClick={() => changePage(subSectionIndex, node)}
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
style={{
|
|
||||||
cursor: 'pointer'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{node.frontmatter.title}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div>
|
|
||||||
<h4 className={sidebarStyles.groupTitle}>
|
|
||||||
<a
|
|
||||||
onClick={() => changeSubsection(subSectionIndex)}
|
|
||||||
style={{ cursor: 'pointer', color: '#8b98a9' }}
|
|
||||||
>
|
|
||||||
{ele}
|
|
||||||
</a>
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</nav>
|
|
||||||
</aside>
|
|
||||||
<article className={styles.main}>
|
|
||||||
<MarkdownTemplate data={elem} />
|
|
||||||
</article>
|
|
||||||
</main>
|
|
||||||
</Content>
|
|
||||||
</Layout>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
MarkdownList.propTypes = {
|
|
||||||
pageContext: PropTypes.object.isRequired
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user