feat: relative style paths & component crate example

examples/leptos-axum/Cargo.toml

@@ -9,16 +9,16 @@ publish = false
 crate-type = ["cdylib", "rlib"]
 
 [dependencies]
-leptos = { version = "0.7.0-gamma3" }
-leptos_axum = { version = "0.7.0-gamma3", optional = true }
-leptos_meta = { version = "0.7.0-gamma3" }
-leptos_router = { version = "0.7.0-gamma3" }
+leptos = { version = "0.7.0-rc1" }
+leptos_axum = { version = "0.7.0-rc1", optional = true }
+leptos_meta = { version = "0.7.0-rc1" }
+leptos_router = { version = "0.7.0-rc1" }
 axum = { version = "0.7", optional = true }
 console_error_panic_hook = "0.1"
 tokio = { version = "1", features = ["rt-multi-thread"], optional = true }
 tower = { version = "0.4", optional = true }
 tower-http = { version = "0.5", features = ["fs"], optional = true }
-wasm-bindgen = "=0.2.93"
+wasm-bindgen = "=0.2.95"
 thiserror = "1"
 tracing = { version = "0.1", optional = true }
 http = "1"
@@ -26,6 +26,9 @@ http = "1"
 # sabry with sass
 sabry = {path = "../../", features = ["lepty-scoping"]}
 
+# our component library
+leptos-components = {path = "../leptos-components"}
+
 [build-dependencies]
 # sabry for build with sass
 sabry = {path = "../../", features = ["build", "lepty-scoping"]}

examples/leptos-axum/src/main.rs

@@ -4,6 +4,7 @@
 async fn main() {
     use axum::Router;
     use leptos::prelude::*;
+    use leptos::logging::*;
     use leptos_axum::{generate_route_list, LeptosRoutes};
     use leptos_axum_sabry::shell::*;
 

examples/leptos-axum/src/routes/home.rs

@@ -45,6 +45,7 @@ pub fn Route() -> impl IntoView {
     let on_click = move |_| *count.write() += 1;
 
     view! {class = STYLE,
+        <leptos_components::Aside/> // lets use our component
         <section class=style::table>
             <h2>"Welcome to Leptos"</h2>
             <h2 class="">

examples/leptos-axum/src/shell.rs

@@ -4,6 +4,7 @@ use leptos_router::{
     components::{Route, Router, Routes},
     StaticSegment,
 };
+use sabry::styly;
 
 use crate::routes;
 
@@ -29,7 +30,7 @@ pub fn shell(options: LeptosOptions) -> impl IntoView {
 pub fn App() -> impl IntoView {
     provide_meta_context();
 
-    view! {
+    view! {class=APP,
         <Stylesheet id="leptos" href="/pkg/leptos-axum.css"/>
         <Title text="Welcome to Leptos"/>
         <Router>
@@ -41,3 +42,11 @@ pub fn App() -> impl IntoView {
         </Router>
     }
 }
+
+styly!(app:scss {"
+    @use 'theme';
+
+    main {
+        @include theme.surface(primary);
+    }
+"});