Get CSS working by adding a route to serve it.

Cargo.lock

@@ -2440,6 +2440,19 @@ dependencies = [
  "tokio",
 ]
 
+[[package]]
+name = "tokio-util"
+version = "0.7.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "806fe8c2c87eccc8b3267cbae29ed3ab2d0bd37fca70ab622e46aaa9375ddb7d"
+dependencies = [
+ "bytes",
+ "futures-core",
+ "futures-sink",
+ "pin-project-lite",
+ "tokio",
+]
+
 [[package]]
 name = "tower"
 version = "0.4.13"
@@ -2470,8 +2483,13 @@ dependencies = [
  "http",
  "http-body",
  "http-range-header",
+ "httpdate",
  "mime",
+ "mime_guess",
+ "percent-encoding",
  "pin-project-lite",
+ "tokio",
+ "tokio-util",
  "tower-layer",
  "tower-service",
  "tracing",

Cargo.toml

@@ -31,7 +31,7 @@ tokio = { version = "1", features = ["full", "tracing"], default-features = fals
 tokio-retry = "0.3"
 tokio-stream = "0.1"
 tower = { version = "0.4", features = ["util", "timeout"], default-features = false }
-tower-http = { version = "0.4", features = ["add-extension", "trace"] }
+tower-http = { version = "0.4", features = ["add-extension", "trace", "tracing", "fs"], default-features = false }
 tracing = "0.1"
 tracing-subscriber = { version = "0.3", features = ["env-filter"] }
 unicode-segmentation = "1"

src/db.rs

@@ -152,11 +152,12 @@ mod session_store {
 
     use super::*;
 
-    // NOTE! This code was straight stolen from
-    // https://github.com/jbr/async-sqlx-session/blob/30d00bed44ab2034082698f098eba48b21600f36/src/sqlite.rs
-    // and used under the terms of the MIT license:
-
     /*
+    NOTE! This code was straight stolen from
+    https://github.com/jbr/async-sqlx-session/blob/30d00bed44ab2034082698f098eba48b21600f36/src/sqlite.rs
+    and used under the terms of the MIT license:
+
+
     Copyright 2022 Jacob Rothstein
 
     Permission is hereby granted, free of charge, to any person obtaining a copy of this software and

src/lib.rs

@@ -40,6 +40,7 @@ pub async fn app(db_pool: sqlx::SqlitePool, secret: &[u8]) -> IntoMakeService<ax
     use generic_handlers::{handle_slash, handle_slash_redir};
     use login::{get_login, get_logout, post_login, post_logout};
     use signup::{get_create_user, get_signup_success, post_create_user};
+    use tower_http::services::ServeDir;
     use watches::handlers::{
         get_add_new_watch, get_search_watch, get_watch, get_watches, post_add_new_watch,
         post_add_watch_quest,
@@ -51,8 +52,17 @@ pub async fn app(db_pool: sqlx::SqlitePool, secret: &[u8]) -> IntoMakeService<ax
         (session_layer, auth_layer)
     };
 
+    let css_dir = std::env::current_dir()
+        .unwrap()
+        .join("templates")
+        .join("css");
+
     axum::Router::new()
         .route("/", get(handle_slash).post(handle_slash))
+        .nest_service(
+            "/css",
+            ServeDir::new(css_dir.as_path()).append_index_html_on_directories(false),
+        )
         .route("/signup", get(get_create_user).post(post_create_user))
         .route("/signup_success/:id", get(get_signup_success))
         .route("/login", get(get_login).post(post_login))

templates/base.html

@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% block title %}{{ title }} - What 2 Watch{% endblock %}</title>
-    <link rel="stylesheet" href="css/ww">
+    <link rel="stylesheet" href="/css/ww.css">
 
     {% block head %}{% endblock %}
 

templates/css/ww.css

@@ -1 +1,3 @@
-@import "picnic.min";
+p {
+    color: red
+}

templates/header_with_user.html

@@ -13,13 +13,13 @@
     </form>
 </div>
 
-{% else %}
+{% else %} <!-- this is for the `when` statement -->
 <div class="header_logged_out">
     Heya, why don't you <a href="/login">log in</a> or <a href="/signup">sign up</a>?
 </div>
 {% endmatch %}
 
-{% else %}
+{% else %} <!-- this is for whether or not the template has a user field or not -->
 
 {% endif %}