Skip to content

feat: add contributors page #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 1, 2023
Merged

feat: add contributors page #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/app.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ use leptos::*;
use leptos_meta::*;
use leptos_router::*;

use crate::pages::index::Index;
use crate::pages::{contributors::Contributors, index::Index};

#[component]
pub fn App() -> impl IntoView {
Expand All @@ -12,6 +12,7 @@ pub fn App() -> impl IntoView {
<Router>
<Routes>
<Route path="" view=|| view! { <Index/> }/>
<Route path="/colaboradores" view=|| view! { <Contributors/> }/>
</Routes>
</Router>
}
Expand Down
30 changes: 30 additions & 0 deletions src/components/cards/contributor_card.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
use leptos::*;

use crate::components::icons::github_icon::GithubIcon;

#[component]
pub fn ContributorCard(
#[prop(into)] name: &'static str,
#[prop(into)] description: &'static str,
#[prop(into)] link: &'static str,
#[prop(into)] brand_src: &'static str,
) -> impl IntoView {
view! {
<article>
<a
href=link
target="_blank"
class="group flex flex-col gap-y-6 border border-black p-6 hover:bg-orange-500 bg-orange-100 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between h-full"
>
<div class="flex flex-col gap-y-2">
<img src=brand_src width="60" class="rounded-full mb-4" alt=name/>
<h2 class="font-work-sans text-black text-xl">{name}</h2>
<p class="font-work-sans text-black">{description}</p>
</div>
<span class="ml-auto">
<GithubIcon size=30/>
</span>
</a>
</article>
}
}
1 change: 1 addition & 0 deletions src/components/cards/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
pub mod card_title;
pub mod community_card;
pub mod contributor_card;
pub mod project_card;
16 changes: 8 additions & 8 deletions src/components/cards/project_card.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,17 +40,17 @@ pub fn ProjectCard(
{brand_src}
</span>
}
.into_any()
} else {
view! {
<span>
<img
src=brand_src
width="60"
class=format!("rounded-full h-[60px] w-[60px] {}", current_color)
alt=brand_alt
/>
</span>
<img
src=brand_src
width="60"
class=format!("rounded-full h-[60px] w-[60px] {}", current_color)
alt=brand_alt
/>
}
.into_any()
}}
<CardTitle texts=name.clone()/>
<p class="mt-2 font-work-sans text-black">{description}</p>
Expand Down
7 changes: 3 additions & 4 deletions src/components/header.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ pub fn Header() -> impl IntoView {
<header class="border-b border-b-black/20">
<div class="container mx-auto px-4 flex items-center justify-between flex-col lg:flex-row">
<div class="flex justify-between w-full lg:w-auto">
<div class="flex items-center gap-x-4">
<a href="/" class="flex items-center gap-x-4">
<img
src="https://www.rust-lang.org/static/images/rust-logo-blk.svg"
class="max-h-20 rounded-full"
alt="Rust Lang en Español"
/>
</div>
</a>
<button
class="lg:hidden"
on:click=move |_| { set_is_open.update(|n| *n = !*n) }
Expand All @@ -30,15 +30,14 @@ pub fn Header() -> impl IntoView {
"hidden lg:block" }
)
}>

<ul class="flex items-center gap-6 flex-col lg:flex-row lg:items-center">
<li>
<a href="https://rustlanges.github.io/rust-book-es" target="_blank">
"Aprende"
</a>
</li>
<li>
<a href="#">"Comunidad"</a>
<a href="/colaboradores">"Colaboradores"</a>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Esto hay que cambiarlo para que use las rutas de Leptos y no use los a

