adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-08 19:03:09 -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", "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"]

7
gh-pages/src/components/demo.rs
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>

34
gh-pages/src/pages/button/mod.rs
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,9 +21,7 @@ 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#"
{
indoc!(r#"
<Button type_=ButtonType::PRIMARY> <Button type_=ButtonType::PRIMARY>
"PRIMARY" "PRIMARY"
</Button> </Button>
@ -36,8 +34,8 @@ pub fn ButtonPage() -> impl IntoView {
<Button type_=ButtonType::LINK> <Button type_=ButtonType::LINK>
"LINK" "LINK"
</Button> </Button>
"#) "#, "rust")>
} ""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"color"</h3> <h3>"color"</h3>
@ -54,9 +52,7 @@ 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#"
{
indoc!(r#"
<Button color=ButtonColor::PRIMARY> <Button color=ButtonColor::PRIMARY>
"PRIMARY Color" "PRIMARY Color"
</Button> </Button>
@ -69,8 +65,8 @@ pub fn ButtonPage() -> impl IntoView {
<Button color=ButtonColor::ERROR> <Button color=ButtonColor::ERROR>
"ERROR Color" "ERROR Color"
</Button> </Button>
"#) "#, "rust")>
} ""
</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#"
{
indoc! {r#"
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined> <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
"ERROR Color Icon" "ERROR Color Icon"
</Button> </Button>
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true> <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
</Button> </Button>
"#} "#, "rust")>
} ""
</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#"
{
indoc! {r#"
<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>
"#} "#, "rust")>
} ""
</DemoCode> </DemoCode>
</Demo> </Demo>
</div> </div>

18
gh-pages/src/pages/checkbox/mod.rs
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#"
{
indoc! {r#"
let checked = create_rw_signal(false); 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,9 +36,7 @@ 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#"
{
indoc! {r#"
let value = create_rw_signal(HashSet::new()); let value = create_rw_signal(HashSet::new());
<CheckboxGroup value> <CheckboxGroup value>
@ -48,8 +44,8 @@ pub fn CheckboxPage() -> impl IntoView {
<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>

10
gh-pages/src/pages/image/mod.rs
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 {
@ -11,13 +11,11 @@ pub fn ImagePage() -> impl IntoView {
<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#"
{
indoc! {r#"
<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"/>
"#} "#, "rust")>
} ""
</DemoCode> </DemoCode>
</Demo> </Demo>
</div> </div>

11
gh-pages/src/pages/input/mod.rs
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#"
{
indoc! {r#"
let value = create_rw_signal(String::from("o")); 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>

10
gh-pages/src/pages/menu/mod.rs
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#"
{
indoc!(r#"
let selected = create_rw_signal(String::from("o")); let selected = create_rw_signal(String::from("o"));
<Menu selected> <Menu selected>
<MenuItem key="a" label="and"/> <MenuItem key="a" label="and"/>
<MenuItem key="o" label="or"/> <MenuItem key="o" label="or"/>
</Menu> </Menu>
"#) "#, "rust")>
} ""
</DemoCode> </DemoCode>
</Demo> </Demo>
</div> </div>

10
gh-pages/src/pages/modal/mod.rs
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,9 +16,7 @@ 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#"
{
indoc! {r#"
let show = create_rw_signal(false); let show = create_rw_signal(false);
<Button on:click=move |_| show.set(true)> <Button on:click=move |_| show.set(true)>
@ -27,8 +25,8 @@ pub fn ModalPage() -> impl IntoView {
<Modal title="title" show> <Modal title="title" show>
"hello" "hello"
</Modal> </Modal>
"#} "#, "rust")>
} ""
</DemoCode> </DemoCode>
</Demo> </Demo>
</div> </div>

10
gh-pages/src/pages/nav_bar/mod.rs
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,9 +14,7 @@ pub fn NavBarPage() -> impl IntoView {
<h1>"Navbar"</h1> <h1>"Navbar"</h1>
<Demo> <Demo>
"" ""
<DemoCode slot> <DemoCode slot html=highlight_str!(r#"
{
indoc!(r#"
<NavBar <NavBar
title="Home" title="Home"
left_arrow=true left_arrow=true
@ -25,8 +23,8 @@ pub fn NavBarPage() -> impl IntoView {
click_left=click_left click_left=click_left
click_right=click_right click_right=click_right
/> />
"#) "#, "rust")>
} ""
</DemoCode> </DemoCode>
</Demo> </Demo>
</div> </div>

10
gh-pages/src/pages/select/mod.rs
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,9 +16,7 @@ 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#"
{
indoc! {r#"
let selected_value = create_rw_signal(Some(String::from("apple"))); let selected_value = create_rw_signal(Some(String::from("apple")));
let options = vec![SelectOption { let options = vec![SelectOption {
label: String::from("apple"), label: String::from("apple"),
@ -26,8 +24,8 @@ pub fn SelectPage() -> impl IntoView {
}]; }];
<Select value=selected_value options/> <Select value=selected_value options/>
"#} "#, "rust")>
} ""
</DemoCode> </DemoCode>
</Demo> </Demo>
</div> </div>

10
gh-pages/src/pages/slider/mod.rs
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#"
{
indoc!(r#"
let value = create_rw_signal(0.0); let value = create_rw_signal(0.0);
<Slider value/> <Slider value/>
"#) "#, "rust")>
} ""
</DemoCode> </DemoCode>
</Demo> </Demo>
</div> </div>

18
gh-pages/src/pages/space/mod.rs
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#"
{
indoc!(r#"
<Space> <Space>
<Button>"1"</Button> <Button>"1"</Button>
<Button>"2"</Button> <Button>"2"</Button>
<Button>"3"</Button> <Button>"3"</Button>
</Space> </Space>
"#) "#, "rust")>
} ""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"gap"</h3> <h3>"gap"</h3>
@ -38,9 +36,7 @@ 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#"
{
indoc!(r#"
<Space gap=SpaceGap::LARGE> <Space gap=SpaceGap::LARGE>
<Button>"1"</Button> <Button>"1"</Button>
<Button>"2"</Button> <Button>"2"</Button>
@ -51,8 +47,8 @@ pub fn SpacePage() -> impl IntoView {
<Button>"2"</Button> <Button>"2"</Button>
<Button>"3"</Button> <Button>"3"</Button>
</Space> </Space>
"#) "#, "rust")>
} ""
</DemoCode> </DemoCode>
</Demo> </Demo>
</div> </div>

10
gh-pages/src/pages/tabbar/mod.rs
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,9 +14,7 @@ pub fn TabbarPage() -> impl IntoView {
<h1>"Tabbar"</h1> <h1>"Tabbar"</h1>
<Demo> <Demo>
"" ""
<DemoCode slot> <DemoCode slot html=highlight_str!(r#"
{
indoc!(r#"
let selected = create_rw_signal(String::from("o")); let selected = create_rw_signal(String::from("o"));
<Tabbar selected> <Tabbar selected>
@ -30,8 +28,8 @@ pub fn TabbarPage() -> impl IntoView {
"or" "or"
</TabbarItem> </TabbarItem>
</Tabbar> </Tabbar>
"#) "#, "rust")>
} ""
</DemoCode> </DemoCode>
</Demo> </Demo>
</div> </div>

10
gh-pages/src/pages/tabs/mod.rs
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,9 +18,7 @@ pub fn TabsPage() -> impl IntoView {
"pear" "pear"
</Tab> </Tab>
</Tabs> </Tabs>
<DemoCode slot> <DemoCode slot html=highlight_str!(r#"
{
indoc! {r#"
let active_key = create_rw_signal("apple"); let active_key = create_rw_signal("apple");
<Tabs active_key> <Tabs active_key>
<Tab key="apple" label="Apple"> <Tab key="apple" label="Apple">
@ -30,8 +28,8 @@ pub fn TabsPage() -> impl IntoView {
"pear" "pear"
</Tab> </Tab>
</Tabs> </Tabs>
"#} "#, "rust")>
} ""
</DemoCode> </DemoCode>
</Demo> </Demo>
</div> </div>

10
gh-pages/src/pages/toast/mod.rs
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,9 +16,7 @@ pub fn ToastPage() -> impl IntoView {
<h1>"Toast"</h1> <h1>"Toast"</h1>
<Demo> <Demo>
"" ""
<DemoCode slot> <DemoCode slot html=highlight_str!(r#"
{
indoc!(r#"
let count = create_rw_signal(0u32); let count = create_rw_signal(0u32);
let onclick = move |_| { let onclick = move |_| {
show_toast(ToastOptions { show_toast(ToastOptions {
@ -27,8 +25,8 @@ pub fn ToastPage() -> impl IntoView {
}); });
count.set(count.get_untracked() + 1); count.set(count.get_untracked() + 1);
}; };
"#) "#, "rust")>
} ""
</DemoCode> </DemoCode>
</Demo> </Demo>
</div> </div>

1
src/lib.rs
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::*;

2
src/utils/mod.rs
View file

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