Initial

2025-07-20 02:49:01 -04:00 · 2025-07-20 02:49:01 -04:00 · 94cec33b46
commit 94cec33b46
8 changed files with 1011 additions and 0 deletions
--- a/app/public/app.js
+++ b/app/public/app.js
@ -0,0 +1,134 @@
+// theme preference
+function media_theme_pref() {
+    document.documentElement.removeAttribute("class");
+
+    if (
+        window.matchMedia("(prefers-color-scheme: dark)").matches &&
+        (!window.localStorage.getItem("attobin:theme") ||
+            window.localStorage.getItem("attobin:theme") === "Auto")
+    ) {
+        document.documentElement.classList.add("dark");
+
+        document.getElementById("switch_light").classList.add("hidden");
+        document.getElementById("switch_dark").classList.remove("hidden");
+    } else if (
+        window.matchMedia("(prefers-color-scheme: light)").matches &&
+        (!window.localStorage.getItem("attobin:theme") ||
+            window.localStorage.getItem("attobin:theme") === "Auto")
+    ) {
+        document.documentElement.classList.remove("dark");
+
+        document.getElementById("switch_light").classList.remove("hidden");
+        document.getElementById("switch_dark").classList.add("hidden");
+    } else if (window.localStorage.getItem("attobin:theme")) {
+        /* restore theme */
+        const current = window.localStorage.getItem("attobin:theme");
+        document.documentElement.className = current.toLowerCase();
+
+        if (current === "Light") {
+            document.getElementById("switch_light").classList.remove("hidden");
+            document.getElementById("switch_dark").classList.add("hidden");
+        } else {
+            document.getElementById("switch_light").classList.add("hidden");
+            document.getElementById("switch_dark").classList.remove("hidden");
+        }
+    }
+}
+
+globalThis.set_theme = (theme) => {
+    window.localStorage.setItem("attobin:theme", theme);
+    document.documentElement.className = theme;
+    media_theme_pref();
+};
+
+media_theme_pref();
+
+// messages
+function get_cookie(key) {
+    return (document.cookie.split(`${key}=`)[1] || "").split(";")[0];
+}
+
+function check_message() {
+    const element = document.getElementById("messages");
+
+    const message = get_cookie("Atto-Message");
+    const message_good = get_cookie("Atto-Message-Good") === "true";
+
+    if (message) {
+        element.style.marginBottom = "1rem";
+        element.style.paddingLeft = "1rem";
+        element.innerHTML += `<li class="${message_good ? "green" : "red"}">${message.replaceAll('"', "")}</li>`;
+    }
+
+    // clear cookies
+    for (cookie of document.cookie.split(";")) {
+        // biome-ignore lint/suspicious/noDocumentCookie: cookie store is barely supported
+        document.cookie = `${cookie.split("=")[0]}=; expires=${new Date(0).toUTCString()}; path=/`;
+    }
+}
+
+check_message();
+
+// editor
+globalThis.init_editor = () => {
+    globalThis.editor = CodeMirror(document.getElementById("editor_tab"), {
+        value: (document.getElementById("editor_content") || { innerHTML: "" })
+            .innerHTML,
+        mode: "markdown",
+        lineWrapping: true,
+        lineNumbers: false,
+        autoCloseBrackets: true,
+        autofocus: true,
+        viewportMargin: Number.POSITIVE_INFINITY,
+        inputStyle: "contenteditable",
+        highlightFormatting: false,
+        fencedCodeBlockHighlighting: false,
+        xml: false,
+        smartIndent: true,
+        indentUnit: 4,
+        placeholder: "",
+        extraKeys: {
+            Home: "goLineLeft",
+            End: "goLineRight",
+            Enter: (cm) => {
+                cm.replaceSelection("\n");
+            },
+        },
+    });
+
+    window.addEventListener("beforeunload", (e) => {
+        e.preventDefault();
+        return null;
+    });
+};
+
+globalThis.tab_editor = () => {
+    document.getElementById("editor_tab").classList.remove("hidden");
+    document.getElementById("preview_tab").classList.add("hidden");
+
+    document.getElementById("editor_tab_button").classList.remove("camo");
+    document.getElementById("preview_tab_button").classList.add("camo");
+};
+
+globalThis.tab_preview = async () => {
+    // render
+    const res = await (
+        await fetch("/api/v1/render", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                content: globalThis.editor.getValue(),
+            }),
+        })
+    ).text();
+
+    document.getElementById("preview_tab").innerHTML = res;
+    hljs.highlightAll();
+
+    // ...
+    document.getElementById("editor_tab").classList.add("hidden");
+    document.getElementById("preview_tab").classList.remove("hidden");
+
+    document.getElementById("editor_tab_button").classList.add("camo");
+    document.getElementById("preview_tab_button").classList.remove("camo");
+};