diff --git a/CHANGELOG.md b/CHANGELOG.md index 4dd27b626..69ce8ef40 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/public/translations/en.json b/public/translations/en.json index 1c1657db6..e2a6f6497 100644 --- a/public/translations/en.json +++ b/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.", diff --git a/public/translations/xx-XX.json b/public/translations/xx-XX.json index beb20003a..9ddfb100c 100644 --- a/public/translations/xx-XX.json +++ b/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.", diff --git a/src/assets/markdown/demoInstructions.md b/src/assets/markdown/demoInstructions.md index df1b5a6cb..c27b9ecca 100644 --- a/src/assets/markdown/demoInstructions.md +++ b/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}} diff --git a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx index e52723b8f..149244301 100644 --- a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx +++ b/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 = () => { diff --git a/src/utils/populateMarkdownTemplate.js b/src/utils/populateMarkdownTemplate.js new file mode 100644 index 000000000..a4bc1de9d --- /dev/null +++ b/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; diff --git a/src/utils/populateMarkdownTemplate.test.js b/src/utils/populateMarkdownTemplate.test.js new file mode 100644 index 000000000..130f5c574 --- /dev/null +++ b/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}}."); + }); +});