Component styles and hot-reloading

8 files changed, 136 insertions, 36 deletions

diff --git a/.gitignore b/.gitignore
index ea8c4bf..17945a2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 /target
+/style.css
diff --git a/Cargo.lock b/Cargo.lock
index ed903de..b441a79 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -245,7 +245,7 @@ dependencies = [
  "pathdiff",
  "serde",
  "toml",
- "winnow",
+ "winnow 0.7.4",
 ]
 
 [[package]]
@@ -1802,6 +1802,12 @@ dependencies = [
 ]
 
 [[package]]
+name = "siphasher"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "56199f7ddabf13fe5074ce809e7d3f42b42ae711800501b5b16ea82ad029c39d"
+
+[[package]]
 name = "slab"
 version = "0.4.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -1857,11 +1863,47 @@ dependencies = [
  "leptos_axum",
  "leptos_meta",
  "leptos_router",
+ "stylance",
  "tokio",
  "wasm-bindgen",
 ]
 
 [[package]]
+name = "stylance"
+version = "0.5.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fcda08e77bb732a73a207ce4f080670ff5f6933a7dd4c567cf5c038e2c950dfb"
+dependencies = [
+ "stylance-macros",
+]
+
+[[package]]
+name = "stylance-core"
+version = "0.5.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c0cb8a158cacd104c770228a25173facdcf85f26c97730660ad62a905c4fc6f0"
+dependencies = [
+ "anyhow",
+ "serde",
+ "siphasher",
+ "toml",
+ "winnow 0.5.40",
+]
+
+[[package]]
+name = "stylance-macros"
+version = "0.5.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0024020d03c9ea479ffbc7d4b85863648b9ffc8151b59d6bd6cdcf0dec27bf42"
+dependencies = [
+ "anyhow",
+ "proc-macro2",
+ "quote",
+ "stylance-core",
+ "syn",
+]
+
+[[package]]
 name = "syn"
 version = "2.0.100"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -2066,7 +2108,7 @@ dependencies = [
  "serde",
  "serde_spanned",
  "toml_datetime",
- "winnow",
+ "winnow 0.7.4",
 ]
 
 [[package]]
@@ -2442,6 +2484,15 @@ checksum = "589f6da84c646204747d1270a2a5661ea66ed1cced2631d546fdfb155959f9ec"
 
 [[package]]
 name = "winnow"
+version = "0.5.40"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f593a95398737aeed53e489c785df13f3618e41dbcd6718c6addbf1395aa6876"
+dependencies = [
+ "memchr",
+]
+
+[[package]]
+name = "winnow"
 version = "0.7.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0e97b544156e9bebe1a0ffbc03484fc1ffe3100cbce3ffb17eac35f7cdd7ab36"
diff --git a/Cargo.toml b/Cargo.toml
index df8d2a2..f589bb8 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -15,6 +15,7 @@ leptos_axum = { version = "0.7.0", optional = true }
 leptos_meta = { version = "0.7.0" }
 tokio = { version = "1", features = ["rt-multi-thread", "signal"], optional = true }
 wasm-bindgen = { version = "=0.2.100", optional = true }
+stylance = "0.5.5"
 
 [features]
 default = ["ssr"]
@@ -41,43 +42,23 @@ codegen-units = 1
 panic = "abort"
 
 [package.metadata.leptos]
-# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name
 output-name = "stormscribe"
-
-# The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.
 site-root = "target/stormscribe"
-
-# The site-root relative folder where all compiled output (JS, WASM and CSS) is written
-# Defaults to pkg
 site-pkg-dir = "pkg"
-
-# Assets source dir. All files found here will be copied and synchronized to site-root.
-# The assets-dir cannot have a sub directory with the same name/path as site-pkg-dir.
 assets-dir = "public"
-
-# The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
+style-file = "style.css"
+# watch-additional-files = ["style.css"]
 site-addr = "127.0.0.1:3000"
-
-# The port to use for automatic reload monitoring
 reload-port = 3001
-
-#  The browserlist query used for optimizing the CSS.
 browserquery = "defaults"
-
-# The environment Leptos will run in, usually either "DEV" or "PROD"
 env = "DEV"
 
