Shared components

.gitignore

@@ -8,6 +8,8 @@ bundled.css
 /assets/gen_assets/
 /src/extras/
 
+Cargo.lock
+
 # NixOs output folder
 /result
 

Cargo.toml

@@ -40,7 +40,8 @@ ssr = [
     "leptos/ssr",
     "leptos_meta/ssr",
     "leptos_router/ssr",
-    "leptos-use/ssr"
+    "leptos-use/ssr",
+    "leptos-use/actix"
 ]
 development = []
 

README.md

@@ -12,6 +12,8 @@
 
 ## Como ejecutar
 
+La configuración está pensada para funcionar en entornos Linux y Mac, si tienes alguna configuración extra en tu `.cargo/config.toml` puede que el proceso de buildeo falle.
+
 ### Requisitos Generales
 
 Antes de empezar es necesario tener estos programas
@@ -49,13 +51,6 @@ Si usas NixOS
 direnv allow
 ```
 
-### Requisitos Windows >= 10
-
-[BusyBox](https://busybox.net/)
-
-- Usando scoop `scoop install busybox`
-- Usando choco  `choco install busybox`
-
 ### Desarrollo
 
 > [!NOTE]
@@ -121,6 +116,36 @@ Agrega esto en tu `settings.json`
 }
 ```
 
+## Configura tu Zed
+
+Agrega esto en tu `settings.json`
+
+```json
+{
+  "lsp": {
+    "rust-analyzer": {
+      "binary": {
+        "path": "rust-analyzer"
+      },
+      "initialization_options": {
+        "cargo": {
+          "features": [
+            "ssr"
+          ]
+        },
+        "check": {
+          "command": "check",
+          "extraArgs": [
+            "--features",
+            "ssr"
+          ]
+        }
+      }
+    }
+  }
+}
+```
+
 ## Resumen
 
 Este proyecto utiliza una rama personalizada de Leptos para poder servir

src/app.rs

