Update theme and include plain_ex

app/main.py

@@ -7,6 +7,7 @@
 import json
 import uuid
 import shlex
+import shutil
 import tempfile
 
 app = FastAPI()
@@ -38,6 +39,14 @@ async def compile(request: Request) -> Response:
     temp_dir: str = tempfile.gettempdir()
     id: str = get_unique_file_name()
     mp_code: str = request_obj["code"]
+
+    if not mp_code.strip().endswith("end"):
+        mp_code += "\nend\n"
+
+    if "plain_ex" in mp_code:
+        shutil.copyfile(os.path.join('static', 'plain_ex.mp'),
+                        os.path.join(temp_dir, 'plain_ex.mp'))
+
     with open(os.path.join(temp_dir, id + ".mp"), "w") as file_object:
         file_object.write(mp_code)
         file_object.close()

static/main.js

@@ -12,7 +12,7 @@ z2 = (x1+250, y1+250);
 z3 = (x2+250, y1);
 z4 = (x2, y0);
 pickup calligraphicpen;
-draw z0..z1..z2..z3..z4 withcolor blue;
+draw z0..z1..z2..z3..z4 withcolor white;
 endfig;
 end
 `
@@ -44,7 +44,7 @@ document.addEventListener("DOMContentLoaded", (event) => {
         {
             lineNumbers: true,
             mode: "metapost",
-            theme: "default",
+            theme: "nord",
             value: placeholdercode
         });
     editor.on("change", (editor) => {

static/nord.css

@@ -0,0 +1,42 @@
+/* Based on arcticicestudio's Nord theme */
+/* https://github.com/arcticicestudio/nord */
+
+.cm-s-nord.CodeMirror { background: #2e3440; color: #d8dee9; }
+.cm-s-nord div.CodeMirror-selected { background: #434c5e; }
+.cm-s-nord .CodeMirror-line::selection, .cm-s-nord .CodeMirror-line > span::selection, .cm-s-nord .CodeMirror-line > span > span::selection { background: #3b4252; }
+.cm-s-nord .CodeMirror-line::-moz-selection, .cm-s-nord .CodeMirror-line > span::-moz-selection, .cm-s-nord .CodeMirror-line > span > span::-moz-selection { background: #3b4252; }
+.cm-s-nord .CodeMirror-gutters { background: #2e3440; border-right: 0px; }
+.cm-s-nord .CodeMirror-guttermarker { color: #4c566a; }
+.cm-s-nord .CodeMirror-guttermarker-subtle { color: #4c566a; }
+.cm-s-nord .CodeMirror-linenumber { color: #4c566a; }
+.cm-s-nord .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
+
+.cm-s-nord span.cm-comment { color: #4c566a; }
+.cm-s-nord span.cm-atom { color: #b48ead; }
+.cm-s-nord span.cm-number { color: #b48ead; }
+
+.cm-s-nord span.cm-comment.cm-attribute { color: #97b757; }
+.cm-s-nord span.cm-comment.cm-def { color: #bc9262; }
+.cm-s-nord span.cm-comment.cm-tag { color: #bc6283; }
+.cm-s-nord span.cm-comment.cm-type { color: #5998a6; }
+
+.cm-s-nord span.cm-property, .cm-s-nord span.cm-attribute { color: #8FBCBB; }
+.cm-s-nord span.cm-keyword { color: #81A1C1; }
+.cm-s-nord span.cm-builtin { color: #81A1C1; }
+.cm-s-nord span.cm-string { color: #A3BE8C; }
+
+.cm-s-nord span.cm-variable { color: #d8dee9; }
+.cm-s-nord span.cm-variable-2 { color: #d8dee9; }
+.cm-s-nord span.cm-variable-3, .cm-s-nord span.cm-type { color: #d8dee9; }
+.cm-s-nord span.cm-def { color: #8FBCBB; }
+.cm-s-nord span.cm-bracket { color: #81A1C1; }
+.cm-s-nord span.cm-tag { color: #bf616a; }
+.cm-s-nord span.cm-header { color: #b48ead; }
+.cm-s-nord span.cm-link { color: #b48ead; }
+.cm-s-nord span.cm-error { background: #bf616a; color: #f8f8f0; }
+
+.cm-s-nord .CodeMirror-activeline-background { background: #3b4252; }
+.cm-s-nord .CodeMirror-matchingbracket {
+  text-decoration: underline;
+  color: white !important;
+}