Feat: add an index page fro exercises

gatsby/create-resolvers.js

@@ -40,6 +40,26 @@ module.exports = ({ createResolvers }) => {
         },
       },
     },
+
+    Exercise: {
+      screenshot: {
+        type: 'File',
+        resolve: async (source, args, context, info) => {
+          const screenshot = await context.nodeModel.findOne({
+            type: 'File',
+            query: {
+              filter: {
+                relativeDirectory: {
+                  eq: source.relativeDirectory,
+                },
+                internal: { mediaType: { regex: '/^(image)/' } },
+              },
+            },
+          });
+          return screenshot;
+        },
+      },
+    },
   };
   createResolvers(resolvers);
 };

gatsby/lib/parse-content.mjs

@@ -154,6 +154,34 @@ export function parseContent(html) {
     });
   });
 
+  /**
+   * List all exercises
+   */
+  const exercises = [];
+  visit(ast, { tagName: 'div' }, (node) => {
+    if (node.properties.dataType !== 'exercise') {
+      return;
+    }
+
+    // Locate the h3 element within the current node's children
+    const titleNode = node.children.find((child) => child.tagName === 'h3');
+    const slug = titleNode && titleNode.properties.id;
+    const title =
+      titleNode && titleNode.children.length > 0
+        ? titleNode.children[0].value
+        : '';
+
+    visit(node, { tagName: 'div' }, (embedDivNode) => {
+      if (embedDivNode.properties.dataType !== 'embed') return;
+      exercises.push({
+        title,
+        slug,
+        relativeDirectory: embedDivNode.properties.dataExamplePath,
+        webEditorURL: embedDivNode.properties.dataP5Editor,
+      });
+    });
+  });
+
   /**
    * Generate a short description
    */
@@ -191,5 +219,6 @@ export function parseContent(html) {
     toc,
     description,
     examples,
+    exercises,
   };
 }

gatsby/on-create-node.js

@@ -15,7 +15,7 @@ module.exports = async ({
 
   // load the html source to every HTML file node
   const content = await loadNodeContent(node);
-  const { ast, toc, examples, description } = parseContent(content);
+  const { ast, toc, examples, exercises, description } = parseContent(content);
 
   createNodeField({
     node,
@@ -49,4 +49,19 @@ module.exports = async ({
     createNode(exampleNode);
     createParentChildLink({ parent: node, child: exampleNode });
   }
+
+  for (let exercise of exercises) {
+    const exerciseNode = {
+      id: createNodeId(exercise.relativeDirectory),
+      parent: node.id,
+      internal: {
+        type: 'Exercise',
+        contentDigest: createContentDigest(exercise),
+      },
+      ...exercise,
+    };
+
+    createNode(exerciseNode);
+    createParentChildLink({ parent: node, child: exerciseNode });
+  }
 };

src/components/SideNav.js

@@ -67,8 +67,8 @@ const SideNav = (props) => {
     .map(({ node }) => node);
 
   return (
-    <nav className="border-noc-200 rounded-3xl border">
-      <ul className="divide-noc-200 divide-y">
+    <nav className="rounded-3xl border border-noc-200">
+      <ul className="divide-y divide-noc-200">
         {pages.slice(0, introductionPageIndex + 1).map((node) => {
           return (
             <PageItem
@@ -109,6 +109,7 @@ const SideNav = (props) => {
         })}
 
         <PageItem key="example" slug="examples" title="Examples" />
+        <PageItem key="exercise" slug="exercises" title="Exercises" />
       </ul>
     </nav>
   );

src/pages/exercises.js

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { graphql, Link } from 'gatsby';
+import { GatsbyImage, getImage } from 'gatsby-plugin-image';
+import { FaBookOpen } from 'react-icons/fa';
+
+import p5jsLogo from '../images/p5js_logo.svg';
+import SideNavLayout from '../layouts/SideNavLayout';
+
+export default function ExercisesPage({ data }) {
+  return (
+    <SideNavLayout title="Exercises">
+      {data.allBookSection.edges.map(({ node: chapter }, index) => {
+        if (chapter.src.childrenExercise.length === 0) return null;
+
+        return (
+          <section key={chapter.id}>
+            <h2 className={`${index === 0 && 'mt-0'}`}>
+              Chapter {chapter.title}
+            </h2>
+
+            <div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2 lg:grid-cols-3">
+              {chapter.src.childrenExercise.map((exercise) => {
+                const screenshot = getImage(exercise.screenshot);
+
+                const [exerciseNumber, exerciseName] =
+                  exercise.title.split(': ');
+
+                return (
+                  <div key={exercise.id} className="not-prose">
+                    <Link
+                      to={`/${chapter.slug}/#${exercise.slug}`}
+                      className="group"
+                    >
+                      <GatsbyImage
+                        image={screenshot}
+                        className="aspect-[8/3] rounded-3xl border object-cover"
+                        alt="p5.js sketch screenshot"
+                      />
+                      <div className="px-2 pt-2 text-sm font-semibold group-hover:underline">
+                        {exerciseNumber}
+                      </div>
+                    </Link>
+
+                    <div className="mt-0.5 px-2">
+                      <div className="text-sm">{exerciseName}</div>
+
+                      <div className="flex items-center gap-2">
+                        <Link
+                          to={`/${chapter.slug}/#${exercise.slug}`}
+                          aria-label="link to chapter"
+                        >
+                          <FaBookOpen className="h-8 w-5 py-2 text-noc-200" />
+                        </Link>
+
+                        <a
+                          href={exercise.webEditorURL}
+                          aria-label="link to p5 editor"
+                        >
+                          <img
+                            src={p5jsLogo}
+                            alt=""
+                            className="inline-block w-8 py-2"
+                          ></img>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </section>
+        );
+      })}
+    </SideNavLayout>
+  );
+}
+
+export const query = graphql`
+  query QueryChaptersExercise {
+    allBookSection(filter: { type: { eq: "chapter" } }) {
+      edges {
+        node {
+          id
+          title
+          slug
+          src {
+            childrenExercise {
+              id
+              title
+              slug
+              relativeDirectory
+              webEditorURL
+              screenshot {
+                childImageSharp {
+                  gatsbyImageData
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;