filter TOC data too, scrollspy everywhere

src/templates/Swagger/Paths.jsx

@@ -137,8 +137,8 @@ Method.propTypes = {
 
 const Paths = ({ paths }) =>
     Object.entries(paths).map(([key, value]) => (
-        <div key={key}>
+        <div key={key} id={slugify(cleanPathKey(key))}>
-            <h2 id={slugify(cleanPathKey(key))} className={styles.pathName}>
+            <h2 className={styles.pathName}>
                 <code>{cleanPathKey(key)}</code>
             </h2>
 

src/templates/Swagger/Toc.jsx

@@ -1,18 +1,34 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import slugify from 'slugify'
+import Scrollspy from 'react-scrollspy'
 import { cleanPathKey } from './utils'
+import stylesSidebar from '../../components/Sidebar.module.scss'
 
 const Toc = ({ data }) => {
-    const items = Object.keys(data.paths).map(key => (
+    let Ids = []
-        <li key={key}>
-            <a href={`#${slugify(cleanPathKey(key))}`}>
-                <code>{cleanPathKey(key)}</code>
-            </a>
-        </li>
-    ))
 
-    return <ul>{items}</ul>
+    const items = Object.keys(data.paths).map(key => {
+        Ids.push(slugify(cleanPathKey(key)))
+
+        return (
+            <li key={key}>
+                <a href={`#${slugify(cleanPathKey(key))}`}>
+                    <code>{cleanPathKey(key)}</code>
+                </a>
+            </li>
+        )
+    })
+
+    return (
+        <Scrollspy
+            items={Ids}
+            currentClassName={stylesSidebar.scrollspyActive}
+            offset={-100}
+        >
+            {items}
+        </Scrollspy>
+    )
 }
 
 Toc.propTypes = {

src/templates/Typedoc/Entities.jsx

@@ -211,8 +211,8 @@ PropertyWrapper.propTypes = {
 
 const Entities = ({ entities, sourceUrl }) =>
     entities.map(({ name, comment, children }) => (
-        <div key={name}>
+        <div key={name} id={slugify(name)}>
-            <h2 id={slugify(name)} className={styles.entityName}>
+            <h2 className={styles.entityName}>
                 <code>{name}</code>
             </h2>
 

src/templates/Typedoc/Toc.jsx

@@ -1,12 +1,17 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import slugify from 'slugify'
 import Scrollspy from 'react-scrollspy'
+import { filterByKindOfProperty } from './utils'
 import stylesSidebar from '../../components/Sidebar.module.scss'
 
-const Toc = ({ data }) => {
+export default class Toc extends PureComponent {
-    const subItems = (children, parentName) =>
+    static propTypes = {
-        children.map(({ name }) => (
+        data: PropTypes.array
+    }
+
+    subItems = (children, parentName) =>
+        children.filter(filterByKindOfProperty).map(({ name }) => (
             <li key={name}>
                 <a href={`#${parentName}-${slugify(name)}`}>
                     <code>{name}</code>
@@ -14,12 +19,12 @@ const Toc = ({ data }) => {
             </li>
         ))
 
-    const items = data.map(({ name, children }) => {
+    items = this.props.data.map(({ name, children }) => {
         let subIds = []
         const parentName = name
 
         subIds.push(
-            children.map(({ name }) => {
+            children.filter(filterByKindOfProperty).map(({ name }) => {
                 return `${parentName}-${slugify(name)}`
             })
         )
@@ -32,22 +37,26 @@ const Toc = ({ data }) => {
                 <Scrollspy
                     items={subIds[0]}
                     currentClassName={stylesSidebar.scrollspyActive}
-                    offset={-200}
+                    offset={-300}
                 >
-                    {subItems(children, name)}
+                    {this.subItems(children, name)}
                 </Scrollspy>
             </li>
         )
     })
 
-    // let Ids = []
+    render() {
-    // Ids.push(data.map(({ name }) => slugify(name)))
+        let Ids = []
+        Ids.push(this.props.data.map(({ name }) => name))
 
-    return <ul>{items}</ul>
+        return (
+            <Scrollspy
+                items={Ids[0]}
+                currentClassName={stylesSidebar.scrollspyActive}
+                offset={-300}
+            >
+                {this.items}
+            </Scrollspy>
+        )
+    }
 }
-
-Toc.propTypes = {
-    data: PropTypes.array
-}
-
-export default Toc

src/templates/Typedoc/utils.js

@@ -21,7 +21,7 @@ export const cleanTypedocData = (data, useClasses) => {
 // more kinds: 'Property', 'Class'
 const showKindOfProperty = {
     Method: true,
-    Property: {onlyPublic: true},
+    Property: { onlyPublic: true }
 }
 export const filterByKindOfProperty = ({ kindString, flags }) => {
     const config = showKindOfProperty[kindString]