2024-08-30 18:25:53 +02:00
9 changed files with 63 additions and 43 deletions
--- a/Cargo.lock
+++ b/Cargo.lock
@ -87,6 +87,7 @@ dependencies = [
 "askama",
 "askama_axum",
 "axum",
+ "axum-htmx",
 "cargo-watch",
 "listenfd",
 "notify 6.1.1",
@ -398,6 +399,20 @@ dependencies = [
 "tracing",
 ]

+[[package]]
+name = "axum-htmx"
+version = "0.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "36cdb6062317f732ed3acf4e9c28c3824092e226726616f46ebdd8cd32c82a41"
+dependencies = [
+ "async-trait",
+ "axum-core",
+ "futures",
+ "http",
+ "tokio",
+ "tower",
+]
+
 [[package]]
 name = "backtrace"
 version = "0.3.73"
@ -1470,6 +1485,20 @@ dependencies = [
 "new_debug_unreachable",
 ]

+[[package]]
+name = "futures"
+version = "0.3.30"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "645c6916888f6cb6350d2550b80fb63e734897a8498abe35cfb732b6487804b0"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-io",
+ "futures-sink",
+ "futures-task",
+ "futures-util",
+]
+
 [[package]]
 name = "futures-channel"
 version = "0.3.30"
@ -1477,6 +1506,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "eac8f7d7865dcb88bd4373ab671c8cf4508703796caa2b1985a9ca867b3fcb78"
 dependencies = [
 "futures-core",
+ "futures-sink",
 ]

 [[package]]
--- a/crates/app/Cargo.toml
+++ b/crates/app/Cargo.toml
@ -7,6 +7,7 @@ edition = "2021"
 askama = "0.12.1"
 askama_axum = "0.4.0"
 axum = "0.7.5"
+axum-htmx = { version = "0.6", features = ["auto-vary"] }
 listenfd = "1.0.1"
 notify = "6.1.1"
 serde = { version = "1.0.204", features = ["derive"] }
--- a/crates/app/src/components/base.html
+++ b/crates/app/src/components/base.html
@ -1,3 +1,7 @@
+{% if hx_request %}
+  <title>{% block title %}{{ title }}{% endblock %}</title>
+  {% block body %}{% endblock %}
+{% else %}
 <!doctype html>
 <html lang="fr" class="h-full">
  <head>
@ -17,3 +21,4 @@
    </div>
  </body>
 </html>
+{% endif %}
--- a/crates/app/src/components/navbar/menu-item.html
+++ b/crates/app/src/components/navbar/menu-item.html
@ -8,6 +8,10 @@
        {% else -%}
            class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
        {% endif -%}
+        hx-get="{{ item.href }}"
+        hx-push-url="true"
+        hx-swap="outerHTML"
+        hx-select-oob="#menu-items,#page-header,#page-main"
    >
        {{ item.label }}
    </a>
--- a/crates/app/src/components/navbar/navbar.html
+++ b/crates/app/src/components/navbar/navbar.html
@ -39,7 +39,7 @@
    </button>
  </div>
  <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
-    <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
+    <ul id="menu-items" class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
      {% for item in items %}
        {% include "navbar/menu-item.html" %}
      {% endfor %}
--- a/crates/app/src/lib.rs
+++ b/crates/app/src/lib.rs
@ -2,6 +2,7 @@ use std::path::Path;

 use askama_axum::Template;
 use axum::http::{StatusCode, Uri};
+use axum_htmx::{AutoVaryLayer, HxRequest};
 use tower_http::services::ServeDir;

 mod menu;
@ -13,10 +14,12 @@ async fn fallback(uri: Uri) -> (StatusCode, String) {

 #[derive(Template)]
 #[template(path = "index.html")]
-pub struct GetIndexTemplate;
+pub struct GetIndexTemplate {
+    hx_request: bool,
+}

-async fn root() -> GetIndexTemplate {
-    GetIndexTemplate {}
+async fn root(HxRequest(hx_request): HxRequest) -> GetIndexTemplate {
+    GetIndexTemplate { hx_request }
 }

 pub fn get_router(assets_path: &Path) -> axum::Router {
@ -25,4 +28,5 @@ pub fn get_router(assets_path: &Path) -> axum::Router {
        .route("/", axum::routing::get(root))
        .merge(pages::get_routes())
        .fallback(fallback)
+        .layer(AutoVaryLayer)
 }
--- a/crates/app/src/pages/cps.html
+++ b/crates/app/src/pages/cps.html
@ -6,7 +6,7 @@
 {% block body %}
 {% call navbar::navbar(current="cps") %}
 <div class="py-10">
-  <header>
+  <header id="page-header">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <h1
        id="page-title"
@ -16,17 +16,16 @@
      </h1>
    </div>
  </header>
-  <main>
+  <main id="page-main">
    <div
-      id="main-container"
      class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8"
    >
+      <div
+        class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-96 mb-4"
+      >A</div>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
        <div
          class="border-2 border-dashed border-gray-300 rounded-lg dark:border-gray-600 h-32 md:h-64"
-        >A</div>
-        <div
-          class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
        >B</div>
        <div
          class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
@ -34,10 +33,10 @@
        <div
          class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
        >D</div>
+        <div
+          class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
+        >E</div>
      </div>
-      <div
-        class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-96 mb-4"
-      >E</div>
    </div>
  </main>
 </div>
--- a/crates/app/src/pages/cps.rs
+++ b/crates/app/src/pages/cps.rs
@ -1,34 +1,12 @@
 use askama_axum::Template;
-use axum::{
-    async_trait,
-    extract::FromRequestParts,
-    http::{request::Parts, HeaderMap, StatusCode},
-};
+use axum_htmx::HxRequest;

 #[derive(Template)]
 #[template(path = "cps.html")]
-pub struct CpsTemplate;
-
-pub struct ExtractHxRequest(bool);
-
-#[async_trait]
-impl<S> FromRequestParts<S> for ExtractHxRequest
-where
-    S: Send + Sync,
-{
-    type Rejection = (StatusCode, &'static str);
-
-    async fn from_request_parts(parts: &mut Parts, _state: &S) -> Result<Self, Self::Rejection> {
-        if parts.headers.get("HX-Request").is_some() {
-            Ok(ExtractHxRequest(true))
-        } else {
-            Ok(ExtractHxRequest(false))
-        }
-    }
+pub struct CpsTemplate {
+    hx_request: bool,
 }

-pub async fn cps(headers: HeaderMap, hx_request: ExtractHxRequest) -> CpsTemplate {
-    println!("{:#?}", headers);
-    println!("{:#?}", hx_request.0);
-    CpsTemplate
+pub async fn cps(HxRequest(hx_request): HxRequest) -> CpsTemplate {
+    CpsTemplate { hx_request }
 }
--- a/crates/app/src/pages/index.html
+++ b/crates/app/src/pages/index.html
@ -6,7 +6,7 @@
 {% block body %}
 {% call navbar::navbar(current="home") %}
 <div class="py-10">
-  <header>
+  <header id="page-header">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <h1
        id="page-title"
@ -16,9 +16,8 @@
      </h1>
    </div>
  </header>
-  <main>
+  <main id="page-main">
    <div
-      id="main-container"
      class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8"
    >
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">