add css and js finally

crates/backend/src/chat.rs

@@ -47,6 +47,7 @@ pub async fn get(
     } else {
         MarkupResponse::new(
             html! {
+                link rel="stylesheet" href="/css";
                 template #chatmessage {
                     div.message {
                         p { }
@@ -67,7 +68,7 @@ pub async fn get(
                         button type="submit" { "Send!" }
                     }
                 }
-                script src="/static/chat.js" {};
+                script src="/js" {};
 
             },
             "Cursed Messenger from hell",

crates/backend/src/main.rs

@@ -1,4 +1,5 @@
 use axum::{routing::get, Router};
+use http::header;
 use sqlx::{Pool, Postgres};
 use state::AppState;
 use tracing::Level;
@@ -24,11 +25,28 @@ async fn main() -> anyhow::Result<()> {
 
     let app = Router::new()
         .route("/", get(|| async { "<h1>gay</h1>" }))
+        .route(
+            "/js",
+            get(|| async {
+                (
+                    [(header::CONTENT_TYPE, "text/javascript")],
+                    include_str!("../../../static/chat.js"),
+                )
+            }),
+        )
+        .route(
+            "/css",
+            get(|| async {
+                (
+                    [(header::CONTENT_TYPE, "text/css")],
+                    include_str!("../../../static/chat.css"),
+                )
+            }),
+        )
         .route("/:path", get(chat::get).post(chat::post))
         .route("/poll/:msg", get(chat::poll))
         .with_state(state.clone())
-        .nest("/admin", admin::router(state.clone()))
-        .nest("/static", axum_static::static_router("static"));
+        .nest("/admin", admin::router(state.clone()));
     let listener = tokio::net::TcpListener::bind("0.0.0.0:8080").await.unwrap();
     axum::serve(listener, app).await?;
 

static/chat.css

@@ -0,0 +1,30 @@
+html,
+body {
+  background: #222;
+}
+
+.message {
+  display: flex;
+  flex-direction: column;
+}
+
+.message p {
+  width: fit-content;
+  background: #333;
+  border: 2px solid #999;
+  padding: 10px;
+  border-radius: 15px;
+}
+
+.from_user p,
+.from_user .timestamp {
+  align-self: flex-end;
+}
+
+.from_user p {
+  border-bottom-right-radius: 5px;
+}
+
+.from_admin p {
+  border-bottom-left-radius: 5px;
+}