added htmx request for albums

artist-alerts/src/main.rs

@@ -15,6 +15,14 @@ struct HelloTemplate {
     name: String
 }
 
+#[derive(Template)]
+#[template(path = "album_carousel_item.html")]
+struct AlbumCarouselItem {
+    title: String,
+}
+
+
+
 #[tokio::main]
 async fn main() {
     tracing_subscriber::fmt::init();
@@ -25,6 +33,7 @@ async fn main() {
     let app = Router::new()
         .route("/", get(index))
         .route("/users", post(create_user))
+        .route("/album/highlights", get(highlight_albums))
         .nest_service("/static", static_files_service)
         .layer(TraceLayer::new_for_http())
         .with_state("Nick".to_string())
@@ -40,6 +49,17 @@ async fn index (axum::extract::State(name): axum::extract::State<String>) -> Res
 
 }
 
+async fn highlight_albums () -> String {
+    let mut output = String::new();
+    for i in 1..=10 {
+        let item = AlbumCarouselItem {
+            title: format!("Album Item: {}", i.to_string())
+        };
+        output.push_str(&item.render().unwrap());
+    }
+    output
+}
+
 async fn create_user(
     // this argument tells axum to parse the request body␍
     // as JSON into a `CreateUser` type␍

artist-alerts/templates/album_carousel_item.html

@@ -0,0 +1,11 @@
+<div class="mx-5 my-auto rounded-md aspect-albumCarousel h-56 bg-emerald-500">
+    <div class="aspect-square rounded-t-md bg-slate-800">
+        
+
+    </div>
+    <div class="text-white flex justify-center">
+        <p>
+            {{ title }}
+        </p>
+    </div>
+</div>

artist-alerts/templates/index.html

@@ -41,7 +41,10 @@
     </div>
 
         <div class="max-w-7xl pt-6 mx-auto">
-            <div class="w-100 h-64 flex overflow-x-auto rounded-lg bg-slate-200">
+            <div class="w-100 h-64 flex overflow-x-auto rounded-lg bg-slate-200"
+                hx-trigger="load"
+                hx-get="/album/highlights"
+                >
                 <div class="mx-5 my-auto rounded-md overflow-hidden aspect-albumCarousel h-56 bg-emerald-500">
                     <div class="aspect-square bg-slate-800">