enhanced exercise navigation

site/gatsby-node.js

@@ -59,12 +59,14 @@ exports.createPages = async ({ graphql, actions }) => {
   pages.forEach((page) => {
     const category = getCategory(page);
     const path = page.internal.contentFilePath;
+    const level = page.frontmatter.level;
     createPage({
       path: page.fields.slug,
       component: `${getTemplate(path)}?__contentFilePath=${path}`,
       context: {
         id: page.id,
         categoryRegEx: `/${category}//`,
+        levelRegEx: `/${level}/`,
       },
     });
   });

site/src/components/exercise-nav.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Link } from 'gatsby';
+
+function getLevels(nodes) {
+  const potentialValues = [];
+  nodes.forEach((node) => {
+    if (!potentialValues.includes(node.frontmatter.level)) {
+      potentialValues.push(node.frontmatter.level);
+    }
+  });
+  return potentialValues;
+}
+
+const ExerciseNav = ({ location, nodes, toc }) => {
+  const levels = getLevels(nodes);
+
+  const ExerciseListItems = ({ location, nodes, toc }) => {
+    return nodes.map((node) => {
+      const current = location.pathname.includes(node.fields.slug);
+      const title = node.frontmatter.title;
+      return (
+        <li className={current ? 'current' : ''}>
+          <Link to={node.fields.slug}>
+            {node.frontmatter.exercise} ) {title}
+          </Link>
+          {current && toc && (
+            <nav className="nav exercise-content-nav">
+              <ul>
+                {toc.map((item) => (
+                  <li>
+                    <Link to={item.url}>{item.title}</Link>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          )}
+        </li>
+      );
+    });
+  };
+
+  return (
+    <nav className="nav exercise-nav">
+      {levels.map((level) => {
+        const currentLevel = nodes.filter(
+          (node) => node.frontmatter.level === level
+        );
+        return (
+          <>
+            {levels.length > 1 && <h3>Level {level}</h3>}
+            <ul>
+              <ExerciseListItems
+                location={location}
+                nodes={currentLevel}
+                toc={toc}
+              />
+            </ul>
+          </>
+        );
+      })}
+    </nav>
+  );
+};
+
+export default ExerciseNav;

site/src/components/exercises.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Link } from 'gatsby';
+
+const ExerciseList = ({ nodes }) => {
+  let currentLevel;
+  return nodes.map((node) => {
+    currentLevel =
+      currentLevel === node.frontmatter.level
+        ? currentLevel
+        : node.frontmatter.level;
+    return (
+      <article key={node.fields.slug} className="content">
+        <header>
+          <h3>
+            <Link to={node.fields.slug}>
+              Exercise {node.frontmatter.exercise} | {node.frontmatter.title}
+            </Link>
+          </h3>
+          <p>{node.frontmatter.description}</p>
+        </header>
+      </article>
+    );
+  });
+};
+
+export default ExerciseList;

site/src/pages/exercises/circuitpython/level-1/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link, graphql } from 'gatsby';
 
-import ExerciseList from '../../../../components/excercises';
+import ExerciseList from '../../../../components/exercises';
 import Hero from '../../../../components/hero';
 import Layout from '../../../../components/layout';
 import Seo from '../../../../components/seo';

site/src/pages/exercises/circuitpython/level-2/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link, graphql } from 'gatsby';
 
-import ExerciseList from '../../../../components/excercises';
+import ExerciseList from '../../../../components/exercises';
 import Hero from '../../../../components/hero';
 import Layout from '../../../../components/layout';
 import Seo from '../../../../components/seo';

site/src/pages/exercises/makecode/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { graphql } from 'gatsby';
 
-import ExerciseList from '../../../components/excercises';
+import ExerciseList from '../../../components/exercises';
 import Hero from '../../../components/hero';
 import Layout from '../../../components/layout';
 

site/src/templates/exercise.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link, graphql } from 'gatsby';
 
+import ExerciseNav from '../components/exercise-nav';
 import Layout from '../components/layout';
 import Seo from '../components/seo';
 
@@ -24,33 +25,7 @@ const ExerciseTemplate = ({ children, data, pageContext, location }) => {
     <Layout location={location}>
       <Seo title={pageTitle} description={pageContext.description} />
       <article className="exercise-main content">
-        <nav className="nav exercise-nav">
-          <ul>
-            {nodes.map((node) => {
-              const current = location.pathname.includes(node.fields.slug);
-              const title = node.frontmatter.title;
-              return (
-                <li className={current ? 'current' : ''}>
-                  <Link to={node.fields.slug}>
-                    {node.frontmatter.exercise} ) {title}
-                  </Link>
-                  {current && (
-                    <nav className="nav exercise-content-nav">
-                      <ul>
-                        {toc &&
-                          toc.map((item) => (
-                            <li>
-                              <Link to={item.url}>{item.title}</Link>
-                            </li>
-                          ))}
-                      </ul>
-                    </nav>
-                  )}
-                </li>
-              );
-            })}
-          </ul>
-        </nav>
+        <ExerciseNav location={location} nodes={nodes} toc={toc} />
         <div className="exercise-content">
           <header>
             <h2>{pageTitle}</h2>
@@ -95,6 +70,8 @@ export const pageQuery = graphql`
     mdx(id: { eq: $id }) {
       frontmatter {
         title
+        level
+        exercise
       }
       internal {
         contentFilePath
@@ -117,6 +94,7 @@ export const pageQuery = graphql`
         frontmatter {
           title
           exercise
+          level
         }
         internal {
           contentFilePath