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": "^16.6.3",
|
||||||
"react-dom": "^16.6.3",
|
"react-dom": "^16.6.3",
|
||||||
"react-helmet": "^5.2.0",
|
"react-helmet": "^5.2.0",
|
||||||
|
"react-scrollspy": "^3.3.5",
|
||||||
"rehype-react": "^3.1.0",
|
"rehype-react": "^3.1.0",
|
||||||
"remark": "^10.0.1",
|
"remark": "^10.0.1",
|
||||||
"remark-react": "^5.0.0",
|
"remark-react": "^5.0.0",
|
||||||
|
|
|
@ -34,13 +34,10 @@ SidebarLink.propTypes = {
|
||||||
linkClasses: PropTypes.string
|
linkClasses: PropTypes.string
|
||||||
}
|
}
|
||||||
|
|
||||||
const SidebarList = ({ items, location, toc, tableOfContents }) => (
|
const SidebarList = ({ items, location, toc, tocComponent }) => (
|
||||||
<div className={styles.list}>
|
<div className={styles.list}>
|
||||||
{toc ? (
|
{toc ? (
|
||||||
<div
|
<div className={styles.toc}>{tocComponent}</div>
|
||||||
className={styles.toc}
|
|
||||||
dangerouslySetInnerHTML={{ __html: tableOfContents }}
|
|
||||||
/>
|
|
||||||
) : (
|
) : (
|
||||||
<ul>
|
<ul>
|
||||||
{items.map((item, j) => (
|
{items.map((item, j) => (
|
||||||
|
@ -65,7 +62,7 @@ SidebarList.propTypes = {
|
||||||
items: PropTypes.array.isRequired,
|
items: PropTypes.array.isRequired,
|
||||||
location: PropTypes.object.isRequired,
|
location: PropTypes.object.isRequired,
|
||||||
toc: PropTypes.bool,
|
toc: PropTypes.bool,
|
||||||
tableOfContents: PropTypes.string
|
tocComponent: PropTypes.object
|
||||||
}
|
}
|
||||||
|
|
||||||
const SidebarGroupTitle = ({ group }) => (
|
const SidebarGroupTitle = ({ group }) => (
|
||||||
|
@ -104,19 +101,13 @@ export default class Sidebar extends Component {
|
||||||
location: PropTypes.object.isRequired,
|
location: PropTypes.object.isRequired,
|
||||||
collapsed: PropTypes.bool,
|
collapsed: PropTypes.bool,
|
||||||
toc: PropTypes.bool,
|
toc: PropTypes.bool,
|
||||||
tableOfContents: PropTypes.string
|
tocComponent: PropTypes.element
|
||||||
}
|
}
|
||||||
|
|
||||||
static defaultProps = { location: { pathname: '/' } }
|
static defaultProps = { location: { pathname: '/' } }
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const { sidebar, location, collapsed, toc, tocComponent } = this.props
|
||||||
sidebar,
|
|
||||||
location,
|
|
||||||
collapsed,
|
|
||||||
toc,
|
|
||||||
tableOfContents
|
|
||||||
} = this.props
|
|
||||||
|
|
||||||
if (sidebar) {
|
if (sidebar) {
|
||||||
try {
|
try {
|
||||||
|
@ -143,7 +134,7 @@ export default class Sidebar extends Component {
|
||||||
group={group}
|
group={group}
|
||||||
location={location}
|
location={location}
|
||||||
toc={toc}
|
toc={toc}
|
||||||
tableOfContents={tableOfContents}
|
tocComponent={tocComponent}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<SidebarGroupTitle group={group} />
|
<SidebarGroupTitle group={group} />
|
||||||
|
|
|
@ -141,3 +141,10 @@
|
||||||
border-left-color: $green;
|
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 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) =>
|
const subItems = (children, parentName) =>
|
||||||
children
|
children.map(({ name }) => {
|
||||||
.map(
|
return (
|
||||||
({ name }) =>
|
<li key={name}>
|
||||||
`<li>
|
<a href={`#${parentName}-${slugify(name)}`}>
|
||||||
<a href="#${parentName}-${slugify(name)}">
|
<code>{name}</code>
|
||||||
<code>${name}</code>
|
|
||||||
</a>
|
|
||||||
</li>`
|
|
||||||
)
|
|
||||||
.join('')
|
|
||||||
|
|
||||||
const items = typedoc
|
|
||||||
.map(
|
|
||||||
({ name, children }) =>
|
|
||||||
`<li>
|
|
||||||
<a href="#${slugify(name)}">
|
|
||||||
<code>${name}</code>
|
|
||||||
</a>
|
</a>
|
||||||
<ul>
|
</li>
|
||||||
${subItems(children, name)}
|
)
|
||||||
</ul>
|
})
|
||||||
</li>`
|
|
||||||
)
|
|
||||||
.join('')
|
|
||||||
|
|
||||||
return `<ul>${items}</ul>`
|
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>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
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
|
export default Toc
|
||||||
|
|
|
@ -65,7 +65,9 @@ export default class TypedocTemplate extends Component {
|
||||||
sidebar={'references'}
|
sidebar={'references'}
|
||||||
collapsed
|
collapsed
|
||||||
toc
|
toc
|
||||||
tableOfContents={Toc(this.typedocCleaned)}
|
tocComponent={
|
||||||
|
<Toc data={this.typedocCleaned} />
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
</aside>
|
</aside>
|
||||||
<article className={stylesDoc.main}>
|
<article className={stylesDoc.main}>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user