Sidebar: try to group the pages by type ( classes, modules... )

.vscode/settings.json

@@ -12,7 +12,7 @@
   "editor.formatOnSave": true,
   "editor.formatOnPaste": true,
   "editor.codeActionsOnSave": {
-    "source.organizeImports": false,
-    "source.removeUnusedImports": true
+    "source.organizeImports": "never",
+    "source.removeUnusedImports": "explicit"
   }
 }

gatsby-node.js

@@ -74,11 +74,18 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
       trailingSlash: false,
     }); /* basePath -- path inside src folder to act as base path */
 
+    const title = slug.split('/').join(' ');
+
     createNodeField({
       node,
       name: 'slug',
       value: `/apidocs${slug.replace(/ +/g, '-').replace(/-+/g, '-')}.md`,
     });
+    createNodeField({
+      node,
+      name: 'title',
+      value: title,
+    });
   }
 };
 
@@ -267,14 +274,15 @@ exports.createPages = async ({ graphql, actions }) => {
       allApidocPagesMD: allMarkdownRemark(
         filter: {
           fileAbsolutePath: {
-            regex: "//tsdocs/[a-zA-Z0-9-]+/[a-zA-Z0-9-.]+.md/"
+            regex: "//tsdocs/[a-zA-Z0-9-]+[/[a-zA-Z0-9-.]+]*.md/"
           }
         }
       ) {
         apidocPages: nodes {
           html
           fields {
             slug
+            title
           }
         }
       }
@@ -287,7 +295,7 @@ exports.createPages = async ({ graphql, actions }) => {
     fields.slug!==null && fields.slug.trim()!=='' && docList.push({'title':frontmatter.title,'slug':fields.slug})
   }) */
   const apidocList = apidocPages.map(({ fields }) => ({
-    title: fields.slug,
+    title: fields.title,
     slug: fields.slug,
   }));
 
@@ -300,6 +308,7 @@ exports.createPages = async ({ graphql, actions }) => {
         component: `${path.resolve('./src/templates/apidoc.jsx')}`,
         context: {
           slug: fields.slug,
+          title: fields.title,
           prev:
             di === 0
               ? null

src/components/header/header.jsx

@@ -1,8 +1,8 @@
-import React from 'react'
-import { Link } from 'gatsby'
-import './header.css'
-import logo from '../../images/fabricjs-logo.png'
-import CarbonAd from '../CarbonAd/CarbonAd'
+import React from 'react';
+import { Link } from 'gatsby';
+import './header.css';
+import logo from '../../images/fabricjs-logo.png';
+import CarbonAd from '../CarbonAd/CarbonAd';
 
 export default function Header() {
   return (
@@ -29,8 +29,8 @@ export default function Header() {
               </Link>
             </li>
             <li>
-              <Link activeClassName="active" to="/customize-build">
-                Customize build
+              <Link activeClassName="active" to="/apidocs/modules.md">
+                Api specs
               </Link>
             </li>
             <li>
@@ -49,5 +49,5 @@ export default function Header() {
       </header>
       <CarbonAd />
     </>
-  )
+  );
 }

src/components/tableOfContents/tableOfContents.jsx

@@ -42,15 +42,18 @@ export default class TableOfContents extends React.Component {
 
   handleClick = (e) => {
     if (typeof window === 'undefined') return;
-    e.preventDefault();
     // console.log(e.target.tagName);
     if (e.target.tagName === 'A') {
-      const { hideSidebar } = this.props;
-      const scrolToEl = document.getElementById(e.target.href.split('#')[1]); // eslint-disable-line no-undef
-      scrolToEl && this.doScrolling(scrolToEl, 500); // eslint-disable-line no-unused-expressions
-      hideSidebar && typeof hideSidebar === 'function' && hideSidebar(); // eslint-disable-line no-unused-expressions
-      // this.props.hideSidebar();
-      // console.log(this.props);
+      const isInDocLink = e.target.href.startsWith('#');
+      if (isInDocLink) {
+        e.preventDefault();
+        const { hideSidebar } = this.props;
+        const scrolToEl = document.getElementById(e.target.href.split('#')[1]); // eslint-disable-line no-undef
+        scrolToEl && this.doScrolling(scrolToEl, 500); // eslint-disable-line no-unused-expressions
+        hideSidebar && typeof hideSidebar === 'function' && hideSidebar(); // eslint-disable-line no-unused-expressions
+        // this.props.hideSidebar();
+        // console.log(this.props);
+      }
     }
   };
 

src/templates/apidoc.jsx

@@ -7,7 +7,20 @@ import GithubEditLink from '../components/githubEditLink/githubEditLink';
 import PrevNextLinks from '../components/prevNextPostLinks/prevNextLinks';
 
 export default function Apidoc({ pageContext, data }) {
-  const { toc, mdFile, html } = data.apidocPage;
+  const { /* toc,*/ mdFile, html } = data.apidocPage;
+
+  const apiDocList = pageContext.apidocList.reduce((acc, current) => {
+    const { title, slug } = current;
+    const [, root, classname] = title.split(' ');
+    if (!acc[root]) {
+      acc[root] = [];
+    }
+    acc[root].push({
+      title: classname,
+      url: slug,
+    });
+    return acc;
+  }, {});
 
   return (
     <Layout
@@ -16,37 +29,25 @@ export default function Apidoc({ pageContext, data }) {
           <header>Guides</header>
           <nav id="topics" aria-label="Contents">
             <ol>
-              <li>
-                <Link
-                  onClick={() => {
-                    setVisibility(false);
-                  }}
-                  title="Introduction"
-                  to="/docs"
-                >
-                  Introduction
-                </Link>
-              </li>
-              {pageContext.apidocList.map(({ title, slug }) => (
-                <li key={slug}>
-                  <Link
-                    onClick={() => {
+              {Object.entries(apiDocList).map(([root, smallerList]) => (
+                <li key={root}>
+                  <Link activeClassName="active" title={root} to="#">
+                    {root}
+                  </Link>
+                  <TableOfContents
+                    hideSidebar={() => {
                       setVisibility(false);
                     }}
-                    activeClassName="active"
-                    title={title}
-                    to={slug}
-                  >
-                    {title}
-                  </Link>
-                  {pageContext.slug === slug && (
+                    toc={smallerList}
+                  />
+                  {/* {pageContext.slug === slug && (
                     <TableOfContents
                       hideSidebar={() => {
                         setVisibility(false);
                       }}
                       toc={toc.items}
                     />
-                  )}
+                  )} */}
                 </li>
               ))}
             </ol>