Translate demo instructions (#1230)

## What's Changed?

- Converted `demoInstructions.md` into a tetmplate that references the
keys from the translation files
- Added a helper to replace the keys in the template with the correct
translations
- Applied this to the demo instructions when they are set as the project
instructions when the user clicks "Add instructions"

Author: loiswells97

CHANGELOG.md

@@ -6,11 +6,17 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
-## Changed
+### Added
 
+- Ability to translate demo project instructions (#1230)
+
+### Changed
+
+- Improved status bar styling (#1221)
+- Added method to translate last saved time (#1223)
 - Deleting unused strings and components (#1225)
 
-## Fixed
+### Fixed
 
 - Styling issue preventing scrolling in the sidebar (#1216)
 - Styling issue on status bar on mobile (#1217)
@@ -20,11 +26,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Removed fixed size from `ProjectBar` to prevent overflow when text wraps (#1221)
 - Added missing translation strings (#1222)
 
-## Changed
-
-- Improved status bar styling (#1221)
-- Added method to translate last saved time (#1223)
-
 ## [0.30.1] - 2025-06-09
 
 ### Added

public/translations/en.json

@@ -78,6 +78,17 @@
     "info": "Information"
   },
   "instructionsPanel": {
+    "demoInstructions": {
+      "title": "How instructions work",
+      "enablingInstructions": "Enabling instructions",
+      "visible": "Any text written here will be visible to students in the sidebar.",
+      "writingInstructions": "Writing instructions",
+      "markdown": "Write your instructions using [Markdown](https://www.markdownguide.org/).",
+      "whatYouCanDo": "What you can do",
+      "lists": "Lists",
+      "bulletPoints": "Bullet points",
+      "numberedSteps": "Numbered steps"
+    },
     "emptyState": {
       "addInstructions": "Add instructions",
       "edits": "Like project code, students will not see any edits you make to the instructions after they have saved their version of the project.",

public/translations/xx-XX.json

@@ -78,6 +78,17 @@
     "info": "Informationen"
   },
   "instructionsPanel": {
+    "demoInstructions": {
+      "title": "So funktionieren Anweisungen",
+      "enablingInstructions": "Anweisungen aktivieren",
+      "visible": "Jeder hier geschriebene Text ist für die Schüler in der Seitenleiste sichtbar.",
+      "writingInstructions": "Anweisungen schreiben",
+      "markdown": "Schreiben Sie Ihre Anweisungen mit [Markdown](https://www.markdownguide.org/).",
+      "whatYouCanDo": "Was Sie tun können",
+      "lists": "Listen",
+      "bulletPoints": "Aufzählungszeichen",
+      "numberedSteps": "Nummerierte Schritte"
+    },
     "emptyState": {
       "addInstructions": "Anweisungen hinzufügen",
       "edits": "Wie beim Projektcode sehen die Schüler keine Änderungen, die Sie an den Anweisungen vornehmen, nachdem sie ihre Version des Projekts gespeichert haben.",

src/assets/markdown/demoInstructions.md

@@ -1,18 +1,19 @@
-# How instructions work
+# {{instructionsPanel.demoInstructions.title}}
 
-## Enabling instructions
+## {{instructionsPanel.demoInstructions.enablingInstructions}}
 
-Any text written here will be visible to students in the sidebar
+{{instructionsPanel.demoInstructions.visible}}
 
-## Writing instructions
+## {{instructionsPanel.demoInstructions.writingInstructions}}
 
-Write your instructions using [Markdown](https://www.markdownguide.org/)
-### What you can do
+{{instructionsPanel.demoInstructions.markdown}}
 
-Lists:
+### {{instructionsPanel.demoInstructions.whatYouCanDo}}
 
-- Bullet points
-- Bullet points
+{{instructionsPanel.demoInstructions.lists}}:
 
-1. numbered steps
-2. numbered steps
+- {{instructionsPanel.demoInstructions.bulletPoints}}
+- {{instructionsPanel.demoInstructions.bulletPoints}}
+
+1. {{instructionsPanel.demoInstructions.numberedSteps}}
+2. {{instructionsPanel.demoInstructions.numberedSteps}}

src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx

@@ -20,6 +20,7 @@ import demoInstructions from "../../../../assets/markdown/demoInstructions.md";
 import RemoveInstructionsModal from "../../../Modals/RemoveInstructionsModal";
 import Prism from "prismjs";
 import "prismjs/components/prism-python";
+import populateMarkdownTemplate from "../../../../utils/populateMarkdownTemplate";
 
 const InstructionsPanel = () => {
   const [showModal, setShowModal] = useState(false);
@@ -110,7 +111,11 @@ const InstructionsPanel = () => {
   }, [quizCompleted, currentStepPosition, numberOfSteps, dispatch, isQuiz]);
 
   const addInstructions = () => {
-    dispatch(setProjectInstructions(demoInstructions));
+    const translatedInstructions = populateMarkdownTemplate(
+      demoInstructions,
+      t,
+    );
+    dispatch(setProjectInstructions(translatedInstructions));
   };
 
   const removeInstructions = () => {

src/utils/populateMarkdownTemplate.js

@@ -0,0 +1,8 @@
+const populateMarkdownTemplate = (markdown, t) => {
+  return markdown.replace(/{{(.*?)}}/g, (_, key) => {
+    const translation = t(key);
+    return translation ? translation : `{{${key}}}`;
+  });
+};
+
+export default populateMarkdownTemplate;

src/utils/populateMarkdownTemplate.test.js

@@ -0,0 +1,25 @@
+import populateMarkdownTemplate from "./populateMarkdownTemplate";
+
+describe("populatemarkdownTemplate", () => {
+  const t = (key) => {
+    const translations = {
+      name: "Alice",
+      place: "Wonderland",
+    };
+    return translations[key];
+  };
+
+  it("should replace placeholders with translations", () => {
+    const markdown = "Hello, {{name}}! Welcome to {{place}}.";
+
+    const result = populateMarkdownTemplate(markdown, t);
+    expect(result).toBe("Hello, Alice! Welcome to Wonderland.");
+  });
+
+  it("should leave placeholders unchanged if no translation is found", () => {
+    const markdown = "Hello, {{anotherName}}! Welcome to {{anotherPlace}}.";
+
+    const result = populateMarkdownTemplate(markdown, t);
+    expect(result).toBe("Hello, {{anotherName}}! Welcome to {{anotherPlace}}.");
+  });
+});