adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-02 08:34:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(gh-pages): code highlighter

Browse source
This commit is contained in:
luoxiao 2023-10-04 00:11:38 +08:00
parent cedd443a79
commit a0927412df
17 changed files with 198 additions and 229 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
gh-pages/Cargo.toml
View file

@ -13,9 +13,9 @@ icondata = { version = "0.0.7", features = [
"AiCheckOutlined",
] }
leptos_router = { version = "0.5.0", features = ["csr"] }
indoc = "2.0.1"
regex = "1.8.2"
leptos_devtools = "0.0.1"
prisms = { git = "https://github.com/luoxiaozero/prisms" }
[features]
tracing = ["leptos/tracing"]

7
gh-pages/src/components/demo.rs
View file

@ -1,20 +1,23 @@
use leptos::*;
use melt_ui::Code;
use melt_ui::{mount_style, Code};
#[slot]
pub struct DemoCode {
#[prop(optional)]
html: &'static str,
children: Children,
}
#[component]
pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
mount_style("demo", || ("", prisms::prism_css!()));
view! {
<div style="background-image: url(/melt-ui/grid_dot.svg); background-repeat: repeat; background-size: 1.5rem; margin-top: 1rem; padding: 1rem; border: 1px solid #e5e8eb; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;">
{ children() }
</div>
<div style="font-weight: 400; font-size: 0.875em; line-height: 1.7142857;margin-bottom: 1rem; padding: 1rem; background-color: #f9fafb; border: 1px solid #e5e8eb; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; border-top-width: 0;">
<Code>
<pre style="margin: 0">
<pre style="margin: 0" inner_html=demo_code.html>
{ (demo_code.children)() }
</pre>
</Code>

96
gh-pages/src/pages/button/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use indoc::indoc;
use leptos::*;
use melt_ui::*;
use prisms::highlight_str;
#[component]
pub fn ButtonPage() -> impl IntoView {
@ -21,23 +21,21 @@ pub fn ButtonPage() -> impl IntoView {
<Button type_=ButtonType::LINK>
"LINK"
</Button>
<DemoCode slot>
{
indoc!(r#"
<Button type_=ButtonType::PRIMARY>
"PRIMARY"
</Button>
<Button type_=ButtonType::SOLID>
"SOLID"
</Button>
<Button type_=ButtonType::TEXT>
"TEXT"
</Button>
<Button type_=ButtonType::LINK>
"LINK"
</Button>
"#)
}
<DemoCode slot html=highlight_str!(r#"
<Button type_=ButtonType::PRIMARY>
"PRIMARY"
</Button>
<Button type_=ButtonType::SOLID>
"SOLID"
</Button>
<Button type_=ButtonType::TEXT>
"TEXT"
</Button>
<Button type_=ButtonType::LINK>
"LINK"
</Button>
"#, "rust")>
""
</DemoCode>
</Demo>
<h3>"color"</h3>
@ -54,23 +52,21 @@ pub fn ButtonPage() -> impl IntoView {
<Button color=ButtonColor::ERROR>
"ERROR Color"
</Button>
<DemoCode slot>
{
indoc!(r#"
<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>
"#)
}
<DemoCode slot html=highlight_str!(r#"
<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>
"#, "rust")>
""
</DemoCode>
</Demo>
<h3>"icon"</h3>
@ -80,29 +76,25 @@ pub fn ButtonPage() -> impl IntoView {
</Button>
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
</Button>
<DemoCode slot>
{
indoc! {r#"
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
"ERROR Color Icon"
</Button>
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
</Button>
"#}
}
<DemoCode slot html=highlight_str!(r#"
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
"ERROR Color Icon"
</Button>
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
</Button>
"#, "rust")>
""
</DemoCode>
</Demo>
<h3>"style"</h3>
<Demo>
<Button style="background: blue;">"style blue"</Button>
<Button style="width: 40px; height: 20px">"size"</Button>
<DemoCode slot>
{
indoc! {r#"
<Button style="background: blue;">"style blue"</Button>
<Button style="width: 40px; height: 20px">"size"</Button>
"#}
}
<DemoCode slot html=highlight_str!(r#"
<Button style="background: blue;">"style blue"</Button>
<Button style="width: 40px; height: 20px">"size"</Button>
"#, "rust")>
""
</DemoCode>
</Demo>
</div>

38
gh-pages/src/pages/checkbox/mod.rs
View file

@ -1,9 +1,9 @@
use std::collections::HashSet;
use crate::components::{Demo, DemoCode};
use indoc::indoc;
use leptos::*;
use melt_ui::*;
use prisms::highlight_str;
#[component]
pub fn CheckboxPage() -> impl IntoView {
@ -16,16 +16,14 @@ pub fn CheckboxPage() -> impl IntoView {
<Checkbox checked>
"Click"
</Checkbox>
<DemoCode slot>
{
indoc! {r#"
let checked = create_rw_signal(false);
<DemoCode slot html=highlight_str!(r#"
let checked = create_rw_signal(false);
<Checkbox checked>
"Click"
</Checkbox>
"#}
}
<Checkbox checked>
"Click"
</Checkbox>
"#, "rust")>
""
</DemoCode>
</Demo>
<h3>"group"</h3>
@ -38,18 +36,16 @@ pub fn CheckboxPage() -> impl IntoView {
<div style="margin-top: 1rem">
"value: " { move || format!("{:?}", value.get()) }
</div>
<DemoCode slot>
{
indoc! {r#"
let value = create_rw_signal(HashSet::new());
<DemoCode slot html=highlight_str!(r#"
let value = create_rw_signal(HashSet::new());
<CheckboxGroup value>
<CheckboxItem label="apple" value="a" />
<CheckboxItem label="b" value="b" />
<CheckboxItem label="c" value="c" />
</CheckboxGroup>
"#}
}
<CheckboxGroup value>
<CheckboxItem label="apple" value="a" />
<CheckboxItem label="b" value="b" />
<CheckboxItem label="c" value="c" />
</CheckboxGroup>
"#, "rust")>
""
</DemoCode>
</Demo>
</div>

18
gh-pages/src/pages/image/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use indoc::indoc;
use leptos::*;
use melt_ui::*;
use prisms::highlight_str;
#[component]
pub fn ImagePage() -> impl IntoView {
@ -9,15 +9,13 @@ pub fn ImagePage() -> impl IntoView {
<div style="width: 896px; margin: 0 auto;">
<h1>"Image"</h1>
<Demo>
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
<Image width="200px" height="200px"/>
<DemoCode slot>
{
indoc! {r#"
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
<Image width="200px" height="200px"/>
"#}
}
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
<Image width="200px" height="200px"/>
<DemoCode slot html=highlight_str!(r#"
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
<Image width="200px" height="200px"/>
"#, "rust")>
""
</DemoCode>
</Demo>
</div>

17
gh-pages/src/pages/input/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use indoc::indoc;
use leptos::*;
use melt_ui::*;
use prisms::highlight_str;
#[component]
pub fn InputPage() -> impl IntoView {
@ -12,15 +12,14 @@ pub fn InputPage() -> impl IntoView {
<Demo>
<Input value/>
<Input value type_=InputType::PASSWORD />
<DemoCode slot>
{
indoc! {r#"
let value = create_rw_signal(String::from("o"));
<DemoCode slot html=highlight_str!(r#"
let value = create_rw_signal(String::from("o"));
<Input value/>
<Input value type_=InputType::PASSWORD />
"#}
}
<Input value/>
<Input value type_=InputType::PASSWORD />
"#, "rust")>
""
""
</DemoCode>
</Demo>
</div>

22
gh-pages/src/pages/menu/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use indoc::indoc;
use leptos::*;
use melt_ui::*;
use prisms::highlight_str;
#[component]
pub fn MenuPage() -> impl IntoView {
@ -14,17 +14,15 @@ pub fn MenuPage() -> impl IntoView {
<MenuItem key="a" label="and"/>
<MenuItem key="o" label="or"/>
</Menu>
<DemoCode slot>
{
indoc!(r#"
let selected = create_rw_signal(String::from("o"));
<Menu selected>
<MenuItem key="a" label="and"/>
<MenuItem key="o" label="or"/>
</Menu>
"#)
}
<DemoCode slot html=highlight_str!(r#"
let selected = create_rw_signal(String::from("o"));
<Menu selected>
<MenuItem key="a" label="and"/>
<MenuItem key="o" label="or"/>
</Menu>
"#, "rust")>
""
</DemoCode>
</Demo>
</div>

24
gh-pages/src/pages/modal/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use indoc::indoc;
use leptos::*;
use melt_ui::*;
use prisms::highlight_str;
#[component]
pub fn ModalPage() -> impl IntoView {
@ -16,19 +16,17 @@ pub fn ModalPage() -> impl IntoView {
<Modal title="title" show>
"hello"
</Modal>
<DemoCode slot>
{
indoc! {r#"
let show = create_rw_signal(false);
<DemoCode slot html=highlight_str!(r#"
let show = create_rw_signal(false);
<Button on:click=move |_| show.set(true)>
"open modal"
</Button>
<Modal title="title" show>
"hello"
</Modal>
"#}
}
<Button on:click=move |_| show.set(true)>
"open modal"
</Button>
<Modal title="title" show>
"hello"
</Modal>
"#, "rust")>
""
</DemoCode>
</Demo>
</div>

26
gh-pages/src/pages/nav_bar/mod.rs
View file

@ -2,9 +2,9 @@ use crate::{
components::{Demo, DemoCode},
pages::MobilePage,
};
use indoc::indoc;
use leptos::*;
use melt_ui::mobile::NavBar;
use prisms::highlight_str;
#[component]
pub fn NavBarPage() -> impl IntoView {
@ -14,19 +14,17 @@ pub fn NavBarPage() -> impl IntoView {
<h1>"Navbar"</h1>
<Demo>
""
<DemoCode slot>
{
indoc!(r#"
<NavBar
title="Home"
left_arrow=true
left_text="back"
right_text="add"
click_left=click_left
click_right=click_right
/>
"#)
}
<DemoCode slot html=highlight_str!(r#"
<NavBar
title="Home"
left_arrow=true
left_text="back"
right_text="add"
click_left=click_left
click_right=click_right
/>
"#, "rust")>
""
</DemoCode>
</Demo>
</div>

22
gh-pages/src/pages/select/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use indoc::indoc;
use leptos::*;
use melt_ui::*;
use prisms::highlight_str;
#[component]
pub fn SelectPage() -> impl IntoView {
@ -16,18 +16,16 @@ pub fn SelectPage() -> impl IntoView {
<h1>"Select"</h1>
<Demo>
<Select value=selected_value options/>
<DemoCode slot>
{
indoc! {r#"
let selected_value = create_rw_signal(Some(String::from("apple")));
let options = vec![SelectOption {
label: String::from("apple"),
value: String::from("apple"),
}];
<DemoCode slot html=highlight_str!(r#"
let selected_value = create_rw_signal(Some(String::from("apple")));
let options = vec![SelectOption {
label: String::from("apple"),
value: String::from("apple"),
}];
<Select value=selected_value options/>
"#}
}
<Select value=selected_value options/>
"#, "rust")>
""
</DemoCode>
</Demo>
</div>

14
gh-pages/src/pages/slider/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use indoc::indoc;
use leptos::*;
use melt_ui::*;
use prisms::highlight_str;
#[component]
pub fn SliderPage() -> impl IntoView {
@ -12,14 +12,12 @@ pub fn SliderPage() -> impl IntoView {
<h1>"Slider"</h1>
<Demo>
<Slider value/>
<DemoCode slot>
{
indoc!(r#"
let value = create_rw_signal(0.0);
<DemoCode slot html=highlight_str!(r#"
let value = create_rw_signal(0.0);
<Slider value/>
"#)
}
<Slider value/>
"#, "rust")>
""
</DemoCode>
</Demo>
</div>

48
gh-pages/src/pages/space/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use indoc::indoc;
use leptos::*;
use melt_ui::*;
use prisms::highlight_str;
#[component]
pub fn SpacePage() -> impl IntoView {
@ -14,16 +14,14 @@ pub fn SpacePage() -> impl IntoView {
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
<DemoCode slot>
{
indoc!(r#"
<Space>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
"#)
}
<DemoCode slot html=highlight_str!(r#"
<Space>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
"#, "rust")>
""
</DemoCode>
</Demo>
<h3>"gap"</h3>
@ -38,21 +36,19 @@ pub fn SpacePage() -> impl IntoView {
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
<DemoCode slot>
{
indoc!(r#"
<Space gap=SpaceGap::LARGE>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
<Space gap=SpaceGap::TUPLE(36, 36)>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
"#)
}
<DemoCode slot html=highlight_str!(r#"
<Space gap=SpaceGap::LARGE>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
<Space gap=SpaceGap::TUPLE(36, 36)>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
"#, "rust")>
""
</DemoCode>
</Demo>
</div>

36
gh-pages/src/pages/tabbar/mod.rs
View file

@ -2,9 +2,9 @@ use crate::{
components::{Demo, DemoCode},
pages::MobilePage,
};
use indoc::indoc;
use leptos::*;
use melt_ui::mobile::*;
use prisms::highlight_str;
#[component]
pub fn TabbarPage() -> impl IntoView {
@ -14,24 +14,22 @@ pub fn TabbarPage() -> impl IntoView {
<h1>"Tabbar"</h1>
<Demo>
""
<DemoCode slot>
{
indoc!(r#"
let selected = create_rw_signal(String::from("o"));
<Tabbar selected>
<TabbarItem name="a">
"and"
</TabbarItem>
<TabbarItem name="i">
"if"
</TabbarItem>
<TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined>
"or"
</TabbarItem>
</Tabbar>
"#)
}
<DemoCode slot html=highlight_str!(r#"
let selected = create_rw_signal(String::from("o"));
<Tabbar selected>
<TabbarItem name="a">
"and"
</TabbarItem>
<TabbarItem name="i">
"if"
</TabbarItem>
<TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined>
"or"
</TabbarItem>
</Tabbar>
"#, "rust")>
""
</DemoCode>
</Demo>
</div>

28
gh-pages/src/pages/tabs/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use indoc::indoc;
use leptos::*;
use melt_ui::*;
use prisms::highlight_str;
#[component]
pub fn TabsPage() -> impl IntoView {
@ -18,20 +18,18 @@ pub fn TabsPage() -> impl IntoView {
"pear"
</Tab>
</Tabs>
<DemoCode slot>
{
indoc! {r#"
let active_key = create_rw_signal("apple");
<Tabs active_key>
<Tab key="apple" label="Apple">
"apple"
</Tab>
<Tab key="pear" label="Pear">
"pear"
</Tab>
</Tabs>
"#}
}
<DemoCode slot html=highlight_str!(r#"
let active_key = create_rw_signal("apple");
<Tabs active_key>
<Tab key="apple" label="Apple">
"apple"
</Tab>
<Tab key="pear" label="Pear">
"pear"
</Tab>
</Tabs>
"#, "rust")>
""
</DemoCode>
</Demo>
</div>

26
gh-pages/src/pages/toast/mod.rs
View file

@ -2,10 +2,10 @@ use crate::{
components::{Demo, DemoCode},
pages::MobilePage,
};
use indoc::indoc;
use leptos::*;
use melt_ui::mobile::*;
use melt_ui::*;
use prisms::highlight_str;
use std::time::Duration;
#[component]
@ -16,19 +16,17 @@ pub fn ToastPage() -> impl IntoView {
<h1>"Toast"</h1>
<Demo>
""
<DemoCode slot>
{
indoc!(r#"
let count = create_rw_signal(0u32);
let onclick = move |_| {
show_toast(ToastOptions {
message: format!("Hello {}", count.get_untracked()),
duration: Duration::from_millis(2000),
});
count.set(count.get_untracked() + 1);
};
"#)
}
<DemoCode slot html=highlight_str!(r#"
let count = create_rw_signal(0u32);
let onclick = move |_| {
show_toast(ToastOptions {
message: format!("Hello {}", count.get_untracked()),
duration: Duration::from_millis(2000),
});
count.set(count.get_untracked() + 1);
};
"#, "rust")>
""
</DemoCode>
</Demo>
</div>

1
src/lib.rs
View file

@ -38,4 +38,5 @@ pub use space::*;
pub use table::*;
pub use tabs::*;
pub use theme::Theme;
pub use utils::mount_style::mount_style;
pub use wave::*;

2
src/utils/mod.rs
View file

@ -1 +1 @@
pub(crate) mod mount_style;
pub mod mount_style;