fluffle/app/public/app.js

// 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");
};