Fix routing issues (#144)

Co-authored-by: Cecile Tonglet <cecile.tonglet@cecton.com>

Cargo.lock

@@ -1923,9 +1923,9 @@ dependencies = [
 
 [[package]]
 name = "xtask-wasm"
-version = "0.1.4"
+version = "0.1.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3a078921c435f7181ac151ebd655c5c6ec4456f37b16aa52a3ad242ccee8016c"
+checksum = "72b8fc162610b6505cf16d401b6cd58659a22767dc6ed0e9dd9cc9e59614f178"
 dependencies = [
  "fs_extra",
  "lazy_static",

Cargo.toml

@@ -25,7 +25,6 @@ id_tree = { version = "1.7", optional = true }
 wasm-bindgen = "0.2"
 gloo = "0.6"
 
-
 [build-dependencies]
 regex = { version = "1", default-features = false, features = ["std", "unicode-perl"] }
 heck = "0.3"

netlify.toml

@@ -1,3 +1,8 @@
 [build]
 publish = "target/release/dist"
 command = "cargo xtask dist --release"
+
+[[redirects]]
+from = "/*"
+to = "/index.html"
+status = 200

src/button_group.rs

@@ -1,4 +1,5 @@
 use yew::prelude::*;
+use yew::virtual_dom::AttrValue;
 
 #[derive(Clone, PartialEq, Properties)]
 pub struct ButtonGroupProps {
@@ -11,7 +12,7 @@ pub struct ButtonGroupProps {
     #[prop_or_default]
     pub large: bool,
     #[prop_or_default]
-    pub style: Option<String>,
+    pub style: Option<AttrValue>,
     #[prop_or_default]
     pub children: html::Children,
     #[prop_or_default]

src/buttons.rs

@@ -1,5 +1,6 @@
 use crate::{Icon, IconName, Intent, Spinner, ICON_SIZE_LARGE};
 use yew::prelude::*;
+use yew::virtual_dom::AttrValue;
 
 #[derive(Clone, PartialEq, Properties)]
 pub struct ButtonProps {
@@ -24,13 +25,13 @@ pub struct ButtonProps {
     #[prop_or_default]
     pub intent: Option<Intent>,
     #[prop_or_default]
-    pub title: String,
+    pub title: Option<AttrValue>,
     #[prop_or_default]
     pub onclick: Callback<MouseEvent>,
     #[prop_or_default]
     pub class: Classes,
     #[prop_or_default]
-    pub style: Option<String>,
+    pub style: Option<AttrValue>,
     #[prop_or_default]
     pub children: html::Children,
 }

src/callout.rs

@@ -1,6 +1,7 @@
 use crate::icon::ICON_SIZE_LARGE;
 use crate::{Icon, IconName, Intent};
 use yew::prelude::*;
+use yew::virtual_dom::AttrValue;
 
 #[derive(Clone, PartialEq, Properties)]
 pub struct CalloutProps {
@@ -13,7 +14,7 @@ pub struct CalloutProps {
     #[prop_or_default]
     pub intent: Option<Intent>,
     #[prop_or_default]
-    pub title: Option<String>,
+    pub title: Option<AttrValue>,
     pub children: html::Children,
 }
 

src/collapse.rs

@@ -176,7 +176,8 @@ impl Component for Collapse {
         if !self.translated {
             content_style.push_str("transform: translateY(0px); ");
         } else if let Some(ref height_when_open) = self.height_when_open {
-            content_style.push_str(&format!("transform: translateY(-{}); ", height_when_open));
+            content_style
+                .push_str(format!("transform: translateY(-{})", height_when_open).as_str());
         } else {
             unreachable!("height_when_open was undefined while translated is set");
         }

src/menu.rs

@@ -1,5 +1,6 @@
 use crate::{Icon, IconName, Intent, H6};
 use yew::prelude::*;
+use yew::virtual_dom::AttrValue;
 
 #[derive(Clone, PartialEq, Properties)]
 pub struct MenuProps {
@@ -41,7 +42,7 @@ pub struct MenuItemProps {
     #[prop_or_default]
     pub disabled: bool,
     #[prop_or_default]
-    pub href: Option<String>,
+    pub href: Option<AttrValue>,
     #[prop_or_default]
     pub label: Option<yew::virtual_dom::VNode>,
     #[prop_or_default]

src/tag.rs

@@ -1,5 +1,6 @@
 use crate::{if_html, Icon, IconName, Intent, Text};
 use yew::prelude::*;
+use yew::virtual_dom::AttrValue;
 
 #[derive(Clone, PartialEq, Properties)]
 pub struct TagProps {
@@ -31,11 +32,11 @@ pub struct TagProps {
     #[prop_or_default]
     pub round: bool,
     #[prop_or_default]
-    pub title: Option<String>,
+    pub title: Option<AttrValue>,
     #[prop_or_default]
     pub class: Classes,
     #[prop_or_default]
-    pub style: Option<String>,
+    pub style: Option<AttrValue>,
 }
 
 #[function_component(Tag)]

src/text.rs

@@ -1,4 +1,5 @@
 use yew::prelude::*;
+use yew::virtual_dom::AttrValue;
 
 #[derive(Clone, PartialEq, Properties)]
 pub struct TextProps {
@@ -12,9 +13,9 @@ pub struct TextProps {
     #[prop_or_default]
     pub inline: bool,
     #[prop_or_default]
-    pub title: Option<String>,
+    pub title: Option<AttrValue>,
     #[prop_or_default]
-    pub style: Option<String>,
+    pub style: Option<AttrValue>,
 }
 
 #[function_component(Text)]

xtask/src/main.rs

@@ -5,7 +5,7 @@ use std::{
 };
 use xtask_wasm::{
     anyhow::{Context, Result},
-    clap,
+    clap, DistResult,
 };
 
 #[derive(clap::Parser)]
@@ -26,28 +26,28 @@ fn main() -> Result<()> {
     let cli: Cli = clap::Parser::parse();
 
     match cli {
-        Cli::Dist(arg) => {
+        Cli::Dist(dist) => {
             log::info!("Generating package...");
 
             download_css(false)?;
 
-            let result = arg
+            let DistResult { dist_dir, .. } = dist
                 .static_dir_path("yewprint-doc/static")
                 .run("yewprint-doc")?;
 
-            fs::copy(
+            fs::copy("yewprint-doc/src/logo.svg", dist_dir.join("favicon.svg"))?;
-                "yewprint-doc/src/logo.svg",
-                result.dist_dir.join("favicon.svg"),
-            )?;
         }
-        Cli::Watch(arg) => {
+        Cli::Watch(watch) => {
             let mut command = process::Command::new("cargo");
             command.args(["xtask", "dist"]);
 
-            arg.run(command)?;
+            watch.run(command)?;
         }
-        Cli::Start(arg) => {
+        Cli::Start(dev_server) => {
-            arg.arg("dist").start(xtask_wasm::default_dist_dir(false))?;
+            dev_server
+                .arg("dist")
+                .not_found("index.html")
+                .start(xtask_wasm::default_dist_dir(false))?;
         }
         Cli::UpdateCSS => download_css(true)?,
     }

yewprint-doc/src/app.rs

@@ -41,7 +41,7 @@ pub struct App {
 
 pub enum Msg {
     ToggleLight,
-    GoToMenu(DocMenu),
+    GoToMenu(MouseEvent, DocMenu),
 }
 
 impl Component for App {
@@ -60,7 +60,8 @@ impl Component for App {
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             Msg::ToggleLight => self.dark_theme ^= true,
-            Msg::GoToMenu(doc_menu) => {
+            Msg::GoToMenu(event, doc_menu) => {
+                event.prevent_default();
                 if let Some(history) = ctx.link().history() {
                     history.push(doc_menu);
                 } else {
@@ -98,122 +99,146 @@ impl Component for App {
                 />
                 <MenuItem
                     text={html!("Button")}
+                    href="/button"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::Button))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::Button))}
                 />
                 <MenuItem
                     text={html!("ButtonGroup")}
+                    href="/button-group"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::ButtonGroup))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::ButtonGroup))}
                 />
                 <MenuItem
                     text={html!("Callout")}
+                    href="/callout"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::Callout))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::Callout))}
                 />
                 <MenuItem
                     text={html!("Card")}
+                    href="/card"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::Card))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::Card))}
                 />
                 <MenuItem
                     text={html!("Checkbox")}
+                    href="/progress-bar"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::Checkbox))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::Checkbox))}
                 />
                 <MenuItem
                     text={html!("Collapse")}
