feat: New design

.github/workflows/gh-pages.yml

@@ -33,10 +33,7 @@ jobs:
         run: npm install -D tailwindcss
 
       - name: Install Dioxus CLI
-        run: cargo install --no-confirm dioxus-cli --force
-
-      - name: Install mdbook CLI
-        run: cargo binstall --no-confirm mdbook --locked --force
+        run: cargo install dioxus-cli --force
 
       - name: Make build script executable
         run: chmod +x ./build.sh

build.sh

@@ -1,6 +1,5 @@
 # REQUIRED BINARIES:
 # - dioxus-cli (https://dioxuslabs.com/learn/0.4/CLI/installation)
-# - mdbook (https://rust-lang.github.io/mdBook/guide/installation.html)
 # - tailwindcss (https://tailwindcss.com/docs/installation)
 
 set -x -e
@@ -19,14 +18,6 @@ mkdir -p "$book_out_dir"
 echo "Building Dioxus"
 dx build --release
 
-echo "Building books"
-for book in "$book_dir"/*; do
-    if [ -d "$book" ]; then
-        mdbook build "$book"
-        mv "$book/book" "$book_out_dir/${book##*/}"
-    fi
-done
-
 echo "Adding .nojekyll and fallback 404"
 touch "$out_dir"/.nojekyll
 cp "$out_dir"/index.html "$out_dir"/404.html

src/components/mod.rs

@@ -1,3 +1,3 @@
 dry_mods::mods! {
-    mod pub use layout, navigation, project_card, project_grid, guide_card, guide_grid;
+    mod pub use layout, navigation, project_card, project_grid;
 }

src/components/navigation.rs

@@ -29,8 +29,7 @@ pub fn Navigation() -> Element {
         nav { class: "mx-auto p-2 flex flex-wrap bg-blue-1 rounded-md md:rounded-full gap-2",
             NavigationLink { to: Route::Home {}, label: "Home" }
             NavigationLink { to: "https://github.com/dioxus-community", label: "GitHub" }
-            NavigationLink { to: Route::OurProjects {}, label: "Our projects" }
-            NavigationLink { to: Route::Guides {}, label: "Guides" }
+            NavigationLink { to: "https://discord.com/invite/XgGxMSkvUM", label: "Discord" }
         }
     )
 }

src/components/project_card.rs

@@ -15,35 +15,19 @@ const STARGAZERS_PROPERTY_PATTERN: &str = "\"stargazers_count\":";
 #[component]
 pub fn ProjectCard(project: &'static Project<'static>, insert_stars: bool) -> Element {
     rsx!(
-        div { class: "text-white p-4 bg-blue-1 rounded-md",
+        div { class: "text-white p-4 border-2 border-blue-1 rounded-lg drop-shadow-sm hover:bg-blue-1 duration-75",
             table { class: "text-left [&_th]:pr-4",
                 tr {
                     th { "👀 Name" }
                     td { "{project.name}" }
                 }
                 tr {
-                    th { "🛠️ Status" }
-                    td { "{project.status}" }
+                    th { "📜 Description" }
+                    td { "{project.description}" }
                 }
-                if let Some(description) = &project.description {
-                    tr {
-                        th { "📜 Description" }
-                        td { "{description}" }
-                    }
-                }
-                if let Some(repository_url) = &project.repository_url {
-                    tr {
-                        th { "💾 Repository" }
-                        td { Link { class: "underline", to: "{repository_url}", "{repository_url}" } }
-                    }
-                }
-                if let Some(website) = &project.website {
-                    if !website.is_empty() {
-                        tr {
-                            th { "🌐 Website" }
-                            td { Link { class: "underline", to: "{website}", "{website}" } }
-                        }
-                    }
+                tr {
+                    th { "💾 Repository" }
+                    td { Link { class: "underline", to: "{project.repository_url}", "{project.repository_name}" } }
                 }
                 Stars { project, insert_stars }
             }
@@ -74,11 +58,7 @@ fn Stars(project: &'static Project<'static>, insert_stars: bool) -> Element {
         return empty_star_row;
     };
 
-    let Some(repository_url) = &project.repository_url else {
-        return empty_star_row;
-    };
-
-    let fetched_stars = use_resource(use_reactive(&repository_url.to_string(), |repository_url| {
+    let fetched_stars = use_resource(use_reactive(&project.repository_url.to_string(), |repository_url| {
         fetch_star_count(repository_url)
     }));
 
@@ -92,7 +72,7 @@ fn Stars(project: &'static Project<'static>, insert_stars: bool) -> Element {
             }
         ),
         Some(Err(e)) => {
-            log::error!("couldn't fetch stars from repository \"{repository_url}\". Error: {e}");
+            log::error!("couldn't fetch stars from repository \"{}\". Error: {e}", project.repository_url);
 
             None
         }

src/components/project_grid.rs

@@ -6,7 +6,7 @@ use crate::components::ProjectCard;
 #[component]
 pub fn ProjectGrid(projects: &'static [Project<'static>], insert_stars: bool) -> Element {
     rsx!(
-        div { class: "grid grid-cols-1 lg:grid-cols-2 gap-4",
+        div { class: "grid grid-cols-2 lg:grid-cols-2 gap-4",
             for project in projects {
                 ProjectCard { key: "{project.name}", project, insert_stars }
             }