toc as component, scrollspy prototype

package.json

@@ -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",

src/components/Sidebar.jsx

@@ -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} />

src/components/Sidebar.module.scss

@@ -141,3 +141,10 @@
         border-left-color: $green;
     }
 }
+
+.scrollspyActive {
+    > a {
+        color: $green;
+        border-left-color: $green;
+    }
+}

src/templates/Typedoc/Toc.jsx

@@ -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>
-                        </a>
-                    </li>`
-            )
-            .join('')
-
-    const items = typedoc
-        .map(
-            ({ name, children }) =>
-                `<li>
-                    <a href="#${slugify(name)}">
-                        <code>${name}</code>
+        children.map(({ name }) => {
+            return (
+                <li key={name}>
+                    <a href={`#${parentName}-${slugify(name)}`}>
+                        <code>{name}</code>
                     </a>
-                    <ul>
-                        ${subItems(children, name)}
-                    </ul>
-                </li>`
-        )
-        .join('')
+                </li>
+            )
+        })
 
-    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

src/templates/Typedoc/index.jsx

@@ -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}>