From 0dae560a393887883ef00eb3546b3c2164060274 Mon Sep 17 00:00:00 2001
From: Daniel Flanagan <daniel@lyte.dev>
Date: Fri, 10 Nov 2023 23:50:21 -0600
Subject: [PATCH] zomg livereload

---
 Cargo.lock        | 15 ++++++++
 Cargo.toml        |  1 +
 assets/styles.css | 90 +++++++++++++++++++++++++++++++++--------------
 src/main.rs       | 11 ++++--
 4 files changed, 89 insertions(+), 28 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 4202bab..557f721 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -319,6 +319,7 @@ dependencies = [
  "serde",
  "tokio",
  "tower-http",
+ "tower-livereload",
  "tracing",
  "tracing-subscriber",
 ]
@@ -848,6 +849,20 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c20c8dbed6283a09604c3e69b4b7eeb54e298b8a600d4d5ecb5ad39de609f1d0"
 
+[[package]]
+name = "tower-livereload"
+version = "0.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d0120131157a67379cccab051900a0fba91ff3e0995fb345127470f06e8b998d"
+dependencies = [
+ "bytes",
+ "http",
+ "http-body",
+ "pin-project-lite",
+ "tokio",
+ "tower",
+]
+
 [[package]]
 name = "tower-service"
 version = "0.3.2"
diff --git a/Cargo.toml b/Cargo.toml
index 0e78f1b..2a377ba 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -10,5 +10,6 @@ maud = "0.25.0"
 serde = { version = "1.0.192", features = ["derive"] }
 tokio = { version = "1.34.0", features = ["full"] }
 tower-http = { version = "0.4.4", features = ["fs"] }
+tower-livereload = "0.8.2"
 tracing = "0.1.40"
 tracing-subscriber = { version = "0.3.17", features = ["env-filter"] }
diff --git a/assets/styles.css b/assets/styles.css
index b67acd4..68366f3 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -108,37 +108,73 @@ a[class] {
 :root {
   --font: monospace;
 
-  --bg: #fff;
-  --bg2: #eee;
-  --primary: #8b5cf6;
-  --text: #111;
-  --link: #04f;
+  /* catppuccin latte */
+  --Rosewater: #dc8a78;
+  --Flamingo: #dd7878;
+  --Pink: #ea76cb;
+  --Mauve: #8839ef;
+  --Red: #d20f39;
+  --Maroon: #e64553;
+  --Peach: #fe640b;
+  --Yellow: #df8e1d;
+  --Green: #40a02b;
+  --Teal: #179299;
+  --Sky: #04a5e5;
+  --Sapphire: #209fb5;
+  --Blue: #1e66f5;
+  --Lavender: #7287fd;
+  --Text: #4c4f69;
+  --Subtext1: #5c5f77;
+  --Subtext0: #6c6f85;
+  --Overlay2: #7c7f93;
+  --Overlay1: #8c8fa1;
+  --Overlay0: #9ca0b0;
+  --Surface2: #acb0be;
+  --Surface1: #bcc0cc;
+  --Surface0: #ccd0da;
+  --Base: #eff1f5;
+  --Mantle: #e6e9ef;
+  --Crust: #dce0e8;
+
+  --bg: var(--Base);
+  --bg2: var(--Surface0);
+  --primary: var(--Mauve);
+  --text: var(--Text);
+  --link-visited: var(--Lavender);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --bg: #111;
-    --bg2: #222;
-    --primary: #8b5cf6;
-    --text: #ccc;
-    --link: #0af;
-    --link-visited: #faf;
+    /* catppuccin mocha */
+    --Rosewater: #f5e0dc;
+    --Flamingo: #f2cdcd;
+    --Pink: #f5c2e7;
+    --Mauve: #cba6f7;
+    --Red: #f38ba8;
+    --Maroon: #eba0ac;
+    --Peach: #fab387;
+    --Yellow: #f9e2af;
+    --Green: #a6e3a1;
+    --Teal: #94e2d5;
+    --Sky: #89dceb;
+    --Sapphire: #74c7ec;
+    --Blue: #89b4fa;
+    --Lavender: #b4befe;
+    --Text: #cdd6f4;
+    --Subtext1: #bac2de;
+    --Subtext0: #a6adc8;
+    --Overlay2: #9399b2;
+    --Overlay1: #7f849c;
+    --Overlay0: #6c7086;
+    --Surface2: #585b70;
+    --Surface1: #45475a;
+    --Surface0: #313244;
+    --Base: #1e1e2e;
+    --Mantle: #181825;
+    --Crust: #11111b;
   }
 }
 
-a:not([class]) {
-  color: var(--link);
-}
-
-a:not([class]):visited {
-  color: var(--link-visited);
-}
-
-a.primary {
-  color: var(--primary);
-  text-decoration: none;
-}
-
 html {
   background-color: var(--bg);
   color: var(--text);
@@ -150,18 +186,20 @@ body>header {
   justify-content: space-between;
   /* border-bottom: solid 1px var(--bg2); */
   background-color: var(--bg);
-  box-shadow: 0 -1px 1ex rgba(0, 0, 0, 0.5);
+  box-shadow: 0 -1px 1ex var(--Crust);
 }
 
 body>header>nav {
   justify-content: space-between;
 }
 
-body>header a {
+body>header a:not([class]) {
   display: flex;
   align-items: center;
   padding: 1ex;
   transition: color 0.1s ease-out, background-color 0.1s ease-out;
+  text-decoration: none;
+  color: var(--primary);
 }
 
 body>header a:hover {
diff --git a/src/main.rs b/src/main.rs
index d462b10..26217a2 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -4,6 +4,7 @@ use axum::{response::Html, routing::get, Router};
 use maud::html;
 use std::net::SocketAddr;
 use tower_http::services::ServeDir;
+use tower_livereload::LiveReloadLayer;
 use tracing::{info, instrument, trace};
 use tracing_subscriber::{
     filter::{Directive, LevelFilter},
@@ -46,6 +47,7 @@ fn router() -> Router {
         .nest("/app", app_router)
         .nest_service("/assets", assets_dir)
         .route("/", get(index))
+        .layer(LiveReloadLayer::new())
 }
 
 async fn listen(r: Router) {
@@ -73,13 +75,18 @@ async fn index() -> Html<String> {
             header class="flex" {
                 nav class="flex" {
                     h1 {
-                        a class="primary" href="/" { "lyrs" }
+                        a href="/" { "lyrs" }
+                    }
+                    ul class="flex"
+                    {
+                        a href="/login" { "Login" }
                     }
                 }
                 nav class="flex" {
                     ul class="flex"
                     {
-                        a class="primary" href="/login" { "Login" }
+                        a href="/register" { "Register" }
+                        a href="/login" { "Login" }
                     }
                 }
             }