Add support for books (#4)

* Do the stuff

* Cargo fmt + Run the workflow please?

* Run it

* Update Cargo.toml

* Update build.sh

* Update build.sh

* Remove book output

* Move `./books` to `./guides/books`

* Fix description and link

* Add relative paths for books and improve build script

.github/workflows/gh-pages.yml

@@ -32,16 +32,17 @@ jobs:
       - name: NPM install
         run: npm install -D tailwindcss
 
-      - name: Install CLI
+      - name: Install Dioxus CLI
         run: cargo binstall --no-confirm dioxus-cli --locked --force
 
-      - name: Build
-        run: dx build --release
+      - name: Install mdbook CLI
+        run: cargo binstall --no-confirm mdbook --locked --force
 
-      - name: Add .nojekyll and fallback 404
-        run: |
-          touch dist/.nojekyll
-          cp dist/index.html dist/404.html
+      - name: Make build script executable
+        run: chmod +x ./build.sh
+
+      - name: Run build script
+        run: ./build.sh
 
       - name: Deploy 🚀
         uses: JamesIves/[email protected]

.gitignore

@@ -1,5 +1,6 @@
 target/
 **/*.rs.bk
 dist/
+books/**/book
 .idea
 .vscode

build.sh

@@ -0,0 +1,32 @@
+# 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
+
+out_dir="./dist"
+book_dir="./guides/books"
+book_out_dir="${out_dir}/guides/books"
+
+echo "Cleaning"
+cargo clean
+dx clean
+
+echo "Creating necessary directories"
+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

guides/books/learning-rust-by-making-a-website/book.toml

@@ -0,0 +1,6 @@
+[book]
+authors = ["tigerros"]
+language = "en"
+multilingual = false
+src = "src"
+title = "Learning Rust by making a website"

guides/books/learning-rust-by-making-a-website/src/SUMMARY.md

@@ -0,0 +1,4 @@
+# Summary
+
+- [Chapter 1](./chapter_1.md)
+- [Chapter 2](chapter_2.md)

guides/books/learning-rust-by-making-a-website/src/chapter_1.md

@@ -0,0 +1,3 @@
+# Chapter 1
+
+This is just a placeholder!

guides/books/learning-rust-by-making-a-website/src/chapter_2.md

@@ -0,0 +1,3 @@
+# Chapter 2
+
+This is also just a placeholder!

src/components/guide_card.rs

@@ -0,0 +1,29 @@
+
+use dioxus::prelude::*;
+use dioxus_router::prelude::*;
+use crate::models::Guide;
+
+#[allow(non_snake_case)]
+#[inline_props]
+pub fn GuideCard<'a>(cx: Scope, guide: &'a Guide) -> Element {
+    render! {
+        div { class: "text-white p-4 bg-blue-1 rounded-md",
+            table { class: "text-left [&_th]:pr-4",
+                tr {
+                    th { "👀 Title" }
+                    td { "{guide.title}" }
+                }
+                tr {
+                    th { "📜 Description" }
+                    td { "{guide.description}" }
+                }
+                tr {
+                    th { "🌐 Website" }
+                    td {
+                        Link { class: "underline", to: "{guide.website}", "{guide.website}" }
+                    }
+                }
+            }
+        }
+    }
+}

src/components/guide_grid.rs

@@ -0,0 +1,15 @@
+use dioxus::prelude::*;
+use crate::models::Guide;
+use crate::components::GuideCard;
+
+#[allow(non_snake_case)]
+#[inline_props]
+pub fn GuideGrid<'a>(cx: Scope, guides: &'a [Guide]) -> Element {
+    render! {
+        div { class: "grid grid-cols-1 lg:grid-cols-2 gap-4",
+            for guide in guides {
+                GuideCard { key: "{guide.name}", guide: guide }
+            }
+        }
+    }
+}

src/components/mod.rs

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

src/components/navigation.rs

@@ -1,28 +1,38 @@
+
 use dioxus::prelude::*;
 use dioxus_router::prelude::*;
 use crate::Route;
 
