add ErrorDisplay localisation

astro.config.mjs

@@ -59,6 +59,7 @@ export default defineConfig({
                 }),
                 starlightLinksValidator({
                     errorOnFallbackPages: false,
+                    errorOnRelativeLinks: false,
                 }),
             ],
             expressiveCode: {
@@ -95,7 +96,13 @@ export default defineConfig({
                                 de: "Zukunftspläne",
                             },
                         },
-                        playgroundSidebarEntry
+                        {
+                            ...playgroundSidebarEntry,
+                            badge: {
+                                text: "WIP",
+                                variant: "caution",
+                            },
+                        },
                     ],
                 },
                 {

src/components/Playground.tsx

@@ -176,7 +176,7 @@ export default function Playground({ lang }: { lang: PlaygroundLang }) {
                     marginTop: "0.5cm",
                 }}
             >
-                <ErrorDisplay error={errorMsg} setError={setErrorMsg} />
+                <ErrorDisplay lang={lang.errorDisplay} error={errorMsg} setError={setErrorMsg} />
                 <Header
                     lang={lang.header}
                     onSave={onSave}
@@ -277,7 +277,7 @@ function getFile(root: Directory, path: string): File | null {
         let last = split.pop()!;
 
         for (const dirName of split) {
-            if (dir.dirs) {
+            if (dir && dir.dirs) {
                 dir = dir.dirs[dirName];
             } else {
                 return null;
@@ -335,7 +335,10 @@ function loadFile(
         lang = "json";
     }
     const uri = monaco.Uri.parse(name);
-    if (!monaco.editor.getModel(uri)) {
+    let prevModel = monaco.editor.getModel(uri);
+    if (prevModel) {
+        prevModel.setValue(file.content);
+    } else {
         monaco.editor.createModel(file.content, lang, uri);
     }
     updater((dir) => {
@@ -386,6 +389,7 @@ function jsonReplacer(_key: any, value: any): any {
 
 function deleteFile(monaco: Monaco, updater: Updater<Directory>, name: string) {
     const uri = monaco.Uri.parse(name);
+    console.log(uri);
     const model = monaco.editor.getModel(uri);
     if (model) {
         model.dispose();
@@ -403,6 +407,7 @@ function deleteFile(monaco: Monaco, updater: Updater<Directory>, name: string) {
             }
             current = current.dirs[part];
         }
+        console.log("file", current);
         if (current.files) {
             delete current.files[last];
         }
@@ -423,6 +428,7 @@ function deleteDir(monaco: Monaco, updater: Updater<Directory>, path: string) {
         }
         current = current.dirs[part];
     }
+    console.log(current);
 
     if (current.dirs) {
         for (const [name, _] of Object.entries(current.dirs ?? {})) {
@@ -465,3 +471,4 @@ function renameFile(
         loadFile(monaco, updater, file, newName);
     }
 }
+

src/components/playground.tsx

@@ -1,4 +0,0 @@
-    let prevModel = monaco.editor.getModel(uri);
-    if (prevModel) {
-        prevModel.setValue(file.content);
-    } else {

src/components/playground/ErrorDisplay.tsx

@@ -3,17 +3,20 @@ import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogTitle from "@mui/material/DialogTitle";
+import type { PlaygroundErrorDisplayLang } from "@utils/playground";
 
 export default function ErrorDisplay({
+    lang,
     error,
     setError,
 }: {
+    lang: PlaygroundErrorDisplayLang;
     error: string | null;
     setError: (error: string | null) => void;
 }) {
     return (
         <Dialog open={error !== null} onClose={() => setError(null)}>
-            <DialogTitle>Error during compilation!</DialogTitle>
+            <DialogTitle>{lang.title}</DialogTitle>
             <DialogContent>
                 <div
                     style={{
@@ -33,7 +36,7 @@ export default function ErrorDisplay({
                 </div>
             </DialogContent>
             <DialogActions>
-                <Button onClick={() => setError(null)}>Close</Button>
+                <Button onClick={() => setError(null)}>{lang.buttons.close}</Button>
             </DialogActions>
         </Dialog>
     );

src/pages/de/playground.astro

@@ -30,6 +30,12 @@ const lang: PlaygroundLang = {
 			cancel: "Abbrechen",
         }
     },
+    errorDisplay: {
+        title: "Fehler beim kompilieren!",
+        buttons: {
+            close: "Schließen",
+        },
+    }
 };
 ---
 

src/pages/playground.astro

@@ -19,16 +19,24 @@ const lang: PlaygroundLang = {
             add: "Add file",
             addPrompt: {
                 label: "File path",
-                message: "Enter the path you want the new file to be created at."
+                message:
+                    "Enter the path you want the new file to be created at.",
             },
             delete: "Delete",
             rename: "Rename",
             renamePrompt: {
                 label: "New file path",
-                message: "Enter the path you want the file to be renamed/moved to."
+                message:
+                    "Enter the path you want the file to be renamed/moved to.",
             },
             cancel: "Cancel",
-        }
+        },
+    },
+    errorDisplay: {
+        title: "Error during compilation!",
+        buttons: {
+            close: "Close",
+        },
     },
 };
 ---
@@ -41,4 +49,4 @@ const lang: PlaygroundLang = {
     .pagination-links {
         display: none;
     }
-</style>
+</style>

src/utils/playground.ts

@@ -1,6 +1,7 @@
 export type PlaygroundLang = {
     header: PlaygroundHeaderLang;
     explorer: PlaygroundExplorerLang;
+    errorDisplay: PlaygroundErrorDisplayLang;
 };
 
 export type PlaygroundHeaderLang = {
@@ -29,6 +30,12 @@ export type PlaygroundExplorerLang = {
         cancel: string;
     }
 };
+export type PlaygroundErrorDisplayLang = {
+    title: string;
+    buttons: {
+        close: string;
+    }
+}
 
 export type File = {
     language?: string;