automatic page refresh with htmx

src/main.rs

@@ -37,7 +37,7 @@ where
 
 #[axum::debug_handler]
 async fn main_handler(state: State<Arc<AppState>>) -> Result<Markup, AppError> {
-    Ok(templates::main_page(state))
+    Ok(templates::main_page(state, true))
 }
 
 #[tokio::main]

src/templates.rs

@@ -13,6 +13,7 @@ pub fn layout(content: Markup) -> Markup {
                 title { "beacon" }
                 meta name="viewport" content="width=device-width";
                 link rel="stylesheet" href="/static/style.css";
+                script src="/static/htmx.js" {}
             }
 
             body { (content) }
@@ -20,7 +21,7 @@ pub fn layout(content: Markup) -> Markup {
     }
 }
 
-pub fn main_page(state: State<Arc<AppState>>) -> Markup {
+pub fn main_page(state: State<Arc<AppState>>, with_layout: bool) -> Markup {
     let meta = state.data.fish_with_meta();
     let mut values: Vec<&CombinedFish> = meta.values().filter(|f| f.entry.big_fish).collect();
     values.sort_by(|afish, bfish| {
@@ -31,7 +32,7 @@ pub fn main_page(state: State<Arc<AppState>>) -> Markup {
             .then(bfish.rarity.total_cmp(&afish.rarity).reverse())
             .then(bfish.meta.name_en.cmp(&afish.meta.name_en))
     });
-    layout(html! {
+    let template = html! {
         h1 { "Hello! Current ET: " (clock::get_current_eorzea_date().format("%H:%M")) }
         @for fish in values {
             section.up[fish.is_up || fish.is_always_up] {
@@ -57,5 +58,15 @@ pub fn main_page(state: State<Arc<AppState>>) -> Markup {
                 }
             }
         }
-    })
+    };
+
+    if with_layout {
+        layout(html! {
+            main hx-get="/" hx-trigger="every 3s" {
+                (template)
+            }
+        })
+    } else {
+        template
+    }
 }

static/style.css

@@ -27,7 +27,7 @@ section {
 }
 
 .meta {
-    align-self: center;
+    text-align: end;
 }
 
 section.up {