mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-07-01 06:02:10 +02:00
toc as component, scrollspy prototype
This commit is contained in:
parent
b6498cbb18
commit
09c8d41608
|
@ -58,6 +58,7 @@
|
|||
"react": "^16.6.3",
|
||||
"react-dom": "^16.6.3",
|
||||
"react-helmet": "^5.2.0",
|
||||
"react-scrollspy": "^3.3.5",
|
||||
"rehype-react": "^3.1.0",
|
||||
"remark": "^10.0.1",
|
||||
"remark-react": "^5.0.0",
|
||||
|
|
|
@ -34,13 +34,10 @@ SidebarLink.propTypes = {
|
|||
linkClasses: PropTypes.string
|
||||
}
|
||||
|
||||
const SidebarList = ({ items, location, toc, tableOfContents }) => (
|
||||
const SidebarList = ({ items, location, toc, tocComponent }) => (
|
||||
<div className={styles.list}>
|
||||
{toc ? (
|
||||
<div
|
||||
className={styles.toc}
|
||||
dangerouslySetInnerHTML={{ __html: tableOfContents }}
|
||||
/>
|
||||
<div className={styles.toc}>{tocComponent}</div>
|
||||
) : (
|
||||
<ul>
|
||||
{items.map((item, j) => (
|
||||
|
@ -65,7 +62,7 @@ SidebarList.propTypes = {
|
|||
items: PropTypes.array.isRequired,
|
||||
location: PropTypes.object.isRequired,
|
||||
toc: PropTypes.bool,
|
||||
tableOfContents: PropTypes.string
|
||||
tocComponent: PropTypes.object
|
||||
}
|
||||
|
||||
const SidebarGroupTitle = ({ group }) => (
|
||||
|
@ -104,19 +101,13 @@ export default class Sidebar extends Component {
|
|||
location: PropTypes.object.isRequired,
|
||||
collapsed: PropTypes.bool,
|
||||
toc: PropTypes.bool,
|
||||
tableOfContents: PropTypes.string
|
||||
tocComponent: PropTypes.element
|
||||
}
|
||||
|
||||
static defaultProps = { location: { pathname: '/' } }
|
||||
|
||||
render() {
|
||||
const {
|
||||
sidebar,
|
||||
location,
|
||||
collapsed,
|
||||
toc,
|
||||
tableOfContents
|
||||
} = this.props
|
||||
const { sidebar, location, collapsed, toc, tocComponent } = this.props
|
||||
|
||||
if (sidebar) {
|
||||
try {
|
||||
|
@ -143,7 +134,7 @@ export default class Sidebar extends Component {
|
|||
group={group}
|
||||
location={location}
|
||||
toc={toc}
|
||||
tableOfContents={tableOfContents}
|
||||
tocComponent={tocComponent}
|
||||
/>
|
||||
) : (
|
||||
<SidebarGroupTitle group={group} />
|
||||
|
|
|
@ -141,3 +141,10 @@
|
|||
border-left-color: $green;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollspyActive {
|
||||
> a {
|
||||
color: $green;
|
||||
border-left-color: $green;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,33 +1,64 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import slugify from 'slugify'
|
||||
import Scrollspy from 'react-scrollspy'
|
||||
import stylesSidebar from '../../components/Sidebar.module.scss'
|
||||
|
||||
const Toc = typedoc => {
|
||||
const Toc = ({ data }) => {
|
||||
const subItems = (children, parentName) =>
|
||||
children
|
||||
.map(
|
||||
({ name }) =>
|
||||
`<li>
|
||||
<a href="#${parentName}-${slugify(name)}">
|
||||
<code>${name}</code>
|
||||
children.map(({ name }) => {
|
||||
return (
|
||||
<li key={name}>
|
||||
<a href={`#${parentName}-${slugify(name)}`}>
|
||||
<code>{name}</code>
|
||||
</a>
|
||||
</li>`
|
||||
</li>
|
||||
)
|
||||
.join('')
|
||||
})
|
||||
|
||||
const items = typedoc
|
||||
.map(
|
||||
({ name, children }) =>
|
||||
`<li>
|
||||
<a href="#${slugify(name)}">
|
||||
<code>${name}</code>
|
||||
const items = data.map(({ name, children }) => {
|
||||
// let subIds = []
|
||||
|
||||
// subIds.push(
|
||||
// data.map(({ name, children }) => {
|
||||
// const parentName = name
|
||||
// let childId
|
||||
|
||||
// children.map(({ name }) => {
|
||||
// childId = `${parentName}-${slugify(name)}`
|
||||
// })
|
||||
|
||||
// return childId
|
||||
// })
|
||||
// )
|
||||
|
||||
// console.log(subIds)
|
||||
|
||||
return (
|
||||
<li key={name}>
|
||||
<a href={`#${slugify(name)}`}>
|
||||
<code>{name}</code>
|
||||
</a>
|
||||
<ul>
|
||||
${subItems(children, name)}
|
||||
</ul>
|
||||
</li>`
|
||||
<ul>{subItems(children, name)}</ul>
|
||||
</li>
|
||||
)
|
||||
.join('')
|
||||
})
|
||||
|
||||
return `<ul>${items}</ul>`
|
||||
let Ids = []
|
||||
Ids.push(data.map(({ name }) => slugify(name)))
|
||||
|
||||
return (
|
||||
<Scrollspy
|
||||
items={Ids[0]}
|
||||
currentClassName={stylesSidebar.scrollspyActive}
|
||||
>
|
||||
{items}
|
||||
</Scrollspy>
|
||||
)
|
||||
}
|
||||
|
||||
Toc.propTypes = {
|
||||
data: PropTypes.array
|
||||
}
|
||||
|
||||
export default Toc
|
||||
|
|
|
@ -65,7 +65,9 @@ export default class TypedocTemplate extends Component {
|
|||
sidebar={'references'}
|
||||
collapsed
|
||||
toc
|
||||
tableOfContents={Toc(this.typedocCleaned)}
|
||||
tocComponent={
|
||||
<Toc data={this.typedocCleaned} />
|
||||
}
|
||||
/>
|
||||
</aside>
|
||||
<article className={stylesDoc.main}>
|
||||
|
|
Loading…
Reference in New Issue
Block a user