Automate toolbox generation from exercise markdown

client/src/App.js

@@ -7,8 +7,7 @@ import "./Blocks/dom";
 import "./Blocks/cyf";
 import useBlockly from "./Blockly/useBlockly";
 
-import * as Exercise1 from "./Exercises/01-stuff";
-import * as Exercise2 from "./Exercises/02-more-stuff";
+import exercises from "./Exercises";
 
 import Split from "react-split-grid";
 import TextPanel from "./TextPanel/TextPanel";
@@ -23,9 +22,6 @@ import { ReactComponent as Background } from "../src/svgs/Humaaans-Phone.svg";
 
 Blockly.setLocale(locale);
 
-// just left all this and presumed you will pass whatever you decide to do into the text panel
-const exercises = [Exercise1, Exercise2];
-
 function useExercise() {
   const [exerciseIndex, setExerciseIndex] = useState(0);
 
@@ -92,7 +88,7 @@ export default function App() {
         render={({ getGridProps, getGutterProps }) => (
           <main {...getGridProps()} className="c-layout__panels">
             <TextPanel
-              exercise={exercise}
+              exerciseMd={exercise.markdown}
               navigation={{
                 nextExercise,
                 prevExercise,

client/src/Exercises/01-stuff.md

@@ -0,0 +1,5 @@
+## Some stuff
+
+This lesson is about some stuff™️.
+
+I'm writing some <!--block-->things<!--/block--> <!--block-->here<!--/block--> <!--block-->things<!--/block-->, blah, blah, blah.

client/src/Exercises/blocksToCategories.json

@@ -0,0 +1,4 @@
+{
+    "things": "Value",
+    "here": "HTML"
+}

client/src/Exercises/index.js

@@ -0,0 +1,68 @@
+import { readdirSync } from 'fs'
+import btc from 'blocksToCategories'
+import exp from 'constants'
+
+function ParseToolbox(text) {
+    const blockPattern = /<!--block-->(\w+)<!--\/block-->/g
+    const toolbox = {
+        kind: "categoryToolbox",
+        contents: []
+    }
+
+    let blocks = [...text.matchAll(blockPattern)]
+        .map((block) => {
+            block[1]
+        })
+
+    blocks = [...new Set(blocks)]
+
+    let categories = {}
+    let toolboxContents = []
+
+    for (let blockName of blocks) {
+        if (categories[btc[blockName]]) {
+            categories[btc[blockName]].push({
+                kind: 'block',
+                type: blockName
+            })
+        } else {
+            categories[btc[blockName]] = [{
+                kind: 'block',
+                type: blockName
+            }]
+        }
+    }
+
+    for (let category in categories) {
+        toolboxContents.push({
+            kind: "category",
+            name: category,
+            contents: categories[category]
+        })
+    }
+
+    return {
+        kind: "categoryToolbox",
+        contents: toolboxContents
+    }
+}
+
+function Exercises(dir) {
+    let exercises = readdirSync(dir).filter((filename) => {
+        filename.endsWith('.md')
+    })
+
+    exercises.map((filename) => {
+        const res = await fetch(filename);
+        const fileText = await res.text();
+
+        return {
+            'markdown': fileText,
+            'toolbox': ParseToolbox(fileText)
+        }
+    })
+
+    return exercises
+}
+
+export const exercises = Exercises('./')

client/src/LessonMarkdown.js

@@ -1,22 +1,20 @@
 import { useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
 
-export default function LessonMarkdown({ url }) {
+export default function LessonMarkdown({ md }) {
   const [status, setStatus] = useState("pending");
   const [markdown, setMarkdown] = useState("");
 
   useEffect(() => {
-    (async function getText() {
+    (function getText() {
       try {
-        const res = await fetch(url);
-        const text = await res.text();
-        setMarkdown(text);
+        setMarkdown(md);
         setStatus("done");
       } catch (e) {
         setStatus("error");
       }
     })();
-  }, [url]);
+  }, [md]);
 
   if (status === "pending") {
     return <span>Loading&hellip;</span>;

client/src/TextPanel/TextPanel.js

@@ -1,8 +1,9 @@
 import React from "react";
 import Button from "../Button/Button";
+import LessonMarkdown from "../LessonMarkdown";
 import "./TextPanel.scss";
 
-const TextPanel = ({ exercise, navigation }) => (
+const TextPanel = ({ exerciseMd, navigation }) => (
   <section aria-label="Instructions." className="c-textpanel">
     <nav className="c-textpanel__nav">
       {navigation.hasNextExercise && (
@@ -21,7 +22,7 @@ const TextPanel = ({ exercise, navigation }) => (
       )}
     </nav>
     <section className="c-textpanel__text">
-      <exercise.Lesson />
+      < LessonMarkdown text={exerciseMd} />
     </section>
   </section>
 );