split routes and components

This commit is contained in:
Adam 2024-01-05 05:19:12 -05:00
parent 44b90c184b
commit 4e5d0d6560
10 changed files with 64 additions and 54 deletions

View file

@ -20,7 +20,7 @@ simple_logger = "4"
tokio = { version = "1.25.0", optional = true } tokio = { version = "1.25.0", optional = true }
tower = { version = "0.4.13", optional = true } tower = { version = "0.4.13", optional = true }
tower-http = { version = "0.4", features = ["fs"], 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" thiserror = "1.0.38"
tracing = { version = "0.1.37", optional = true } tracing = { version = "0.1.37", optional = true }
http = "0.2.8" http = "0.2.8"

View file

@ -1,7 +1,9 @@
use crate::error_template::{AppError, ErrorTemplate}; use crate::error_template::{AppError, ErrorTemplate};
use leptos::*; use leptos::*;
use leptos_meta::*; use leptos_meta::*;
use leptos_router::*; use leptos_router::*;
use crate::routes::{blog::*, home::*,projects::*};
#[component] #[component]
pub fn App(cx: Scope) -> impl IntoView { pub fn App(cx: Scope) -> impl IntoView {
@ -10,13 +12,12 @@ pub fn App(cx: Scope) -> impl IntoView {
view! { view! {
cx, cx,
// injects a stylesheet into the document <head> // injects a stylesheet into the document <head>
// id=leptos means cargo-leptos will hot-reload this stylesheet // id=leptos means cargo-leptos will hot-reload this stylesheet
<Stylesheet id="leptos" href="/pkg/doordesk.css"/> <Stylesheet id="leptos" href="/pkg/doordesk.css"/>
// sets the document title // sets the document title
<Title text="DoorDesk"/> <Title text="doordesk"/>
// content for this welcome page // content for this welcome page
<Router fallback=|cx| { <Router fallback=|cx| {
@ -50,46 +51,10 @@ pub fn App(cx: Scope) -> impl IntoView {
<Route path="/projects" view=|cx| view! { cx, <Projects /> }/> <Route path="/projects" view=|cx| view! { cx, <Projects /> }/>
</Routes> </Routes>
</main> </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> </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 />
}
}

View file

@ -0,0 +1 @@
pub mod article;

View file

@ -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>
}
}

View file

@ -3,6 +3,9 @@ pub mod app;
pub mod error_template; pub mod error_template;
pub mod fileserv; pub mod fileserv;
pub mod components;
pub mod routes;
cfg_if! { if #[cfg(feature = "hydrate")] { cfg_if! { if #[cfg(feature = "hydrate")] {
use leptos::*; use leptos::*;
use wasm_bindgen::prelude::wasm_bindgen; use wasm_bindgen::prelude::wasm_bindgen;

View file

@ -0,0 +1,3 @@
pub mod home;
pub mod blog;
pub mod projects;

View file

@ -0,0 +1,10 @@
use crate::components::article::*;
use leptos::*;
#[component]
pub fn Blog(cx: Scope) -> impl IntoView {
view! { cx,
<Article />
<p>blog</p>
}
}

View file

@ -1,8 +1,10 @@
use leptos::{component, view, IntoView, Scope}; use leptos::*;
use crate::components::article::*;
#[component] #[component]
pub fn Home(cx: Scope) -> impl IntoView { pub fn Home(cx: Scope) -> impl IntoView {
view! { cx, view! { cx,
<Article /> <Article />
<p>home</p>
} }
} }

View file

@ -0,0 +1,10 @@
use leptos::*;
use crate::components::article::*;
#[component]
pub fn Projects(cx: Scope) -> impl IntoView {
view! { cx,
<Article />
<p>projects</p>
}
}

View file

@ -1,12 +1,9 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: { content: ["*.html", "./src/**/*.rs"],
relative: true, theme: {
files: ["*.html", "./src/**/*.rs"],
},
theme: {
extend: {}, extend: {},
}, },
plugins: [], plugins: [],
} }