-const NAVBAR_LINK_ACTIVE_STYLE: &str = "bg-blue-2";
-const NAVBAR_LINK_STYLE: &str = "p-1 px-4 justify-center grow flex text-white hover:border-transparent hover:bg-blue-2 border-2 border-blue-2 rounded-md md:rounded-full transition ease-in-out delay-30";
+#[derive(Props)]
+struct NavigationLinkProps<'a> {
+    pub label: &'a str,
+    /// Same as the corresponding [`LinkProps`](https://docs.rs/dioxus-router/latest/dioxus_router/components/struct.LinkProps.html) property.
+    #[props(into)]
+    pub to: IntoRoutable,
+}
+
+#[allow(non_snake_case)]
+fn NavigationLink<'a>(cx: Scope<'a, NavigationLinkProps<'static>>) -> Element<'a> {
+    let NavigationLinkProps { to, label } = cx.props;
+
+    render! {
+        Link {
+            active_class: "bg-blue-2",
+            class: "p-1 px-4 justify-center grow flex text-white hover:border-transparent hover:bg-blue-2 border-2 border-blue-2 rounded-md md:rounded-full transition ease-in-out delay-30",
+            to: to.clone(),
+            "{label}"
+        }
+    }
+}
 
 #[allow(non_snake_case)]
-#[inline_props]
 pub fn Navigation(cx: Scope) -> Element {
     render! {
         nav { class: "mx-auto p-2 flex flex-wrap bg-blue-1 rounded-md md:rounded-full gap-2",
-            Link {
-                active_class: NAVBAR_LINK_ACTIVE_STYLE,
-                class: NAVBAR_LINK_STYLE,
-                to: Route::Home {},
-                "Home"
-            }
-            Link { class: NAVBAR_LINK_STYLE, to: "https://github.com/dioxus-community", "GitHub" }
-            Link {
-                active_class: NAVBAR_LINK_ACTIVE_STYLE,
-                class: NAVBAR_LINK_STYLE,
-                to: Route::OurProjects {},
-                "Our projects"
-            }
+            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" }
         }
     }
 }

src/components/project_card.rs

@@ -116,9 +116,7 @@ async fn fetch_star_count(repository_url: String) -> Result<usize, String> {
         return Err(format!("couldn't get repository owner from the repository URL segments. Segments: {segments:?}"));
     };
     let Some(repo) = segments.next() else {
-        return Err(format!(
-            "couldn't get repository name from the repository URL segments. Segments: {segments:?}"
-        ));
+        return Err(format!("couldn't get repository name from the repository URL segments. Segments: {segments:?}"));
     };
 
     let get_url = format!("{GITHUB_API_BASE_URL}/repos/{owner}/{repo}");
@@ -127,9 +125,7 @@ async fn fetch_star_count(repository_url: String) -> Result<usize, String> {
         return Err(format!("reqwest: Couldn't send request to {get_url:?}"));
     };
     let Ok(response) = response.text().await else {
-        return Err(format!(
-            "reqwest: Couldn't parse response as text. Response URL: {get_url:?}"
-        ));
+        return Err(format!("reqwest: Couldn't parse response as text. Response URL: {get_url:?}"));
     };
 
     let Some(stargazers_prop_index) = response.find(STARGAZERS_PROPERTY_PATTERN) else {
@@ -156,9 +152,7 @@ async fn fetch_star_count(repository_url: String) -> Result<usize, String> {
 
         if c.is_numeric() {
             let Some(c_digit) = c.to_digit(10) else {
-                return Err(format!(
-                    "couldn't convert char {c:?} to a digit using a radix of 10"
-                ));
+                return Err(format!("couldn't convert char {c:?} to a digit using a radix of 10"));
             };
 
             star_count = (star_count * 10) + (c_digit as usize);

src/guides.rs

@@ -0,0 +1,29 @@
+use crate::models::{Guide, ProjectCategory};
+
+macro_rules! book_guide {
+    (
+        title: $title:expr,
+        name: $name:expr,
+        description: $description:expr,
+        category: $category:expr,
+    ) => {
+        crate::models::Guide {
+            title: $title,
+            name: $name,
+            description: $description,
+            website: concat!(
+                "guides/books/",
+                $name,
+                "/index.html"
+            ),
+            category: $category,
+        }
+    };
+}
+
+pub const GUIDES: [Guide; 1] = [book_guide! {
+    title: "Learning Rust by making a website",
+    name: "learning-rust-by-making-a-website",
+    description: "Description",
+    category: ProjectCategory::App,
+}];