Skip to content

Commit c8e7411

Browse files
luoxiaozeroluoxiaozero
authored
Docs 240321 (#149)
* refactor: docs file path * feat: docs Demo show code
1 parent 513f8ea commit c8e7411

File tree

4 files changed

+168
-117
lines changed

4 files changed

+168
-117
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/lib.rs

+62-92
Original file line numberDiff line numberDiff line change
@@ -5,100 +5,70 @@ use proc_macro2::{Ident, Span};
55
use quote::quote;
66
use syn::ItemFn;
77

8+
macro_rules! file_path {
9+
($($key:expr => $value:expr),*) => {
10+
{
11+
let mut pairs = Vec::new();
12+
$(
13+
pairs.push(($key, include_str!($value)));
14+
)*
15+
pairs
16+
}
17+
}
18+
}
19+
820
#[proc_macro]
921
pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenStream {
10-
let file_list = vec![
11-
(
12-
"DevelopmentComponentsMdPage",
13-
include_str!("../docs/_guide/development/components.md"),
14-
),
15-
(
16-
"DevelopmentGuideMdPage",
17-
include_str!("../docs/_guide/development/guide.md"),
18-
),
19-
(
20-
"InstallationMdPage",
21-
include_str!("../docs/_guide/installation.md"),
22-
),
23-
(
24-
"ServerSiderRenderingMdPage",
25-
include_str!("../docs/_guide/server_sider_rendering.md"),
26-
),
27-
("UsageMdPage", include_str!("../docs/_guide/usage.md")),
28-
(
29-
"NavBarMdPage",
30-
include_str!("../docs/_mobile/nav_bar/mod.md"),
31-
),
32-
(
33-
"TabbarMdPage",
34-
include_str!("../docs/_mobile/tabbar/mod.md"),
35-
),
36-
("ToastMdPage", include_str!("../docs/_mobile/toast/mod.md")),
37-
("AlertMdPage", include_str!("../docs/alert/mod.md")),
38-
(
39-
"AutoCompleteMdPage",
40-
include_str!("../docs/auto_complete/mod.md"),
41-
),
42-
("AvatarMdPage", include_str!("../docs/avatar/mod.md")),
43-
("BadgeMdPage", include_str!("../docs/badge/mod.md")),
44-
(
45-
"BreadcrumbMdPage",
46-
include_str!("../docs/breadcrumb/mod.md"),
47-
),
48-
("ButtonMdPage", include_str!("../docs/button/mod.md")),
49-
("CalendarMdPage", include_str!("../docs/calendar/mod.md")),
50-
("CardMdPage", include_str!("../docs/card/mod.md")),
51-
("CheckboxMdPage", include_str!("../docs/checkbox/mod.md")),
52-
("CollapseMdPage", include_str!("../docs/collapse/mod.md")),
53-
(
54-
"ColorPickerMdPage",
55-
include_str!("../docs/color_picker/mod.md"),
56-
),
57-
(
58-
"DatePickerMdPage",
59-
include_str!("../docs/date_picker/mod.md"),
60-
),
61-
("DividerMdPage", include_str!("../docs/divider/mod.md")),
62-
("DrawerMdPage", include_str!("../docs/drawer/mod.md")),
63-
("GridMdPage", include_str!("../docs/grid/mod.md")),
64-
("IconMdPage", include_str!("../docs/icon/mod.md")),
65-
("ImageMdPage", include_str!("../docs/image/mod.md")),
66-
("InputMdPage", include_str!("../docs/input/mod.md")),
67-
(
68-
"InputNumberMdPage",
69-
include_str!("../docs/input_number/mod.md"),
70-
),
71-
("LayoutMdPage", include_str!("../docs/layout/mod.md")),
72-
(
73-
"LoadingBarMdPage",
74-
include_str!("../docs/loading_bar/mod.md"),
75-
),
76-
("MenuMdPage", include_str!("../docs/menu/mod.md")),
77-
("MessageMdPage", include_str!("../docs/message/mod.md")),
78-
("ModalMdPage", include_str!("../docs/modal/mod.md")),
79-
("PopoverMdPage", include_str!("../docs/popover/mod.md")),
80-
("ProgressMdPage", include_str!("../docs/progress/mod.md")),
81-
("RadioMdPage", include_str!("../docs/radio/mod.md")),
82-
("SelectMdPage", include_str!("../docs/select/mod.md")),
83-
("SkeletonMdPage", include_str!("../docs/skeleton/mod.md")),
84-
("SliderMdPage", include_str!("../docs/slider/mod.md")),
85-
("SpaceMdPage", include_str!("../docs/space/mod.md")),
86-
("SpinnerMdPage", include_str!("../docs/spinner/mod.md")),
87-
("SwitchMdPage", include_str!("../docs/switch/mod.md")),
88-
("TableMdPage", include_str!("../docs/table/mod.md")),
89-
("TabsMdPage", include_str!("../docs/tabs/mod.md")),
90-
("TagMdPage", include_str!("../docs/tag/mod.md")),
91-
("ThemeMdPage", include_str!("../docs/theme/mod.md")),
92-
(
93-
"TimePickerMdPage",
94-
include_str!("../docs/time_picker/mod.md"),
95-
),
96-
(
97-
"TypographyMdPage",
98-
include_str!("../docs/typography/mod.md"),
99-
),
100-
("UploadMdPage", include_str!("../docs/upload/mod.md")),
101-
];
22+
let file_list = file_path! {
23+
"DevelopmentComponentsMdPage" => "../docs/_guide/development/components.md",
24+
"DevelopmentGuideMdPage" => "../docs/_guide/development/guide.md",
25+
"InstallationMdPage" => "../docs/_guide/installation.md",
26+
"ServerSiderRenderingMdPage" => "../docs/_guide/server_sider_rendering.md",
27+
"UsageMdPage" => "../docs/_guide/usage.md",
28+
"NavBarMdPage" => "../docs/_mobile/nav_bar/mod.md",
29+
"TabbarMdPage" => "../docs/_mobile/tabbar/mod.md",
30+
"ToastMdPage" => "../docs/_mobile/toast/mod.md",
31+
"AlertMdPage" => "../docs/alert/mod.md",
32+
"AutoCompleteMdPage" => "../docs/auto_complete/mod.md",
33+
"AvatarMdPage" => "../docs/avatar/mod.md",
34+
"BadgeMdPage" => "../docs/badge/mod.md",
35+
"BreadcrumbMdPage" => "../docs/breadcrumb/mod.md",
36+
"ButtonMdPage" => "../docs/button/mod.md",
37+
"CalendarMdPage" => "../docs/calendar/mod.md",
38+
"CardMdPage" => "../docs/card/mod.md",
39+
"CheckboxMdPage" => "../docs/checkbox/mod.md",
40+
"CollapseMdPage" => "../docs/collapse/mod.md",
41+
"ColorPickerMdPage" => "../docs/color_picker/mod.md",
42+
"DatePickerMdPage" => "../docs/date_picker/mod.md",
43+
"DividerMdPage" => "../docs/divider/mod.md",
44+
"DrawerMdPage" => "../docs/drawer/mod.md",
45+
"GridMdPage" => "../docs/grid/mod.md",
46+
"IconMdPage" => "../docs/icon/mod.md",
47+
"ImageMdPage" => "../docs/image/mod.md",
48+
"InputMdPage" => "../docs/input/mod.md",
49+
"InputNumberMdPage" => "../docs/input_number/mod.md",
50+
"LayoutMdPage" => "../docs/layout/mod.md",
51+
"LoadingBarMdPage" => "../docs/loading_bar/mod.md",
52+
"MenuMdPage" => "../docs/menu/mod.md",
53+
"MessageMdPage" => "../docs/message/mod.md",
54+
"ModalMdPage" => "../docs/modal/mod.md",
55+
"PopoverMdPage" => "../docs/popover/mod.md",
56+
"ProgressMdPage" => "../docs/progress/mod.md",
57+
"RadioMdPage" => "../docs/radio/mod.md",
58+
"SelectMdPage" => "../docs/select/mod.md",
59+
"SkeletonMdPage" => "../docs/skeleton/mod.md",
60+
"SliderMdPage" => "../docs/slider/mod.md",
61+
"SpaceMdPage" => "../docs/space/mod.md",
62+
"SpinnerMdPage" => "../docs/spinner/mod.md",
63+
"SwitchMdPage" => "../docs/switch/mod.md",
64+
"TableMdPage" => "../docs/table/mod.md",
65+
"TabsMdPage" => "../docs/tabs/mod.md",
66+
"TagMdPage" => "../docs/tag/mod.md",
67+
"ThemeMdPage" => "../docs/theme/mod.md",
68+
"TimePickerMdPage" => "../docs/time_picker/mod.md",
69+
"TypographyMdPage" => "../docs/typography/mod.md",
70+
"UploadMdPage" => "../docs/upload/mod.md"
71+
};
10272

10373
let mut fn_list = vec![];
10474

‎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)