Merge pull request #2 from z9fr/feature/develop/htmx-support

feat: added hidden email and fix issue with result cache

Author: ebadfd

src/handlers/mod.rs

@@ -95,6 +95,12 @@ pub async fn contact(Extension(state): Extension<Arc<State>>, headers: HeaderMap
     crate::tmpl::contact(&cfg.contact_links, is_htmx_request(headers))
 }
 
+#[instrument]
+pub async fn email_address() -> Markup {
+    HIT_COUNTER.with_label_values(&["email_view"]).inc();
+    crate::tmpl::email_address()
+}
+
 #[instrument(skip(headers))]
 pub async fn stack(headers: HeaderMap) -> Markup {
     HIT_COUNTER.with_label_values(&["stack"]).inc();

src/lib.rs

@@ -3,8 +3,8 @@ use axum::{
     extract::Extension,
     http::header::{self, CONTENT_TYPE},
     response::Response,
-    routing::get,
     routing::get_service,
+    routing::{get, post},
     Router,
 };
 use color_eyre::eyre::Result;
@@ -71,6 +71,7 @@ pub async fn run_server() -> Result<()> {
         .route("/metrics", get(metrics))
         .route("/stack", get(handlers::stack))
         .route("/contact", get(handlers::contact))
+        .route("/email", post(handlers::email_address))
         // blog
         .route("/blog", get(handlers::blog::index))
         .route("/blog/:name", get(handlers::blog::post_view))

src/tmpl/blog.rs

@@ -40,6 +40,15 @@ fn post_metadata(post: &Post, author: &Author, domain: &str) -> Markup {
 
 pub fn post_index(posts: &[Post], title: &str, show_extra: bool, is_partial: bool) -> Markup {
     let today = Utc::now().date_naive();
+
+    fn post_url(post: &Post) -> String {
+        if let Some(redirect_to) = &post.front_matter.redirect_to {
+            redirect_to.clone()
+        } else {
+            "/".to_string() + &post.link
+        }
+    }
+
     let markup = html! {
         .content {
             h1 { (title) }
@@ -54,12 +63,12 @@ pub fn post_index(posts: &[Post], title: &str, show_extra: bool, is_partial: boo
                 }
             }
             p {
-                ul {
+                ul hx-boost="true" hx-swap="innerHTML" hx-target=".snowframe" hx-include="[name='bustCache']"{
                     @for post in posts.iter().filter(|p| today.num_days_from_ce() >= p.date.num_days_from_ce()) {
                         li {
                             (post.detri())
                             " - "
-                                a href={ @if post.front_matter.redirect_to.as_ref().is_some() {(post.front_matter.redirect_to.as_ref().unwrap())} @else {"/" (post.link)}} { (post.front_matter.title) }
+                                a href={(post_url(post))} hx-push-url={(post_url(post))} { (post.front_matter.title) }
                         }
                     }
                 }

src/tmpl/mod.rs

@@ -135,14 +135,16 @@ pub fn base(title: Option<&str>, styles: Option<&str>, content: Markup) -> Marku
                 div.indeterminate style="background-color: #ff2e88;"{}
             }
 
+            input name="bustCache" value={(*CACHEBUSTER)} type="hidden" {}
+
             body.snow.hack.dark-grey hx-ext="preload" hx-indicator=".progress" {
                 .container {
                     br;
 
                     header {
                         nav {
-                            div hx-boost="true"  hx-push-url="true"  hx-swap="innerHTML" hx-target=".snowframe" {
-                                a.logo href="/" { "> z9fr@blog:~$" }
+                            div hx-boost="true" hx-swap="innerHTML" hx-target=".snowframe" hx-include="[name='bustCache']" {
+                                a.logo href="/" hx-push-url="/" { "> z9fr@blog:~$" }
                             }
                         }
                     }
@@ -155,15 +157,15 @@ pub fn base(title: Option<&str>, styles: Option<&str>, content: Markup) -> Marku
                     }
                     hr;
                     footer {
-                        div hx-boost="true"  hx-push-url="true"  hx-swap="innerHTML" hx-target=".snowframe" {
+                        div hx-boost="true" hx-include="[name='bustCache']" hx-swap="innerHTML" hx-target=".snowframe" {
                             nav {
-                                a href="/" preload{ "Home" }
+                                a href="/" hx-push-url="/" { "Home" }
                                 " - "
-                                a href="/blog" preload{ "Blog" }
+                                a href="/blog" hx-push-url="/blog" { "Blog" }
                                 " - "
-                                a  href="/contact"  preload { "Contact" }
+                                a  href="/contact" hx-push-url="/contact" { "Contact" }
                                 " - "
-                                a href="/stack" preload{ "Uses" }
+                                a href="/stack" hx-push-url="/stack" { "Uses" }
                             }
                         }
 
@@ -179,6 +181,12 @@ pub fn base(title: Option<&str>, styles: Option<&str>, content: Markup) -> Marku
     }
 }
 
+pub fn email_address() -> Markup {
+    return html!(
+        a href={"mailto:z9fr@protonmail.com"} {"z9fr@protonmail.com"}
+    );
+}
+
 pub fn contact(links: &Vec<Link>, is_partial: bool) -> Markup {
     let markup = html! {
         h1 {"Contact Information"}
@@ -189,7 +197,11 @@ pub fn contact(links: &Vec<Link>, is_partial: bool) -> Markup {
         .grid {
             .cell."-6of12" {
                 h3 {"Email"}
-                a href={"mailto:z9fr@protonmail.com"} {"z9fr@protonmail.com"}
+
+                button."btn btn-default btn-ghost" hx-indicator="#spinner" hx-post="/email" hx-swap="outerHTML" {
+                    "View email address"  span.loading id="spinner" style="display:none;"{}
+                };
+
                 br;
                 br;