+                    href="/collapse"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::Collapse))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::Collapse))}
                 />
                 <MenuItem
                     text={html!("ControlGroup")}
+                    href="/control-group"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::ControlGroup))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::ControlGroup))}
                     />
                 <MenuItem
                     text={html!("Divider")}
+                    href="/divider"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::Divider))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::Divider))}
                 />
                 <MenuItem
                     text={html!("HtmlSelect")}
+                    href="/html-select"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::HtmlSelect))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::HtmlSelect))}
                 />
                 <MenuItem
                     text={html!("Icon")}
+                    href="/icon"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::Icon))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::Icon))}
                 />
                 <MenuItem
                     text={html!("InputGroup")}
+                    href="/input-group"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::InputGroup))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::InputGroup))}
                 />
                 <MenuItem
                     text={html!("Menu")}
+                    href="/menu"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::Menu))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::Menu))}
                 />
                 <MenuItem
                     text={html!("NumericInput")}
+                    href="/numeric-input"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::NumericInput))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::NumericInput))}
                 />
                 <MenuItem
                     text={html!("PanelStack")}
+                    href="/panel-stack"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::PanelStack))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::PanelStack))}
                 />
                 <MenuItem
                     text={html!("ProgressBar")}
+                    href="/progress-bar"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::ProgressBar))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::ProgressBar))}
                 />
                 <MenuItem
                     text={html!("Radio")}
