Update Cargo.lock

Add site footer to default template

.gitignore

@@ -3,3 +3,4 @@
 .env
 *.db*
 key
+.DS_Store

server/Cargo.toml

@@ -3,6 +3,10 @@ name = "server"
 version = "0.1.0"
 edition = "2021"
 
+[[bin]]
+name = "evie"
+path = "./src/main.rs"
+
 [dependencies]
 blogdb = { path = "../blogdb/" }
 anyhow = "1.0.89"

server/src/client/assets/css/admin.css

@@ -6,6 +6,7 @@ main {
     gap: var(--default-padding);
     margin-block-end: 40svb;
     padding: 0;
+    min-block-size: unset;
 }
 
 @media screen and (min-width: 60rem) {
@@ -21,6 +22,10 @@ main {
         flex-wrap: nowrap !important;
     }
 
+    .admin-widget:not(.admin-widget-user) {
+        max-inline-size: 50%;
+    }
+
     .admin-widget-user {
         flex-direction: row !important;
         justify-content: space-between;
@@ -198,6 +203,7 @@ main {
     min-block-size: 0;
     border: var(--border);
     display: flex;
+    max-inline-size: 100%;
 
     &>*:not(form, a) {
         padding-inline: var(--default-padding);
@@ -212,6 +218,7 @@ main {
 
     li {
         flex: 1;
+        overflow: hidden;
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -243,6 +250,13 @@ main {
 
         transition: all 0.3s ease;
 
+        & :is(p, h2) {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            inline-size: 100%;
+        }
+
         &:hover,
         &:focus {
             transform: translateX(1ch);

server/src/client/assets/css/blog.css

@@ -8,6 +8,7 @@ h1 {
 
 .blog-roll-entry {
     margin-block: 1rem;
+    overflow: visible;
 
     a {
         border: var(--border);
@@ -21,7 +22,9 @@ h1 {
 
         .entry-content {
             padding: var(--content-padding);
-            transition: padding-inline-start 0.3s ease, box-shadow 0.3s ease;
+            transition: padding 0.3s ease, box-shadow 0.3s ease;
+            overflow: hidden;
+
 
             * {
                 margin-block: 0;
@@ -32,6 +35,7 @@ h1 {
         &:focus-visible {
             .entry-content {
                 padding-inline-start: calc(var(--content-padding) * 2);
+                padding-inline-end: 0;
                 box-shadow: inset 3px 0px 0px var(--color-text);
             }
         }

server/src/client/assets/css/login.css

@@ -3,13 +3,8 @@ body {
     flex-wrap: wrap;
     justify-content: stretch;
     align-items: stretch;
-}
+    flex-direction: column;
-
+    flex-wrap: nowrap;
-@media screen and (max-width: 50rem) {
-    body {
-        flex-direction: column;
-        flex-wrap: nowrap;
-    }
 }
 
 body>div {
@@ -39,7 +34,6 @@ main {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    /* block-size: 100%; */
     max-block-size: 100%;
 
     &>:first-child {
@@ -71,3 +65,13 @@ form {
     max-inline-size: 40ch;
     gap: 1rem;
 }
+
+@media screen and (min-width: 50rem) {
+    body {
+        flex-direction: row;
+    }
+
+    main {
+        margin-block: 0;
+    }
+}

server/src/client/assets/css/style.css

@@ -26,7 +26,6 @@
 
     --font-size: 1rem;
     font-size: var(--font-size);
-    line-height: 1.15;
     /* 1. Correct the line height in all browsers. */
     -webkit-text-size-adjust: 100%;
     /* 2. Prevent adjustments of font size after orientation changes in iOS. */
@@ -71,10 +70,12 @@ input,
 label,
 a,
 blockquote,
+figcaption,
 aside,
 ol,
 ul {
     font-size: calc(var(--font-size) * 1.33);
+    line-height: 1.5em;
 }
 
 h1,
@@ -87,26 +88,22 @@ h6 {
 }
 
 aside,
-blockquote {
+figure {
-    border: var(--border);
-}
-
-blockquote,
-aside {
     padding: var(--default-padding) calc(var(--default-padding) * 2);
+    border: var(--border);
     max-inline-size: 100%;
     margin-inline: 0;
 }
 
 blockquote {
-    &::before {
+    margin: 0;
-        content: '“';
+}
-        font-weight: 600;
-    }
 
-    &::after {
+figure {
-        content: '”';
+    & figcaption {
-        font-weight: 600;
+        font-style: italic;
+        margin-inline-start: var(--default-padding);
+        margin-block-start: var(--default-padding);
     }
 }
 
@@ -119,6 +116,29 @@ ul {
 a {
     color: unset;
     text-decoration: unset;
+
+    &:not(:has(time)):is([href^="http"], [href^="mailto"]) {
+        padding-inline-end: 0.9em;
+
+        &::after {
+            transition: all 0.3s ease;
+            position: absolute;
+            content: '';
+            display: inline-block;
+            width: 1em;
+            height: 1em;
+            margin-inline-start: -0.05em;
+            margin-block-start: 0.23em;
+            background-size: 100%;
+            transform: scale(0.8);
+            background-image: url("/assets/images/external.svg");
+        }
+
+        &:is(:hover, :active, :focus-visible)::after {
+            filter: invert(100%);
+        }
+
+    }
 }
 
 form {
@@ -135,7 +155,7 @@ input {
     margin: 0;
 }
 
-input:is([type="text"], [type="password"], [type="search"]) {
+input:is([type="text"], [type="password"], [type="search"], [type="email"], ) {
     padding: 0.5ch 1ch;
 
     &:focus,
@@ -269,7 +289,7 @@ header {
     background: var(--color-bg);
 
     &>:first-child {
-        margin: unset;
+        margin-block-end: var(--default-padding);
     }
 
     h1 {
@@ -347,9 +367,66 @@ header {
 
 }
 
+iframe {
+    max-inline-size: 100%;
+    appearance: unset;
+    border: var(--border);
+}
+
+footer {
+    border-block-start: var(--border);
+    margin-block-start: calc(var(--default-padding) * 6);
+    display: flex;
+    min-block-size: calc(var(--header-size) * 2.5);
+    padding: calc(1.5 * var(--default-padding)) var(--default-padding);
+    gap: calc(2 * var(--default-padding));
+    flex-direction: column;
+    justify-content: start;
+
+    &>* {
+        max-inline-size: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: start;
+    }
+
+
+    form {
+        display: flex;
+        flex-direction: column;
+
+        & div {
+            display: flex;
+            max-inline-size: 100%;
+
+            &>* {
+                min-inline-size: 0;
+            }
+
+            input[type="submit"] {
+                min-inline-size: min-content;
+            }
+        }
+
+    }
+
+    h1,
+    ul {
+        margin-block: 0 1rem;
+    }
+
+    p,
+    li,
+    input {
+        margin-block: 0.3rem;
+    }
+
+
+}
+
 main {
-    margin-block: var(--default-padding) 40svb;
+    min-block-size: 100svb;
-    margin-inline: auto;
+    margin: var(--default-padding) auto;
     max-inline-size: min(60ch, 80%);
     padding-block: var(--default-padding);
     gap: var(--default-padding);
@@ -416,12 +493,26 @@ main {
         flex-direction: row;
         justify-content: space-between;
 
+        &>:first-child {
+            margin-block-end: unset;
+        }
+
         nav {
+
             justify-content: flex-end;
             box-sizing: border-box;
         }
     }
 
+    footer {
+        flex-direction: row;
+
+        &>* {
+            max-inline-size: 40ch;
+            min-inline-size: 30ch;
+        }
+    }
+
     main {
         margin-block: var(--default-padding);
     }

server/src/client/assets/images/external.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M 5 5 L 5 27 L 27 27 L 27 5 Z M 7 7 L 25 7 L 25 25 L 7 25 Z M 13 10 L 13 12 L 18.5625 12 L 9.28125 21.28125 L 10.71875 22.71875 L 20 13.4375 L 20 19 L 22 19 L 22 10 Z"/></svg>

server/src/client/assets/js/editor.js

@@ -1776,13 +1776,13 @@
         (this.settings = [
           {
             name: "unordered",
-            label: this.api.i18n.t("Unordered"),
+            label: this.api.i18n.t("Bulleted"),
             icon: n,
             default: t.defaultStyle === "unordered" || !1,
           },
           {
             name: "ordered",
-            label: this.api.i18n.t("Ordered"),
+            label: this.api.i18n.t("Numbered"),
             icon: l,
             default: t.defaultStyle === "ordered" || !0,
           },

server/src/html.rs

@@ -1,3 +1,4 @@
+use std::borrow::Borrow;
 use std::{env, vec};
 
 use blogdb::posts::Post;
@@ -72,6 +73,12 @@ where
                     }
                     Ok(())
                 }),
+                element!("site-footer", |site_footer| {
+                    if settings.site_footer {
+                        site_footer.replace(template!("site-footer"), ContentType::Html);
+                    }
+                    Ok(())
+                }),
                 element!("br", |br| {
                     br.remove();
                     Ok(())
@@ -187,7 +194,7 @@ where
     .unwrap_or_default();
     make_page(
         html,
-        PageSettings::new("Editor", Some(vec!["/assets/css/editor.css"]), true),
+        PageSettings::new("Editor", Some(vec!["/assets/css/editor.css"]), true, false),
     )
 }
 
@@ -229,7 +236,7 @@ pub(crate) fn login_status(next: &str, success: bool) -> String {
     .unwrap_or_default();
     make_page(
         html,
-        PageSettings::new("Login", Some(vec!["/assets/css/login.css"]), false),
+        PageSettings::new("Login", Some(vec!["/assets/css/login.css"]), false, false),
     )
 }
 
@@ -237,7 +244,7 @@ pub(crate) async fn admin_page(session_id: i64, db: &BlogDb) -> String {
     let content = admin_widgets(template!("admin"), session_id, db).await;
     make_page(
         &content,
-        PageSettings::new("Admin", Some(vec!["/assets/css/admin.css"]), true),
+        PageSettings::new("Admin", Some(vec!["/assets/css/admin.css"]), true, false),
     )
 }
 
@@ -441,14 +448,30 @@ where
             element_content_handlers: vec![element!("meta", |meta| {
                 if let Some(attr) = meta.get_attribute("property") {
                     let content = match attr.as_str() {
-                        "og:url" => &[env!("DOMAIN"), slug.as_ref()].concat(),
+                        "og:url" => {
+                            #[cfg(debug_assertions)]
+                            {
+                                &["http://localhost", slug.as_ref()].concat()
+                            }
+                            #[cfg(not(debug_assertions))]
+                            {
+                                &["https://", env!("DOMAIN"), slug.as_ref()].concat()
+                            }
+                        }
                         "og:type" => "article",
                         "og:title" => title.as_ref(),
                         "og:description" => description.as_ref(),
                         "og:image" => {
                             let image = image.as_ref();
                             if !image.is_empty() {
-                                image
+                                #[cfg(debug_assertions)]
+                                {
+                                    &["http://localhost", image].concat()
+                                }
+                                #[cfg(not(debug_assertions))]
+                                {
+                                    &["https://", env!("DOMAIN"), image].concat()
+                                }
                             } else {
                                 meta.remove();
                                 ""
@@ -476,7 +499,7 @@ where
     let html = make_page(template, PageSettings::title("Blog"));
 
     let post = db.get_post(id).await.unwrap_or_default();
-    let head = head::<_, _, [String; 0]>(post.title, []);
+    let head_content = head::<_, _, [String; 0]>(post.title, []);
     let post_content: Blocks = serde_json::from_str(&post.content).unwrap_or_default();
     let post_html: String = post_content.to_html();
     let image = if let Some(url) = post_content.image() {
@@ -498,8 +521,17 @@ where
                 time.after(&post_html, ContentType::Html);
                 time.replace(
                     &[
-                        r#"<a class="animated-link" style="align-self: flex-start; margin-block-end: 0" href="https://"#,
+                        r#"<a class="animated-link" style="align-self: flex-start; margin-block-end: 0" href=""#,
-                        env!("DOMAIN"),
+                        {
+                            #[cfg(debug_assertions)]
+                            {
+                                "http://localhost"
+                            }
+                            #[cfg(not(debug_assertions))]
+                            {
+                                &["https://", env!("DOMAIN")].concat()
+                            }
+                        },
                         "/blog/",
                         &post.id,
                         r#""><time>"#,
@@ -510,8 +542,11 @@ where
                     ContentType::Html,
                 );
                 Ok(())
+            }), element!("head", |head| {
+                head.replace(&head_content, ContentType::Html);
+                head.append(&meta, ContentType::Html);
+                Ok(())
             })],
-
             ..RewriteStrSettings::new()
         },
     )
@@ -558,7 +593,7 @@ pub(crate) async fn blog_roll(db: &BlogDb) -> String {
 
     make_page(
         blog_roll_html,
-        PageSettings::new("Blog", Some(vec!["/assets/css/blog.css"]), true),
+        PageSettings::new("Blog", Some(vec!["/assets/css/blog.css"]), true, true),
     )
 }
 
@@ -653,6 +688,7 @@ pub(crate) async fn search_page(
             ["Results for “", &query, "”"].concat(),
             Some(vec!["/assets/css/blog.css"]),
             true,
+            true,
         ),
     )
 }
@@ -694,6 +730,7 @@ pub(crate) struct PageSettings {
     title: String,
     stylesheets: Option<Vec<String>>,
     site_header: bool,
+    site_footer: bool,
 }
 
 impl PageSettings {
@@ -705,9 +742,15 @@ impl PageSettings {
             title: title.to_string(),
             stylesheets: None,
             site_header: true,
+            site_footer: true,
         }
     }
-    pub(crate) fn new<S, T>(title: S, stylesheets: Option<Vec<T>>, site_header: bool) -> Self
+    pub(crate) fn new<S, T>(
+        title: S,
+        stylesheets: Option<Vec<T>>,
+        site_header: bool,
+        site_footer: bool,
+    ) -> Self
     where
         S: ToString,
         T: ToString,
@@ -718,6 +761,7 @@ impl PageSettings {
             title: title.to_string(),
             stylesheets,
             site_header,
+            site_footer,
         }
     }
 }
@@ -739,7 +783,7 @@ where
             element_content_handlers: vec![element!("a", move |t| {
                 match t.get_attribute("class") {
                     Some(class) => t
-                        .set_attribute("class", &[&class, "animated-link-underline"].concat())
+                        .set_attribute("class", &[&class, " animated-link-underline"].concat())
                         .unwrap_or_default(),
                     None => {
                         t.set_attribute("class", "animated-link-underline")

server/src/server/routes/api/editor.rs

@@ -34,6 +34,7 @@ pub(crate) enum Block {
     },
     quote {
         text: String,
+        caption: String,
     },
     embed {
         service: String,
@@ -78,7 +79,13 @@ impl Block {
                 }
             },
             Block::warning { title } => ["<aside>", title, "</aside>"].concat(),
-            Block::quote { text } => ["<blockquote>", text, "</blockquote>"].concat(),
+            Block::quote { text, caption } => {
+                if caption.is_empty() {
+                 ["<figure><blockquote>“", text, "”</blockquote></figure>"].concat()
+                } else {
+                 ["<figure><blockquote>“", text, "”</blockquote><figcaption>— ", caption,"</figcaption></figure>"].concat()
+                }
+            },
             Block::embed {
                 embed,
                 width,
@@ -91,11 +98,11 @@ impl Block {
                 &height.to_string(),
                 "\" src=\"",
                 embed,
-                "\"></iframe>",
+                "\" allowfullscreen></iframe>",
             ]
             .concat(),
             Block::image { file, caption } => {
-                ["<img src=\"", &file.url, "\" alt=\"", caption, "\"/>"].concat()
+                ["<img src=\"", &file.url, "\" alt=\"", &caption.replace(r#"""#, "&quot;").replace("<br>", ""), "\"/>"].concat()
             }
             Block::delimiter {} => "<div style=\"inline-size: 100%; block-size: 1px; background: var(--color-text)\"></div>".to_string(),
 
@@ -109,7 +116,7 @@ impl Block {
             Block::header { text, level: _ } => text,
             Block::list { style: _, items } => &items.join("\n"),
             Block::warning { title } => title,
-            Block::quote { text } => text,
+            Block::quote { text, caption } => &[text, caption.as_str()].concat(),
             _ => &"".to_string(),
         };
         let text = [text, "\n"].concat();
@@ -241,14 +248,17 @@ impl Blocks {
                     Block::paragraph { text: _ } => true,
                     Block::header { text: _, level } => *level > 1,
                     Block::warning { title: _ } => true,
-                    Block::quote { text: _ } => true,
+                    Block::quote {
+                        text: _,
+                        caption: _,
+                    } => true,
                     _ => false,
                 })
                 .map(|block| match block {
                     Block::paragraph { text } => text,
                     Block::header { text, level: _ } => text,
                     Block::warning { title } => title,
-                    Block::quote { text } => text,
+                    Block::quote { text, caption: _ } => text,
                     _ => "...",
                 })
                 .unwrap_or("No description"),

server/src/templates/default.html

@@ -2,8 +2,8 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="/assets/css/style.css" />
 </head>
 
@@ -11,6 +11,7 @@
     <site-header></site-header>
     <main>
     </main>
+    <site-footer></site-footer>
 </body>
 
 </html>

server/src/templates/site-footer.html

@@ -0,0 +1,56 @@
+<footer>
+    <div>
+        <h1>keep in touch</h1>
+        <div>
+            <form action="https://buttondown.com/api/emails/embed-subscribe/eviewrites" method="post"
+                target="popupwindow" onsubmit="window.open('https://buttondown.com/eviewrites', 'popupwindow')"
+                class="embeddable-buttondown-form">
+                <label for="bd-email">
+                    <p>Subscribe to my newsletter for updates &lt;3</p>
+                </label>
+                <div>
+                    <input type="email" name="email" id="bd-email" required />
+                    <input type="submit" value="Subscribe" style="border-inline-start: none;" />
+                </div>
+            </form>
+            <p>Or subscribe to my <a class="animated-link-underline" href="/feed.xml">RSS feed</a>! RSS rules, you can
+                learn more
+                about
+                it <a href="https://guides.library.yale.edu/keepingup/basics" class="animated-link-underline"
+                    target="_blank" rel="noreferrer">here</a>.</p>
+        </div>
+    </div>
+    <div>
+        <h1>credits</h1>
+        <div>
+            <p><a href="https://augustkline.com" class="animated-link-underline" target="_blank" rel="noreferrer">august
+                    kline</a>
+                made this website. <a href="mailto:inquiries@augustkline.com" class="animated-link-underline">give her
+                    money</a> and she will make you
+                one too.</p>
+            <p><a href="https://www.redaction.us/" class="animated-link-underline" target="_blank"
+                    rel="noreferrer">Redaction</a> and <a href="https://www.brailleinstitute.org/freefont/"
+                    class="animated-link-underline" target="_blank" rel="noreferrer">Atkinson Hyperlegible</a> are used
+                as display and text typefaces,
+                respectively.</p>
+        </div>
+    </div>
+    <div>
+        <h1>elsewhere</h1>
+        <nav>
+            <ul>
+                <li>
+                    <ul>
+                        <li>
+                            <a href="https://www.instagram.com/everzines/" class="animated-link" target="_blank"
+                                rel="noreferrer">insta</a>
+                        </li>
+                        <li>
+                            <a href="mailto:evieippolito@duck.com" class="animated-link">email</a>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </nav>
+    </div>
+</footer>

stage.sh

@@ -6,7 +6,7 @@ set -e
 
 cargo update; 
  
-DOMAIN=evieippolito.com CARGO_TARGET_X86_64_UNKNOWN_LINUX_GNU_LINKER=x86_64-linux-gnu-gcc cargo build --release --target x86_64-unknown-linux-gnu;
+DOMAIN=staging.evieippolito.com CARGO_TARGET_X86_64_UNKNOWN_LINUX_GNU_LINKER=x86_64-linux-gnu-gcc cargo build --release --target x86_64-unknown-linux-gnu;
 
 scp target/x86_64-unknown-linux-gnu/release/evie kline@augustkline.com:/home/kline/;