add: better layout

2025-07-25 15:12:15 -04:00 · 2025-07-25 15:12:15 -04:00 · dbd70d9592
commit dbd70d9592
parent 2cc9ed7445
19 changed files with 451 additions and 87 deletions
--- a/app/templates_src/components.lisp
+++ b/app/templates_src/components.lisp
@ -1,40 +0,0 @@
-(text "{% macro footer() -%}")
-(footer
-    ("class" "flex flex-col items-center gap-2")
-    (hr ("style" "min-width: 20rem; margin-top: calc(var(--pad-4) * 4)"))
-    (div
-        ("class" "w-full flex justify-between")
-        (div ("style" "width: 50px"))
-        (div
-            ("class" "flex flex-col gap-2 items-center")
-            (div
-                ("class" "flex gap-2 flex-wrap")
-                (a
-                    ("href" "/")
-                    (text "new"))
-
-                (a
-                    ("href" "/{{ what_page_slug }}")
-                    (text "what"))
-
-                (a
-                    ("href" "https://trisua.com/t/attobin")
-                    (text "source")))
-
-            (span ("style" "font-size: 14px") ("class" "fade") (text "{{ name }}")))
-
-        ; theme switches
-        (button
-            ("class" "button camo fade")
-            ("id" "switch_light")
-            ("title" "Switch theme")
-            ("onclick" "set_theme('Dark')")
-            (text "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sun-icon lucide-sun icon\"><circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2\"/><path d=\"M12 20v2\"/><path d=\"m4.93 4.93 1.41 1.41\"/><path d=\"m17.66 17.66 1.41 1.41\"/><path d=\"M2 12h2\"/><path d=\"M20 12h2\"/><path d=\"m6.34 17.66-1.41 1.41\"/><path d=\"m19.07 4.93-1.41 1.41\"/></svg>"))
-
-        (button
-            ("class" "button camo fade hidden")
-            ("id" "switch_dark")
-            ("title" "Switch theme")
-            ("onclick" "set_theme('Light')")
-            (text "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-moon-icon lucide-moon icon\"><path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"/></svg>"))))
-(text "{%- endmacro %}")
--- a/app/templates_src/doc.lisp
+++ b/app/templates_src/doc.lisp
@ -0,0 +1,9 @@
+(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 }}")))
+(text "{% endblock %}")
--- a/app/templates_src/edit.lisp
+++ b/app/templates_src/edit.lisp
@ -19,7 +19,13 @@
        ("class" "button camo tab_button")
        ("id" "metadata_tab_button")
        ("onclick" "tab_metadata()")
-        (text "Metadata")))
+        (text "Metadata")
+        (a
+            ("class" "button simple surface")
+            ("href" "/docs/metadata")
+            ("target" "_blank")
+            ("title" "Info")
+            (text "i"))))
 (div
    ("class" "card tab tabs container")
    ("id" "tabs_group")
@ -74,7 +80,6 @@
            ("class" "button red")
            ("ui_ident" "delete")
            (text "Delete"))))
-(text "{{ components::footer() }}")

 ; editor
 (script ("src" "https://unpkg.com/codemirror@5.39.2/lib/codemirror.js"))
--- a/app/templates_src/error.lisp
+++ b/app/templates_src/error.lisp
@ -6,5 +6,4 @@
 (div
    ("class" "card")
    (p (text "{{ error }}")))
-(text "{{ components::footer() }}")
 (text "{% endblock %}")
--- a/app/templates_src/index.lisp
+++ b/app/templates_src/index.lisp
@ -1,6 +1,9 @@
 (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
@ -19,7 +22,13 @@
        ("class" "button camo tab_button")
        ("id" "metadata_tab_button")
        ("onclick" "tab_metadata()")
-        (text "Metadata")))
+        (text "Metadata")
+        (a
+            ("class" "button simple surface")
+            ("href" "/docs/metadata")
+            ("target" "_blank")
+            ("title" "Info")
+            (text "i"))))
 (div
    ("class" "card tab tabs container")
    ("id" "tabs_group")
@ -55,7 +64,6 @@
            ("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"))
--- a/app/templates_src/root.lisp
+++ b/app/templates_src/root.lisp
@ -1,4 +1,3 @@
-(text "{%- import \"components.lisp\" as components -%}")
 (text "<!doctype html>")
 (html
    ("lang" "en")
@ -19,8 +18,64 @@
        (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")
+                        (a
+                            ("class" "button")
+                            ("href" "/")
+                            (text "new"))
+                        (a
+                            ("class" "button")
+                            ("href" "/{{ what_page_slug }}")
+                            (text "what"))
+                        (a
+                            ("class" "button")
+                            ("href" "https://trisua.com/t/attobin")
+                            (text "source"))))
+
+                (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 %}"))))
+            (text "{% block body %}{% endblock %}")
+            (div ("style" "min-height: 32px")))
+
+        (script (text "setTimeout(() => init_dropdowns(document.body), 150);"))))
--- a/app/templates_src/view.lisp
+++ b/app/templates_src/view.lisp
@ -4,6 +4,11 @@
    (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 %}")
@ -30,7 +35,7 @@

            ; auto theme
            (text "{% if metadata.access_recommended_theme != 'None' -%}")
-            (span (text "Auto theme: {{ metadata.access_recommended_theme }}"))
+            (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 %}")

@ -44,11 +49,17 @@
            (a ("class" "button small") ("href" "/{{ metadata.access_easy_read }}") (b (text "E2R")))
            (text "{%- endif %}"))))

-(text "{{ metadata_css|safe }}")
+(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 "{{ components::footer() }}")
+(text "{% endblock %}")
+(text "{% block nav_extras %}")
+(button
+    ("class" "button camo fade no_fill")
+    ("title" "Toggle high-contrast")
+    ("onclick" "toggle_metadata_css(event)")
+    (text "{{ icon \"contrast\" }}"))
 (text "{% endblock %}")