-# The features to use when compiling the bin target
 bin-features = ["ssr"]
-
-# If the --no-default-features flag should be used when compiling the bin target
 bin-default-features = false
-
-# The features to use when compiling the lib target
 lib-features = ["hydrate"]
-
-# If the --no-default-features flag should be used when compiling the lib target
 lib-default-features = false
-
-# The profile to use for the lib target when compiling for release
 lib-profile-release = "wasm-release"
+
+[package.metadata.stylance]
+
+
diff --git a/develop-watch.sh b/develop-watch.sh
new file mode 100755
index 0000000..0b93216
--- /dev/null
+++ b/develop-watch.sh
@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+tmux \
+  new-session 'cargo leptos watch' \; \
+  split-window -h 'stylance --watch --output-file ./style.css .' 
diff --git a/src/components/app.rs b/src/components/app.rs
index 0a5ed80..7e2676a 100644
--- a/src/components/app.rs
+++ b/src/components/app.rs
@@ -1,10 +1,11 @@
 use leptos::prelude::*;
 use leptos_meta::{provide_meta_context, MetaTags, Stylesheet, Title};
 use leptos_router::{
-    components::{Route, Router, Routes},
-    StaticSegment,
+    components::{ParentRoute, Route, Router, Routes}, path, StaticSegment
 };
 
+use crate::components::layout::Layout;
+
 pub fn shell(options: LeptosOptions) -> impl IntoView {
     view! {
         <!DOCTYPE html>
@@ -38,17 +39,17 @@ pub fn App() -> impl IntoView {
 
         // content for this welcome page
         <Router>
-            <main>
-                <Routes fallback=|| "Page not found.".into_view()>
-                    <Route path=StaticSegment("") view=HomePage/>
-                </Routes>
-            </main>
+            <Routes fallback=|| "Page not found.".into_view()>
+                <ParentRoute path=path!("/") view=Layout>
+                    <Route path=path!("/") view=HomePage/>
+                </ParentRoute>
+            </Routes>
         </Router>
     }
 }
 
 /// Renders the home page of your application.
-#[island]
+#[component]
 fn HomePage() -> impl IntoView {
     // Creates a reactive value to update the button
     let count = RwSignal::new(0);
diff --git a/src/components/layout/layout.module.css b/src/components/layout/layout.module.css
new file mode 100644
index 0000000..5b9ccc2
--- /dev/null
+++ b/src/components/layout/layout.module.css
@@ -0,0 +1,34 @@
+main.layout {
+  min-height: 100vh;
+  display: grid;
+  max-width: 1000px;
+  margin: 0 auto;
+  grid-template-columns: 200px 1fr;
+  grid-template-rows: 200px 1fr 100px auto;
+}
+
+.layout header {
+  display: flex;
+  grid-row: 1 / 2;
+  grid-column: 1 / 3;
+}
+
+.layout nav {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+}
+
+.layout article {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+}
+
+.layout footer {
+  grid-column: 1 / 3;
+  grid-row: 3 / 4;
+}
+
+.layout::after {
+  grid-column: 1 / 3;
+  grid-row: 4 / 5;
+}
diff --git a/src/components/layout/mod.rs b/src/components/layout/mod.rs
new file mode 100644
index 0000000..6ec37da
--- /dev/null
+++ b/src/components/layout/mod.rs
@@ -0,0 +1,26 @@
+use leptos::prelude::*;
+use leptos::component;
+use leptos_router::components::Outlet;
+
+stylance::import_crate_style!(styles, "src/components/layout/layout.module.css");
+
+#[component]
+pub fn Layout() -> impl IntoView {
+    view! {
+        <main class=styles::layout>
+            <header>
+                <h1>Site Title</h1>
+            </header>
+            <nav>
+                <p>Nav</p>
+            </nav>
+            <article>
+                <p>Article</p>
+                <Outlet/>
+            </article>
+            <footer>
+                <p>Footer</p>
+            </footer>
+        </main>
+    }
+}
diff --git a/src/components/mod.rs b/src/components/mod.rs
index 20df27e..62ca08a 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -1,3 +1,5 @@
+pub mod layout;
+
 pub mod app;
 
 pub use app::App;