Implement navigation for deep site traversal

[MattReimer]

The current design doesn't seem to have any mechanism for easily traversing the site. On the old site we had the (somewhat clunky but usable) automatic table of contents tree that would open to whatver level you were on:

Having this in the Gatsby theme is somewhat important for our satellite docs sites as they can get quite technical and deep in their navigation.

I also think the mechanism should be automatic as maintaining menu links for rapidly changing subpages seems really error-prone.

NOTE: We probably need to do ALL options here but I think Option 3 solves the direct problem outlined here.

Option 1: Menus

The menu system doesn't currently handle sub sub links.

module.exports = {
   // ... 
    menuLinks: [
      {
        title: 'About us',
        url: '/contentPages',
        // This level works fine
        items: [
          {
            title: 'What is a riverscape',
            url: '/contentPages/contentSubFolder',
            // This was never considered in the design
            items: [
              {
                title: 'Level 2 A',
                url: '/contentPages/contentSubFolder',
              },
              {
                title: 'Level 2 B',
                url: '/contentPages/contentSubFolder',
              },
            ],
          },
          {
            title: 'FAIR principles',
            url: '/contentPages/contentSubFolder',
          },
        ],
      },

Option 2: Automatic Story cards for child pages

You'll notice on the main website the our-work page and all its children have story cards below the page content.

But this only works on the main site and ONLY for children of the Our Work page. Notice the hardcoding in PageTemplate.tsx

export const pageQuery = graphql`
  query BlogPostBySlug($id: String!) {
    site {
      siteMetadata {
        title
      }
    }
    mdx(id: { eq: $id }) {
      id
      excerpt(pruneLength: 160)
      body
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
        banner
        isHome
      }
      tableOfContents(maxDepth: 3)
    }
    # NOTICE THE HARD CODING TO REGEX MATCH THE SLUG
    allMdx(filter: { fields: { slug: { regex: "/our-work//" } } }) {
      nodes {
        id
        fields {
          slug
        }
        frontmatter {
          description
          title
          blurb
          isHome
          imageAlt
          image {
            childImageSharp {
              gatsbyImageData(width: 800)
            }
          }
        }
      }
    }
  }
`

Option 3: Automatic Site contents widget

We should implement a site contents widget like on the old jekyll sites that prints a site tree.

We should be able to have a basic choice about what sites have this and a way to turn it off on the root Riverscapes site (because it is highly curated and doesn't need it)

Option 4: Search

At present we have not implemented Search on our sites. I will open a separate card for that.

[joewheaton]

I think I like options 3 and 4... I'm guessing widget is optional to include on some pages? Would search 🔍 be up top?

[MattReimer]

I think I like options 3 and 4... I'm guessing widget is optional to include on some pages? Would search 🔍 be up top?

Up to us really. We've got to find some way to make this function work both on the satellite sites AND the root site.