diff options
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | Cargo.lock | 55 | ||||
| -rw-r--r-- | Cargo.toml | 33 | ||||
| -rwxr-xr-x | develop-watch.sh | 4 | ||||
| -rw-r--r-- | src/components/app.rs | 17 | ||||
| -rw-r--r-- | src/components/layout/layout.module.css | 34 | ||||
| -rw-r--r-- | src/components/layout/mod.rs | 26 | ||||
| -rw-r--r-- | src/components/mod.rs | 2 |
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; |