feat: add config-checker page

config-checker/src/main.ts

@@ -0,0 +1,88 @@
+import * as monaco from "monaco-editor";
+import { configureMonacoYaml } from "monaco-yaml";
+import schemaUri from "/config-schema.json?url";
+
+window.MonacoEnvironment = {
+  getWorker(_, label) {
+    switch (label) {
+      case "editorWorkerService":
+        return new Worker(new URL("monaco-editor/esm/vs/editor/editor.worker.js", import.meta.url), { type: "module" });
+      case "yaml":
+        return new Worker(new URL("./yaml.worker.js", import.meta.url), { type: "module" })
+      default:
+        throw new Error(`Unknown label ${label}`);
+    }
+  },
+};
+
+configureMonacoYaml(monaco, {
+  enableSchemaRequest: true,
+  schemas: [{
+    fileMatch: ["**/config.yaml"],
+    uri: schemaUri,
+  }],
+});
+
+const initialModel = monaco.editor.createModel("# Paste your config here to check it\n", undefined, monaco.Uri.parse("file:///config.yaml"));
+initialModel.updateOptions({ tabSize: 2 });
+
+const editorRoot = document.getElementById("editor")!;
+const errorsRoot = document.getElementById("errors")!;
+
+monaco.editor.defineTheme("zeppelin", {
+  base: "vs-dark",
+  inherit: true,
+  rules: [],
+  colors: {
+    "editor.background": "#00000000",
+    "editor.focusBorder": "#00000000",
+    "list.focusOutline": "#00000000",
+    "editorStickyScroll.background": "#070c11",
+  },
+});
+monaco.editor.create(editorRoot, {
+  automaticLayout: true,
+  model: initialModel,
+  quickSuggestions: {
+    other: true,
+    comments: true,
+    strings: true,
+  },
+  theme: "zeppelin",
+  minimap: {
+    enabled: false,
+  },
+});
+
+function showErrors(markers: monaco.editor.IMarker[]) {
+  if (markers.length) {
+    markers.sort((a, b) => a.startLineNumber - b.startLineNumber);
+    const frag = document.createDocumentFragment();
+    for (const marker of markers) {
+      const error = document.createElement("div");
+      error.classList.add("error");
+      
+      const lineMarker = document.createElement("strong");
+      lineMarker.innerText = `Line ${marker.startLineNumber}: `;
+
+      const errorText = document.createElement("span");
+      errorText.innerText = marker.message;
+
+      error.append(lineMarker, errorText);
+      frag.append(error);
+    }
+    errorsRoot.replaceChildren(frag);
+  } else {
+    const success = document.createElement("div");
+    success.classList.add("noErrors");
+    success.innerText = "No errors!";
+    errorsRoot.replaceChildren(success);
+  }
+}
+
+monaco.editor.onDidChangeMarkers(([uri]) => {
+  const markers = monaco.editor.getModelMarkers({ resource: uri });
+  showErrors(markers);
+});
+
+showErrors([]);

config-checker/src/style.css

@@ -0,0 +1,86 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 14px;
+  background: linear-gradient(45deg, #040a0e, #27699e);
+  color: #f8f8f8;
+  margin: 0;
+}
+
+.wrap {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  gap: 16px;
+}
+
+.section {
+  background-color: #000000b8;
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.397);
+}
+
+.title {
+  flex: 0 0 32px;
+  background-color: #ffffff11;
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+}
+
+.title h1 {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.content {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.editor-wrap {
+  flex: 0 0 100%;
+
+  display: flex;
+  flex-direction: column;
+}
+
+#editor {
+  flex: 0 0 100%;
+}
+
+.monaco-editor {
+  outline: 0 !important;
+}
+
+.errors-wrap {
+  flex: 0 0 100%;
+
+  display: flex;
+  flex-direction: column;
+  
+  padding: 10px;
+}
+
+#errors {
+  flex: 0 0 max(300px, 40vh);
+}
+
+.error {
+  color: hsl(10.7deg 58.76% 57.09%);
+}
+
+.noErrors {
+  color: hsl(93.81deg 56.52% 52.07%);
+  font-weight: 700;
+}

config-checker/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

config-checker/src/yaml.worker.js

@@ -0,0 +1 @@
+import "monaco-yaml/yaml.worker.js";