diff --git a/src/pages/home.rs b/src/pages/home.rs index 1cf2231..143a973 100644 --- a/src/pages/home.rs +++ b/src/pages/home.rs @@ -13,78 +13,72 @@ pub struct Project { pub code_url: String, } +// Deine vordefinierte Liste fn get_all_projects() -> Vec { vec![ Project { id: 1, - title: "Malxte.de Rust Website".into(), - description: "Eine voll in Rust mit Yew Programmierte Website mit allen Links und allem über mich.".into(), + title: "Bytemalte.de Website".into(), + description: "Meine persönliche Community-Plattform, gebaut mit Rust und Leptos.".into(), image_url: "/assets/malxte_de.png".into(), - download_url: "https://github.com/.../releases".into(), // Dein Link - code_url: "https://gitea.malxte.de/Bytemalte/malxte_de.git".into(), // Dein Code Link + download_url: "https://github.com/malxte/bytemalte_de/releases".into(), + code_url: "https://github.com/malxte/bytemalte_de".into(), }, Project { id: 2, - title: "Bytemalte.de Community Website".into(), - description: "Die Webseite auf der du dich gerade befindest, gebaut mit Leptos für die Bytemalte Community.".into(), + title: "Anderes Projekt".into(), + description: "Beschreibung deines zweiten Projekts hier.".into(), image_url: "/assets/bytemalte_de.png".into(), download_url: "#".into(), - code_url: "https://gitea.malxte.de/Bytemalte/bytemalte_de".into(), - }, - Project { - id: 3, - title: "Logo Design".into(), - description: "Das offizielle Bytemalte Logo. (Nicht frei verwendbar!)".into(), - image_url: "/assets/Logo.jpg".into(), // JPG geht natürlich auch - download_url: "/assets/Logo.jpg".into(), // Man kann Bilder auch direkt verlinken code_url: "#".into(), }, + // Füge hier weitere hinzu... ] } #[component] pub fn HomePage() -> impl IntoView { - let (projects, set_projects) = signal(Vec::::new()); + let items_per_page = 3; + let all_data = get_all_projects(); + + // WICHTIG: Wir laden die erste Seite direkt hier für das SSR! + let initial_projects = all_data.iter().take(items_per_page).cloned().collect::>(); + let has_more_initially = all_data.len() > items_per_page; + + let (projects, set_projects) = signal(initial_projects); let (page, set_page) = signal(1); let (loading, set_loading) = signal(false); - let (all_loaded, set_all_loaded) = signal(false); + let (all_loaded, set_all_loaded) = signal(!has_more_initially); - let items_per_page = 3; // Wie viele Projekte pro Scroll-Schub geladen werden let sentinel = NodeRef::
::new(); let fetch_projects = move |p: usize| { - if all_loaded.get_untracked() { return; } + if all_loaded.get_untracked() || loading.get_untracked() { return; } set_loading.set(true); - - // Simuliert eine kurze Ladezeit für das Feeling + let all_my_projects = get_all_projects(); + let start = p * items_per_page; + let end = (start + items_per_page).min(all_my_projects.len()); + + if start >= all_my_projects.len() { + set_all_loaded.set(true); + set_loading.set(false); + return; + } + + // Simuliere Netzwerk-Delay für den Spinner set_timeout(move || { - let all_my_projects = get_all_projects(); - let start = (p - 1) * items_per_page; - let end = (start + items_per_page).min(all_my_projects.len()); - - if start >= all_my_projects.len() { - set_all_loaded.set(true); - set_loading.set(false); - return; - } - - let slice = &all_my_projects[start..end]; - set_projects.update(|projs| projs.extend(slice.to_vec())); + let slice = all_my_projects[start..end].to_vec(); + set_projects.update(|projs| projs.extend(slice)); if end >= all_my_projects.len() { set_all_loaded.set(true); } set_loading.set(false); - }, std::time::Duration::from_millis(400)); + }, std::time::Duration::from_millis(300)); }; - // Initialer Load - Effect::new(move |_| { - fetch_projects(page.get()); - }); - - // Scroll-Event-Listener + // Scroll-Event-Listener (Nur im Browser aktiv) Effect::new(move |_| { let w = window(); let w_clone = w.clone(); @@ -98,9 +92,10 @@ pub fn HomePage() -> impl IntoView { let inner_height = w_clone.inner_height().unwrap().as_f64().unwrap_or(0.0); let total_height = el.offset_height() as f64; - if scroll_y + inner_height >= total_height - 200.0 { - set_page.update(|p| *p += 1); - fetch_projects(page.get_untracked()); + if scroll_y + inner_height >= total_height - 250.0 { + let next_page = page.get_untracked(); + set_page.set(next_page + 1); + fetch_projects(next_page); } } } @@ -112,7 +107,7 @@ pub fn HomePage() -> impl IntoView {

"Bytemalte."

-

"Entdecke meine neuesten Projekte - Bytemalte."

+

"Entdecke meine neuesten Projekte."

@@ -140,14 +135,10 @@ pub fn HomePage() -> impl IntoView {
- {move || { - if loading.get() { - view! {
}.into_any() - } else if all_loaded.get() { - view! {

"Das waren alle Projekte ✨"

}.into_any() - } else { - view! {

"Mehr laden..."

}.into_any() - } + {move || match (loading.get(), all_loaded.get()) { + (true, _) => view! {
}.into_any(), + (_, true) => view! {

"Das waren alle Projekte ✨"

}.into_any(), + _ => view! {

"Scrollen für mehr"

}.into_any(), }}