htmx

use askama::Template;
use axum::{
    Form, Router,
    extract::Query,
    http::{HeaderMap, HeaderValue, StatusCode, header},
    response::{Html, IntoResponse, Response},
    routing::{get, post},
};
use serde::Deserialize;

const BOOKS: [(&str, &str); 3] = [("9780441013593", "Dune"), ("9780593099322", "Dune Messiah"), ("9780441478125", "The Left Hand of Darkness")];

#[derive(Template)]
#[template(
    ext = "html",
    source = r#"<ul id="results">{% for (isbn, title) in books %}<li><a href="/books/{{ isbn }}">{{ title }}</a></li>{% else %}<li>No match.</li>{% endfor %}</ul>"#
)]
struct Results<'a> {
    books: Vec<(&'a str, &'a str)>,
}

#[derive(Template)]
#[template(
    ext = "html",
    source = r##"<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Catalogue</title>
<script src="/static/htmx-2.0.4.min.js" defer></script>
<meta name="htmx-config" content='{"responseHandling":[{"code":"204","swap":false},{"code":"[23]..","swap":true},{"code":"422","swap":true},{"code":"[45]..","swap":false,"error":true}]}'>
</head><body>
<input type="search" name="q" value="{{ q }}" hx-get="/books" hx-trigger="input changed delay:300ms" hx-target="#results" hx-swap="outerHTML" placeholder="Search">
{{ results|safe }}
<span id="review-count">0 reviews</span>
<form id="review-form" hx-post="/reviews" hx-swap="outerHTML">{{ form|safe }}</form>
</body></html>"##
)]
struct Page {
    q: String,
    results: String, // rendered fragments, already escaped by their own templates
    form: String,
}

#[derive(Template, Default)]
#[template(
    ext = "html",
    source = r#"<label>Review <textarea name="text">{{ text }}</textarea></label>{% if let Some(e) = error %}<p class="error" role="alert">{{ e }}</p>{% endif %}<button>Send</button>"#
)]
struct ReviewFields {
    text: String,
    error: Option<String>,
}

#[derive(Deserialize)]
struct Search {
    #[serde(default)]
    q: String,
}

fn is_htmx(headers: &HeaderMap) -> bool {
    headers.get("hx-request").is_some_and(|v| v == "true")
}

fn render<T: Template>(t: &T) -> Result<String, StatusCode> {
    t.render().map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)
}

async fn books(headers: HeaderMap, Query(search): Query<Search>) -> Result<Response, StatusCode> {
    let needle = search.q.to_lowercase();
    let books = BOOKS.iter().copied().filter(|(_, t)| t.to_lowercase().contains(&needle)).collect();
    let results = render(&Results { books })?;
    let mut response = if is_htmx(&headers) {
        Html(results).into_response() // fragment only
    } else {
        let form = render(&ReviewFields::default())?;
        Html(render(&Page { q: search.q, results, form })?).into_response() // full page
    };
    // caches must keep the two variants apart
    response.headers_mut().insert(header::VARY, HeaderValue::from_static("HX-Request"));
    Ok(response)
}

#[derive(Deserialize)]
struct ReviewForm {
    text: String,
}

async fn add_review(Form(form): Form<ReviewForm>) -> Result<Response, StatusCode> {
    if form.text.trim().len() < 10 {
        // 422 + the form re-rendered with the user's input and the message (swapped thanks to htmx-config above)
        let fields = render(&ReviewFields { text: form.text, error: Some("Please write at least 10 characters.".into()) })?;
        return Ok((StatusCode::UNPROCESSABLE_ENTITY, Html(format!(r#"<form id="review-form" hx-post="/reviews" hx-swap="outerHTML">{fields}</form>"#))).into_response());
    }
    // success: a fresh form, plus an out-of-band update of the counter elsewhere on the page,
    // plus an event that page scripts (e.g. a toast) can listen to
    let fields = render(&ReviewFields::default())?;
    let body = format!(
        r#"<form id="review-form" hx-post="/reviews" hx-swap="outerHTML">{fields}</form><span id="review-count" hx-swap-oob="true">1 review</span>"#
    );
    Ok(([("hx-trigger", r#"{"reviewAdded":{"message":"Thanks for your review!"}}"#)], Html(body)).into_response())
}

#[tokio::main]
async fn main() {
    let app = Router::new().route("/books", get(books)).route("/reviews", post(add_review));
    let listener = tokio::net::TcpListener::bind("127.0.0.1:3000").await.unwrap();
    axum::serve(listener, app).await.unwrap();
}

$ curl -s 'localhost:3000/books?q=dune' -H 'hx-request: true'
<ul id="results"><li><a href="/books/9780441013593">Dune</a></li><li><a href="/books/9780593099322">Dune Messiah</a></li></ul>
$ curl -s 'localhost:3000/books?q=dune' | head -c 58
<!doctype html><html lang="en"><head><meta charset="utf-8">
$ curl -si -d 'text=short' localhost:3000/reviews | grep -E '^HTTP|error'
HTTP/1.1 422 Unprocessable Entity
<form id="review-form" hx-post="/reviews" hx-swap="outerHTML"><label>Review <textarea name="text">short</textarea></label><p class="error" role="alert">Please write at least 10 characters.</p><button>Send</button></form>

use axum::{Form, Router, http::HeaderMap, response::IntoResponse, routing::post};
use serde::Deserialize;

#[derive(Deserialize)]
struct Login {
    username: String,
}

async fn login(headers: HeaderMap, Form(form): Form<Login>) -> impl IntoResponse {
    // ... authenticate, start the session ...
    let target = format!("/account?welcome={}", form.username.len());
    if headers.contains_key("hx-request") {
        ([("hx-redirect", target)], "").into_response() // htmx performs a full navigation
    } else {
        axum::response::Redirect::to(&target).into_response() // plain form post: 303
    }
}

#[tokio::main]
async fn main() {
    let app = Router::new().route("/login", post(login));
    let listener = tokio::net::TcpListener::bind("127.0.0.1:3000").await.unwrap();
    axum::serve(listener, app).await.unwrap();
}