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

134
src/templates/MarkdownList.jsx
View File

@ -9,13 +9,41 @@ import sidebarStyles from '../components/Sidebar.module.scss'
export default function MarkdownList({ pageContext }) {
const subSections = {}
pageContext.markdownList.map(({ node }) => {
if (!subSections[node.frontmatter.sub_section]) {
subSections[node.frontmatter.sub_section] = []
const temp = {}
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 [elem, setElem] = useState(
subSections[Object.keys(subSections)[selectedSubSection]][0]
@ -43,54 +71,58 @@ export default function MarkdownList({ pageContext }) {
<main className={styles.wrapper}>
<aside className={styles.sidebar}>
<nav className={sidebarStyles.sidebar}>
{Object.keys(subSections).map((ele, subSectionIndex) => {
return selectedSubSection === subSectionIndex ? (
<div key={subSectionIndex}>
<h4 className={sidebarStyles.groupTitle}>
<a
style={{ cursor: 'pointer', color: 'black' }}
onClick={() => changeSubsection(subSectionIndex)}
>
{ele.replace(/_/g, ' ')}
</a>
<div className={sidebarStyles.list}>
<ul>
{subSections[ele].map((node) => (
<li
className={
elem.id === node.id
? sidebarStyles.active
: sidebarStyles.link
}
key={node.id}
onClick={() => changePage(subSectionIndex, node)}
>
<a
style={{
cursor: 'pointer'
}}
{Object.keys(subSections)
.sort()
.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>
{subSections[ele].map((node) => (
<li
className={
elem.id === node.id
? sidebarStyles.active
: sidebarStyles.link
}
key={node.id}
onClick={() =>
changePage(subSectionIndex, node)
}
>
{node.frontmatter.title.replace(/_/g, ' ')}
</a>
</li>
))}
</ul>
</div>
</h4>
</div>
) : (
<div>
<h4 className={sidebarStyles.groupTitle}>
<a
onClick={() => changeSubsection(subSectionIndex)}
style={{ cursor: 'pointer', color: '#8b98a9' }}
>
{ele.replace(/_/g, ' ')}
</a>
</h4>
</div>
)
})}
<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}>