fix: image floats, link color metadata

.gitignore

@@ -1,3 +1 @@
 /target
-app/templates_build/
-app/.env

app/.gitignore

@@ -1,3 +1,6 @@
 public/docs/**/*
 !public/docs/metadata.md
 icons/
+templates_build/
+public/favicon.svg
+.env

app/docs/metadata.md

@@ -8,4 +8,4 @@ All option names can either be in all lowercase, or all uppercase. While option
 
 Metadata options go in the "Metadata" tab in the entry editor page. Each option should be on a new line, and should be formatted as `NAME = value`. If you're familiar with TOML, you should be comfortable with metadata formatting.
 
-You can view a list of all options and what they do [here](http://localhost:9119/public/reference/attobin/model/struct.EntryMetadata.html#fields).
+You can view a list of all options and what they do [here](/public/reference/attobin/model/struct.EntryMetadata.html#fields).

app/public/app.js

@@ -104,7 +104,7 @@ globalThis.init_editor = (
         autoCloseBrackets: true,
         autofocus: true,
         viewportMargin: Number.POSITIVE_INFINITY,
-        inputStyle: "contenteditable",
+        inputStyle: "textarea",
         highlightFormatting: false,
         fencedCodeBlockHighlighting: false,
         xml: false,
@@ -141,6 +141,10 @@ globalThis.tab_editor = () => {
     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.tab_preview = async () => {

app/public/style.css

@@ -14,7 +14,6 @@
     --color-green: hsl(100, 84%, 20%);
     --color-yellow: oklch(47% 0.157 37.304);
     --color-purple: hsl(284, 84%, 20%);
-    --color-primary: oklch(67.3% 0.182 276.935);
 
     --shadow-x-offset: 0;
     --shadow-y-offset: 0.125rem;
@@ -57,8 +56,17 @@ body {
     line-height: 1.5;
     letter-spacing: 0.15px;
     font-family:
-        "Inter", "Poppins", "Roboto", ui-sans-serif, system-ui, sans-serif,
+        "Inter",
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+        "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);

app/templates_src/root.lisp

@@ -9,7 +9,9 @@
         (link ("rel" "stylesheet") ("href" "{{ tetratto }}/css/utility.css?v={{ build_code }}"))
         (link ("rel" "stylesheet") ("href" "/public/style.css?v={{ build_code }}"))
 
-        (meta ("name" "theme-color") ("content" "#fbc27f"))
+        (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 }}"))
 

src/markdown.rs

@@ -3,7 +3,7 @@ use std::collections::HashSet;
 pub fn render_markdown(input: &str) -> String {
     let html = tetratto_shared::markdown::render_markdown_dirty(&parse_text_color(
         &parse_highlight(&parse_link(&parse_image(&parse_image_size(
-            &parse_underline(&parse_comment(input)),
+            &parse_underline(&parse_comment(&input.replace("[/]", "<br />"))),
         )))),
     ));
 
@@ -359,7 +359,7 @@ fn parse_image_size_line(output: &mut String, buffer: &mut String, line: &str) {
                 if in_size && in_size_rhs {
                     // end
                     output.push_str(&format!(
-                        "<span style=\"width: {}; height: {}\" class=\"img_sizer\">![{buffer}</span>",
+                        "<span style=\"width: {}; height: {}; float: {}\" class=\"img_sizer\">![{buffer}</span>",
                         if is_numeric(&size_lhs) {
                             format!("{size_lhs}px")
                         } else {
@@ -369,6 +369,13 @@ fn parse_image_size_line(output: &mut String, buffer: &mut String, line: &str) {
                             format!("{size_rhs}px")
                         } else {
                             size_rhs
+                        },
+                        if buffer.ends_with("#left)") {
+                            "left"
+                        } else if buffer.ends_with("#right)") {
+                            "right"
+                        } else {
+                            "unset"
                         }
                     ));
 

src/model.rs

@@ -338,8 +338,8 @@ pub struct EntryMetadata {
     #[serde(default, alias = "CONTENT_TEXT_ALIGN")]
     pub content_text_align: TextAlignment,
     /// The color of links.
-    #[serde(default, alias = "CONTENT_TEXT_LINK_COLOR")]
+    #[serde(default, alias = "CONTENT_LINK_COLOR")]
-    pub content_text_link_color: String,
+    pub content_link_color: String,
     /// If paragraph elements have a margin below them.
     #[serde(default, alias = "CONTENT_DISABLE_PARAGRAPH_MARGIN")]
     pub content_disable_paragraph_margin: bool,
@@ -473,7 +473,7 @@ impl EntryMetadata {
         metadata_css!(".container", "border-radius", self.container_border_radius->output);
         metadata_css!(".container", "box-shadow", self.container_shadow->output);
         metadata_css!(".container", "text-shadow", self.content_text_shadow->output);
-        metadata_css!("*, html *", "--color-link" !important, self.content_text_link_color->output);
+        metadata_css!("*, html *", "--color-link" !important, self.content_link_color->output);
 
         if self.content_text_align != TextAlignment::Left {
             output.push_str(&format!(

src/routes.rs

@@ -52,6 +52,10 @@ fn default_context(data: &DataClient, build_code: &str) -> Context {
         "name",
         &std::env::var("NAME").unwrap_or("Attobin".to_string()),
     );
+    ctx.insert(
+        "theme_color",
+        &std::env::var("THEME_COLOR").unwrap_or("#fbc27f".to_string()),
+    );
     ctx.insert("tetratto", &data.host);
     ctx.insert(
         "what_page_slug",
@@ -257,7 +261,10 @@ async fn render_request(Json(req): Json<RenderMarkdown>) -> impl IntoResponse {
         return Html(e.to_string());
     }
 
-    Html(crate::markdown::render_markdown(&req.content) + &metadata.css())
+    Html(
+        crate::markdown::render_markdown(&req.content)
+            + &format!("<div id=\"metadata_css\">{}</div>", metadata.css()),
+    )
 }
 
 async fn exists_request(