Skip to content

Commit f6270ef

Browse files
luoxiaozeroluoxiaozero
committed
feat: docs Demo show code
1 parent 90515fd commit f6270ef

File tree

3 files changed

+106
-25
lines changed

3 files changed

+106
-25
lines changed

‎demo/src/components/demo.css

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.demo-demo {
2+
margin-top: 1rem;
3+
margin-bottom: 1rem;
4+
border-radius: 0.5rem;
5+
border: 1px solid var(--demo-border-color);
6+
overflow: hidden;
7+
}
8+
9+
.demo-demo__view {
10+
background-image: url(/grid_dot.svg);
11+
background-repeat: repeat;
12+
background-size: 1.5rem;
13+
padding: 1rem;
14+
}
15+
16+
.demo-demo__toolbar {
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
padding: 0.4rem;
21+
border-top: 1px dashed var(--demo-border-color);
22+
border-bottom: 1px dashed var(--demo-border-color);
23+
}
24+
25+
.demo-demo__toolbar--code {
26+
border-bottom-width: 0;
27+
}
28+
29+
.demo-demo__toolbar-btn {
30+
display: flex;
31+
cursor: pointer;
32+
color: var(--demo-color);
33+
transition: color .3s;
34+
}
35+
36+
.demo-demo__toolbar-btn:hover {
37+
color: var(--demo-color-hover);
38+
}
39+
40+
.demo-demo__code {
41+
font-weight: 400;
42+
font-size: 0.875em;
43+
line-height: 1.714;
44+
padding: 1rem;
45+
overflow: auto;
46+
background-color: var(--demo-background-color);
47+
}

‎demo/src/components/demo.rs

+59-24
Original file line numberDiff line numberDiff line change
@@ -10,43 +10,38 @@ pub struct DemoCode {
1010
}
1111

1212
#[component]
13-
pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
13+
pub fn Demo(demo_code: DemoCode, #[prop(optional)] children: Option<Children>) -> impl IntoView {
1414
let theme = use_theme(Theme::light);
15-
let style = create_memo(move |_| {
16-
let mut style = String::from("background-image: url(/grid_dot.svg); background-repeat: repeat; background-size: 1.5rem; margin-top: 1rem; padding: 1rem; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;");
15+
let css_vars = Memo::new(move |_| {
16+
let mut css_vars = String::new();
1717
theme.with(|theme| {
1818
if theme.common.color_scheme == "dark" {
19-
style.push_str("border: 1px solid #383f52;");
19+
css_vars.push_str("--demo-color: #ffffff60;");
20+
css_vars.push_str("--demo-color-hover: #ffffffe0;");
21+
css_vars.push_str("--demo-border-color: #383f52;");
22+
css_vars.push_str("--demo-background-color: #242832;");
2023
} else {
21-
style.push_str(&format!("border: 1px solid {};", theme.common.border_color));
22-
}
23-
});
24-
style
25-
});
26-
let code_style = create_memo(move |_| {
27-
let mut style = String::from("font-weight: 400; font-size: 0.875em; line-height: 1.7142857;margin-bottom: 1rem; padding: 1rem; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; overflow: auto;");
28-
theme.with(|theme| {
29-
if theme.common.color_scheme == "dark" {
30-
style.push_str("border: 1px solid #383f52; border-top-width: 0;");
31-
style.push_str("background-color: #242832;");
32-
} else {
33-
style.push_str(&format!(
34-
"border: 1px solid {}; border-top-width: 0;",
24+
css_vars.push_str("--demo-color: #00000060;");
25+
css_vars.push_str("--demo-color-hover: #000000e0;");
26+
css_vars.push_str(&format!(
27+
"--demo-border-color: {};",
3528
theme.common.border_color
3629
));
37-
style.push_str("background-color: #f9fafb;");
30+
css_vars.push_str("--demo-background-color: #f9fafb;");
3831
}
3932
});
40-
style
33+
css_vars
4134
});
42-
let content_class = create_memo(move |_| {
35+
36+
let code_class = Memo::new(move |_| {
4337
theme.with(|theme| {
4438
format!(
45-
"color-scheme--{}",
39+
"demo-demo__code color-scheme--{}",
4640
theme.common.color_scheme
4741
)
4842
})
4943
});
44+
let is_show_code = RwSignal::new(children.is_none());
5045

5146
let is_highlight = demo_code.is_highlight;
5247
let frag = (demo_code.children)();
@@ -64,8 +59,47 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
6459
<Style id="leptos-thaw-syntect-css">
6560
{include_str!("./syntect-css.css")}
6661
</Style>
67-
<div style=move || style.get()>{children()}</div>
68-
<div style=move || code_style.get() class=move || content_class.get()>
62+
<Style id="demo-demo">
63+
{include_str!("./demo.css")}
64+
</Style>
65+
<div class="demo-demo" style=move || css_vars.get()>
66+
{
67+
if let Some(children) = children {
68+
view! {
69+
<div class="demo-demo__view">{children()}</div>
70+
<div class="demo-demo__toolbar" class=("demo-demo__toolbar--code", move || !is_show_code.get())>
71+
<Popover>
72+
<PopoverTrigger slot>
73+
<span on:click=move |_| is_show_code.update(|show| *show = !*show) class="demo-demo__toolbar-btn">
74+
{
75+
move || if is_show_code.get() {
76+
view! {
77+
<Icon icon=icondata::LuCode2/>
78+
}
79+
} else {
80+
view! {
81+
<Icon icon=icondata::LuCode/>
82+
}
83+
}
84+
}
85+
</span>
86+
</PopoverTrigger>
87+
{
88+
move || if is_show_code.get() {
89+
"Hide code"
90+
} else {
91+
"Show code"
92+
}
93+
}
94+
</Popover>
95+
96+
</div>
97+
}.into()
98+
} else {
99+
None
100+
}
101+
}
102+
<div class=move || code_class.get() style:display=move || (!is_show_code.get()).then_some("none")>
69103
{
70104
if is_highlight {
71105
view! {
@@ -77,6 +111,7 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
77111
}
78112
}
79113
}
114+
</div>
80115
</div>
81116
}
82117
}

‎demo_markdown/src/markdown/code_block.rs

-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ pub fn to_tokens(code_block: &NodeCodeBlock, demos: &mut Vec<String>) -> TokenSt
4545
});
4646
quote! {
4747
<Demo>
48-
""
4948
<DemoCode slot is_highlight=#is_highlight>
5049
#literal
5150
</DemoCode>

0 commit comments

Comments
 (0)