+                    href="/radio"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::Radio))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::Radio))}
                 />
                 <MenuItem
                     text={html!("Slider")}
-                    onclick={ctx.link().callback(|_| Msg::GoToMenu(DocMenu::Slider))}
+                    href="/slider"
+                    onclick={ctx.link().callback(|e| Msg::GoToMenu(e, DocMenu::Slider))}
                 />
                 <MenuItem
                     text={html!("Spinner")}
+                    href="/spinner"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::Spinner))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::Spinner))}
                 />
                 <MenuItem
                     text={html!("Switch")}
+                    href="/switch"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::Switch))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::Switch))}
                 />
                 <MenuItem
                     text={html!("Tabs")}
+                    href="/tabs"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::Tabs))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::Tabs))}
                 />
                 <MenuItem
                     text={html!("Tag")}
+                    href="/tag"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::Tag))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::Tag))}
                 />
                 <MenuItem
                     text={html!("Text")}
+                    href="/text"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::Text))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::Text))}
                 />
                 <MenuItem
                     text={html!("TextArea")}
+                    href="/text-area"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::TextArea))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::TextArea))}
                 />
                 <MenuItem
                     text={html!("Tree")}
+                    href="/tree"
                     onclick={ctx.link()
-                        .callback(|_| Msg::GoToMenu(DocMenu::Tree))}
+                        .callback(|e| Msg::GoToMenu(e, DocMenu::Tree))}
                 />
                 // NOTE: thanks to keep this list of <MenuItem> sorted
                 //       alphabetically (except for the light switch)
@@ -341,12 +366,13 @@ pub enum DocMenu {
     Tabs,
     #[at("/tag")]
     Tag,
-    #[at("/textarea")]
+    #[at("/text-area")]
     TextArea,
     #[at("/text")]
     Text,
     #[at("/tree")]
     Tree,
+    #[not_found]
     #[at("/")]
     Home,
 }