feat(gh-pages): code highlighter

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

View file

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

View file

@ -1,20 +1,23 @@
use leptos::*; use leptos::*;
use melt_ui::Code; use melt_ui::{mount_style, Code};
#[slot] #[slot]
pub struct DemoCode { pub struct DemoCode {
#[prop(optional)]
html: &'static str,
children: Children, children: Children,
} }
#[component] #[component]
pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView { pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
mount_style("demo", || ("", prisms::prism_css!()));
view! { 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;"> <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() } { children() }
</div> </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;"> <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> <Code>
<pre style="margin: 0"> <pre style="margin: 0" inner_html=demo_code.html>
{ (demo_code.children)() } { (demo_code.children)() }
</pre> </pre>
</Code> </Code>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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