t/tetratto
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity Actions

add: better domain editor ui

Browse source
This commit is contained in:
trisua 2025-07-08 15:21:57 -04:00
parent 4ebd7e6c2b
commit 78c9b3349d
4 changed files with 112 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

3
crates/app/src/public/html/littleweb/browser.lisp
View file

@ -91,6 +91,7 @@
position: fixed; position: fixed;
width: calc(100dvw - (62px + var(--pad-2) * 2)) !important; width: calc(100dvw - (62px + var(--pad-2) * 2)) !important;
left: var(--pad-2); left: var(--pad-2);
z-index: 2;
} }
} }
@ -101,7 +102,7 @@
height: var(--h); height: var(--h);
min-height: var(--h); min-height: var(--h);
max-height: var(--h); max-height: var(--h);
font-size: 14px; font-size: 16px;
} }
#panel button:not(.inner *), #panel button:not(.inner *),

73
crates/app/src/public/html/littleweb/domain.lisp
View file

@ -72,7 +72,7 @@
("class" "card hidden w-full lowered flex flex-col gap-2") ("class" "card hidden w-full lowered flex flex-col gap-2")
("onsubmit" "add_data_from_form(event)") ("onsubmit" "add_data_from_form(event)")
(div (div
("class" "flex gap-2") ("class" "flex gap-2 flex-collapse")
(div (div
("class" "flex w-full flex-col gap-1") ("class" "flex w-full flex-col gap-1")
(label (label
@ -119,44 +119,47 @@
(icon (text "check")) (icon (text "check"))
(str (text "general:action.save"))))) (str (text "general:action.save")))))
; data ; data
(table (div
(thead ("class" "w-full")
(tr ("style" "max-width: 100%; overflow: auto")
(th (text "Name")) (table
(th (text "Type")) (thead
(th (text "Value")) (tr
(th (text "Actions")))) (th (text "Name"))
(th (text "Type"))
(th (text "Value"))
(th (text "Actions"))))
(tbody (tbody
(text "{% for item in domain.data -%}") (text "{% for item in domain.data -%}")
(tr (tr
(td (text "{{ item[0] }}")) (td (text "{{ item[0] }}"))
(text "{% for k,v in item[1] -%}") (text "{% for k,v in item[1] -%}")
(td (text "{{ k }}")) (td (text "{{ k }}"))
(td (text "{{ v }}")) (td (text "{{ v }}"))
(text "{%- endfor %}") (text "{%- endfor %}")
(td (td
("style" "overflow: auto") ("style" "overflow: auto")
(div
("class" "dropdown")
(button
("class" "camo small")
("onclick" "trigger('atto::hooks::dropdown', [event])")
("exclude" "dropdown")
(icon (text "ellipsis")))
(div (div
("class" "inner") ("class" "dropdown")
(button (button
("onclick" "rename_data('{{ item[0] }}')") ("class" "camo small")
(icon (text "pencil")) ("onclick" "trigger('atto::hooks::dropdown', [event])")
(str (text "littleweb:action.rename"))) ("exclude" "dropdown")
(icon (text "ellipsis")))
(div
("class" "inner")
(button
("onclick" "rename_data('{{ item[0] }}')")
(icon (text "pencil"))
(str (text "littleweb:action.rename")))
(button (button
("class" "red") ("class" "red")
("onclick" "remove_data('{{ item[0] }}')") ("onclick" "remove_data('{{ item[0] }}')")
(icon (text "trash")) (icon (text "trash"))
(str (text "general:action.delete"))))))) (str (text "general:action.delete")))))))
(text "{%- endfor %}")))))) (text "{%- endfor %}")))))))
(script ("id" "domain_data") ("type" "application/json") (text "{{ domain.data|json_encode()|safe }}")) (script ("id" "domain_data") ("type" "application/json") (text "{{ domain.data|json_encode()|safe }}"))
(script (script

115
crates/app/src/public/html/littleweb/service.lisp
View file

@ -14,9 +14,24 @@
(div (div
("class" "card-nest") ("class" "card-nest")
(div (div
("class" "card small") ("class" "card small flex flex-col gap-2")
(b (div
(text "{{ service.name }}"))) ("class" "flex w-full gap-2 justify-between")
(b
(text "{{ service.name }}"))
(button
("class" "small lowered")
("title" "Help")
("onclick" "document.getElementById('site_help').classList.toggle('hidden')")
(icon (text "circle-question-mark"))))
(div
("class" "card w-full lowered flex flex-col gap-2 hidden no_p_margin")
("id" "site_help")
(p (text "Your site should include an \"index.html\" file in order to show content on its homepage."))
(p (text "In the HTML editor, you can type `!` and use the provided suggestion to get an HTML boilerplate."))
(p (text "After you've created a page, you can click \"Copy ID\" and go to manage a domain you own. On the domain management page, click \"Add\" and paste the ID you copied into the value field."))))
(div (div
("class" "flex gap-2 flex-wrap card") ("class" "flex gap-2 flex-wrap card")
@ -72,53 +87,56 @@
("class" "card flex flex-col gap-2") ("class" "card flex flex-col gap-2")
(text "{% if not file or file.children|length > 0 -%}") (text "{% if not file or file.children|length > 0 -%}")
; directory browser ; directory browser
(table (div
(thead ("class" "w-full")
(tr ("style" "max-width: 100%; overflow: auto")
(th (text "Name")) (table
(th (text "Type")) (thead
(th (text "Children")) (tr
(th (text "Actions")))) (th (text "Name"))
(th (text "Type"))
(th (text "Children"))
(th (text "Actions"))))
(tbody (tbody
(text "{% for item in files %}") (text "{% for item in files %}")
(tr (tr
(td (td
("class" "flex gap-2 items-center") ("class" "flex gap-2 items-center")
(text "{% if item.children|length > 0 -%}") (text "{% if item.children|length > 0 -%}")
(icon (text "folder")) (icon (text "folder"))
(text "{% else %}") (text "{% else %}")
(icon (text "file")) (icon (text "file"))
(text "{%- endif %}") (text "{%- endif %}")
(a (a
("href" "?path={{ path }}/{{ item.name }}") ("href" "?path={{ path }}/{{ item.name }}")
("data-turbo" "false") ("data-turbo" "false")
(text "{{ item.name }}"))) (text "{{ item.name }}")))
(td (text "{{ item.mime }}")) (td (text "{{ item.mime }}"))
(td (text "{{ item.children|length }}")) (td (text "{{ item.children|length }}"))
(td (td
("style" "overflow: auto") ("style" "overflow: auto")
(div
("class" "dropdown")
(button
("class" "camo small")
("onclick" "trigger('atto::hooks::dropdown', [event])")
("exclude" "dropdown")
(icon (text "ellipsis")))
(div (div
("class" "inner") ("class" "dropdown")
(button (button
("onclick" "rename_file('{{ item.id }}')") ("class" "camo small")
(icon (text "pencil")) ("onclick" "trigger('atto::hooks::dropdown', [event])")
(str (text "littleweb:action.rename"))) ("exclude" "dropdown")
(icon (text "ellipsis")))
(div
("class" "inner")
(button
("onclick" "rename_file('{{ item.id }}')")
(icon (text "pencil"))
(str (text "littleweb:action.rename")))
(button (button
("class" "red") ("class" "red")
("onclick" "remove_file('{{ item.id }}')") ("onclick" "remove_file('{{ item.id }}')")
(icon (text "trash")) (icon (text "trash"))
(str (text "general:action.delete"))))))) (str (text "general:action.delete")))))))
(text "{% endfor %}"))) (text "{% endfor %}"))))
(text "{% else %}") (text "{% else %}")
; file editor ; file editor
(div ("id" "editor_container") ("class" "w-full") ("style" "height: 600px")) (div ("id" "editor_container") ("class" "w-full") ("style" "height: 600px"))
@ -319,6 +337,7 @@
(text "{% if file and file.mime != 'Plain' -%}") (text "{% if file and file.mime != 'Plain' -%}")
(script ("src" "https://unpkg.com/monaco-editor@0.52.2/min/vs/loader.js")) (script ("src" "https://unpkg.com/monaco-editor@0.52.2/min/vs/loader.js"))
(script ("src" "https://unpkg.com/emmet-monaco-es/dist/emmet-monaco.min.js"))
(script ("id" "file_content") ("type" "text/plain") (text "{{ file.content|remove_script_tags|safe }}")) (script ("id" "file_content") ("type" "text/plain") (text "{{ file.content|remove_script_tags|safe }}"))
(script (script
(text "require.config({ paths: { vs: \"https://unpkg.com/monaco-editor@0.52.2/min/vs\" } }); (text "require.config({ paths: { vs: \"https://unpkg.com/monaco-editor@0.52.2/min/vs\" } });
@ -337,10 +356,16 @@
style.innerText = '@import \"https://unpkg.com/monaco-editor@0.52.2/min/vs/editor/editor.main.css\";'; style.innerText = '@import \"https://unpkg.com/monaco-editor@0.52.2/min/vs/editor/editor.main.css\";';
shadow.appendChild(style); shadow.appendChild(style);
emmetMonaco.emmetHTML();
emmetMonaco.emmetCSS();
globalThis.editor = monaco.editor.create(inner, { globalThis.editor = monaco.editor.create(inner, {
value: document.getElementById(\"file_content\").innerText.replaceAll(\"&lt;/script&gt;\", \"</script\" + \">\"), value: document.getElementById(\"file_content\").innerText.replaceAll(\"&lt;/script&gt;\", \"</script\" + \">\"),
language: MIME_MODES[\"{{ file.mime }}\"], language: MIME_MODES[\"{{ file.mime }}\"],
theme: \"vs-dark\", theme: \"vs-dark\",
suggest: {
snippetsPreventQuickSuggestions: false,
},
}); });
});")) });"))
(text "{%- endif %}") (text "{%- endif %}")

3
crates/core/src/model/littleweb.rs
View file

@ -193,7 +193,8 @@ macro_rules! define_domain_tlds {
define_domain_tlds!( define_domain_tlds!(
Bunny, Tet, Cool, Qwerty, Boy, Girl, Them, Quack, Bark, Meow, Silly, Wow, Neko, Yay, Lol, Love, Bunny, Tet, Cool, Qwerty, Boy, Girl, Them, Quack, Bark, Meow, Silly, Wow, Neko, Yay, Lol, Love,
Fun, Gay, City, Woah, Clown, Apple, Yaoi, Yuri, World, Wav, Zero, Evil, Dragon, Yum, Site Fun, Gay, City, Woah, Clown, Apple, Yaoi, Yuri, World, Wav, Zero, Evil, Dragon, Yum, Site, All,
Me, Bug, Slop, Retro, Eye, Neo, Spring
); );
#[derive(Debug, Clone, Serialize, Deserialize)] #[derive(Debug, Clone, Serialize, Deserialize)]