Improvement: Sort the sidebar list by modules

gatsby-node.js

@@ -71,6 +71,7 @@ exports.createPages = ({ graphql, actions }) => {
                     slug
                     title
                     section
+                    module
                     sub_section
                   }
                 }
@@ -153,18 +154,10 @@ exports.createPages = ({ graphql, actions }) => {
           console.log('Create redirect: ' + from + ' --> ' + to)
         })
 
-        // console.log("Query result:", JSON.stringify(result))
         const markdowns = result.data.allRepoMarkdown.edges
-        const prefix = '/read-the-docs'
+        const oceanPyList = filterMarkdownList(markdowns, 'ocean.py')
-        const oceanPyList = filterMarkdownList(markdowns, prefix + '/ocean-py/')
+        const aquariusList = filterMarkdownList(markdowns, 'aquarius')
-        const aquariusList = filterMarkdownList(
+        const providerList = filterMarkdownList(markdowns, 'provider')
-          markdowns,
-          prefix + '/aquarius/'
-        )
-        const providerList = filterMarkdownList(
-          markdowns,
-          prefix + '/provider/'
-        )
 
         await createReadTheDocsPage(createPage, 'ocean-py', oceanPyList)
         await createReadTheDocsPage(createPage, 'aquarius', aquariusList)
@@ -319,7 +312,5 @@ const createMarkdownPage = async (createPage, element) => {
 }
 
 const filterMarkdownList = (markdownList, string) => {
-  return markdownList.filter(({ node }) =>
+  return markdownList.filter(({ node }) => node.frontmatter.section === string)
-    node.frontmatter.slug.startsWith(string)
-  )
 }

src/templates/MarkdownList.jsx

@@ -9,13 +9,41 @@ import sidebarStyles from '../components/Sidebar.module.scss'
 
 export default function MarkdownList({ pageContext }) {
   const subSections = {}
-  pageContext.markdownList.map(({ node }) => {
+  const temp = {}
-    if (!subSections[node.frontmatter.sub_section]) {
+
-      subSections[node.frontmatter.sub_section] = []
+  const assign = (obj, keyPath, value) => {
+    let lastKeyIndex = keyPath.length - 1
+    for (var i = 0; i < lastKeyIndex; ++i) {
+      let key = keyPath[i]
+      if (!(key in obj)) {
+        obj[key] = {}
       }
-    subSections[node.frontmatter.sub_section].push(node)
+      obj = obj[key]
+    }
+    obj[keyPath[lastKeyIndex]] = value
+  }
+
+  // console.log('pageContext', pageContext)
+  // pageContext.markdownList.map(({ node }) => {
+  //   let modules = node.frontmatter.module.split('.')
+  //   assign(temp, modules, node)
+  // })
+
+  pageContext.markdownList.map(({ node }) => {
+    let modules = node.frontmatter.module.split('.')
+    let key =
+      modules.slice(0, modules.length - 1).join('.') || modules.join('.')
+
+    console.log(key)
+
+    if (!subSections[key]) {
+      subSections[key] = []
+    }
+    subSections[key].push(node)
   })
 
+  console.log('subSections', subSections)
+
   const [selectedSubSection, setSelectedSubSection] = useState(0)
   const [elem, setElem] = useState(
     subSections[Object.keys(subSections)[selectedSubSection]][0]
@@ -43,7 +71,9 @@ export default function MarkdownList({ pageContext }) {
         <main className={styles.wrapper}>
           <aside className={styles.sidebar}>
             <nav className={sidebarStyles.sidebar}>
-              {Object.keys(subSections).map((ele, subSectionIndex) => {
+              {Object.keys(subSections)
+                .sort()
+                .map((ele, subSectionIndex) => {
                   return selectedSubSection === subSectionIndex ? (
                     <div key={subSectionIndex}>
                       <h4 className={sidebarStyles.groupTitle}>
@@ -51,7 +81,7 @@ export default function MarkdownList({ pageContext }) {
                           style={{ cursor: 'pointer', color: 'black' }}
                           onClick={() => changeSubsection(subSectionIndex)}
                         >
-                        {ele.replace(/_/g, ' ')}
+                          {ele}
                         </a>
                         <div className={sidebarStyles.list}>
                           <ul>
@@ -63,14 +93,16 @@ export default function MarkdownList({ pageContext }) {
                                     : sidebarStyles.link
                                 }
                                 key={node.id}
-                              onClick={() => changePage(subSectionIndex, node)}
+                                onClick={() =>
+                                  changePage(subSectionIndex, node)
+                                }
                               >
                                 <a
                                   style={{
                                     cursor: 'pointer'
                                   }}
                                 >
-                                {node.frontmatter.title.replace(/_/g, ' ')}
+                                  {node.frontmatter.title}
                                 </a>
                               </li>
                             ))}
@@ -85,7 +117,7 @@ export default function MarkdownList({ pageContext }) {
                           onClick={() => changeSubsection(subSectionIndex)}
                           style={{ cursor: 'pointer', color: '#8b98a9' }}
                         >
-                        {ele.replace(/_/g, ' ')}
+                          {ele}
                         </a>
                       </h4>
                     </div>