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: Highlight selected sub-section

Browse Source
This commit is contained in:
Akshay 2021-04-12 13:42:34 +02:00
parent e5487f32bf
commit fef6cb9fbf
2 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/templates/MarkdownList.jsx
View File

@ -6,17 +6,17 @@ import styles from '../templates/Doc.module.scss'
import MarkdownTemplate from './MarkdownTemplate' import MarkdownTemplate from './MarkdownTemplate'
export default function MarkdownList({ pageContext }) { export default function MarkdownList({ pageContext }) {
const sub_sections = {} const subSections = {}
pageContext.markdownList.map(({ node }) => { pageContext.markdownList.map(({ node }) => {
if (!sub_sections[node.frontmatter.sub_section]) { if (!subSections[node.frontmatter.sub_section]) {
sub_sections[node.frontmatter.sub_section] = [] subSections[node.frontmatter.sub_section] = []
} }
sub_sections[node.frontmatter.sub_section].push(node) subSections[node.frontmatter.sub_section].push(node)
}) })
const [selectedSubSection, setSelectedSubSection] = useState(0) const [selectedSubSection, setSelectedSubSection] = useState(0)
const [elem, setElem] = useState( const [elem, setElem] = useState(
sub_sections[Object.keys(sub_sections)[selectedSubSection]][0] subSections[Object.keys(subSections)[selectedSubSection]][0]
) )
const changePage = (subSectionIndex, node) => { const changePage = (subSectionIndex, node) => {
@ -26,7 +26,7 @@ export default function MarkdownList({ pageContext }) {
const changeSubsection = (index) => { const changeSubsection = (index) => {
setSelectedSubSection(index) setSelectedSubSection(index)
setElem(sub_sections[Object.keys(sub_sections)[index]][0]) setElem(subSections[Object.keys(subSections)[index]][0])
} }
return ( return (
@ -36,28 +36,40 @@ export default function MarkdownList({ pageContext }) {
<main className={styles.wrapper}> <main className={styles.wrapper}>
<aside className={styles.sidebar}> <aside className={styles.sidebar}>
<ul> <ul>
{Object.keys(sub_sections).map((ele, subSectionIndex) => { {Object.keys(subSections).map((ele, subSectionIndex) => {
return selectedSubSection === subSectionIndex ? ( return selectedSubSection === subSectionIndex ? (
<li key={subSectionIndex}> <li key={subSectionIndex}>
<div onClick={() => changeSubsection(subSectionIndex)}> <a
style={{ cursor: 'pointer', color: 'black' }}
onClick={() => changeSubsection(subSectionIndex)}
>
{ele.replace(/_/g, ' ')} {ele.replace(/_/g, ' ')}
</div> </a>
<ul> <ul>
{sub_sections[ele].map((node) => ( {subSections[ele].map((node) => (
<li <li
key={node.id} key={node.id}
onClick={() => changePage(subSectionIndex, node)} onClick={() => changePage(subSectionIndex, node)}
>
<a
style={{
cursor: 'pointer'
}}
> >
{node.frontmatter.title.replace(/_/g, ' ')} {node.frontmatter.title.replace(/_/g, ' ')}
</a>
</li> </li>
))} ))}
</ul> </ul>
</li> </li>
) : ( ) : (
<li> <li>
<div onClick={() => changeSubsection(subSectionIndex)}> <a
onClick={() => changeSubsection(subSectionIndex)}
style={{ cursor: 'pointer', color: '#8b98a9' }}
>
{ele.replace(/_/g, ' ')} {ele.replace(/_/g, ' ')}
</div> </a>
</li> </li>
) )
})} })}

4
src/templates/MarkdownTemplate.jsx
View File

@ -6,10 +6,6 @@ export default function MarkdownTemplate({ data }) {
const post = data const post = data
return ( return (
<> <>
{/* <div dangerouslySetInnerHTML={{__html:post.html}}></div> */}
{/* <DocHeader title={post.frontmatter.title}/> */}
{/* <HeaderSection title={post.frontmatter.title} />
{post.tableOfContents && <DocToc tableOfContents={post.tableOfContents} />}*/}
<Content> <Content>
{post && post.html ? ( {post && post.html ? (
<DocContent html={post.html} htmlAst={post.htmlAst} /> <DocContent html={post.html} htmlAst={post.htmlAst} />