Initial
This commit is contained in:
commit
7d93dffaed
27 changed files with 7735 additions and 0 deletions
7
app/.gitignore
vendored
Normal file
7
app/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
docs/**/*
|
||||
!docs/example.md
|
||||
icons/
|
||||
templates_build/
|
||||
public/favicon.svg
|
||||
.env
|
||||
app.toml
|
||||
1
app/docs/example.md
Normal file
1
app/docs/example.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
# hi :)
|
||||
393
app/public/app.js
Normal file
393
app/public/app.js
Normal file
|
|
@ -0,0 +1,393 @@
|
|||
// theme preference
|
||||
function media_theme_pref() {
|
||||
document.documentElement.removeAttribute("class");
|
||||
|
||||
if (
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches &&
|
||||
(!window.localStorage.getItem("malachite.app:theme") ||
|
||||
window.localStorage.getItem("malachite.app: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("malachite.app:theme") ||
|
||||
window.localStorage.getItem("malachite.app: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("malachite.app:theme")) {
|
||||
/* restore theme */
|
||||
const current = window.localStorage.getItem("malachite.app: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.temporary_set_theme = (theme) => {
|
||||
document.documentElement.className = theme.toLowerCase();
|
||||
|
||||
if (theme === "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("malachite.app: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=/`;
|
||||
}
|
||||
}
|
||||
|
||||
globalThis.show_message = (message, message_good = true) => {
|
||||
const element = document.getElementById("messages");
|
||||
element.style.marginBottom = "1rem";
|
||||
element.style.paddingLeft = "1rem";
|
||||
element.innerHTML = `<li class="${message_good ? "green" : "red"}">${message.replaceAll('"', "")}</li>`;
|
||||
};
|
||||
|
||||
check_message();
|
||||
|
||||
// editor
|
||||
globalThis.init_editor = (
|
||||
name = "editor",
|
||||
mode = "markdown",
|
||||
element = "editor_tab",
|
||||
content_element = "editor_content",
|
||||
) => {
|
||||
globalThis[name] = CodeMirror(document.getElementById(element), {
|
||||
value: (document.getElementById(content_element) || { innerHTML: "" })
|
||||
.innerHTML,
|
||||
mode,
|
||||
lineWrapping: true,
|
||||
lineNumbers: false,
|
||||
autoCloseBrackets: true,
|
||||
autofocus: true,
|
||||
viewportMargin: Number.POSITIVE_INFINITY,
|
||||
inputStyle: "contenteditable",
|
||||
highlightFormatting: false,
|
||||
fencedCodeBlockHighlighting: false,
|
||||
xml: false,
|
||||
smartIndent: false,
|
||||
indentUnit: 4,
|
||||
tabSize: 4,
|
||||
indentWithTabs: false,
|
||||
placeholder: "",
|
||||
extraKeys: {
|
||||
Home: "goLineLeft",
|
||||
End: "goLineRight",
|
||||
Enter: (cm) => {
|
||||
cm.replaceSelection("\n");
|
||||
},
|
||||
Tab: "insertSoftTab",
|
||||
},
|
||||
});
|
||||
|
||||
if (name === "editor") {
|
||||
window.addEventListener("beforeunload", (e) => {
|
||||
if (!globalThis.ALLOW_LEAVE) {
|
||||
e.preventDefault();
|
||||
return null;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
globalThis.tab_editor = () => {
|
||||
document.getElementById("editor_tab").classList.remove("hidden");
|
||||
document.getElementById("preview_tab").classList.add("hidden");
|
||||
document.getElementById("metadata_tab").classList.add("hidden");
|
||||
|
||||
document.getElementById("editor_tab_button").classList.remove("camo");
|
||||
document.getElementById("preview_tab_button").classList.add("camo");
|
||||
document.getElementById("metadata_tab_button").classList.add("camo");
|
||||
|
||||
if (document.getElementById("metadata_css")) {
|
||||
document.getElementById("metadata_css").remove();
|
||||
}
|
||||
};
|
||||
|
||||
globalThis.get_preview = async () => {
|
||||
return await (
|
||||
await fetch("/api/v1/render", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
content: globalThis.editor.getValue(),
|
||||
metadata: globalThis.metadata_editor.getValue(),
|
||||
}),
|
||||
})
|
||||
).text();
|
||||
};
|
||||
|
||||
globalThis.tab_preview = async () => {
|
||||
if (
|
||||
!document
|
||||
.getElementById("preview_tab_button")
|
||||
.classList.contains("camo")
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
// render
|
||||
const res = await get_preview();
|
||||
|
||||
document.getElementById("preview_tab").innerHTML = res;
|
||||
hljs.highlightAll();
|
||||
|
||||
// ...
|
||||
document.getElementById("editor_tab").classList.add("hidden");
|
||||
document.getElementById("preview_tab").classList.remove("hidden");
|
||||
document.getElementById("metadata_tab").classList.add("hidden");
|
||||
|
||||
document.getElementById("editor_tab_button").classList.add("camo");
|
||||
document.getElementById("preview_tab_button").classList.remove("camo");
|
||||
document.getElementById("metadata_tab_button").classList.add("camo");
|
||||
};
|
||||
|
||||
globalThis.first_time_on_metadata_tab = true;
|
||||
globalThis.tab_metadata = () => {
|
||||
document.getElementById("editor_tab").classList.add("hidden");
|
||||
document.getElementById("preview_tab").classList.add("hidden");
|
||||
document.getElementById("metadata_tab").classList.remove("hidden");
|
||||
|
||||
document.getElementById("editor_tab_button").classList.add("camo");
|
||||
document.getElementById("preview_tab_button").classList.add("camo");
|
||||
document.getElementById("metadata_tab_button").classList.remove("camo");
|
||||
|
||||
if (globalThis.first_time_on_metadata_tab) {
|
||||
globalThis.metadata_editor.refresh();
|
||||
}
|
||||
|
||||
globalThis.first_time_on_metadata_tab = false;
|
||||
};
|
||||
|
||||
let exists_timeout = null;
|
||||
globalThis.check_exists_input = (e) => {
|
||||
if (exists_timeout) {
|
||||
clearTimeout(exists_timeout);
|
||||
}
|
||||
|
||||
exists_timeout = setTimeout(async () => {
|
||||
if (e.target.value.length < 2 || e.target.value.length > 32) {
|
||||
e.target.setCustomValidity("");
|
||||
e.target.removeAttribute("data-invalid");
|
||||
e.target.reportValidity();
|
||||
return;
|
||||
}
|
||||
|
||||
const exists = (
|
||||
await (await fetch(`/api/v1/entries/${e.target.value}`)).json()
|
||||
).payload;
|
||||
|
||||
console.log(exists);
|
||||
if (exists) {
|
||||
e.target.setCustomValidity("Slug is already in use");
|
||||
e.target.setAttribute("data-invalid", "true");
|
||||
} else {
|
||||
e.target.setCustomValidity("");
|
||||
e.target.removeAttribute("data-invalid");
|
||||
}
|
||||
|
||||
e.target.reportValidity();
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
// components
|
||||
function close_dropdowns() {
|
||||
for (const dropdown of Array.from(
|
||||
document.querySelectorAll(".inner.open"),
|
||||
)) {
|
||||
dropdown.classList.remove("open");
|
||||
}
|
||||
}
|
||||
|
||||
globalThis.open_dropdown = (event) => {
|
||||
event.stopImmediatePropagation();
|
||||
let target = event.target;
|
||||
|
||||
while (!target.matches(".dropdown")) {
|
||||
target = target.parentElement;
|
||||
}
|
||||
|
||||
// close all others
|
||||
close_dropdowns();
|
||||
|
||||
// open
|
||||
setTimeout(() => {
|
||||
for (const dropdown of Array.from(target.querySelectorAll(".inner"))) {
|
||||
// check y
|
||||
const box = target.getBoundingClientRect();
|
||||
|
||||
let parent = dropdown.parentElement;
|
||||
|
||||
while (!parent.matches("html, .window")) {
|
||||
parent = parent.parentElement;
|
||||
}
|
||||
|
||||
let parent_height = parent.getBoundingClientRect().y;
|
||||
|
||||
if (parent.nodeName === "HTML") {
|
||||
parent_height = window.screen.height;
|
||||
}
|
||||
|
||||
const scroll = window.scrollY;
|
||||
const height = parent_height;
|
||||
const y = box.y + scroll;
|
||||
|
||||
if (y > height - scroll - 375) {
|
||||
dropdown.classList.add("top");
|
||||
} else {
|
||||
dropdown.classList.remove("top");
|
||||
}
|
||||
|
||||
// open
|
||||
dropdown.classList.add("open");
|
||||
|
||||
if (dropdown.classList.contains("open")) {
|
||||
dropdown.removeAttribute("aria-hidden");
|
||||
} else {
|
||||
dropdown.setAttribute("aria-hidden", "true");
|
||||
}
|
||||
}
|
||||
}, 5);
|
||||
};
|
||||
|
||||
globalThis.init_dropdowns = (bind_to) => {
|
||||
for (const dropdown of Array.from(document.querySelectorAll(".inner"))) {
|
||||
dropdown.setAttribute("aria-hidden", "true");
|
||||
}
|
||||
|
||||
bind_to.addEventListener("click", (event) => {
|
||||
if (
|
||||
event.target.matches(".dropdown") ||
|
||||
event.target.matches("[exclude=dropdown]")
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (const dropdown of Array.from(
|
||||
document.querySelectorAll(".inner.open"),
|
||||
)) {
|
||||
dropdown.classList.remove("open");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
globalThis.METADATA_CSS_ENABLED = true;
|
||||
globalThis.toggle_metadata_css = (e) => {
|
||||
e.target.classList.add("yellow");
|
||||
|
||||
METADATA_CSS_ENABLED = !METADATA_CSS_ENABLED;
|
||||
if (!METADATA_CSS_ENABLED) {
|
||||
media_theme_pref(); // user user theme
|
||||
document.getElementById("metadata_css").remove(); // remove css
|
||||
|
||||
// reset colored text
|
||||
for (const element of Array.from(
|
||||
document.querySelectorAll("#content_rect .color_block"),
|
||||
)) {
|
||||
element.removeAttribute("style");
|
||||
element.classList.remove("color_block");
|
||||
}
|
||||
|
||||
// strikethrough auto theme since it's disabled
|
||||
if (document.getElementById("auto_theme")) {
|
||||
document.getElementById("auto_theme").style.textDecoration =
|
||||
"line-through";
|
||||
}
|
||||
|
||||
// remove styles
|
||||
for (const element of Array.from(
|
||||
document.querySelectorAll("#content_rect style"),
|
||||
)) {
|
||||
element.remove();
|
||||
}
|
||||
|
||||
for (const element of Array.from(
|
||||
document.querySelectorAll("#content_rect [style]"),
|
||||
)) {
|
||||
element.removeAttribute("style");
|
||||
}
|
||||
} else {
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
globalThis.hash_check = (hash) => {
|
||||
if (hash.startsWith("#/")) {
|
||||
for (const x of Array.from(document.querySelectorAll(".subpage"))) {
|
||||
x.classList.add("hidden");
|
||||
}
|
||||
|
||||
document.getElementById(hash).classList.remove("hidden");
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("hashchange", (_) => hash_check(window.location.hash));
|
||||
|
||||
setTimeout(() => {
|
||||
// run initial hash check
|
||||
hash_check(window.location.hash);
|
||||
}, 150);
|
||||
|
||||
globalThis.submitter_load = (submitter) => {
|
||||
return {
|
||||
load() {
|
||||
submitter.querySelector("[ui_ident=text]").classList.add("hidden");
|
||||
submitter
|
||||
.querySelector("[ui_ident=loader]")
|
||||
.classList.remove("hidden");
|
||||
submitter.setAttribute("disabled", "true");
|
||||
},
|
||||
failed() {
|
||||
submitter
|
||||
.querySelector("[ui_ident=text]")
|
||||
.classList.remove("hidden");
|
||||
submitter
|
||||
.querySelector("[ui_ident=loader]")
|
||||
.classList.add("hidden");
|
||||
submitter.removeAttribute("disabled");
|
||||
},
|
||||
};
|
||||
};
|
||||
1
app/public/reference
Symbolic link
1
app/public/reference
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../../target/doc
|
||||
853
app/public/style.css
Normal file
853
app/public/style.css
Normal file
|
|
@ -0,0 +1,853 @@
|
|||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
--color-super-lowered: oklch(87.1% 0.006 286.286);
|
||||
--color-lowered: oklch(96.7% 0.001 286.375);
|
||||
--color-surface: oklch(92.9% 0.013 255.508);
|
||||
--color-raised: oklch(98.4% 0.003 247.858);
|
||||
--color-super-raised: oklch(96.8% 0.007 247.896);
|
||||
--color-text: hsl(0, 0%, 5%);
|
||||
|
||||
--color-link: #2949b2;
|
||||
--color-shadow: rgba(0, 0, 0, 0.08);
|
||||
--color-red: hsl(0, 84%, 40%);
|
||||
--color-green: hsl(100, 84%, 20%);
|
||||
--color-yellow: oklch(47% 0.157 37.304);
|
||||
--color-purple: hsl(284, 84%, 20%);
|
||||
--color-green-lowered: hsl(100, 84%, 15%);
|
||||
--color-red-lowered: hsl(0, 84%, 35%);
|
||||
|
||||
--shadow-x-offset: 0;
|
||||
--shadow-y-offset: 0.125rem;
|
||||
--shadow-size: var(--pad-1);
|
||||
|
||||
--pad-1: 0.2rem;
|
||||
--pad-2: 0.35rem;
|
||||
--pad-3: 0.5rem;
|
||||
--pad-4: 1rem;
|
||||
|
||||
--radius: 0.2rem;
|
||||
--nav-height: 36px;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.dark,
|
||||
.dark * {
|
||||
--color-super-lowered: var(--color-super-raised);
|
||||
--color-lowered: var(--color-raised);
|
||||
--color-surface: oklch(21% 0.006 285.885);
|
||||
--color-raised: oklch(27.4% 0.006 286.033);
|
||||
--color-super-raised: oklch(37% 0.013 285.805);
|
||||
--color-text: hsl(0, 0%, 95%);
|
||||
|
||||
--color-link: #93c5fd;
|
||||
--color-red: hsl(0, 94%, 82%);
|
||||
--color-green: hsl(100, 94%, 82%);
|
||||
--color-yellow: oklch(90.1% 0.076 70.697);
|
||||
--color-purple: hsl(284, 94%, 82%);
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
line-height: 1.5;
|
||||
letter-spacing: 0.15px;
|
||||
font-family:
|
||||
"Inter",
|
||||
"Poppins",
|
||||
"Roboto",
|
||||
ui-sans-serif,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
system-ui,
|
||||
sans-serif,
|
||||
"Apple Color Emoji",
|
||||
"Segoe UI Emoji",
|
||||
"Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
color: var(--color-text);
|
||||
background: var(--color-surface);
|
||||
overflow: auto auto;
|
||||
height: 100dvh;
|
||||
scroll-behavior: smooth;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 80ch;
|
||||
margin: var(--pad-4) auto;
|
||||
padding: var(--pad-3) var(--pad-4);
|
||||
}
|
||||
|
||||
article {
|
||||
margin: var(--pad-2) 0;
|
||||
height: calc(100dvh - var(--pad-4) - var(--nav-height) * 2);
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1 0 auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.tabs .tab {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fadein {
|
||||
animation: fadein ease-in-out 1 0.5s forwards running;
|
||||
}
|
||||
|
||||
nav {
|
||||
/* background: var(--color-raised); */
|
||||
height: var(--nav-height);
|
||||
/* position: sticky;
|
||||
z-index: 2;
|
||||
top: 2; */
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
main,
|
||||
article,
|
||||
nav,
|
||||
header,
|
||||
footer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
article {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.flex_collapse_rev {
|
||||
flex-direction: column-reverse !important;
|
||||
}
|
||||
}
|
||||
|
||||
.container:not(#preview_tab):not(#tabs_group) {
|
||||
margin: 10px auto 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content_container {
|
||||
margin: 0 auto var(--pad-2);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.content_container {
|
||||
max-width: 540px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.content_container {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.content_container {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
article {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content_container {
|
||||
max-width: 1100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
video {
|
||||
max-width: 100%;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
/* card */
|
||||
.card {
|
||||
padding: var(--pad-4);
|
||||
background: var(--color-raised);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.card_nest .card:nth-child(1) {
|
||||
background: var(--color-super-raised);
|
||||
padding: var(--pad-2) var(--pad-4);
|
||||
}
|
||||
|
||||
/* button */
|
||||
.button {
|
||||
--h: 36px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--pad-2);
|
||||
padding: var(--pad-2) calc(var(--pad-3) * 1.5);
|
||||
cursor: pointer;
|
||||
background: var(--color-raised);
|
||||
color: var(--color-text);
|
||||
outline: none;
|
||||
border: none;
|
||||
width: max-content;
|
||||
height: var(--h);
|
||||
line-height: var(--h);
|
||||
transition: background 0.15s;
|
||||
text-decoration: none !important;
|
||||
user-select: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
opacity: 50%;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.button.small {
|
||||
--h: 28px;
|
||||
}
|
||||
|
||||
.button:not(:has(.button:hover)):not(.camo):hover {
|
||||
background: var(--color-super-raised);
|
||||
}
|
||||
|
||||
.button.camo {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.bar .button:not(.simple).camo:hover {
|
||||
color: var(--color-link);
|
||||
}
|
||||
|
||||
.button.simple {
|
||||
--size: 18px;
|
||||
font-weight: 600;
|
||||
padding: var(--pad-2) !important;
|
||||
border-radius: var(--radius);
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
aspect-ratio: 1 / 1;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.button.surface {
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.button.surface.simple:is(.camo *) {
|
||||
background: var(--color-super-raised);
|
||||
}
|
||||
|
||||
.button.green:not(.dark *) {
|
||||
background: var(--color-green);
|
||||
color: white !important;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-green-lowered) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.button.red:not(.dark *) {
|
||||
background: var(--color-red);
|
||||
color: white !important;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-red-lowered) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* dropdown */
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown .inner {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
box-shadow: var(--shadow-x-offset) var(--shadow-y-offset) var(--shadow-size)
|
||||
var(--color-shadow);
|
||||
background: var(--color-raised);
|
||||
color: inherit;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
width: max-content;
|
||||
max-width: 15rem;
|
||||
}
|
||||
|
||||
.dropdown .inner.left {
|
||||
right: unset;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.dropdown .inner.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.dropdown .inner .button,
|
||||
.dropdown .inner .title {
|
||||
padding: var(--pad-3) var(--pad-4);
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dropdown .inner .title {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dropdown:has(.inner.open) .button:nth-child(1):not(.inner *) {
|
||||
background: var(--color-raised);
|
||||
}
|
||||
|
||||
.dropdown .inner.top {
|
||||
top: unset;
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
.dropdown .inner.left {
|
||||
left: 0;
|
||||
right: unset;
|
||||
}
|
||||
|
||||
/* input */
|
||||
input {
|
||||
--h: 36px;
|
||||
padding: var(--pad-2) calc(var(--pad-3) * 1.5);
|
||||
background: var(--color-raised);
|
||||
color: var(--color-text);
|
||||
outline: none;
|
||||
border: none;
|
||||
width: max-content;
|
||||
transition:
|
||||
background 0.15s,
|
||||
border 0.15s;
|
||||
height: var(--h);
|
||||
line-height: var(--h);
|
||||
border-left: solid 0px transparent;
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):focus {
|
||||
outline: solid 2px var(--color-primary);
|
||||
box-shadow: 0 0 0 4px oklch(87% 0.065 274.039 / 25%);
|
||||
background: var(--color-super-raised);
|
||||
}
|
||||
|
||||
input:user-invalid,
|
||||
input[data-invalid] {
|
||||
border-left: inset 5px var(--color-red);
|
||||
}
|
||||
|
||||
input.surface {
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
/* typo */
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: var(--pad-4) !important;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.post_right:not(.repost) {
|
||||
max-width: calc(100% - 52px);
|
||||
}
|
||||
|
||||
.rhs {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.name {
|
||||
max-width: 250px;
|
||||
overflow: hidden;
|
||||
/* overflow-wrap: break-word; */
|
||||
overflow-wrap: anywhere;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 901px) {
|
||||
.name.shorter {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.name.lg\:long {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
.rhs {
|
||||
width: calc(100% - 23rem) !important;
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: var(--pad-2) 0 var(--pad-2) var(--pad-4);
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: var(--pad-2) var(--pad-4);
|
||||
border-left: solid 5px var(--color-primary);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: var(--pad-4);
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
font-family: "Jetbrains Mono", "Fire Code", monospace;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.8rem !important;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
code * {
|
||||
font-size: 0.8rem !important;
|
||||
}
|
||||
|
||||
code:not(pre *) {
|
||||
padding: var(--pad-1) var(--pad-2);
|
||||
background: oklch(98% 0.016 73.684 / 25%);
|
||||
color: oklch(90.1% 0.076 70.697);
|
||||
border-radius: var(--radius);
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
code:not(pre *):not(.dark *) {
|
||||
background: oklch(83.7% 0.128 66.29 / 25%);
|
||||
color: oklch(47% 0.157 37.304);
|
||||
}
|
||||
|
||||
svg.icon {
|
||||
stroke: currentColor;
|
||||
fill: currentColor;
|
||||
width: 18px;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
svg.icon.filled {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.no_fill svg.icon {
|
||||
fill: transparent;
|
||||
}
|
||||
|
||||
button svg {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: solid 1px var(--color-super-lowered) !important;
|
||||
border-left: 0;
|
||||
border-bottom: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
hr.margin,
|
||||
.container hr {
|
||||
margin: var(--pad-4) 0;
|
||||
}
|
||||
|
||||
span.img_sizer {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
p,
|
||||
li,
|
||||
span,
|
||||
code {
|
||||
max-width: 100%;
|
||||
overflow-wrap: normal;
|
||||
text-wrap: stable;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: var(--pad-4);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: var(--pad-3);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: var(--pad-4) 0;
|
||||
font-weight: 700;
|
||||
width: -moz-max-content;
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 2rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--color-link);
|
||||
}
|
||||
|
||||
.color_block a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a.flush {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline;
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.img_sizer img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
--size: 18px;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: 1rem;
|
||||
border-left: solid 5px var(--color-green);
|
||||
color: var(--color-green);
|
||||
opacity: 75%;
|
||||
}
|
||||
|
||||
p,
|
||||
span {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* codemirror/hljs */
|
||||
.CodeMirror {
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
background: transparent !important;
|
||||
font-family: inherit !important;
|
||||
height: 10rem !important;
|
||||
min-height: 100%;
|
||||
max-height: 100%;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.CodeMirror-cursor {
|
||||
border-color: rgb(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
.CodeMirror-cursor:is(.dark *) {
|
||||
border-color: rgb(255, 255, 255) !important;
|
||||
}
|
||||
|
||||
.CodeMirror-cursor {
|
||||
height: 22px !important;
|
||||
}
|
||||
|
||||
[role="presentation"]::-moz-selection,
|
||||
[role="presentation"] *::-moz-selection {
|
||||
background-color: rgb(191, 219, 254) !important;
|
||||
}
|
||||
|
||||
[role="presentation"]::selection,
|
||||
[role="presentation"] *::selection,
|
||||
.CodeMirror-selected {
|
||||
background-color: rgb(191, 219, 254) !important;
|
||||
}
|
||||
|
||||
[role="presentation"]:is(.dark *)::-moz-selection,
|
||||
[role="presentation"] *:is(.dark *)::-moz-selection {
|
||||
background-color: rgb(64, 64, 64) !important;
|
||||
}
|
||||
|
||||
[role="presentation"]:is(.dark *)::selection,
|
||||
[role="presentation"] *:is(.dark *)::selection,
|
||||
.CodeMirror-selected:is(.dark *) {
|
||||
background-color: rgb(64, 64, 64) !important;
|
||||
}
|
||||
|
||||
.cm-header {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.cm-variable-2,
|
||||
.cm-quote,
|
||||
.cm-keyword,
|
||||
.cm-string,
|
||||
.cm-atom,
|
||||
.hljs-string {
|
||||
color: rgb(63, 98, 18) !important;
|
||||
}
|
||||
|
||||
.cm-variable-2:is(.dark *),
|
||||
.cm-quote:is(.dark *),
|
||||
.cm-keyword:is(.dark *),
|
||||
.cm-string:is(.dark *),
|
||||
.cm-atom:is(.dark *),
|
||||
.hljs-string:is(.dark *) {
|
||||
color: rgb(217, 249, 157) !important;
|
||||
}
|
||||
|
||||
.cm-comment,
|
||||
.hljs-keyword {
|
||||
color: oklch(47% 0.157 37.304) !important;
|
||||
}
|
||||
|
||||
.cm-comment:is(.dark *),
|
||||
.hljs-keyword:is(.dark *) {
|
||||
color: oklch(90.1% 0.076 70.697) !important;
|
||||
}
|
||||
|
||||
.cm-link {
|
||||
color: var(--color-link) !important;
|
||||
}
|
||||
|
||||
.cm-url,
|
||||
.cm-property,
|
||||
.cm-qualifier,
|
||||
.hljs-title {
|
||||
color: rgb(29, 78, 216) !important;
|
||||
}
|
||||
|
||||
.cm-url:is(.dark *),
|
||||
.cm-property:is(.dark *),
|
||||
.cm-qualifier:is(.dark *),
|
||||
.hljs-title:is(.dark *) {
|
||||
color: rgb(191, 219, 254) !important;
|
||||
}
|
||||
|
||||
.cm-variable-3,
|
||||
.cm-tag,
|
||||
.cm-def,
|
||||
.cm-attribute,
|
||||
.cm-number,
|
||||
.hljs-type {
|
||||
color: rgb(91, 33, 182) !important;
|
||||
}
|
||||
|
||||
.cm-variable-3:is(.dark *),
|
||||
.cm-tag:is(.dark *),
|
||||
.cm-def:is(.dark *),
|
||||
.cm-attribute:is(.dark *),
|
||||
.cm-number:is(.dark *),
|
||||
.hljs-type:is(.dark *) {
|
||||
color: rgb(221, 214, 254) !important;
|
||||
}
|
||||
|
||||
.hljs-built_in {
|
||||
color: var(--color-purple) !important;
|
||||
}
|
||||
|
||||
.hljs-variable {
|
||||
color: var(--color-link) !important;
|
||||
}
|
||||
|
||||
.hljs-number {
|
||||
color: var(--color-green) !important;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
color: var(--color-link) !important;
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.CodeMirror-line {
|
||||
padding-left: 0 !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.CodeMirror-focused .CodeMirror-placeholder {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
background: transparent !important;
|
||||
color: inherit !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* extra */
|
||||
@keyframes fadein {
|
||||
from {
|
||||
opacity: 0%;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.loader {
|
||||
animation: spin linear infinite 2s forwards running;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotateZ(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/* table */
|
||||
table {
|
||||
width: 100%;
|
||||
table-layout: auto;
|
||||
margin: var(--pad-4) 0;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border: solid 1px var(--color-super-raised);
|
||||
}
|
||||
|
||||
table td,
|
||||
table th {
|
||||
padding: var(--pad-2) var(--pad-4);
|
||||
}
|
||||
|
||||
table tr:not(thead *):nth-child(odd) {
|
||||
background: var(--color-super-raised);
|
||||
}
|
||||
|
||||
table thead th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* details */
|
||||
details {
|
||||
width: 100%;
|
||||
margin: var(--pad-4) 0;
|
||||
}
|
||||
|
||||
details summary {
|
||||
background: var(--color-super-raised);
|
||||
padding: var(--pad-2) var(--pad-4);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
details .content {
|
||||
padding: var(--pad-4);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
/* dialog */
|
||||
dialog {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
box-shadow: var(--shadow-x-offset) var(--shadow-y-offset) var(--shadow-size)
|
||||
var(--color-shadow);
|
||||
animation: fadein ease-in-out 1 0.25s forwards running;
|
||||
max-width: 95%;
|
||||
width: 30rem;
|
||||
margin: auto;
|
||||
padding: var(--pad-4);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
dialog.inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--pad-2);
|
||||
}
|
||||
|
||||
dialog::backdrop {
|
||||
background: hsla(0, 0%, 0%, 25%);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
dialog:is(.dark *)::backdrop {
|
||||
background: hsla(0, 0%, 100%, 15%);
|
||||
}
|
||||
|
||||
/* menus */
|
||||
menu {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
menu .button {
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
menu .button.active {
|
||||
background: var(--color-super-raised);
|
||||
}
|
||||
|
||||
menu.col {
|
||||
flex-direction: column;
|
||||
width: 25rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
39
app/templates_src/claim.lisp
Normal file
39
app/templates_src/claim.lisp
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
(text "{% extends \"root.lisp\" %} {% block head %}")
|
||||
(title
|
||||
(text "Create reclaim for \"{{ entry.slug }}\" - {{ name }}"))
|
||||
(link ("rel" "icon") ("href" "/public/favicon.svg"))
|
||||
(text "{% endblock %} {% block body %}")
|
||||
(div
|
||||
("class" "card container")
|
||||
(h1 (text "{{ entry.slug }}"))
|
||||
(p (text "Custom slug reclaims are handled through ") (b (text "{{ tetratto }}")) (text ". You'll need to have an account there to submit a claim request."))
|
||||
(p (text "Please note that you are unlikely to receive a response unless your claim is accepted. Please do not submit additional requests for the same slug."))
|
||||
|
||||
(text "{% if metadata.tetratto_owner_username -%}")
|
||||
; contact owner text
|
||||
(p (text "Since this entry is connected to a user, it is encouraged that you directly contact the owner of the entry instead. If that doesn't work, you can create a regular request."))
|
||||
(text "{%- endif %}")
|
||||
|
||||
(p (text "Once you're ready, you can submit a claim using the button below."))
|
||||
(hr)
|
||||
(ul
|
||||
(li (b (text "Requsted slug: ")) (text "{{ entry.slug }}"))
|
||||
(li (b (text "Last updated: ")) (text "{{ entry.edited / 1000|int|date(format=\"%Y-%m-%d %H:%M\", timezone=\"Etc/UTC\") }} UTC")))
|
||||
(hr)
|
||||
(text "{% if claimable -%}")
|
||||
(text "{% if metadata.tetratto_owner_username -%}")
|
||||
; contact owner button
|
||||
(a
|
||||
("href" "{{ tetratto }}/mail/compose?receivers={{ tetratto_owner_username }}&subject=Reclaim%20for%20%22{{ entry.slug }}%22")
|
||||
("class" "button surface no_fill")
|
||||
(text "{{ icon \"external-link\" }} Contact owner"))
|
||||
(text "{%- endif %}")
|
||||
|
||||
(a
|
||||
("href" "{{ tetratto }}/mail/compose?receivers={{ tetratto_handler_account_username }}&subject=Reclaim%20for%20%22{{ entry.slug }}%22")
|
||||
("class" "button surface no_fill")
|
||||
(text "{{ icon \"external-link\" }} Submit request"))
|
||||
(text "{% else %}")
|
||||
(span (text "This slug is currently not claimable as it was edited too recently. ") (a ("href" "/{{ entry.slug }}") ("class" "red") (text "Go back")))
|
||||
(text "{%- endif %}"))
|
||||
(text "{% endblock %}")
|
||||
13
app/templates_src/doc.lisp
Normal file
13
app/templates_src/doc.lisp
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
(text "{% extends \"root.lisp\" %} {% block head %}")
|
||||
(title
|
||||
(text "{{ file_name }} - {{ name }}"))
|
||||
(link ("rel" "icon") ("href" "/public/favicon.svg"))
|
||||
(text "{% endblock %} {% block body %}")
|
||||
(div
|
||||
("class" "card container")
|
||||
(p (text "{{ text|markdown|safe }}")))
|
||||
|
||||
(link ("rel" "stylesheet") ("href" "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css"))
|
||||
(script ("src" "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"))
|
||||
(script (text "hljs.highlightAll();"))
|
||||
(text "{% endblock %}")
|
||||
209
app/templates_src/edit.lisp
Normal file
209
app/templates_src/edit.lisp
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
(text "{% extends \"root.lisp\" %} {% block head %}")
|
||||
(title
|
||||
(text "{{ entry.slug }}"))
|
||||
(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")
|
||||
(a
|
||||
("class" "button simple surface")
|
||||
("href" "/docs/metadata")
|
||||
("target" "_blank")
|
||||
("title" "Info")
|
||||
(text "i"))))
|
||||
(div
|
||||
("class" "flex justify_center tab")
|
||||
(div
|
||||
("class" "card tab tabs container w_full")
|
||||
("id" "tabs_group")
|
||||
(div
|
||||
("id" "editor_tab")
|
||||
("class" "tab fadein w_full"))
|
||||
(div
|
||||
("id" "preview_tab")
|
||||
("class" "tab fadein hidden w_full"))
|
||||
(div
|
||||
("id" "metadata_tab")
|
||||
("class" "tab fadein hidden w_full"))))
|
||||
(form
|
||||
("class" "w_full flex flex_col gap_2")
|
||||
("style" "margin-top: var(--pad-2)")
|
||||
("onsubmit" "edit_entry(event)")
|
||||
(div
|
||||
("class" "w_full flex gap_2")
|
||||
(input
|
||||
("class" "w_full")
|
||||
("type" "text")
|
||||
("minlength" "2")
|
||||
("name" "edit_code")
|
||||
("required" "")
|
||||
("placeholder" "Enter edit code"))
|
||||
(input ("class" "w_full") ("style" "visibility: hidden") ("aria-hidden" "true") ("disabled" "true"))
|
||||
(input ("class" "w_full") ("style" "visibility: hidden") ("aria-hidden" "true") ("disabled" "true")))
|
||||
(div
|
||||
("class" "flex gap_2")
|
||||
(input
|
||||
("class" "w_full")
|
||||
("type" "text")
|
||||
("minlength" "2")
|
||||
("name" "new_edit_code")
|
||||
("placeholder" "New edit code"))
|
||||
(input
|
||||
("class" "w_full")
|
||||
("type" "text")
|
||||
("minlength" "2")
|
||||
("name" "new_modify_code")
|
||||
("placeholder" "New modify code"))
|
||||
(input
|
||||
("class" "w_full")
|
||||
("type" "text")
|
||||
("minlength" "2")
|
||||
("name" "new_slug")
|
||||
("oninput" "check_exists_input(event)")
|
||||
("placeholder" "New url")))
|
||||
(div
|
||||
("class" "w_full flex justify_between gap_2")
|
||||
(div
|
||||
("class" "flex gap_2")
|
||||
(button
|
||||
("class" "button green")
|
||||
(span ("ui_ident" "text") (text "Save"))
|
||||
(span ("class" "hidden loader no_fill") ("ui_ident" "loader") (text "{{ icon \"loader-circle\" }}")))
|
||||
(a
|
||||
("href" "/{{ entry.slug }}")
|
||||
("class" "button")
|
||||
(text "Back")))
|
||||
|
||||
(button
|
||||
("class" "button red")
|
||||
("type" "button")
|
||||
("onclick" "document.getElementById('delete_modal').showModal()")
|
||||
("id" "fake_delete_button")
|
||||
(span ("ui_ident" "text") (text "Delete"))
|
||||
(span ("class" "hidden loader no_fill") ("ui_ident" "loader") (text "{{ icon \"loader-circle\" }}")))
|
||||
|
||||
(dialog
|
||||
("id" "delete_modal")
|
||||
(div
|
||||
("class" "inner")
|
||||
(h2 ("class" "text_center w_full") (text "Delete {{ entry.slug }}?"))
|
||||
(p (text "Deleting this entry will make its custom slug claimable by anyone."))
|
||||
(p (text "Please ensure that you understand the consequences of deleting this entry before continuing."))
|
||||
(hr ("class" "margin"))
|
||||
(div
|
||||
("class" "w_full flex gap_2 justify_between")
|
||||
(button
|
||||
("class" "button")
|
||||
("type" "button")
|
||||
("onclick" "document.getElementById('delete_modal').close()")
|
||||
(text "Cancel"))
|
||||
(button
|
||||
("class" "button red")
|
||||
("ui_ident" "delete")
|
||||
("onclick" "document.getElementById('delete_modal').close()")
|
||||
(text "Delete")))))))
|
||||
|
||||
; 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/mode/toml/toml.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 ("id" "editor_content") ("type" "text/markdown") (text "{{ entry.content|remove_script_tags|safe }}"))
|
||||
(script ("id" "editor_metadata_content") ("type" "text/markdown") (text "{{ entry.metadata|remove_script_tags|safe }}"))
|
||||
|
||||
(script
|
||||
(text "setTimeout(() => {
|
||||
globalThis.init_editor();
|
||||
globalThis.init_editor(\"metadata_editor\", \"toml\", \"metadata_tab\", \"editor_metadata_content\");
|
||||
}, 150);
|
||||
|
||||
globalThis.edit_entry = (e) => {
|
||||
e.preventDefault();
|
||||
const rm = e.submitter.getAttribute(\"ui_ident\") === \"delete\";
|
||||
|
||||
const { load, failed } = submitter_load(rm ? document.getElementById(\"fake_delete_button\") : e.submitter);
|
||||
load();
|
||||
|
||||
fetch(\"/api/v1/entries/{{ entry.id }}\", {
|
||||
method: \"POST\",
|
||||
headers: {
|
||||
\"Content-Type\": \"application/json\",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
content: globalThis.editor.getValue(),
|
||||
edit_code: e.target.edit_code.value,
|
||||
new_slug: e.target.new_slug.value || undefined,
|
||||
new_edit_code: e.target.new_edit_code.value || undefined,
|
||||
new_modify_code: e.target.new_modify_code.value || undefined,
|
||||
metadata: globalThis.metadata_editor.getValue(),
|
||||
\"delete\": rm,
|
||||
}),
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then((res) => {
|
||||
if (res.ok) {
|
||||
globalThis.ALLOW_LEAVE = true;
|
||||
|
||||
if (!rm) {
|
||||
document.cookie = `Atto-Message=\"Entry updated\"; path=/`;
|
||||
document.cookie = \"Atto-Message-Good=true; path=/\";
|
||||
window.location.href = `/${res.payload}`;
|
||||
} else {
|
||||
document.cookie = `Atto-Message=\"Entry deleted\"; path=/`;
|
||||
document.cookie = \"Atto-Message-Good=true; path=/\";
|
||||
window.location.href = \"/\";
|
||||
}
|
||||
} else {
|
||||
show_message(res.message, false);
|
||||
failed();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
globalThis.download = (content, type, name) => {
|
||||
const blob = new Blob([content], { type });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const anchor = document.createElement(\"a\");
|
||||
|
||||
anchor.setAttribute(\"download\", name);
|
||||
anchor.href = url;
|
||||
anchor.click();
|
||||
anchor.remove();
|
||||
}"))
|
||||
(text "{% endblock %}")
|
||||
|
||||
(text "{% block dropdown %}")
|
||||
(hr)
|
||||
(span ("class" "title") (text "export"))
|
||||
(button
|
||||
("class" "button")
|
||||
("onclick" "download(globalThis.editor.getValue(), 'text/markdown', '{{ entry.slug }}.md')")
|
||||
(text "markdown"))
|
||||
(button
|
||||
("class" "button")
|
||||
("onclick" "download(globalThis.metadata_editor.getValue(), 'application/toml', '{{ entry.slug }}.toml')")
|
||||
(text "metadata"))
|
||||
(button
|
||||
("class" "button")
|
||||
("onclick" "(async () => { download(await get_preview(), 'text/html', '{{ entry.slug }}.html') })();")
|
||||
(text "html"))
|
||||
(text "{%- endblock %}")
|
||||
9
app/templates_src/error.lisp
Normal file
9
app/templates_src/error.lisp
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
(text "{% extends \"root.lisp\" %} {% block head %}")
|
||||
(title
|
||||
(text "Error - {{ name }}"))
|
||||
(link ("rel" "icon") ("href" "/public/favicon.svg"))
|
||||
(text "{% endblock %} {% block body %}")
|
||||
(div
|
||||
("class" "card")
|
||||
(p (text "{{ error }}")))
|
||||
(text "{% endblock %}")
|
||||
117
app/templates_src/index.lisp
Normal file
117
app/templates_src/index.lisp
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
(text "{% extends \"root.lisp\" %} {% block head %}")
|
||||
(title
|
||||
(text "{{ name }}"))
|
||||
|
||||
(meta ("property" "og:title") ("content" "{{ name }}"))
|
||||
(meta ("property" "twitter:title") ("content" "{{ 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")
|
||||
(a
|
||||
("class" "button simple surface")
|
||||
("href" "/docs/metadata")
|
||||
("target" "_blank")
|
||||
("title" "Info")
|
||||
(text "i"))))
|
||||
(div
|
||||
("class" "flex justify_center tab")
|
||||
(div
|
||||
("class" "card tab tabs container w_full")
|
||||
("id" "tabs_group")
|
||||
(div
|
||||
("id" "editor_tab")
|
||||
("class" "tab fadein w_full"))
|
||||
(div
|
||||
("id" "preview_tab")
|
||||
("class" "tab fadein hidden w_full"))
|
||||
(div
|
||||
("id" "metadata_tab")
|
||||
("class" "tab fadein hidden w_full"))))
|
||||
(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")
|
||||
(span ("ui_ident" "text") (text "Go"))
|
||||
(span ("class" "hidden loader no_fill") ("ui_ident" "loader") (text "{{ icon \"loader-circle\" }}")))
|
||||
(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"))))
|
||||
|
||||
; 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/mode/toml/toml.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\", \"toml\", \"metadata_tab\");
|
||||
}, 150);
|
||||
|
||||
globalThis.create_entry = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const { load, failed } = submitter_load(e.submitter);
|
||||
load();
|
||||
|
||||
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);
|
||||
failed();
|
||||
}
|
||||
})
|
||||
}"))
|
||||
(text "{% endblock %}")
|
||||
32
app/templates_src/password.lisp
Normal file
32
app/templates_src/password.lisp
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
(text "{% extends \"root.lisp\" %} {% block head %}")
|
||||
(title
|
||||
(text "{{ entry.slug }}"))
|
||||
(link ("rel" "icon") ("href" "/public/favicon.svg"))
|
||||
(text "{% endblock %} {% block body %}")
|
||||
(main
|
||||
("class" "card_nest")
|
||||
(div
|
||||
("class" "card flex items_center gap_2 no_fill")
|
||||
(text "{{ icon \"lock\" }}")
|
||||
(b (text "Password required")))
|
||||
(form
|
||||
("class" "card flex flex_col gap_2")
|
||||
("onsubmit" "use_password(event)")
|
||||
(div
|
||||
("class" "flex flex_collapse gap_2")
|
||||
(input
|
||||
("class" "surface")
|
||||
("required" "")
|
||||
("placeholder" "Password")
|
||||
("name" "password"))
|
||||
(button
|
||||
("class" "button surface")
|
||||
(text "Go")))))
|
||||
(script
|
||||
(text "async function use_password(event) {
|
||||
event.preventDefault();
|
||||
const hash = Array.from(new Uint8Array(await window.crypto.subtle.digest(\"SHA-256\", new TextEncoder().encode(event.target.password.value))));
|
||||
const hex_hash = hash.map((b) => b.toString(16).padStart(2, \"0\")).join(\"\");
|
||||
window.location.href = `?key=h:${hex_hash}`;
|
||||
}"))
|
||||
(text "{% endblock %}")
|
||||
84
app/templates_src/root.lisp
Normal file
84
app/templates_src/root.lisp
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
(text "<!doctype html>")
|
||||
(html
|
||||
("lang" "en")
|
||||
(head
|
||||
(meta ("charset" "UTF-8"))
|
||||
(meta ("name" "viewport") ("content" "width=device-width, initial-scale=1.0"))
|
||||
(meta ("http-equiv" "X-UA-Compatible") ("content" "ie=edge"))
|
||||
|
||||
(link ("rel" "stylesheet") ("href" "{{ tetratto }}/css/utility.css?v={{ build_code }}"))
|
||||
(link ("rel" "stylesheet") ("href" "/public/style.css?v={{ build_code }}"))
|
||||
|
||||
(style (text ":root { --color-primary: {{ theme_color }}; }"))
|
||||
|
||||
(meta ("name" "theme-color") ("content" "{{ theme_color }}"))
|
||||
(meta ("property" "og:type") ("content" "website"))
|
||||
(meta ("property" "og:site_name") ("content" "{{ name }}"))
|
||||
|
||||
(script ("src" "/public/app.js?v={{ build_code }}") ("defer"))
|
||||
|
||||
(text "{% block head %}{% endblock %}"))
|
||||
|
||||
(body
|
||||
; nav
|
||||
(nav
|
||||
("class" "flex w_full justify_between gap_2")
|
||||
(div
|
||||
("class" "flex side")
|
||||
(div
|
||||
("class" "dropdown")
|
||||
(button
|
||||
("onclick" "open_dropdown(event)")
|
||||
("exclude" "dropdown")
|
||||
("class" "button camo fade")
|
||||
(text "{{ icon \"menu\" }}"))
|
||||
(div
|
||||
("class" "inner left")
|
||||
(a
|
||||
("class" "button")
|
||||
("href" "/")
|
||||
(text "new"))
|
||||
(a
|
||||
("class" "button")
|
||||
("href" "/{{ what_page_slug }}")
|
||||
(text "what"))
|
||||
(a
|
||||
("class" "button")
|
||||
("href" "https://trisua.com/t/malachite")
|
||||
(text "source"))
|
||||
(text "{% block dropdown %}{% endblock %}")))
|
||||
|
||||
(a
|
||||
("class" "button camo fade")
|
||||
("href" "/")
|
||||
("title" "new")
|
||||
(text "{{ icon \"plus\" }}")))
|
||||
|
||||
(div
|
||||
("class" "side flex")
|
||||
(text "{% block nav_extras %}{% endblock %}")
|
||||
|
||||
; theme switches
|
||||
(button
|
||||
("class" "button camo fade")
|
||||
("id" "switch_light")
|
||||
("title" "Switch theme")
|
||||
("onclick" "set_theme('Dark')")
|
||||
(text "{{ icon \"sun\" }}"))
|
||||
|
||||
(button
|
||||
("class" "button camo fade hidden")
|
||||
("id" "switch_dark")
|
||||
("title" "Switch theme")
|
||||
("onclick" "set_theme('Light')")
|
||||
(text "{{ icon \"moon\" }}"))))
|
||||
|
||||
; page
|
||||
(article
|
||||
("class" "content_container flex flex_col")
|
||||
("id" "page")
|
||||
(ul ("id" "messages"))
|
||||
(text "{% block body %}{% endblock %}")
|
||||
(div ("style" "min-height: 32px")))
|
||||
|
||||
(script (text "setTimeout(() => init_dropdowns(document.body), 150);"))))
|
||||
94
app/templates_src/view.lisp
Normal file
94
app/templates_src/view.lisp
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
(text "{% extends \"root.lisp\" %} {% block head %}")
|
||||
(text "{% if not metadata.page_title -%}")
|
||||
(title
|
||||
(text "{{ entry.slug }}"))
|
||||
(text "{%- endif %} {{ metadata_head|safe }}")
|
||||
|
||||
(text "{% if not metadata.share_title -%}")
|
||||
(meta ("property" "og:title") ("content" "{{ entry.slug }}"))
|
||||
(meta ("property" "twitter:title") ("content" "{{ entry.slug }}"))
|
||||
(text "{%- endif %}")
|
||||
|
||||
(text "{% if metadata.page_icon|length == 0 -%}")
|
||||
(link ("rel" "icon") ("href" "/public/favicon.svg"))
|
||||
(text "{%- endif %}")
|
||||
(text "{% endblock %} {% block body %}")
|
||||
(div
|
||||
("class" "flex flex_col gap_2")
|
||||
(div
|
||||
("class" "card container")
|
||||
("id" "content_rect")
|
||||
("style" "min-height: 15rem")
|
||||
(text "{{ entry.content|markdown|safe }}"))
|
||||
(div
|
||||
("class" "w_full flex justify_between gap_2")
|
||||
(a
|
||||
("class" "button")
|
||||
("href" "/{{ entry.slug }}/edit{% if password -%} ?key={{ password }} {%- endif %}")
|
||||
(text "Edit"))
|
||||
|
||||
(div
|
||||
("class" "flex flex_col gap-1 items-end fade")
|
||||
; dates
|
||||
(span (text "Pub: {{ entry.created / 1000|int|date(format=\"%Y-%m-%d %H:%M\", timezone=\"Etc/UTC\") }} UTC"))
|
||||
(span (text "Edit: {{ entry.edited / 1000|int|date(format=\"%Y-%m-%d %H:%M\", timezone=\"Etc/UTC\") }} UTC"))
|
||||
|
||||
; auto theme
|
||||
(text "{% if metadata.access_recommended_theme != 'None' -%}")
|
||||
(span ("id" "auto_theme") (text "Auto theme: {{ metadata.access_recommended_theme }}"))
|
||||
(script ("defer" "true") (text "setTimeout(() => { temporary_set_theme('{{ metadata.access_recommended_theme }}') }, 150);"))
|
||||
(text "{%- endif %}")
|
||||
|
||||
; owner
|
||||
(text "{% if metadata.tetratto_owner_username|length > 0 -%}")
|
||||
(span
|
||||
("class" "flex items_center gap_2")
|
||||
(text "Owner:")
|
||||
(a
|
||||
("class" "flex items_center gap_2")
|
||||
("href" "{{ tetratto }}/@{{ metadata.tetratto_owner_username }}")
|
||||
(img
|
||||
("class" "avatar")
|
||||
("src" "{{ tetratto }}/api/v1/auth/user/{{ metadata.tetratto_owner_username }}/avatar?selector_type=username"))
|
||||
(text "{{ metadata.tetratto_owner_username }}")))
|
||||
(text "{%- endif %}")
|
||||
|
||||
; views
|
||||
(text "{% if not metadata.option_disable_views -%}")
|
||||
(span (text "Views: {{ entry.views }}"))
|
||||
(text "{%- endif %}")
|
||||
|
||||
; easy-to-read
|
||||
(text "{% if metadata.access_easy_read|length > 0 -%}")
|
||||
(a ("class" "button small") ("href" "/{{ metadata.access_easy_read }}") (b (text "E2R")))
|
||||
(text "{%- endif %}"))))
|
||||
|
||||
(div ("style" "display: none") ("id" "metadata_css") (text "{{ metadata_css|safe }}"))
|
||||
|
||||
(link ("rel" "stylesheet") ("href" "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css"))
|
||||
(script ("src" "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"))
|
||||
(script (text "hljs.highlightAll();"))
|
||||
(text "{% endblock %}")
|
||||
(text "{% block nav_extras %}")
|
||||
(button
|
||||
("class" "button camo fade no_fill")
|
||||
("title" "Toggle high-contrast")
|
||||
("id" "toggle_high_contrast_button")
|
||||
("onclick" "toggle_metadata_css(event)")
|
||||
(text "{{ icon \"contrast\" }}"))
|
||||
|
||||
(text "{% if \"EntryHighContrast\" in flags -%}")
|
||||
(script
|
||||
(text "setTimeout(() => {
|
||||
toggle_metadata_css({ target: document.getElementById(\"toggle_high_contrast_button\") });
|
||||
}, 150);"))
|
||||
(text "{%- endif %}")
|
||||
(text "{% endblock %}")
|
||||
|
||||
(text "{% block dropdown %}")
|
||||
(hr)
|
||||
(a
|
||||
("class" "button")
|
||||
("href" "/{{ entry.slug }}/claim")
|
||||
(text "claim"))
|
||||
(text "{%- endblock %}")
|
||||
54
app/templates_src/warning.lisp
Normal file
54
app/templates_src/warning.lisp
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
(text "{% extends \"root.lisp\" %} {% block head %}")
|
||||
(text "{% if not metadata.page_title -%}")
|
||||
(title
|
||||
(text "{{ entry.slug }}"))
|
||||
(text "{%- endif %} {{ metadata_head|safe }}")
|
||||
|
||||
(text "{% if not metadata.share_title -%}")
|
||||
(meta ("property" "og:title") ("content" "{{ entry.slug }}"))
|
||||
(meta ("property" "twitter:title") ("content" "{{ entry.slug }}"))
|
||||
(text "{%- endif %}")
|
||||
|
||||
(text "{% if metadata.page_icon|length == 0 -%}")
|
||||
(link ("rel" "icon") ("href" "/public/favicon.svg"))
|
||||
(text "{%- endif %}")
|
||||
|
||||
(text "{% endblock %} {% block body %}")
|
||||
(div
|
||||
("class" "card container flex flex_col gap-1")
|
||||
("id" "content_rect")
|
||||
(p ("class" "fade") (text "Content warning:"))
|
||||
(div (text "{{ metadata.safety_content_warning|markdown|safe }}"))
|
||||
(hr)
|
||||
(div
|
||||
("class" "flex flex_col gap_4")
|
||||
(label
|
||||
("class" "flex flex-row gap_2 items_center")
|
||||
("for" "open_in_high_contrast")
|
||||
(input
|
||||
("type" "checkbox")
|
||||
("id" "open_in_high_contrast")
|
||||
("name" "open_in_high_contrast"))
|
||||
(span (text "Open in high contrast")))
|
||||
(div
|
||||
("class" "flex gap_2")
|
||||
(button
|
||||
("class" "button surface green")
|
||||
("onclick" "accept()")
|
||||
(text "Continue"))
|
||||
(button
|
||||
("class" "button surface red")
|
||||
("onclick" "window.history.back()")
|
||||
(text "Cancel")))))
|
||||
|
||||
(script
|
||||
(text "const QFLAGS = [\"AcceptWarning\"];
|
||||
function accept() {
|
||||
if (document.getElementById(\"open_in_high_contrast\").checked) {
|
||||
QFLAGS.push(\"EntryHighContrast\");
|
||||
}
|
||||
|
||||
document.cookie = `Atto-QFlags=\"${JSON.stringify(QFLAGS)}\"; path=/`;
|
||||
window.location.reload();
|
||||
}"))
|
||||
(text "{% endblock %}")
|
||||
Loading…
Add table
Add a link
Reference in a new issue