exercise index navigation

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

@@ -1,6 +1,7 @@
 ---
 order: 1
 title: CircuitPython
+category: CircuitPython
 ---
 
 ![Mu Blink](../../../images/circuitpython/mu.png)

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

@@ -1,6 +1,8 @@
 ---
 order: 1
-title: CircuitPython
+title: CircuitPython with Circuit Playground Express
+category: CircuitPython
+level: 1
 ---
 
 import Setup from '../../circuitpython/start-here.mdx';

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

@@ -1,6 +1,8 @@
 ---
 order: 1
 title: CircuitPython
+category: CircuitPython
+level: 2
 ---
 
 ![Mu Blink](../../images/circuitpython/mu.png)

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

@@ -1,6 +1,7 @@
 ---
 order: 1
 title: Robotics with CircuitPython
+category: CircuitPython
 ---
 
 import Setup from '../setup.mdx';

site/content/exercises/en-US/makecode/index.mdx

@@ -1,6 +1,7 @@
 ---
 order: 1
 title: MakeCode
+category: MakeCode
 ---
 
 ## Intro to programming with Adafruit's Circuit Playground Express and MakeCode

site/gatsby-node.js

@@ -41,11 +41,18 @@ exports.createPages = async ({ graphql, actions }) => {
 
   // Create  pages.
   const pages = result.data.allMdx.nodes;
-  const exerciseTemplate = path.resolve(`./src/templates/exercise.js`);
-  const pageTemplate = path.resolve(`./src/templates/page.js`);
+  const exerciseTemplate = path.resolve(`./src/templates/exercise.jsx`);
+  const indexTemplate = path.resolve(`./src/templates/index.jsx`);
+  const pageTemplate = path.resolve(`./src/templates/page.jsx`);
 
   function getTemplate(page) {
-    return page.frontmatter.exercise ? exerciseTemplate : pageTemplate;
+    const path = page.internal.contentFilePath;
+    const isExerciseIndex = path.includes('index') && path.includes('exercise');
+    return page.frontmatter.exercise
+      ? exerciseTemplate
+      : isExerciseIndex
+        ? indexTemplate
+        : pageTemplate;
   }
 
   pages.forEach((page) => {

site/src/components/exercise-nav.jsx

@@ -11,34 +11,34 @@ function getLevels(nodes) {
   return potentialValues;
 }
 
+const ExerciseListItems = ({ location, nodes, toc }) => {
+  return nodes.map((node, i) => {
+    const isCurrentPage = location.pathname.includes(node.fields.slug);
+    const title = node.frontmatter.title;
+    return (
+      <li className={isCurrentPage ? 'current' : ''} key={`exercise-${i}`}>
+        <Link to={node.fields.slug}>
+          {node.frontmatter.exercise} ) {title}
+        </Link>
+        {isCurrentPage && toc && (
+          <nav className="nav exercise-content-nav">
+            <ul>
+              {toc.map((item, j) => (
+                <li key={`toc-${j}`}>
+                  <Link to={item.url}>{item.title}</Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        )}
+      </li>
+    );
+  });
+};
+
 const ExerciseNav = ({ location, nodes, toc }) => {
   const levels = getLevels(nodes);
 
-  const ExerciseListItems = ({ location, nodes, toc }) => {
-    return nodes.map((node, i) => {
-      const current = location.pathname.includes(node.fields.slug);
-      const title = node.frontmatter.title;
-      return (
-        <li className={current ? 'current' : ''} key={`exercise-${i}`}>
-          <Link to={node.fields.slug}>
-            {node.frontmatter.exercise} ) {title}
-          </Link>
-          {current && toc && (
-            <nav className="nav exercise-content-nav">
-              <ul>
-                {toc.map((item, j) => (
-                  <li key={`toc-${j}`}>
-                    <Link to={item.url}>{item.title}</Link>
-                  </li>
-                ))}
-              </ul>
-            </nav>
-          )}
-        </li>
-      );
-    });
-  };
-
   return (
     <nav className="nav exercise-nav">
       {levels.map((level, i) => {

site/src/components/layout.jsx

@@ -1,25 +1,22 @@
 import React from 'react';
 import { MDXProvider } from '@mdx-js/react';
-import { Link } from 'gatsby';
 
 import Footer from './footer';
 import Header from './header';
-import Hero from './hero';
-import SummaryCard from './summary-card';
+
+import { SHORTCODES } from '../constants/mdx-shortcodes';
 
 import '../styles/global.css';
 import '../styles/style.css';
 
-const shortcodes = { Hero, Link, SummaryCard };
-
 function Layout({ location, children }) {
   return (
     <div className="main">
       <header className="header-main">
         <Header location={location} />
       </header>
       <main className="body-main">
-        <MDXProvider components={shortcodes}>{children}</MDXProvider>
+        <MDXProvider components={SHORTCODES}>{children}</MDXProvider>
       </main>
       <footer className="footer-main">
         <Footer />

site/src/components/site-map.jsx

@@ -23,7 +23,7 @@ function getLevels(nodes) {
   return potentialValues;
 }
 
-const PageListItems = ({ location, nodes }) => {
+const PageListItems = ({ nodes }) => {
   return nodes.map((node, i) => {
     const title = node.frontmatter.title;
     const exercise = node.frontmatter.exercise;
@@ -57,7 +57,7 @@ const PagesByLevel = ({ levels, location, nodes }) => (
       );
       return (
         <div key={`level-${i}`}>
-          {levels.length > 1 && <h3>Level {level}</h3>}
+          {level !== null && <h3>Level {level}</h3>}
           <ul>
             <PageListItems location={location} nodes={currentLevelNodes} />
           </ul>

site/src/components/translations.jsx

@@ -1,27 +1,20 @@
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 import { graphql, useStaticQuery } from 'gatsby';
 
-import { tocFragment, allExercisesNodes } from '../fragments/exercises';
-import { siteFragment } from '../fragments/site';
-import { getAvailableTranslations } from '../utils/translations';
-
 export default function Translations() {
   const data = useStaticQuery(graphql`
-    query TocQuery {
-      site {
-        ...SiteMetadata
-      }
+    query TranslationsQuery {
       allDirectory(filter: { relativeDirectory: { eq: "exercises" } }) {
-        ...AllExerciseDirectories
+        nodes {
+          base
+        }
       }
     }
   `);
 
-  const translations = data.allDirectory.nodes
-    .reverse()
-    .map((node) => node.base);
+  const translations = data.allDirectory.nodes.map((node) => node.base);
 
-  const [selectedTranslation, setSelectedVTranslation] = useState(
+  const [selectedTranslation, setSelectedTranslation] = useState(
     translations[0]
   );
 

site/src/constants/mdx-shortcodes.js

@@ -0,0 +1,5 @@
+import { Link } from 'gatsby';
+import Hero from '../components/hero';
+import SummaryCard from '../components/summary-card';
+
+export const SHORTCODES = { Hero, Link, SummaryCard };

site/src/styles/style.css

@@ -61,6 +61,11 @@ h2 {
   margin-bottom: 0.5rem;
 }
 
+h3::after,
+h2::after {
+  content: '\A';
+}
+
 h3 {
   color: var(--secondary-text);
 }

site/src/templates/index.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { graphql } from 'gatsby';
+import { GatsbyImage, getImage } from 'gatsby-plugin-image';
+
+import Hero from '../components/hero';
+import Layout from '../components/layout';
+import PageHead from '../components/head';
+import SiteMap from '../components/site-map';
+
+const ExerciseIndexTemplate = ({ children, data, pageContext, location }) => {
+  const pageTitle = pageContext.frontmatter.title;
+  const subTitle = pageContext.frontmatter.subtitle
+    ? pageContext.frontmatter.subtitle
+    : '';
+  const heroImage = getImage(pageContext.frontmatter.heroImage);
+  const category = pageContext.frontmatter.category;
+  const level = pageContext.frontmatter.level;
+  const nodes = data.allMdx.nodes.filter(
+    (node) =>
+      node.frontmatter.category === category &&
+      node.frontmatter.level === level &&
+      !!node.frontmatter.exercise
+  );
+
+  return (
+    <Layout location={location}>
+      <GatsbyImage image={heroImage} alt="" />
+      <Hero title={pageTitle} subtitle={subTitle} />
+      <div className="content">{children}</div>
+      <div className="content">
+        <SiteMap location={location} nodes={nodes} />
+      </div>
+    </Layout>
+  );
+};
+
+export default ExerciseIndexTemplate;
+
+export const Head = ({ pageContext }) => (
+  <PageHead title={pageContext.frontmatter.title}>
+    <meta name="description" content={pageContext?.description} />
+  </PageHead>
+);
+
+export const pageQuery = graphql`
+  query ($id: String!) {
+    site {
+      ...SiteMetadata
+    }
+    mdx(id: { eq: $id }) {
+      frontmatter {
+        title
+        subtitle
+        description
+        category
+        level
+      }
+      tableOfContents
+    }
+    allMdx {
+      nodes {
+        id
+        tableOfContents
+        frontmatter {
+          title
+          exercise
+          level
+          category
+        }
+        internal {
+          contentFilePath
+        }
+        fields {
+          slug
+        }
+      }
+    }
+  }
+`;