Better sorting of sidebar

Author: brianc

config.js

@@ -1,6 +1,6 @@
 const config = {
   gatsby: {
-    pathPrefix: '/',
+    pathPrefix: '/node-postgres-docs/',
     siteUrl: 'https://learn.hasura.io',
     gaTrackingId: null,
   },

package.json

@@ -16,7 +16,7 @@
     "emotion": "^10.0.9",
     "emotion-server": "^10.0.9",
     "emotion-theming": "^10.0.10",
-    "gatsby": "2.4.2",
+    "gatsby": "2.13.23",
     "gatsby-link": "^2.1.1",
     "gatsby-mdx": "^0.6.2",
     "gatsby-plugin-emotion": "3.0.1",
@@ -46,10 +46,12 @@
   "main": "n/a",
   "scripts": {
     "start": "gatsby develop",
-    "build": "gatsby build --prefix-paths"
+    "build": "gatsby build --prefix-paths",
+    "deploy": "yarn build && gh-pages -d public"
   },
   "devDependencies": {
     "gatsby-plugin-remove-trailing-slashes": "^2.0.11",
+    "gh-pages": "2.0.1",
     "prism-react-renderer": "^0.1.6"
   },
   "prettier": {

src/components/Header.js

@@ -56,7 +56,10 @@ const Header = ({ location }) => (
                 </Link>
                 <div>
                   <span className="sponsor">
-                    sponsored by <a className="sponsor-name">Timescale</a>
+                    sponsored by{' '}
+                    <a className="sponsor-name" href="https://www.timescale.com">
+                      Timescale
+                    </a>
                   </span>
                 </div>
               </div>

src/components/sidebar.js

@@ -5,6 +5,7 @@ import { ExternalLink } from 'react-feather'
 import Link from './link'
 import './styles.css'
 import config from '../../config'
+import { DH_NOT_SUITABLE_GENERATOR } from 'constants'
 
 const forcedNavOrder = config.sidebar.forcedNavOrder
 
@@ -15,7 +16,6 @@ const Sidebar = styled('aside')`
   height: 100vh;
   overflow: auto;
   position: fixed;
-  padding-left: 24px;
   position: -webkit-sticky;
   position: -moz-sticky;
   position: sticky;
@@ -48,6 +48,14 @@ const Sidebar = styled('aside')`
   }
 `
 
+const ListSection = styled('li')`
+  color: white;
+  padding-left: 1rem;
+  font-weight: lighter;
+  font-size: 14px;
+  padding: 0.45rem 0 0.45rem 1rem;
+`
+
 // eslint-disable-next-line no-unused-vars
 const ListItem = styled(({ className, active, level, ...props }) => {
   if (level === 0) {
@@ -153,13 +161,22 @@ const SidebarLayout = ({ location }) => (
           { items: [] }
         )
 
+      const allFields = allMdx.edges.map(({ node }) => node.fields || {})
       const nav = forcedNavOrder
         .reduce((acc, cur) => {
           return acc.concat(navItems[cur])
         }, [])
         .concat(navItems.items)
         .map(slug => {
           const { node } = allMdx.edges.find(({ node }) => node.fields.slug === slug)
+          const containingSlug = allFields.find(({ slug: otherSlug }) => {
+            // is this slug contained within another one (e.g. is this a 'header' slug?)
+            return slug !== '/' && slug !== otherSlug && otherSlug.indexOf(slug) === 0
+          })
+          if (containingSlug) {
+            // nested path
+            return <ListSection key={node.fields.slug}>{node.fields.title}</ListSection>
+          }
 
           let isActive = false
           if (

src/components/styles.css

@@ -177,6 +177,7 @@ pre {
 
 .sideBarUL {
   margin-top: 32px;
+  white-space: nowrap;
 }
 
 .sideBarUL li {