ocular-gatsby: Example Groups?

[tsherif]

For luma.gl's next release, I'm splitting the examples into categories based on what they're meant to demonstrate to the user (Getting Started, Showcase, API, etc.). Unfortunately, there doesn't seem to be any way to show these groupings in a website generated by ocular-gatsby. They just end up in a single flat list: https://tsherif.github.io/luma.gl/examples

I believe the old luma.gl site had these categories, and I'd love to have them back. Would it be difficult for ocular-gatsby to support similar functionality? The two pieces for me would be sub-menus in the sidebar (like we have for the docs) and splitting up the thumbnail list with headers displaying the group names.

[ibgreen]

This is a great idea, and should be very easy to implement.

We'd need to do three things:

• Define the syntax for describing the nested examples in the gatsby-theme-ocular options.
• Update create-example-pages.js to handle iteration over the new (slightly more complex) structure to call createExamplePage for each leaf node.
• Update the React component that renders the example page templates/examples.jsx