From 55be263c3f52038803063293e0b859adffcff78f Mon Sep 17 00:00:00 2001 From: Sanyia Saidova Date: Mon, 28 Mar 2022 21:16:14 +0100 Subject: [PATCH 1/5] Changing exercises folder to flat structure --- .../{01-stuff/lesson.md => 01-stuff.md} | 0 client/src/Exercises/01-stuff/index.js | 46 --------------- .../lesson.md => 02-more-stuff.md} | 0 client/src/Exercises/02-more-stuff/index.js | 58 ------------------- 4 files changed, 104 deletions(-) rename client/src/Exercises/{01-stuff/lesson.md => 01-stuff.md} (100%) delete mode 100644 client/src/Exercises/01-stuff/index.js rename client/src/Exercises/{02-more-stuff/lesson.md => 02-more-stuff.md} (100%) delete mode 100644 client/src/Exercises/02-more-stuff/index.js diff --git a/client/src/Exercises/01-stuff/lesson.md b/client/src/Exercises/01-stuff.md similarity index 100% rename from client/src/Exercises/01-stuff/lesson.md rename to client/src/Exercises/01-stuff.md diff --git a/client/src/Exercises/01-stuff/index.js b/client/src/Exercises/01-stuff/index.js deleted file mode 100644 index 155e81e..0000000 --- a/client/src/Exercises/01-stuff/index.js +++ /dev/null @@ -1,46 +0,0 @@ -import LessonMarkdown from "../../LessonMarkdown"; -import markdownUrl from "./lesson.md"; - -export function Lesson() { - return ; -} - -export const toolbox = { - kind: "categoryToolbox", - contents: [ - { - kind: "category", - name: "Values", - contents: [ - { - kind: "block", - type: "text", - }, - { - kind: "block", - type: "get_randomWord", - }, - ], - }, - { - kind: "category", - name: "HTML", - contents: [ - { - kind: "block", - type: "on_start", - }, - { - kind: "block", - type: "with_element_by_id", - }, - { - kind: "block", - type: "set_content", - blockxml: - " ", - }, - ], - }, - ], -}; diff --git a/client/src/Exercises/02-more-stuff/lesson.md b/client/src/Exercises/02-more-stuff.md similarity index 100% rename from client/src/Exercises/02-more-stuff/lesson.md rename to client/src/Exercises/02-more-stuff.md diff --git a/client/src/Exercises/02-more-stuff/index.js b/client/src/Exercises/02-more-stuff/index.js deleted file mode 100644 index 111e3c6..0000000 --- a/client/src/Exercises/02-more-stuff/index.js +++ /dev/null @@ -1,58 +0,0 @@ -import LessonMarkdown from "../../LessonMarkdown"; -import markdownUrl from "./lesson.md"; - -export function Lesson() { - return ; -} - -export const toolbox = { - kind: "categoryToolbox", - contents: [ - { - kind: "category", - name: "Values", - contents: [ - { - kind: "block", - type: "math_number", - }, - { - kind: "block", - type: "text", - }, - { - kind: "block", - type: "colour_picker", - }, - { - kind: "block", - type: "logic_boolean", - }, - ], - }, - { - kind: "category", - name: "HTML", - contents: [ - { - kind: "block", - type: "on_start", - }, - { - kind: "block", - type: "with_element_by_id", - }, - { - kind: "block", - type: "set_content", - blockxml: - " ", - }, - { - kind: "block", - type: "set_attribute", - }, - ], - }, - ], -}; From 4b3a3719170a7afc4c60dc4eadfe322e49c1d184 Mon Sep 17 00:00:00 2001 From: Sanyia Saidova Date: Wed, 6 Apr 2022 22:56:47 +0100 Subject: [PATCH 2/5] Adding block tags to markdown The idea is to use HTML comments for block tags in markdown, so that we know from the markdown what is explicitely being referenced as a block --- client/src/Exercises/01-stuff.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/Exercises/01-stuff.md b/client/src/Exercises/01-stuff.md index fd1b8ee..e58d853 100644 --- a/client/src/Exercises/01-stuff.md +++ b/client/src/Exercises/01-stuff.md @@ -2,4 +2,4 @@ This lesson is about some stuff™️. -I'm writing some things here, blah, blah, blah. +I'm writing some things here things, blah, blah, blah. \ No newline at end of file From a1d52cc8eb4c3b833befa89aab536a5255c7c3c2 Mon Sep 17 00:00:00 2001 From: Sanyia Saidova Date: Wed, 6 Apr 2022 22:58:06 +0100 Subject: [PATCH 3/5] Creating a blocks to categories map When parsing blocks, we'll need to know which categories they belong to. This file contains a static map, which should be updated when we added supported blocks (this assumes all block names are unique across the entire toolbox and not just to their category) --- client/src/Exercises/blocksToCategories.json | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 client/src/Exercises/blocksToCategories.json diff --git a/client/src/Exercises/blocksToCategories.json b/client/src/Exercises/blocksToCategories.json new file mode 100644 index 0000000..d32dd09 --- /dev/null +++ b/client/src/Exercises/blocksToCategories.json @@ -0,0 +1,4 @@ +{ + "things": "Value", + "here": "HTML" +} \ No newline at end of file From 5b059f1c472ffaeca2f012cfd39d5609445589e2 Mon Sep 17 00:00:00 2001 From: Sanyia Saidova Date: Wed, 6 Apr 2022 23:01:38 +0100 Subject: [PATCH 4/5] Changing exercises export to list of exercise texts and toolbox This bundles the exercise texts with their toolbox after parsing. The changes also introduces a ParseToolbox function which parses the exercise text to produce the toolbox needed --- client/src/App.js | 6 +--- client/src/Exercises/index.js | 68 +++++++++++++++++++++++++++++++++++ 2 files changed, 69 insertions(+), 5 deletions(-) create mode 100644 client/src/Exercises/index.js diff --git a/client/src/App.js b/client/src/App.js index ae8ace5..101d957 100644 --- a/client/src/App.js +++ b/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); diff --git a/client/src/Exercises/index.js b/client/src/Exercises/index.js new file mode 100644 index 0000000..3fab23c --- /dev/null +++ b/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 = /(\w+)/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('./') \ No newline at end of file From 38e3ba1e2a6274f0f029d34e6afd9ff4a192cc83 Mon Sep 17 00:00:00 2001 From: Sanyia Saidova Date: Wed, 6 Apr 2022 23:03:29 +0100 Subject: [PATCH 5/5] Change LessonMarkdown to accept text Instead of fetching the exercise texts (since that has to be done earlier now in order to parse the toolbox), we're changing the props for LessonMarkdown so it accepts the actual text will passed into ReactMarkdown --- client/src/App.js | 2 +- client/src/LessonMarkdown.js | 10 ++++------ client/src/TextPanel/TextPanel.js | 5 +++-- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/client/src/App.js b/client/src/App.js index 101d957..af5e242 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -88,7 +88,7 @@ export default function App() { render={({ getGridProps, getGutterProps }) => (
{ - (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 Loading…; diff --git a/client/src/TextPanel/TextPanel.js b/client/src/TextPanel/TextPanel.js index c9b63b7..7a6e838 100644 --- a/client/src/TextPanel/TextPanel.js +++ b/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 }) => (
- + < LessonMarkdown text={exerciseMd} />
);