feat: add badge for contributions

Author: SergioRibera

flake.nix

@@ -149,6 +149,7 @@
                 toolchain
                 trunk
                 cargo-leptos
+                binaryen
               ];
             };
           };

input.css

@@ -19,7 +19,7 @@
 }
 
 .group:hover > span.badge-container {
-  @apply first:min-w-28 first:min-h-6 items-center justify-center transition-all transform duration-1000;
+  @apply first:min-h-6 items-center justify-center transition-all transform duration-1000;
 }
 
 .group:hover > span.badge-container > span.badge-content {
@@ -42,4 +42,4 @@
   position: relative;
   width: 100%;
   height: auto;
-}
+}

src/components/aprende/books.rs

@@ -18,7 +18,7 @@ pub fn Books(
             <div class="flex flex-col md:flex-row justify-center items-center  container mx-auto mb-16 md:mb-28 gap-4">
                 <section class="w-full md:w-1/2 px-10">
                     <div class="relative group flex flex-col gap-y-6 border border-black p-2 sm:p-6 bg-orange-100 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] justify-between group transition-all transform">
-                        <span class="absolute top-0 end-0 inline-flex items-center size-3.5 rounded-full border-2 border-white text-xs font-medium transition-all transform -translate-y-1/2 translate-x-1/2 bg-teal-500 dark:border-slate-900 badge-container">
+                        <span class="absolute top-0 end-0 inline-flex items-center size-3.5 group-hover:min-w-28 rounded-full border-2 border-white text-xs font-medium transition-all transform -translate-y-1/2 translate-x-1/2 bg-teal-500 dark:border-slate-900 badge-container">
                             <span class="sr-only text-black badge-content transition-all transform ">
                                 "Recomendado"
                             </span>
@@ -39,7 +39,7 @@ pub fn Books(
 
                 <section class="w-full md:w-1/2 px-10 flex flex-col h-full ">
                     <div class="group flex flex-col gap-y-6 border border-black p-2 sm:p-6 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">
-                        <span class="absolute top-0 end-0 inline-flex items-center size-3.5 rounded-full border-2 border-white text-xs font-medium transition-all transform -translate-y-1/2 translate-x-1/2 bg-yellow-500 dark:border-slate-900 badge-container">
+                        <span class="absolute top-0 end-0 inline-flex items-center size-3.5 group-hover:min-w-28 rounded-full border-2 border-white text-xs font-medium transition-all transform -translate-y-1/2 translate-x-1/2 bg-yellow-500 dark:border-slate-900 badge-container">
                             <span class="sr-only text-black badge-content transition-all transform ">
                                 "¡En Progreso!"
                             </span>
@@ -93,4 +93,4 @@ pub fn Books(
             </div>
         </section>
     }
-}
+}

src/components/cards/contributor_card.rs

@@ -10,6 +10,7 @@ pub fn ContributorCard(
     #[prop(into)] location: Option<String>,
     #[prop(into)] link: String,
     #[prop(into)] brand_src: String,
+    #[prop(into)] contributions: i32,
 ) -> impl IntoView {
 
     view! {
@@ -19,6 +20,9 @@ pub fn ContributorCard(
                 target="_blank"
                 class="group flex flex-col gap-y-6 border border-black p-4 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"
             >
+                <span class="absolute top-0 end-0 inline-flex items-center size-3.5 group-hover:min-w-16 rounded-full border-2 border-white text-xs font-medium transition-all transform -translate-y-1/2 translate-x-1/2 bg-teal-500 dark:border-slate-900 badge-container">
+                    <span class="sr-only text-black badge-content transition-all transform">{contributions}</span>
+                </span>
                 <div class="flex flex-col gap-y-2">
                     <img src=brand_src width="60" class="rounded-full mb-4" alt=name.clone()/>
                     <h2 class="font-work-sans text-black text-xl">{name}</h2>
@@ -61,4 +65,4 @@ pub fn ContributorCard(
             </a>
         </article>
     }
-}
+}

src/pages/contributors.rs

@@ -1,17 +1,20 @@
 use futures::future::join_all;
-use leptos::{error::Result, Fragment, IntoView, SignalGet, create_local_resource, island, serde, view};
+use leptos::{
+    create_local_resource, error::Result, island, serde, view, Fragment, IntoView, SignalGet,
+};
 use serde::{Deserialize, Serialize};
 
 use crate::components::ContributorCard;
 
-#[derive(Clone, PartialEq, Eq, Serialize, Deserialize)]
+#[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize)]
 pub struct Contributor {
     login: String,
     avatar_url: String,
     html_url: String,
     bio: Option<String>,
     twitter_username: Option<String>,
     location: Option<String>,
+    contributions: i32,
 }
 
 async fn fetch_contributors() -> Result<Vec<Contributor>> {
@@ -27,7 +30,8 @@ async fn fetch_contributors() -> Result<Vec<Contributor>> {
         response
             .into_iter()
             .map(|contributor| fetch_contributor_info(contributor.login)),
-    ).await;
+    )
+    .await;
 
     let response = response
         .into_iter()
@@ -39,17 +43,18 @@ async fn fetch_contributors() -> Result<Vec<Contributor>> {
 
 async fn fetch_contributor_info(username: String) -> Result<Contributor> {
     let response = reqwasm::http::Request::get(&format!("https://api.github.com/users/{username}"))
-    .send()
-    .await?
-    .json::<Contributor>()
-    .await?;
+        .send()
+        .await?
+        .json::<Contributor>()
+        .await?;
     Ok(response)
 }
 
 #[island]
 pub fn Contributors() -> impl IntoView {
     let contributors_results = create_local_resource(move || (), |()| fetch_contributors());
     let contributorMapper = |item: &Contributor| {
+        println!("Contributor: {item:?}");
         view! {
             <ContributorCard
                 name=item.login.clone()
@@ -58,12 +63,14 @@ pub fn Contributors() -> impl IntoView {
                 brand_src=item.avatar_url.clone()
                 twitter=item.twitter_username.clone()
                 location=item.location.clone()
+                contributions=item.contributions
             />
         }
     };
 
     let contributors_view = move || {
-        let contributors = contributors_results.get()?.ok()?;
+        let mut contributors = contributors_results.get()?.ok()?;
+        contributors.sort_by_key(|a| a.contributions);
         let result = contributors
             .iter()
             .map(contributorMapper)
@@ -79,9 +86,19 @@ pub fn Contributors() -> impl IntoView {
                     <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">
+                    <ContributorCard
+                        name="SergioRibera"
+                        description=Some("Algo".to_string())
+                        link="github.com/SergioRibera".to_string()
+                        brand_src="".to_string()
+                        twitter=Some("@sergioribera_rs".to_string())
+                        location=Some("Bolivia".to_string())
+                        contributions=50
+                    />
                     {contributors_view}
                 </div>
             </div>
         </section>
     }
-}
+}
+