fluffle/app/templates_src/index.lisp

(text "{% extends \"root.lisp\" %} {% block head %}")
(title
    (text "{{ name }}"))
(link ("rel" "icon") ("href" "/public/favicon.svg"))
(text "{% endblock %} {% block body %}")
(div
    ("class" "flex items-center bar")
    (button
        ("class" "button tab_button")
        ("id" "editor_tab_button")
        ("onclick" "tab_editor()")
        (text "Edit"))
    (button
        ("class" "button camo tab_button")
        ("id" "preview_tab_button")
        ("onclick" "tab_preview()")
        (text "Preview"))
    (button
        ("class" "button camo tab_button")
        ("id" "metadata_tab_button")
        ("onclick" "tab_metadata()")
        (text "Metadata")))
(div
    ("class" "card tab tabs")
    (div
        ("id" "editor_tab")
        ("class" "tab fadein"))
    (div
        ("id" "preview_tab")
        ("class" "tab fadein hidden container"))
    (div
        ("id" "metadata_tab")
        ("class" "tab fadein hidden")))
(form
    ("class" "w-full flex justify-between gap-2 flex-collapse-rev")
    ("style" "margin-top: var(--pad-2)")
    ("onsubmit" "create_entry(event)")
    (button
        ("class" "button")
        (text "Go"))
    (div
        ("class" "flex gap-2")
        (input
            ("class" "w-full")
            ("type" "text")
            ("minlength" "2")
            ("name" "edit_code")
            ("placeholder" "Custom edit code"))
        (input
            ("class" "w-full")
            ("type" "text")
            ("minlength" "2")
            ("maxlength" "32")
            ("name" "slug")
            ("oninput" "check_exists_input(event)")
            ("placeholder" "Custom url"))))
(text "{{ components::footer() }}")

; editor
(script ("src" "https://unpkg.com/codemirror@5.39.2/lib/codemirror.js"))
(script ("src" "https://unpkg.com/codemirror@5.39.2/mode/markdown/markdown.js"))
(script ("src" "https://unpkg.com/codemirror@5.39.2/addon/display/placeholder.js"))
(link ("rel" "stylesheet") ("href" "https://unpkg.com/codemirror@5.39.2/lib/codemirror.css"))
(script ("src" "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"))
(link ("rel" "stylesheet") ("href" "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css"))

(script
    (text "setTimeout(() => {
        globalThis.init_editor();
        globalThis.init_editor(\"metadata_editor\", \"plain\", \"metadata_tab\");
    }, 150);

    globalThis.create_entry = (e) => {
        e.preventDefault();
        fetch(\"/api/v1/entries\", {
            method: \"POST\",
            headers: {
                \"Content-Type\": \"application/json\",
            },
            body: JSON.stringify({
                content: globalThis.editor.getValue(),
                slug: e.target.slug.value || undefined,
                edit_code: e.target.edit_code.value || undefined,
                metadata: globalThis.metadata_editor.getValue(),
            }),
        })
            .then(res => res.json())
            .then((res) => {
                if (res.ok) {
                    globalThis.ALLOW_LEAVE = true;
                    document.cookie = `Atto-Message=\"Entry created! Your edit code: <code>${res.payload[1]}</code>.\"; path=/`;
                    document.cookie = \"Atto-Message-Good=true; path=/\";
                    window.location.href = `/${res.payload[0]}`;
                } else {
                    show_message(res.message, false);
                }
            })
    }"))
(text "{% endblock %}")