diff --git a/doordesk-rs/Cargo.toml b/doordesk-rs/Cargo.toml index 7e9640b..a0c420d 100644 --- a/doordesk-rs/Cargo.toml +++ b/doordesk-rs/Cargo.toml @@ -20,7 +20,7 @@ simple_logger = "4" tokio = { version = "1.25.0", optional = true } tower = { version = "0.4.13", optional = true } tower-http = { version = "0.4", features = ["fs"], optional = true } -wasm-bindgen = "0.2.87" +wasm-bindgen = "0.2.89" thiserror = "1.0.38" tracing = { version = "0.1.37", optional = true } http = "0.2.8" diff --git a/doordesk-rs/src/app.rs b/doordesk-rs/src/app.rs index 123150a..5f71e1b 100644 --- a/doordesk-rs/src/app.rs +++ b/doordesk-rs/src/app.rs @@ -1,7 +1,9 @@ use crate::error_template::{AppError, ErrorTemplate}; + use leptos::*; use leptos_meta::*; use leptos_router::*; +use crate::routes::{blog::*, home::*,projects::*}; #[component] pub fn App(cx: Scope) -> impl IntoView { @@ -10,13 +12,12 @@ pub fn App(cx: Scope) -> impl IntoView { view! { cx, - // injects a stylesheet into the document // id=leptos means cargo-leptos will hot-reload this stylesheet // sets the document title - + <Title text="doordesk"/> // content for this welcome page <Router fallback=|cx| { @@ -50,46 +51,10 @@ pub fn App(cx: Scope) -> impl IntoView { <Route path="/projects" view=|cx| view! { cx, <Projects /> }/> </Routes> </main> - <p class="text-center hover:rotate-180 duration-200 w-8 m-auto"><a href="https://open.spotify.com/playlist/3JRNw9gpt1w5ptsw8uDeYc?si=8f7e4191113f41f9">":)"</a></p><br /> + <p class="text-center hover:rotate-180 duration-200 w-8 m-auto"> + <a href="https://open.spotify.com/playlist/3JRNw9gpt1w5ptsw8uDeYc?si=8f7e4191113f41f9">":)"</a> + </p> + <br /> </Router> } } - -/// Renders the home page of your application. -#[component] -fn Article(cx: Scope) -> impl IntoView { - let (count, set_count) = create_signal(cx, 0); - let on_click = move |_| set_count.update(|count| *count += 1); - - view! { cx, - <article class="bg-zinc-700 mx-auto p-7 my-5 w-11/12 max-w-screen-xl rounded-md shadow-1g bg-opacity-10"> - <h1 class="max-6-xs text-3xl text-orange-600 font-light capitalize">"ayo"</h1> - <hr class="opacity-50" /> - <span class="opacity-50 text-xs pt-0 m-t pb-3.5">"today"</span> - <div> - <button on:click=on_click>"Click Me: " {count}</button> - </div> - </article> - } -} - -#[component] -fn Home(cx: Scope) -> impl IntoView { - view! { cx, - <Article /> - } -} - -#[component] -fn Blog(cx: Scope) -> impl IntoView { - view! { cx, - <Article /> - } -} - -#[component] -fn Projects(cx: Scope) -> impl IntoView { - view! { cx, - <Article /> - } -} diff --git a/doordesk-rs/src/components.rs b/doordesk-rs/src/components.rs new file mode 100644 index 0000000..0c5307e --- /dev/null +++ b/doordesk-rs/src/components.rs @@ -0,0 +1 @@ +pub mod article; diff --git a/doordesk-rs/src/components/article.rs b/doordesk-rs/src/components/article.rs new file mode 100644 index 0000000..60c9c21 --- /dev/null +++ b/doordesk-rs/src/components/article.rs @@ -0,0 +1,19 @@ +use leptos::*; + +#[component] +pub fn Article(cx: Scope) -> impl IntoView { + let (count, set_count) = create_signal(cx, 0); + let on_click = move |_| set_count.update(|count| *count += 1); + + view! { cx, + <article class="bg-zinc-700 mx-auto p-7 my-5 w-11/12 max-w-screen-xl rounded-md shadow-1g bg-opacity-10"> + <h1 class="max-6-xs text-3xl text-orange-600 font-light capitalize">"ayo"</h1> + <hr class="opacity-50" /> + <span class="opacity-50 text-xs pt-0 m-t pb-3.5">"today"</span> + <div> + <button on:click=on_click>"Click Me: " {count}</button> + <p>I DID IT?</p> + </div> + </article> + } +} diff --git a/doordesk-rs/src/lib.rs b/doordesk-rs/src/lib.rs index 7190a49..3857268 100644 --- a/doordesk-rs/src/lib.rs +++ b/doordesk-rs/src/lib.rs @@ -3,6 +3,9 @@ pub mod app; pub mod error_template; pub mod fileserv; +pub mod components; +pub mod routes; + cfg_if! { if #[cfg(feature = "hydrate")] { use leptos::*; use wasm_bindgen::prelude::wasm_bindgen; diff --git a/doordesk-rs/src/routes.rs b/doordesk-rs/src/routes.rs new file mode 100644 index 0000000..a28ef14 --- /dev/null +++ b/doordesk-rs/src/routes.rs @@ -0,0 +1,3 @@ +pub mod home; +pub mod blog; +pub mod projects; diff --git a/doordesk-rs/src/routes/blog.rs b/doordesk-rs/src/routes/blog.rs new file mode 100644 index 0000000..7dbe6a6 --- /dev/null +++ b/doordesk-rs/src/routes/blog.rs @@ -0,0 +1,10 @@ +use crate::components::article::*; +use leptos::*; + +#[component] +pub fn Blog(cx: Scope) -> impl IntoView { + view! { cx, + <Article /> + <p>blog</p> + } +} diff --git a/doordesk-rs/src/routes/home.rs b/doordesk-rs/src/routes/home.rs index 385c108..803dabd 100644 --- a/doordesk-rs/src/routes/home.rs +++ b/doordesk-rs/src/routes/home.rs @@ -1,8 +1,10 @@ -use leptos::{component, view, IntoView, Scope}; +use leptos::*; +use crate::components::article::*; #[component] pub fn Home(cx: Scope) -> impl IntoView { view! { cx, <Article /> + <p>home</p> } } diff --git a/doordesk-rs/src/routes/projects.rs b/doordesk-rs/src/routes/projects.rs new file mode 100644 index 0000000..74399d2 --- /dev/null +++ b/doordesk-rs/src/routes/projects.rs @@ -0,0 +1,10 @@ +use leptos::*; +use crate::components::article::*; + +#[component] +pub fn Projects(cx: Scope) -> impl IntoView { + view! { cx, + <Article /> + <p>projects</p> + } +} diff --git a/doordesk-rs/tailwind.config.js b/doordesk-rs/tailwind.config.js index d8b8f37..157dc2c 100644 --- a/doordesk-rs/tailwind.config.js +++ b/doordesk-rs/tailwind.config.js @@ -1,12 +1,9 @@ /** @type {import('tailwindcss').Config} */ - module.exports = { - content: { - relative: true, - files: ["*.html", "./src/**/*.rs"], - }, - theme: { +module.exports = { + content: ["*.html", "./src/**/*.rs"], + theme: { extend: {}, - }, - plugins: [], - } - \ No newline at end of file + }, + plugins: [], +} +