404 site nav and page head component

site/content/exercises/en-US/circuitpython/level-1/index.mdx

@@ -3,10 +3,6 @@ order: 1
 title: CircuitPython
 ---
 
-![Mu Blink](../../images/circuitpython/mu.png)
+import Setup from '../../circuitpython/start-here.mdx';
 
-## Introduction to CircuitPython - Level 1
-
-This is the original single day workshop with Circuit Playground Express and CircuitPython. Includes an overview of the board's sensors and lights through code. Allows students to dig into an aspect of the device they enjoy for an afternoon of exploration.
-
-[Go to exercises](/exercises/en-US/circuitpython/level-1/)
+<Setup />

site/content/exercises/en-US/circuitpython/robotics/E3/index.md

@@ -28,9 +28,11 @@ while True:
 - [cp.play_tone](https://docs.circuitpython.org/projects/circuitplayground/en/latest/api.html#adafruit_circuitplayground.circuit_playground_base.CircuitPlaygroundBase.play_tone)
 
 ## Making Music
-If you want to try out some music here are variables you need to get started. See below for [sample songs](http://opensource.morganstanley.com/exercises/circuitpython/robotics/E3/#sample-songs).
+
+If you want to try out some music here are variables you need to get started. See below for [sample songs](http://opensource.morganstanley.com/exercises/en-US/circuitpython/robotics/E3/#sample-songs).
 
 Copy these musical note variables into your code:
+
 ```python
 deep_A = 116.541
 deep_B = 123.471
@@ -77,6 +79,7 @@ high_B = 987.767
 # Sample Songs
 
 ## The Star Spangled Banner - USA National Anthem
+
 ```python
 cp.play_tone(mid_G, 0.75)
 cp.play_tone(mid_E, 0.25)
@@ -94,6 +97,7 @@ cp.play_tone(mid_G, 2)
 ```
 
 ## Für Elise - by Ludwig van Beethoven
+
 ```python
 cp.play_tone(high_E, 0.25)
 cp.play_tone(high_D_sharp, 0.25)

site/content/exercises/en-US/circuitpython/robotics/index.mdx

@@ -1,12 +1,14 @@
 ---
 order: 1
-title: CircuitPython
+title: Robotics with CircuitPython
 ---
 
-![Mu Blink](../../images/circuitpython/mu.png)
+import Setup from '../setup.mdx';
 
-## Introduction to CircuitPython - Level 1
+## Intro to Robotics with CircuitPython
 
-This is the original single day workshop with Circuit Playground Express and CircuitPython. Includes an overview of the board's sensors and lights through code. Allows students to dig into an aspect of the device they enjoy for an afternoon of exploration.
+Our curriculum for robotics with CircuitPython.
 
-[Go to exercises](/exercises/en-US/circuitpython/level-1/)
+### [Microcontroller Setup Instructions](http://opensource.morganstanley.com/cpx-training/exercises/en-US/circuitpython/setup_bluefruit/)
+
+<Setup />

site/content/exercises/index.mdx

@@ -0,0 +1,14 @@
+---
+order: 1
+title: Overview of Programs
+---
+
+## Languages
+
+Component that outputs all available languages.
+
+## Overview of Programs and technologies
+
+[CircuitPython](/exercises/en-US/circuitpython)
+
+[MakeCode](/exercises/en-US/makecode)

site/src/components/head.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+function PageHead({ title, children }) {
+  return (
+    <>
+      <title>{title} | Makerspace</title>
+      {children}
+    </>
+  );
+}
+
+export default PageHead;

site/src/components/site-map.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Link } from 'gatsby';
+
+function getCategories(nodes) {
+  const potentialValues = [];
+  nodes.forEach((node) => {
+    const cat = node.frontmatter.category;
+    if (typeof cat !== 'undefined' && !potentialValues.includes(cat)) {
+      potentialValues.push(cat);
+    }
+  });
+  return potentialValues;
+}
+
+function getLevels(nodes) {
+  const potentialValues = [];
+  nodes.forEach((node) => {
+    const level = node.frontmatter.level;
+    if (typeof level !== 'undefined' && !potentialValues.includes(level)) {
+      potentialValues.push(level);
+    }
+  });
+  return potentialValues;
+}
+
+const PageListItems = ({ location, nodes }) => {
+  return nodes.map((node, i) => {
+    const title = node.frontmatter.title;
+    const exercise = node.frontmatter.exercise;
+    const toc = node.tableOfContents.items;
+    return (
+      <li key={`exercise-${i}`}>
+        <Link to={node.fields.slug}>
+          {exercise ? `${exercise} ) ` : ''}
+          {title}
+        </Link>
+        <nav className="nav exercise-content-nav">
+          <ul>
+            {toc &&
+              toc.map((item, j) => (
+                <li key={`toc-${j}`}>
+                  <Link to={item.url}>{item.title}</Link>
+                </li>
+              ))}
+          </ul>
+        </nav>
+      </li>
+    );
+  });
+};
+
+const PagesByLevel = ({ levels, location, nodes }) => (
+  <nav className="nav exercise-nav">
+    {levels.map((level, i) => {
+      const currentLevelNodes = nodes.filter(
+        (node) => node.frontmatter.level === level
+      );
+      return (
+        <div key={`level-${i}`}>
+          {levels.length > 1 && <h3>Level {level}</h3>}
+          <ul>
+            <PageListItems location={location} nodes={currentLevelNodes} />
+          </ul>
+        </div>
+      );
+    })}
+  </nav>
+);
+
+const PagesByCategory = ({ categories, location, nodes }) => {
+  return categories.map((category, i) => {
+    const currentCategoryNodes = nodes.filter(
+      (node) => node.frontmatter.category === category
+    );
+    const levels = getLevels(currentCategoryNodes);
+    return (
+      <>
+        {category !== null && <h2>{category}</h2>}
+        <PagesByLevel
+          levels={levels}
+          location={location}
+          nodes={currentCategoryNodes}
+        />
+      </>
+    );
+  });
+};
+
+const SiteMap = ({ location, nodes }) => {
+  const categories = getCategories(nodes);
+
+  return (
+    <PagesByCategory
+      categories={categories}
+      location={location}
+      nodes={nodes}
+    />
+  );
+};
+
+export default SiteMap;

site/src/pages/404.js

@@ -1,26 +1,55 @@
 import React from 'react';
-import { graphql } from 'gatsby';
+import { Link, graphql } from 'gatsby';
 
 import Layout from '../components/layout';
+import PageHead from '../components/head';
+import SiteMap from '../components/site-map';
+
 import { siteFragment } from '../fragments/site';
 
-const NotFoundPage = ({ location }) => {
+const NotFoundPage = ({ data, location }) => {
+  const nodes = data.allMdx.nodes;
+
   return (
     <Layout location={location}>
-      <h1>Not Found</h1>
-      <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+      <div className="content">
+        <h2>404 Not Found</h2>
+        <p>
+          Sorry, the url you're looking for appears to be missing. Check out the
+          sitemap below to find your expected page.
+        </p>
+        <SiteMap location={location} nodes={nodes} toc={0} />
+      </div>
     </Layout>
   );
 };
 
 export default NotFoundPage;
 
-export const Head = () => <title>404: Not Found</title>;
+export const Head = () => <PageHead title="404 Not Found"></PageHead>;
 
 export const pageQuery = graphql`
   query {
     site {
       ...SiteMetadata
     }
+    allMdx {
+      nodes {
+        id
+        tableOfContents
+        frontmatter {
+          title
+          exercise
+          level
+          category
+        }
+        internal {
+          contentFilePath
+        }
+        fields {
+          slug
+        }
+      }
+    }
   }
 `;

site/src/pages/index.js

@@ -3,6 +3,7 @@ import { Link, graphql } from 'gatsby';
 
 import Hero from '../components/hero';
 import Layout from '../components/layout';
+import PageHead from '../components/head';
 
 import { siteFragment } from '../fragments/site';
 
@@ -90,14 +91,13 @@ const SiteIndex = ({ location }) => {
 export default SiteIndex;
 
 export const Head = () => (
-  <>
-    <title>Makerspace by Morgan Stanley</title>
+  <PageHead title="Makerspace by Morgan Stanley">
     <meta
       name="description"
       content="Introduction to programming with Adafruit's Circuit Playground
                 Express"
     />
-  </>
+  </PageHead>
 );
 
 export const pageQuery = graphql`

site/src/templates/exercise.js

@@ -3,6 +3,7 @@ import { Link, graphql } from 'gatsby';
 
 import ExerciseNav from '../components/exercise-nav';
 import Layout from '../components/layout';
+import PageHead from '../components/head';
 
 import { siteFragment } from '../fragments/site';
 
@@ -60,17 +61,16 @@ const ExerciseTemplate = ({ children, data, pageContext, location }) => {
 
 export default ExerciseTemplate;
 
-export const Head = ({ pageContext }) => (
-  <>
-    <title>
-      {pageContext.title} | Level {pageContext.level} | Exercise{' '}
-      {pageContext.exercise}
-    </title>
-    <meta name="description" content={pageContext.description} />
-  </>
-);
+export const Head = ({ pageContext }) => {
+  const title = `${pageContext.frontmatter.title} | Level ${pageContext.frontmatter.level} | Exercise ${pageContext.frontmatter.exercise}`;
+  return (
+    <PageHead title={title}>
+      <meta name="description" content={pageContext.description} />
+    </PageHead>
+  );
+};
 
-export const pageQuery = graphql`
+export const exerciseQuery = graphql`
   query ($id: String!, $category: String!) {
     site {
       ...SiteMetadata

site/src/templates/page.js

@@ -4,6 +4,7 @@ import { GatsbyImage, getImage } from 'gatsby-plugin-image';
 
 import Hero from '../components/hero';
 import Layout from '../components/layout';
+import PageHead from '../components/head';
 
 const PageTemplate = ({ children, pageContext, location }) => {
   const pageTitle = pageContext.frontmatter.title;
@@ -24,10 +25,9 @@ const PageTemplate = ({ children, pageContext, location }) => {
 export default PageTemplate;
 
 export const Head = ({ pageContext }) => (
-  <>
-    <title>{pageContext.title}</title>
+  <PageHead title={pageContext.frontmatter.title}>
     <meta name="description" content={pageContext?.description} />
-  </>
+  </PageHead>
 );
 
 export const pageQuery = graphql`