feat: add guide

demo/Cargo.toml

@@ -12,6 +12,7 @@ thaw = { path = "../" }
 icondata = { version = "0.1.0", features = [
     "AiCloseOutlined",
     "AiCheckOutlined",
+    "AiGithubOutlined",
 ] }
 leptos_router = { version = "0.5.1", features = ["csr"] }
 leptos_devtools = "0.0.1"

demo/gh-pages

@@ -1 +0,0 @@
-Subproject commit faaa4dfa5547b4c3e117999f4ed4cf2332006f2b

demo/src/app.rs

@@ -43,6 +43,10 @@ fn TheRouter() -> impl IntoView {
         <Router base="/thaw" set_is_routing>
             <Routes base="/thaw".to_string()>
                 <Route path="/" view=Home/>
+                <Route path="/guide" view=GuidePage>
+                    <Route path="/installation" view=InstallationPage/>
+                    <Route path="/usage" view=UsagePage/>
+                </Route>
                 <Route path="/components" view=ComponentsPage>
                     <Route path="/menu" view=MenuPage/>
                     <Route path="/slider" view=SliderPage/>

demo/src/components/site_header.rs

@@ -42,6 +42,24 @@ pub fn SiteHeader() -> impl IntoView {
                 </div>
             </Space>
             <Space>
+                <Button
+                    variant=ButtonVariant::Text
+                    on:click=move |_| {
+                        let navigate = use_navigate();
+                        navigate("/guide/installation", Default::default());
+                    }
+                >
+                    "Guide"
+                </Button>
+                <Button
+                    variant=ButtonVariant::Text
+                    on:click=move |_| {
+                        let navigate = use_navigate();
+                        navigate("/components/button", Default::default());
+                    }
+                >
+                    "Components"
+                </Button>
                 <Button
                     variant=ButtonVariant::Text
                     on:click=on_theme
@@ -50,12 +68,13 @@ pub fn SiteHeader() -> impl IntoView {
                 </Button>
                 <Button
                     variant=ButtonVariant::Text
+                    icon=icondata::AiIcon::AiGithubOutlined
+                    round=true
+                    style="font-size: 22px; padding: 0px 6px;"
                     on:click=move |_| {
                         _ = window().open_with_url("http://github.com/thaw-ui/thaw");
                     }
                 >
-
-                    "Github"
                 </Button>
             </Space>
 

demo/src/pages/guide/installation.rs

@@ -0,0 +1,22 @@
+use crate::components::{Demo, DemoCode};
+use leptos::*;
+
+#[component]
+pub fn InstallationPage() -> impl IntoView {
+    view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Installation"</h1>
+            <p>"Installation thaw"</p>
+            <Demo>
+            ""
+            <DemoCode
+                slot
+                html="cargo add thaw"
+            >
+
+                ""
+            </DemoCode>
+        </Demo>
+        </div>
+    }
+}

demo/src/pages/guide/mod.rs

@@ -0,0 +1,97 @@
+mod installation;
+mod usage;
+
+use crate::components::SiteHeader;
+pub use installation::*;
+use leptos::*;
+use leptos_router::{use_location, use_navigate, Outlet};
+use thaw::*;
+pub use usage::*;
+
+#[component]
+pub fn GuidePage() -> impl IntoView {
+    let navigate = use_navigate();
+    let selected = create_rw_signal({
+        let loaction = use_location();
+        let mut pathname = loaction.pathname.get_untracked();
+
+        if pathname.starts_with("/thaw/guide/") {
+            pathname.drain(12..).collect()
+        } else {
+            String::new()
+        }
+    });
+
+    create_effect(move |value| {
+        let selected = selected.get();
+        if value.is_some() {
+            navigate(&format!("/guide/{selected}"), Default::default());
+        }
+        selected
+    });
+    view! {
+        <Layout position=LayoutPosition::Absolute>
+            <SiteHeader/>
+            <Layout has_sider=true position=LayoutPosition::Absolute style="top: 64px;">
+                <LayoutSider>
+                    <Menu value=selected>
+                        {
+                            gen_menu_data().into_view()
+                        }
+                    </Menu>
+                </LayoutSider>
+                <Layout style="padding: 8px 12px 28px; overflow-y: auto;">
+                    <Outlet/>
+                </Layout>
+            </Layout>
+        </Layout>
+    }
+}
+
+struct MenuGroupOption {
+    label: String,
+    children: Vec<MenuItemOption>,
+}
+
+impl IntoView for MenuGroupOption {
+    fn into_view(self) -> View {
+        let Self { label, children } = self;
+        view! {
+            <MenuGroup label=label>
+                {
+                    children.into_iter().map(|v| v.into_view()).collect_view()
+                }
+            </MenuGroup>
+        }
+    }
+}
+
+struct MenuItemOption {
+    label: String,
+    value: String,
+}
+
+impl IntoView for MenuItemOption {
+    fn into_view(self) -> View {
+        let Self { label, value } = self;
+        view! {
+            <MenuItem key=value label/>
+        }
+    }
+}
+
+fn gen_menu_data() -> Vec<MenuGroupOption> {
+    vec![MenuGroupOption {
+        label: "Getting Started".into(),
+        children: vec![
+            MenuItemOption {
+                value: "installation".into(),
+                label: "Installation".into(),
+            },
+            MenuItemOption {
+                value: "usage".into(),
+                label: "Usage".into(),
+            },
+        ],
+    }]
+}

demo/src/pages/guide/usage.rs

@@ -0,0 +1,58 @@
+use crate::components::{Demo, DemoCode};
+use leptos::*;
+use prisms::highlight_str;
+
+#[component]
+pub fn UsagePage() -> impl IntoView {
+    view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Usage"</h1>
+            <p>"You just need to import thaw and use it."</p>
+            <Demo>
+                ""
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                        // Import all
+                        use thaw::*;
+                        // Import on Demand
+                        use thaw::{Button, ButtonVariant};
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+            <p>"A small example:"</p>
+            <Demo>
+                ""
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                        use leptos::*;
+                        use thaw::*;
+                        
+                        fn main() {
+                            mount_to_body(App)
+                        }
+                        #[component]
+                        pub fn App() -> impl IntoView {
+                            view! {
+                                <Button variant=ButtonVariant::Primary>"Primary"</Button>
+                            }
+                        }
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+        </div>
+    }
+}

demo/src/pages/home.rs

@@ -20,7 +20,7 @@ pub fn Home() -> impl IntoView {
             <Space>
                 <Button on_click=move |_| {
                     let navigate = use_navigate();
-                    navigate("/components/menu", Default::default());
+                    navigate("/components/button", Default::default());
                 }>"Read the docs"</Button>
                 <Button
                     variant=ButtonVariant::Text

demo/src/pages/mod.rs

@@ -10,6 +10,7 @@ mod color_picker;
 mod components;
 mod divider;
 mod grid;
+mod guide;
 mod home;
 mod icon;
 mod image;
@@ -46,6 +47,7 @@ pub use color_picker::*;
 pub use components::*;
 pub use divider::*;
 pub use grid::*;
+pub use guide::*;
 pub use home::*;
 pub use icon::*;
 pub use image::*;