Add hx-boosted support to Layout

It will now skip rendering the layout if the request is coming from an
hx-boosted link or form and only update the head title with a
hx-swap-oob.

Cargo.lock

@@ -744,6 +744,7 @@ dependencies = [
  "dotenvy",
  "feed-rs",
  "futures",
+ "headers",
  "http",
  "maud",
  "notify",

Cargo.toml

@@ -26,6 +26,7 @@ clap = { version = "4.4", features = ["derive", "env"] }
 dotenvy = "0.15"
 feed-rs = "1.3"
 futures = "0.3"
+headers = "0.3"
 http = "0.2.9"
 maud = { version = "0.25", features = ["axum"] }
 notify = "6"

frontend/css/styles.css

@@ -228,7 +228,6 @@ header.feed-header button {
   display: grid;
   grid-template-columns: fit-content(100%) minmax(100px, 400px);
   grid-gap: 16px;
-  width: 100%;
   margin: 16px;
   margin-bottom: 32px;
 }

src/handlers/entry.rs

@@ -2,11 +2,13 @@ use std::fs;
 
 use axum::extract::{Path, State};
 use axum::response::Response;
+use axum::TypedHeader;
 use maud::{html, PreEscaped};
 use sqlx::PgPool;
 
 use crate::config::Config;
 use crate::error::Result;
+use crate::htmx::HXBoosted;
 use crate::models::entry::Entry;
 use crate::partials::layout::Layout;
 use crate::uuid::Base62Uuid;
@@ -15,6 +17,7 @@ pub async fn get(
     Path(id): Path<Base62Uuid>,
     State(pool): State<PgPool>,
     State(config): State<Config>,
+    hx_boosted: Option<TypedHeader<HXBoosted>>,
     layout: Layout,
 ) -> Result<Response> {
     let entry = Entry::get(&pool, id.as_uuid()).await?;
@@ -25,20 +28,23 @@ pub async fn get(
         .published_at
         .to_rfc3339_opts(chrono::SecondsFormat::Millis, true);
     let content = fs::read_to_string(content_path).unwrap_or_else(|_| "No content".to_string());
-    Ok(layout.with_subtitle(&title).render(html! {
+    Ok(layout
-        article {
+        .with_subtitle(&title)
-            header {
+        .boosted(hx_boosted)
-                h2 class="title" { a href=(entry.url) { (title) } }
+        .render(html! {
-            }
+            article {
-            div {
+                header {
-                span class="published" {
+                    h2 class="title" { a href=(entry.url) { (title) } }
-                    strong { "Published: " }
+                }
-                    time datetime=(published_at) class="local-time" {
+                div {
-                        (published_at)
+                    span class="published" {
+                        strong { "Published: " }
+                        time datetime=(published_at) class="local-time" {
+                            (published_at)
+                        }
                     }
                 }
+                (PreEscaped(content))
             }
-            (PreEscaped(content))
+        }))
-        }
-    }))
 }

src/handlers/feed.rs

@@ -4,7 +4,7 @@ use axum::extract::{Path, State};
 use axum::http::StatusCode;
 use axum::response::sse::{Event, KeepAlive};
 use axum::response::{IntoResponse, Redirect, Response, Sse};
-use axum::Form;
+use axum::{Form, TypedHeader};
 use feed_rs::parser;
 use maud::html;
 use serde::Deserialize;
@@ -16,6 +16,7 @@ use tokio_stream::StreamExt;
 use crate::actors::crawl_scheduler::{CrawlSchedulerHandle, CrawlSchedulerHandleMessage};
 use crate::actors::feed_crawler::FeedCrawlerHandleMessage;
 use crate::error::{Error, Result};
+use crate::htmx::HXBoosted;
 use crate::models::entry::{Entry, GetEntriesOptions};
 use crate::models::feed::{CreateFeed, Feed};
 use crate::partials::add_feed_form::add_feed_form;
@@ -27,6 +28,7 @@ use crate::uuid::Base62Uuid;
 pub async fn get(
     Path(id): Path<Base62Uuid>,
     State(pool): State<PgPool>,
+    hx_boosted: Option<TypedHeader<HXBoosted>>,
     layout: Layout,
 ) -> Result<Response> {
     let feed = Feed::get(&pool, id.as_uuid()).await?;
@@ -37,7 +39,7 @@ pub async fn get(
     let title = feed.title.unwrap_or_else(|| "Untitled Feed".to_string());
     let entries = Entry::get_all(&pool, &options).await?;
     let delete_url = format!("/feed/{}/delete", id);
-    Ok(layout.with_subtitle(&title).render(html! {
+    Ok(layout.with_subtitle(&title).boosted(hx_boosted).render(html! {
         header class="feed-header" {
             h2 { (title) }
             button class="edit-feed" { "✏️ Edit feed" }

src/handlers/feeds.rs

@@ -1,29 +1,38 @@
 use axum::extract::State;
 use axum::response::Response;
+use axum::TypedHeader;
 use maud::html;
 use sqlx::PgPool;
 
 use crate::error::Result;
+use crate::htmx::HXBoosted;
 use crate::models::feed::{Feed, GetFeedsOptions};
 use crate::partials::add_feed_form::add_feed_form;
 use crate::partials::feed_list::feed_list;
 use crate::partials::layout::Layout;
 use crate::partials::opml_import_form::opml_import_form;
 
-pub async fn get(State(pool): State<PgPool>, layout: Layout) -> Result<Response> {
+pub async fn get(
+    State(pool): State<PgPool>,
+    hx_boosted: Option<TypedHeader<HXBoosted>>,
+    layout: Layout,
+) -> Result<Response> {
     let options = GetFeedsOptions::default();
     let feeds = Feed::get_all(&pool, &options).await?;
-    Ok(layout.with_subtitle("feeds").render(html! {
+    Ok(layout
-        header { h2 { "Feeds" } }
+        .with_subtitle("feeds")
-        div class="feeds" {
+        .boosted(hx_boosted)
-            ul id="feeds" {
+        .render(html! {
-                (feed_list(feeds, &options))
+            header { h2 { "Feeds" } }
+            div class="feeds" {
+                ul id="feeds" {
+                    (feed_list(feeds, &options))
+                }
+                div class="add-feed" {
+                    h3 { "Add Feed" }
+                    (add_feed_form())
+                    (opml_import_form())
+                }
             }
-            div class="add-feed" {
+        }))
-                h3 { "Add Feed" }
-                (add_feed_form())
-                (opml_import_form())
-            }
-        }
-    }))
 }

src/handlers/home.rs

@@ -1,16 +1,22 @@
 use axum::extract::State;
 use axum::response::Response;
+use axum::TypedHeader;
 use maud::html;
 use sqlx::PgPool;
 
 use crate::error::Result;
+use crate::htmx::HXBoosted;
 use crate::models::entry::Entry;
-use crate::partials::{layout::Layout, entry_list::entry_list};
+use crate::partials::{entry_list::entry_list, layout::Layout};
 
-pub async fn get(State(pool): State<PgPool>, layout: Layout) -> Result<Response> {
+pub async fn get(
+    State(pool): State<PgPool>,
+    hx_boosted: Option<TypedHeader<HXBoosted>>,
+    layout: Layout,
+) -> Result<Response> {
     let options = Default::default();
     let entries = Entry::get_all(&pool, &options).await?;
-    Ok(layout.render(html! {
+    Ok(layout.boosted(hx_boosted).render(html! {
         ul class="entries" {
             (entry_list(entries, &options))
         }

src/handlers/log.rs

@@ -9,6 +9,7 @@ use axum::response::{
     sse::{Event, Sse},
     Response,
 };
+use axum::TypedHeader;
 use bytes::Bytes;
 use maud::{html, PreEscaped};
 use tokio::sync::watch::Receiver;
@@ -17,16 +18,20 @@ use tokio_stream::Stream;
 use tokio_stream::StreamExt;
 
 use crate::error::Result;
+use crate::htmx::HXBoosted;
 use crate::log::MEM_LOG;
 use crate::partials::layout::Layout;
 
-pub async fn get(layout: Layout) -> Result<Response> {
+pub async fn get(hx_boosted: Option<TypedHeader<HXBoosted>>, layout: Layout) -> Result<Response> {
     let mem_buf = MEM_LOG.lock().unwrap();
-    Ok(layout.with_subtitle("log").render(html! {
+    Ok(layout
-        pre id="log" hx-sse="connect:/log/stream swap:message" hx-swap="beforeend" {
+        .with_subtitle("log")
-            (PreEscaped(convert_escaped(from_utf8(mem_buf.as_slices().0).unwrap()).unwrap()))
+        .boosted(hx_boosted)
-        }
+        .render(html! {
-    }))
+            pre id="log" hx-sse="connect:/log/stream swap:message" hx-swap="beforeend" hx-target="#log" {
+                (PreEscaped(convert_escaped(from_utf8(mem_buf.as_slices().0).unwrap()).unwrap()))
+            }
+        }))
 }
 
 pub async fn stream(

src/handlers/login.rs

@@ -1,4 +1,5 @@
 use axum::response::{IntoResponse, Response};
+use axum::TypedHeader;
 use axum::{extract::State, Form};
 use maud::html;
 use serde::Deserialize;
@@ -7,7 +8,7 @@ use sqlx::PgPool;
 
 use crate::auth::verify_password;
 use crate::error::{Error, Result};
-use crate::htmx::HXRedirect;
+use crate::htmx::{HXBoosted, HXRedirect};
 use crate::partials::login_form::{login_form, LoginFormProps};
 use crate::{
     models::user::{AuthContext, User},
@@ -21,13 +22,16 @@ pub struct Login {
     password: String,
 }
 
-pub async fn get(layout: Layout) -> Result<Response> {
+pub async fn get(hx_boosted: Option<TypedHeader<HXBoosted>>, layout: Layout) -> Result<Response> {
-    Ok(layout.with_subtitle("login").render(html! {
+    Ok(layout
-        header {
+        .with_subtitle("login")
-            h2 { "Login" }
+        .boosted(hx_boosted)
-        }
+        .render(html! {
-        (login_form(LoginFormProps::default()))
+            header {
-    }))
+                h2 { "Login" }
+            }
+            (login_form(LoginFormProps::default()))
+        }))
 }
 
 pub async fn post(

src/handlers/signup.rs

@@ -1,4 +1,5 @@
 use axum::response::{IntoResponse, Response};
+use axum::TypedHeader;
 use axum::{extract::State, Form};
 use maud::html;
 use serde::Deserialize;
@@ -6,7 +7,7 @@ use serde_with::{serde_as, NoneAsEmptyString};
 use sqlx::PgPool;
 
 use crate::error::{Error, Result};
-use crate::htmx::HXRedirect;
+use crate::htmx::{HXBoosted, HXRedirect};
 use crate::models::user::{AuthContext, CreateUser, User};
 use crate::partials::layout::Layout;
 use crate::partials::signup_form::{signup_form, SignupFormProps};
@@ -21,13 +22,16 @@ pub struct Signup {
     pub name: Option<String>,
 }
 
-pub async fn get(layout: Layout) -> Result<Response> {
+pub async fn get(hx_boosted: Option<TypedHeader<HXBoosted>>, layout: Layout) -> Result<Response> {
-    Ok(layout.with_subtitle("signup").render(html! {
+    Ok(layout
-        header {
+        .with_subtitle("signup")
-            h2 { "Signup" }
+        .boosted(hx_boosted)
-        }
+        .render(html! {
-        (signup_form(SignupFormProps::default()))
+            header {
-    }))
+                h2 { "Signup" }
+            }
+            (signup_form(SignupFormProps::default()))
+        }))
 }
 
 pub async fn post(

src/htmx.rs

@@ -1,9 +1,12 @@
 use axum::response::{IntoResponse, Response};
+use headers::{self, Header};
 use http::header::{HeaderName, HeaderValue};
 use http::StatusCode;
 
 #[allow(clippy::declare_interior_mutable_const)]
-const HX_LOCATION: HeaderName = HeaderName::from_static("hx-location");
+pub const HX_LOCATION: HeaderName = HeaderName::from_static("hx-location");
+#[allow(clippy::declare_interior_mutable_const)]
+pub const HX_BOOSTED: HeaderName = HeaderName::from_static("hx-boosted");
 
 /// Sets the HX-Location header so that HTMX redirects to the given URI. Unlike 
 /// axum::response::Redirect this does not return a 300-level status code (instead, a 200 status 
@@ -30,3 +33,51 @@ impl IntoResponse for HXRedirect {
             .into_response()
     }
 }
+
+#[derive(Debug)]
+pub struct HXBoosted(bool);
+
+impl HXBoosted {
+    pub fn is_boosted(&self) -> bool {
+        self.0
+    }
+}
+
+impl Header for HXBoosted {
+    fn name() -> &'static HeaderName {
+        static HX_BOOSTED_STATIC: HeaderName = HX_BOOSTED;
+        &HX_BOOSTED_STATIC
+    }
+
+    fn decode<'i, I>(values: &mut I) -> Result<Self, headers::Error>
+    where
+        I: Iterator<Item = &'i HeaderValue>,
+    {
+        let value = values
+            .next()
+            .ok_or_else(headers::Error::invalid)?;
+
+        if value == "true" {
+            Ok(HXBoosted(true))
+        } else if value == "false" {
+            Ok(HXBoosted(false))
+        } else {
+            Err(headers::Error::invalid())
+        }
+    }
+
+    fn encode<E>(&self, values: &mut E)
+    where
+        E: Extend<HeaderValue>,
+    {
+        let s = if self.0 {
+            "true"
+        } else {
+            "false"
+        };
+
+        let value = HeaderValue::from_static(s);
+
+        values.extend(std::iter::once(value));
+    }
+}

src/partials/layout.rs

@@ -8,15 +8,16 @@ use axum::{
     extract::{FromRef, FromRequestParts, State},
     http::request::Parts,
     response::{Html, IntoResponse, Response},
+    TypedHeader,
 };
 use axum_login::{extractors::AuthContext, SqlxStore};
 use maud::{html, Markup, DOCTYPE};
 use sqlx::PgPool;
 use uuid::Uuid;
 
-use crate::partials::header::header;
-use crate::{config::Config, partials::footer::footer};
 use crate::models::user::User;
+use crate::{config::Config, partials::footer::footer};
+use crate::{htmx::HXBoosted, partials::header::header};
 #[cfg(not(debug_assertions))]
 use crate::{CSS_MANIFEST, JS_MANIFEST};
 
@@ -25,6 +26,7 @@ pub struct Layout {
     pub title: String,
     pub subtitle: Option<String>,
     pub user: Option<User>,
+    pub boosted: bool,
 }
 
 #[async_trait]
@@ -39,9 +41,10 @@ where
         let State(config) = State::<Config>::from_request_parts(parts, state)
             .await
             .map_err(|err| err.into_response())?;
-        let auth_context = AuthContext::<Uuid, User, SqlxStore<PgPool, User>>::from_request_parts(parts, state)
+        let auth_context =
-            .await
+            AuthContext::<Uuid, User, SqlxStore<PgPool, User>>::from_request_parts(parts, state)
-            .map_err(|err| err.into_response())?;
+                .await
+                .map_err(|err| err.into_response())?;
         Ok(Self {
             title: config.title,
             user: auth_context.current_user,
@@ -115,6 +118,22 @@ impl Layout {
         self
     }
 
+    /// If the given HX-Boosted header is present and "true", makes this Layout boosted.
+    ///
+    /// A boosted layout will skip rendering the layout and only render the template with a 
+    /// hx-swap-oob <title> element to update the document title.
+    ///
+    /// Links and forms that are boosted with the hx-boost attribute are only updating a portion of 
+    /// the page inside the layout, so there is no need to render and send the layout again.
+    pub fn boosted(mut self, hx_boosted: Option<TypedHeader<HXBoosted>>) -> Self {
+        if let Some(hx_boosted) = hx_boosted {
+            if hx_boosted.is_boosted() {
+                self.boosted = true;
+            }
+        }
+        self
+    }
+
     fn full_title(&self) -> String {
         if let Some(subtitle) = &self.subtitle {
             format!("{} - {}", self.title, subtitle)
@@ -124,28 +143,34 @@ impl Layout {
     }
 
     pub fn render(self, template: Markup) -> Response {
-        let with_layout = html! {
+        if self.boosted {
-            (DOCTYPE)
+            html! {
-            html lang="en" {
+                title hx-swap-oob="true" { (self.full_title()) }
-                head {
+                (template)
-                    meta charset="utf-8";
+            }
-                    title { (self.full_title()) }
+            .into_response()
-                    @for js_file in js_manifest() {
+        } else {
-                        script type="module" src=(js_file) {}
+            html! {
+                (DOCTYPE)
+                html lang="en" {
+                    head {
+                        meta charset="utf-8";
+                        title { (self.full_title()) }
+                        @for js_file in js_manifest() {
+                            script type="module" src=(js_file) {}
+                        }
+                        @for css_file in css_manifest() {
+                            link rel="stylesheet" href=(css_file) {}
+                        }
                     }
-                    @for css_file in css_manifest() {
+                    body hx-boost="true" hx-target="#main-content" {
-                        link rel="stylesheet" href=(css_file) {}
+                        (header(&self.title, self.user))
+                        main id="main-content" { (template) }
+                        (footer())
                     }
                 }
-                body hx-booster="true" {
-                    (header(&self.title, self.user))
-                    (template)
-                    (footer())
-                }
             }
+            .into_response()
         }
-        .into_string();
-
-        Html(with_layout).into_response()
     }
 }