@@ -8,7 +8,7 @@ use leptos_router::{
 
 use crate::{
     components::{HeadInformation, Header},
-    pages::{Aprende, Communities, Index},
+    pages::{Aprende, Blog, Communities, Events, Index},
 };
 
 pub fn shell(options: LeptosOptions) -> impl IntoView {
@@ -60,16 +60,10 @@ pub fn App() -> impl IntoView {
                     <Header />
                     <Routes fallback=|| "Not found.">
                         <Route path=path!("/") view=Index />
-                        <Route path=path!("comunidad") view=Communities />
-                        // <Route
-                        // path=path!("colaboradores")
-                        // view=Contributors
-                        // />
-                        // <Route
-                        // path=path!("proyectos")
-                        // view=Projects
-                        // />
                         <Route path=path!("aprende") view=Aprende />
+                        <Route path=path!("comunidad") view=Communities />
+                        <Route path=path!("eventos") view=Events />
+                        <Route path=path!("blog") view=Blog />
                     </Routes>
                 </main>
             // <Footer />

src/components/footer.rs

@@ -4,35 +4,45 @@ use rustlanges_components::{
     icons::{Discord, Github, Linkedin, Telegram},
 };
 
+use crate::components::{GITHUB_PATH, JOIN_PATH, LINKEDIN_PATH, TELEGRAM_PATH};
+
 #[component]
 pub fn Footer() -> impl IntoView {
     view! {
-        <section class="flex flex-col justify-center items-center w-full gap-8 py-10 bg-primary-500 dark:bg-primary-600">
-            <div class="container flex flex-col justify-center items-center gap-3">
-                <p class="text-center max-w-xl">"Comunidad - Rust Lang en Español"</p>
-                <div class="flex gap-4 justify-center items-center w-full">
+        <footer class="w-full flex flex-col items-center justify-between bg-primary-500 dark:bg-primary-600 py-10">
+            <section>
+                <p class="py-3 font-semibold">"Comunidad - Rust Lang en Español"</p>
+            </section>
+            <div class="flex gap-4 justify-center items-center w-full">
+                <a href=JOIN_PATH target="_blank" rel="noopener noreferrer">
                     <Button
                         variant=ButtonVariant::Icon
                         on_click=|_| {}
                         icon=view! { <Discord /> }.into_any()
                     />
+                </a>
+                <a href=GITHUB_PATH target="_blank" rel="noopener noreferrer">
                     <Button
                         variant=ButtonVariant::Icon
                         on_click=|_| {}
                         icon=view! { <Github /> }.into_any()
                     />
+                </a>
+                <a href=LINKEDIN_PATH target="_blank" rel="noopener noreferrer">
                     <Button
                         variant=ButtonVariant::Icon
                         on_click=|_| {}
                         icon=view! { <Linkedin /> }.into_any()
                     />
+                </a>
+                <a href=TELEGRAM_PATH target="_blank" rel="noopener noreferrer">
                     <Button
                         variant=ButtonVariant::Icon
                         on_click=|_| {}
                         icon=view! { <Telegram /> }.into_any()
                     />
-                </div>
+                </a>
             </div>
-        </section>
+        </footer>
     }
 }

src/components/header.rs

@@ -1,18 +1,22 @@
 use crate::{
-    components::icons::{NewLogoRustDarkPageIcon, NewLogoRustLightPageIcon},
+    components::{
+        BOOK_PATH, JOIN_PATH,
+        icons::{NewLogoRustDarkPageIcon, NewLogoRustLightPageIcon},
+    },
     context::theme_provider::{Theme, use_theme},
 };
-use leptos::{leptos_dom::logging::console_log, prelude::*};
+use leptos::prelude::*;
 use leptos_use::{use_media_query, use_window};
 use rustlanges_components::{
     button::{Button, Variant},
-    icons::{Moon, SunLine, SunMoon},
+    icons::{Close, Menu, Moon, SunLine, SunMoon},
 };
 
 #[island]
 pub fn Header() -> impl IntoView {
     let this = use_window();
     let path = RwSignal::new("/".to_string());
+    let menu_open = RwSignal::new(false);
 
     Effect::new(move |_| {
         let result = format!(
@@ -35,6 +39,18 @@ pub fn Header() -> impl IntoView {
         Theme::System => view! { <NewLogoRustDarkPageIcon size=60 /> }.into_any(),
     };
 
+    let menu_handler = move |_| {
+        menu_open.update(|open| *open = !*open);
+    };
+
+    let menu_icon = move || {
+        if menu_open() {
+            view! { <Close size=20 class="z-50 block" /> }.into_any()
+        } else {
+            view! { <Menu size=20 class="block" /> }.into_any()
+        }
+    };
+
     let theme_switcher_icon = move || match theme() {
         Theme::Dark => view! { <Moon /> }.into_any(),
         Theme::Light => view! { <SunLine /> }.into_any(),
@@ -43,25 +59,35 @@ pub fn Header() -> impl IntoView {
 
     let active_link_class = move |link: &str| {
         if path() == format!("{link:?}") {
-            "text-red-500 dark:text-orange-300"
+            "font-bold text-red-500 dark:text-orange-300"
         } else {
             ""
         }
     };
 
-    let handler = move |_| {
+    let theme_handler = move |_| {
         let current_theme = theme.get();
         match current_theme {
-            Theme::System => theme.set(Theme::Dark),
-            Theme::Dark => theme.set(Theme::Light),
-            Theme::Light => theme.set(Theme::System),
+            Theme::Light => theme.set(Theme::Dark),
+            Theme::Dark | Theme::System => theme.set(Theme::Light),
         }
     };
 
     view! {
-        <header class="w-full py-[8px] px-[24px] flex flex-column items-center justify-between">
-            {move || logo()} <div class="flex flex-column gap-[24px] items-center">
-                <div class="gap-[16px] hidden md:flex">
+        <header class="w-full py-[8px] px-[0px] flex flex-column items-center justify-between md:px-[24px] relative">
+            <div class="flex justify-between items-center">
+                <Button
+                    variant=Variant::Text
+                    class="px-[10px] md:hidden flex items-center justify-center"
+                    on_click=menu_handler
+                    icon=(move || menu_icon()).into_any()
+                />
+                <div class=move || {
+                    format!(
+                        "md:hidden absolute top-full left-0 w-full bg-white dark:bg-dark flex flex-col gap-[32px] p-[16px] z-50 {}",
+                        if menu_open() { "flex" } else { "hidden" },
+                    )
+                }>
                     <a href="/" class=move || active_link_class("/")>
                         Inicio
                     </a>
@@ -74,23 +100,103 @@ pub fn Header() -> impl IntoView {
                     <a href="/eventos" class=move || active_link_class("/eventos")>
                         Eventos
                     </a>
-                    <a href="https://blog.rustlang-es.org">Blog</a>
-                </div>
-                <div class="flex gap-[16px] items-center flex-wrap">
-                    <Button
-                        variant=Variant::Secondary
-                        label="El Libro"
-                        on_click=|_| {}
-                        class="hidden md:block"
-                    />
+                    <a href="/blog" class=move || active_link_class("/blog")>
+                        Blog
+                    </a>
+
                     <Button
-                        variant=Variant::Primary
-                        label="¡Únete!"
-                        on_click=move |_| console_log("hola")
+                        variant=Variant::Icon
+                        on_click=theme_handler
+                        icon=(move || theme_switcher_icon()).into_any()
                     />
+
+                    <div class="grid grid-cols-2 gap-[8px] w-full">
+                        <a href=BOOK_PATH target="_blank" rel="noopener noreferrer">
+                            <Button
+                                class="w-full"
+                                variant=Variant::Secondary
+                                label="El Libro"
+                                on_click=|_| {}
+                            />
+                        </a>
+                        <a href=JOIN_PATH target="_blank" rel="noopener noreferrer">
+                            <Button
+                                class="w-full"
+                                variant=Variant::Primary
+                                label="¡Únete!"
+                                on_click=move |_| {}
+                            />
+                        </a>
+                    </div>
+                    <hr />
+                    <p class="text-center opacity-50">Comunidad - Rust Lang en Español</p>
+                </div>
+                <div
+                    class=move || {
+                        format!(
+                            "fixed inset-0 bg-black/50 z-40 md:hidden {}",
+                            if menu_open() { "block" } else { "hidden" },
+                        )
+                    }
+                    on:click=move |_| menu_open.set(false)
+                ></div>
+                <a href="/" class=move || active_link_class("/")>
+                    {move || logo()}
+                </a>
+            </div>
+            <div class="flex flex-column gap-[24px] items-center">
+                <nav class="gap-[16px] hidden md:flex">
+                    <a href="/" class=move || format!("font-semibold {}", active_link_class("/"))>
+                        Inicio
+                    </a>
+                    <a
+                        href="/aprende"
+                        class=move || format!("font-semibold {}", active_link_class("/aprende"))
+                    >
+                        Aprende Rust
+                    </a>
+                    <a
+                        href="/comunidad"
+                        class=move || format!("font-semibold {}", active_link_class("/comunidad"))
+                    >
+                        Comunidad
+                    </a>
+                    <a
+                        href="/eventos"
+                        class=move || format!("font-semibold {}", active_link_class("/eventos"))
+                    >
+                        Eventos
+                    </a>
+                    <a
+                        href="/blog"
+                        class=move || format!("font-semibold {}", active_link_class("/blog"))
+                    >
+                        Blog
+                    </a>
+                </nav>
+                <div class="flex gap-[16px] items-center flex-wrap">
+                    <a
+                        href=BOOK_PATH
+                        class="hidden md:flex"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <Button variant=Variant::Secondary label="El Libro" on_click=|_| {} />
+                    </a>
+
+                    <a
+                        href=JOIN_PATH
+                        class="px-[10px] md:px-[0px]"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <Button variant=Variant::Primary label="¡Únete!" on_click=move |_| {} />
+                    </a>
+
                     <Button
                         variant=Variant::Icon
-                        on_click=handler
+                        class="hidden md:flex"
+                        on_click=theme_handler
                         icon=(move || theme_switcher_icon()).into_any()
                     />
                 </div>

src/components/mod.rs

@@ -22,3 +22,9 @@ pub mod project_card;
 pub mod resources;
 pub mod sponsor_block;
 pub mod why_rust;
+
+const BOOK_PATH: &str = "https://book.rustlang-es.org/";
+const JOIN_PATH: &str = "https://discord.rustlang-es.org/";
+const GITHUB_PATH: &str = "https://github.com/RustLangES";
+const LINKEDIN_PATH: &str = "https://www.linkedin.com/company/rustlanges";
+const TELEGRAM_PATH: &str = "https://t.me/rust_es";