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

Improvement: Sort the sidebar list by modules

Browse Source
This commit is contained in:
Akshay 2021-04-21 20:25:49 +02:00
parent 8a29568176
commit f3020e2159
2 changed files with 88 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
gatsby-node.js
View File

@ -71,6 +71,7 @@ exports.createPages = ({ graphql, actions }) => {
slug slug
title title
section section
module
sub_section sub_section
} }
} }
@ -153,18 +154,10 @@ exports.createPages = ({ graphql, actions }) => {
console.log('Create redirect: ' + from + ' --> ' + to) console.log('Create redirect: ' + from + ' --> ' + to)
}) })
// console.log("Query result:", JSON.stringify(result))
const markdowns = result.data.allRepoMarkdown.edges const markdowns = result.data.allRepoMarkdown.edges
const prefix = '/read-the-docs' const oceanPyList = filterMarkdownList(markdowns, 'ocean.py')
const oceanPyList = filterMarkdownList(markdowns, prefix + '/ocean-py/') const aquariusList = filterMarkdownList(markdowns, 'aquarius')
const aquariusList = filterMarkdownList( const providerList = filterMarkdownList(markdowns, 'provider')
markdowns,
prefix + '/aquarius/'
)
const providerList = filterMarkdownList(
markdowns,
prefix + '/provider/'
)
await createReadTheDocsPage(createPage, 'ocean-py', oceanPyList) await createReadTheDocsPage(createPage, 'ocean-py', oceanPyList)
await createReadTheDocsPage(createPage, 'aquarius', aquariusList) await createReadTheDocsPage(createPage, 'aquarius', aquariusList)
@ -319,7 +312,5 @@ const createMarkdownPage = async (createPage, element) => {
} }
const filterMarkdownList = (markdownList, string) => { const filterMarkdownList = (markdownList, string) => {
return markdownList.filter(({ node }) => return markdownList.filter(({ node }) => node.frontmatter.section === string)
node.frontmatter.slug.startsWith(string)
)
} }

134
src/templates/MarkdownList.jsx
View File

@ -9,13 +9,41 @@ import sidebarStyles from '../components/Sidebar.module.scss'
export default function MarkdownList({ pageContext }) { export default function MarkdownList({ pageContext }) {
const subSections = {} const subSections = {}
pageContext.markdownList.map(({ node }) => { const temp = {}
if (!subSections[node.frontmatter.sub_section]) {
subSections[node.frontmatter.sub_section] = [] const assign = (obj, keyPath, value) => {
let lastKeyIndex = keyPath.length - 1
for (var i = 0; i < lastKeyIndex; ++i) {
let key = keyPath[i]
if (!(key in obj)) {
obj[key] = {}
}
obj = obj[key]
} }
subSections[node.frontmatter.sub_section].push(node) obj[keyPath[lastKeyIndex]] = value
}
// console.log('pageContext', pageContext)
// pageContext.markdownList.map(({ node }) => {
// let modules = node.frontmatter.module.split('.')
// assign(temp, modules, node)
// })
pageContext.markdownList.map(({ node }) => {
let modules = node.frontmatter.module.split('.')
let key =
modules.slice(0, modules.length - 1).join('.') || modules.join('.')
console.log(key)
if (!subSections[key]) {
subSections[key] = []
}
subSections[key].push(node)
}) })
console.log('subSections', subSections)
const [selectedSubSection, setSelectedSubSection] = useState(0) const [selectedSubSection, setSelectedSubSection] = useState(0)
const [elem, setElem] = useState( const [elem, setElem] = useState(
subSections[Object.keys(subSections)[selectedSubSection]][0] subSections[Object.keys(subSections)[selectedSubSection]][0]
@ -43,54 +71,58 @@ export default function MarkdownList({ pageContext }) {
<main className={styles.wrapper}> <main className={styles.wrapper}>
<aside className={styles.sidebar}> <aside className={styles.sidebar}>
<nav className={sidebarStyles.sidebar}> <nav className={sidebarStyles.sidebar}>
{Object.keys(subSections).map((ele, subSectionIndex) => { {Object.keys(subSections)
return selectedSubSection === subSectionIndex ? ( .sort()
<div key={subSectionIndex}> .map((ele, subSectionIndex) => {
<h4 className={sidebarStyles.groupTitle}> return selectedSubSection === subSectionIndex ? (
<a <div key={subSectionIndex}>
style={{ cursor: 'pointer', color: 'black' }} <h4 className={sidebarStyles.groupTitle}>
onClick={() => changeSubsection(subSectionIndex)} <a
> style={{ cursor: 'pointer', color: 'black' }}
{ele.replace(/_/g, ' ')} onClick={() => changeSubsection(subSectionIndex)}
</a> >
<div className={sidebarStyles.list}> {ele}
<ul> </a>
{subSections[ele].map((node) => ( <div className={sidebarStyles.list}>
<li <ul>
className={ {subSections[ele].map((node) => (
elem.id === node.id <li
? sidebarStyles.active className={
: sidebarStyles.link elem.id === node.id
} ? sidebarStyles.active
key={node.id} : sidebarStyles.link
onClick={() => changePage(subSectionIndex, node)} }
> key={node.id}
<a onClick={() =>
style={{ changePage(subSectionIndex, node)
cursor: 'pointer' }
}}
> >
{node.frontmatter.title.replace(/_/g, ' ')} <a
</a> style={{
</li> cursor: 'pointer'
))} }}
</ul> >
</div> {node.frontmatter.title}
</h4> </a>
</div> </li>
) : ( ))}
<div> </ul>
<h4 className={sidebarStyles.groupTitle}> </div>
<a </h4>
onClick={() => changeSubsection(subSectionIndex)} </div>
style={{ cursor: 'pointer', color: '#8b98a9' }} ) : (
> <div>
{ele.replace(/_/g, ' ')} <h4 className={sidebarStyles.groupTitle}>
</a> <a
</h4> onClick={() => changeSubsection(subSectionIndex)}
</div> style={{ cursor: 'pointer', color: '#8b98a9' }}
) >
})} {ele}
</a>
</h4>
</div>
)
})}
</nav> </nav>
</aside> </aside>
<article className={styles.main}> <article className={styles.main}>