feat: add gh-pages

This commit is contained in:
luoxiao 2023-06-13 12:43:15 +08:00
parent 95a2586276
commit e727d2931f
21 changed files with 434 additions and 2 deletions

4
.gitignore vendored
View file

@ -9,4 +9,6 @@ Cargo.lock
# These are backup files generated by rustfmt
**/*.rs.bk
/examples/**/dist
/examples/**/dist
/gh-pages/dist
/docs

View file

@ -27,4 +27,4 @@ leptos_icons = { git = "https://github.com/luoxiaozero/leptos-icons.git", rev =
wasm-bindgen = "0.2.85"
[workspace]
members = ["examples/basic"]
members = ["examples/basic", "gh-pages"]

16
gh-pages/Cargo.toml Normal file
View file

@ -0,0 +1,16 @@
[package]
name = "gh-pages"
version = "0.1.0"
edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
leptos = { git = "https://github.com/leptos-rs/leptos.git", rev = "3d75c71", features = [
"stable",
] }
melt-ui = { path = "../" }
leptos_icons = { git = "https://github.com/luoxiaozero/leptos-icons.git", rev = "4fe4417", features = ["AiCloseOutlined", "AiCheckOutlined"] }
leptos_router = { git = "https://github.com/leptos-rs/leptos.git", rev = "3d75c71", features = ["csr"] }
regex = "1.8.2"

16
gh-pages/Trunk.toml Normal file
View file

@ -0,0 +1,16 @@
[build]
target = "index.html"
public_url = "/melt-ui/"
dist = "../docs"
release = true
[watch]
watch = [
"../src",
"./src"
]
[serve]
address = "127.0.0.1"
port = 6421
open = false

13
gh-pages/index.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link data-trunk rel="css" href="./src/assets/css/index.css" />
</head>
<body>
</body>
</html>

61
gh-pages/src/app.rs Normal file
View file

@ -0,0 +1,61 @@
use crate::pages::*;
use leptos::*;
use leptos_router::*;
#[component]
pub fn App(cx: Scope) -> impl IntoView {
view! { cx,
<Router base="/melt-ui">
<Routes base="/melt-ui".to_string() >
<Route path="/" view=move |cx| view! {cx,
<Home />
} />
<Route path="/menu" view=move |cx| view! {cx,
<MenuPage />
} />
<Route path="/slider" view=move |cx| view! {cx,
<SliderPage />
} />
<Route path="/components" view=move |cx| view! {cx,
<ComponentsPage />
} >
<Route path="/menu" view=move |cx| view! {cx,
<MenuPage />
} />
<Route path="/slider" view=move |cx| view! {cx,
<SliderPage />
} />
<Route path="/tabbar" view=move |cx| view! {cx,
<MobilePage path="/melt-ui/mobile/tabbar" />
} />
<Route path="/nav-bar" view=move |cx| view! {cx,
<MobilePage path="/melt-ui/mobile/nav-bar" />
} />
<Route path="/input" view=move |cx| view! {cx,
<InputPage />
} />
<Route path="/image" view=move |cx| view! {cx,
<ImagePage />
} />
<Route path="/modal" view=move |cx| view! {cx,
<ModalPage />
} />
<Route path="/button" view=move |cx| view! {cx,
<ButtonPage />
} />
<Route path="/checkbox" view=move |cx| view! {cx,
<CheckboxPage />
} />
</Route>
</Routes>
<Routes base="/melt-ui/mobile".to_string()>
<Route path="/tabbar" view=move |cx| view! {cx,
<TabbarPage />
} />
<Route path="/nav-bar" view=move |cx| view! {cx,
<NavBarPage />
} />
</Routes>
</Router>
}
}

View file

@ -0,0 +1,16 @@
body {
margin: 0;
}
.components-page-box {
display: flex;
}
.components-page-box aside {
width: 260px;
}
.components-page-box main {
flex: 1;
}

9
gh-pages/src/main.rs Normal file
View file

@ -0,0 +1,9 @@
mod app;
mod pages;
use app::*;
use leptos::*;
fn main() {
mount_to_body(|cx| view! { cx, <App/> })
}

View file

@ -0,0 +1,43 @@
use leptos::*;
use melt_ui::*;
#[component]
pub fn ButtonPage(cx: Scope) -> impl IntoView {
view! {cx,
<Space>
<Button type_=ButtonType::PRIMARY>
"PRIMARY"
</Button>
<Button type_=ButtonType::SOLID>
"SOLID"
</Button>
<Button type_=ButtonType::TEXT>
"TEXT"
</Button>
<Button type_=ButtonType::LINK>
"LINK"
</Button>
<Button color=ButtonColor::PRIMARY>
"PRIMARY Color"
</Button>
<Button color=ButtonColor::SUCCESS>
"SUCCESS Color"
</Button>
<Button color=ButtonColor::WARNING>
"WARNING Color"
</Button>
<Button color=ButtonColor::ERROR>
"ERROR Color"
</Button>
<Button color=ButtonColor::ERROR icon=leptos_icons::AiIcon::AiCloseOutlined>
"ERROR Color Icon"
</Button>
<Button color=ButtonColor::ERROR icon=leptos_icons::AiIcon::AiCloseOutlined round=true>
</Button>
</Space>
<div style="padding-top: 12px">
<Button style="background: blue;">"style blue"</Button>
<Button style="width: 40px; height: 20px">"size"</Button>
</div>
}
}

View file

@ -0,0 +1,14 @@
use leptos::*;
use melt_ui::*;
#[component]
pub fn CheckboxPage(cx: Scope) -> impl IntoView {
let checked = create_rw_signal(cx, false);
view! {cx,
<div>
<Checkbox checked>
"Click"
</Checkbox>
</div>
}
}

View file

@ -0,0 +1,52 @@
use leptos::*;
use leptos_router::{use_location, use_navigate, Outlet};
use melt_ui::*;
use regex::Regex;
#[component]
pub fn ComponentsPage(cx: Scope) -> impl IntoView {
let loaction = use_location(cx);
let navigate = use_navigate(cx);
let selected = create_rw_signal(cx, String::from(""));
create_effect(cx, move |_| {
let pathname = loaction.pathname.get();
let re = Regex::new(r"^/components/(.+)$").unwrap();
let Some(caps) = re.captures(&pathname) else {
return;
};
let Some(path) = caps.get(1) else {
return;
};
let path = path.as_str().to_string();
selected.set(path);
});
create_effect(cx, move |value| {
let selected = selected.get();
if value.is_some() {
_ = navigate(&format!("/components/{selected}"), Default::default());
}
selected
});
view! {cx,
<div class="components-page-box">
<aside>
<Menu selected>
<MenuItem key="menu" label="menu" />
<MenuItem key="slider" label="slider" />
<MenuItem key="tabbar" label="tabbar" />
<MenuItem key="input" label="input" />
<MenuItem key="image" label="image" />
<MenuItem key="modal" label="modal" />
<MenuItem key="nav-bar" label="nav-bar" />
<MenuItem key="button" label="button" />
<MenuItem key="checkbox" label="checkbox" />
</Menu>
</aside>
<main>
<Outlet />
</main>
</div>
}
}

View file

@ -0,0 +1,40 @@
use leptos::*;
use leptos_router::use_navigate;
use melt_ui::*;
#[component]
pub fn Home(cx: Scope) -> impl IntoView {
let (theme, set_theme) = create_signal(cx, Theme::light());
provide_context(cx, theme);
let (count, set_count) = create_signal(cx, 0.0);
let (button_type, set_button_type) = create_signal(cx, ButtonType::TEXT);
view! { cx,
<Button on:click=move |_| {
let navigate = use_navigate(cx);
_ = navigate("/components/menu", Default::default());
}>
"components"
</Button>
<hr />
<Space>
<Button
on:click=move |_| set_theme.update(move |value| *value = Theme::dark())
type_=button_type
>
"theme"
</Button>
<Button on:click=move |_| set_button_type.update(move |value| *value = ButtonType::PRIMARY)>
"click"
</Button>
<Button
on:click=move |_| set_count.update(move |value| *value += 1.0)
type_=button_type
>
"click"
</Button>
{move || count.get()}
<Progress percentage=count/>
</Space>
}
}

View file

@ -0,0 +1,12 @@
use leptos::*;
use melt_ui::*;
#[component]
pub fn ImagePage(cx: Scope) -> impl IntoView {
view! { cx,
<>
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
<Image width="200px" height="200px"/>
</>
}
}

View file

@ -0,0 +1,14 @@
use leptos::*;
use melt_ui::*;
#[component]
pub fn InputPage(cx: Scope) -> impl IntoView {
let value = create_rw_signal(cx, String::from("o"));
view! { cx,
<>
{move || value.get()}
<Input value/>
<Input value type_="password" />
</>
}
}

View file

@ -0,0 +1,16 @@
use leptos::*;
use melt_ui::*;
#[component]
pub fn MenuPage(cx: Scope) -> impl IntoView {
let selected = create_rw_signal(cx, String::from("o"));
view! { cx,
<>
{ move || selected.get() }
<Menu selected>
<MenuItem key="a" label="and"/>
<MenuItem key="o" label="or"/>
</Menu>
</>
}
}

View file

@ -0,0 +1,10 @@
use leptos::*;
#[component]
pub fn MobilePage(cx: Scope, path: &'static str) -> impl IntoView {
view! { cx,
<div style="height: 100vh; display: flex; align-items: center; justify-content: center; background: #eff2f5">
<iframe src=path style="width: 360px; height: 640px; background-color: #fff; border: none; border-radius: 16px; border: 1px solid #e1e1e1"/>
</div>
}
}

25
gh-pages/src/pages/mod.rs Normal file
View file

@ -0,0 +1,25 @@
mod button;
mod checkbox;
mod components;
mod home;
mod image;
mod input;
mod menu;
mod mobile;
mod modal;
mod nav_bar;
mod slider;
mod tabbar;
pub use button::*;
pub use checkbox::*;
pub use components::*;
pub use home::*;
pub use image::*;
pub use input::*;
pub use menu::*;
pub use mobile::*;
pub use modal::*;
pub use nav_bar::*;
pub use slider::*;
pub use tabbar::*;

View file

@ -0,0 +1,15 @@
use leptos::*;
use melt_ui::*;
#[component]
pub fn ModalPage(cx: Scope) -> impl IntoView {
let show = create_rw_signal(cx, false);
view! { cx,
<Button on:click=move |_| show.set(true)>
"open modal"
</Button>
<Modal title="title" show>
"sd"
</Modal>
}
}

View file

@ -0,0 +1,24 @@
use leptos::*;
use melt_ui::mobile::NavBar;
#[component]
pub fn NavBarPage(cx: Scope) -> impl IntoView {
let click_text = create_rw_signal(cx, String::from("none"));
let click_left = SignalSetter::map(cx, move |_| {
click_text.set("left".to_string())
});
let click_right = SignalSetter::map(cx, move |_| {
click_text.set("right".to_string())
});
view! { cx,
<div style="height: 100vh; background: #f5f5f5">
<NavBar title="Home" left_arrow=true left_text="back" right_text="add" click_left=click_left click_right=click_right/>
<div style="padding-top: 50px">
{ move || click_text.get() }
</div>
</div>
}
}

View file

@ -0,0 +1,11 @@
use leptos::*;
use melt_ui::*;
#[component]
pub fn SliderPage(cx: Scope) -> impl IntoView {
let value = create_rw_signal(cx, 0.0);
view! { cx,
<Slider value/>
}
}

View file

@ -0,0 +1,23 @@
use leptos::*;
use melt_ui::mobile::*;
#[component]
pub fn TabbarPage(cx: Scope) -> impl IntoView {
let selected = create_rw_signal(cx, String::from("o"));
view! { cx,
<div style="height: 100vh; background: #f5f5f5">
{ move || selected.get() }
<Tabbar selected>
<TabbarItem name="a">
"and"
</TabbarItem>
<TabbarItem name="i">
"if"
</TabbarItem>
<TabbarItem name="o" icon=leptos_icons::AiIcon::AiCloseOutlined>
"or"
</TabbarItem>
</Tabbar>
</div>
}
}