</li>
<li>
<a href="#">"Blog"</a>
Expand Down
27 changes: 14 additions & 13 deletions src/components/hero.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ pub fn Hero() -> impl IntoView {
"Una comunidad de gente mal intencionada y tonta.",
"9 de cada 10 Go dev's lo recomiendan",
"Acá le pegamos a la rústica bien recio",
"⚡ Blazingly fast ⚡ 🚀🚀🚀 Super fast 🔥🔥🔥🔥 pero ahora en español!!",
"⚡Blazingly fast⚡ 🚀 Super fast 🔥 pero ahora en español!",
"Si te falla va ser de forma segura 😉",
"Furrificando...",
];
Expand All @@ -24,9 +24,9 @@ pub fn Hero() -> impl IntoView {
<section class="w-full flex flex-col">
<Header/>
<div class="flex items-center justify-center py-14 lg:py-32 px-4">
<div class="grid items-center gap-x-20 gap-y-10 lg:grid-cols-2">
<div class="grid items-center gap-x-20 gap-y-10 lg:grid-cols-2 w-full">
<figure class="w-80 mx-auto lg:w-full">
<img src="./rhq3ezvso9611-min.png" width="500" class="mx-auto"/>
<img src="./rhq3ezvso9611-min.png" width="500" class="ml-auto"/>
</figure>
<div class="">
<h1 class="flex flex-col mb-4 gap-y-2">
Expand All @@ -40,16 +40,17 @@ pub fn Hero() -> impl IntoView {
"En Español"
</span>
</h1>
// TODO: Alguien que sepa de diseño que me ayude a hacer esto mas bonito
<button
class=" border-black p-6 hover:bg-orange-500 bg-orange-100 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition flex justify-center items-center rounded-[100%] w-6 h-6 mx-auto"
on:click=click_handler
>
<span class="motion-safe:animate-spin">"🎲"</span>
</button>
<p class="font-work-sans font-light text-center lg:text-left max-w-[90%]">
{slogan}
</p>
<div class="flex items-center justify-center lg:justify-start group">
<button
class="bg-orange-300 border-4 border-orange-400 group-hover:border-orange-500 flex justify-center items-center rounded-full w-12 h-12 flex items-center justify-center text-xl relative z-10"
on:click=click_handler
>
<span class="motion-safe:animate-spin">"🎲"</span>
</button>
<p class="font-work-sans font-light lg:text-left bg-orange-400 h-12 pr-4 pl-10 flex items-center -ml-6 flex-1 rounded-r-full group-hover:bg-orange-500 max-w-lg">
{slogan}
</p>
</div>
</div>
</div>
</div>
Expand Down
84 changes: 84 additions & 0 deletions src/pages/contributors.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
use leptos::*;

use crate::components::{cards::contributor_card::ContributorCard, footer::Footer, header::Header};

struct ContributorItem {
name: &'static str,
description: &'static str,
link: &'static str,
brand_src: &'static str,
}

#[component]
pub fn Contributors() -> impl IntoView {
let contributors: Vec<ContributorItem> = vec![
ContributorItem {
name: "Phosphorus Moscu",
description: "Student in Computer Science degree at Universidad Nacional del Oeste | Developer Consultant at Globant",
link: "https://github.com/Phosphorus-M",
brand_src: "https://avatars.githubusercontent.com/u/19656993?v=4",
},
ContributorItem {
name: "Sergio Alejandro Ribera Costa",
description: "Enthusiastic developer Linux and Open Source lover",
link: "https://github.com/SergioRibera",
brand_src: "https://avatars.githubusercontent.com/u/56278796?v=4",
},
ContributorItem {
name: "Michael Cardoza",
description: "Software Developer",
link: "https://github.com/michaelcardoza",
brand_src: "https://avatars.githubusercontent.com/u/8800455?v=4",
},
ContributorItem {
name: "Emilio Ruscitti",
description: "Rust Dev",
link: "https://github.com/Lemin-n",
brand_src: "https://avatars.githubusercontent.com/u/88170949?v=4",
},
ContributorItem {
name: "carbon based lifeform",
description: "Rust Dev",
link: "https://github.com/ph4un00b",
brand_src: "https://avatars.githubusercontent.com/u/1057021?v=4",
},
ContributorItem {
name: "CrawKatt",
description: "Aprendiz de Rust, estudiante de AIEP, Chileno",
link: "https://github.com/CrawKatt",
brand_src: "https://avatars.githubusercontent.com/u/108593932?v=4",
},
];

view! {
<div>
<Header/>
<main>
<section class="bg-orange-300/30 py-16">
<div class="flex flex-col gap-y-6 container mx-auto px-4">
<h2 class="text-3xl text-left mb-6">
<span class="font-work-sans font-light">"Nuestros "</span>
<span class="font-alfa-slab text-orange-500">"Colaboradores"</span>
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-5 gap-6">
{contributors
.into_iter()
.map(|contributor| {
view! {
<ContributorCard
name=contributor.name
description=contributor.description
link=contributor.link
brand_src=contributor.brand_src
/>
}
})
.collect::<Vec<_>>()}
</div>
</div>
</section>
</main>
<Footer/>
</div>
}
}
1 change: 1 addition & 0 deletions src/pages/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
pub mod contributors;
pub mod index;
Loading