mirror of
https://github.com/adoyle0/thaw.git
synced 2025-03-13 22:19:49 -04:00
Docs 240321 (#149)
* refactor: docs file path * feat: docs Demo show code
This commit is contained in:
luoxiaozero
GitHub
parent
513f8ea772
commit
c8e74113ba
4 changed files with 168 additions and 117 deletions
47
demo/src/components/demo.css
Normal file
47
demo/src/components/demo.css
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
.demo-demo {
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
border: 1px solid var(--demo-border-color);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-demo__view {
|
||||||
|
background-image: url(/grid_dot.svg);
|
||||||
|
background-repeat: repeat;
|
||||||
|
background-size: 1.5rem;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-demo__toolbar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.4rem;
|
||||||
|
border-top: 1px dashed var(--demo-border-color);
|
||||||
|
border-bottom: 1px dashed var(--demo-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-demo__toolbar--code {
|
||||||
|
border-bottom-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-demo__toolbar-btn {
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--demo-color);
|
||||||
|
transition: color .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-demo__toolbar-btn:hover {
|
||||||
|
color: var(--demo-color-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-demo__code {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.875em;
|
||||||
|
line-height: 1.714;
|
||||||
|
padding: 1rem;
|
||||||
|
overflow: auto;
|
||||||
|
background-color: var(--demo-background-color);
|
||||||
|
}
|
||||||
|
|
@ -10,43 +10,38 @@ pub struct DemoCode {
|
||||||
}
|
}
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
|
pub fn Demo(demo_code: DemoCode, #[prop(optional)] children: Option<Children>) -> impl IntoView {
|
||||||
let theme = use_theme(Theme::light);
|
let theme = use_theme(Theme::light);
|
||||||
let style = create_memo(move |_| {
|
let css_vars = Memo::new(move |_| {
|
||||||
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;");
|
let mut css_vars = String::new();
|
||||||
theme.with(|theme| {
|
theme.with(|theme| {
|
||||||
if theme.common.color_scheme == "dark" {
|
if theme.common.color_scheme == "dark" {
|
||||||
style.push_str("border: 1px solid #383f52;");
|
css_vars.push_str("--demo-color: #ffffff60;");
|
||||||
|
css_vars.push_str("--demo-color-hover: #ffffffe0;");
|
||||||
|
css_vars.push_str("--demo-border-color: #383f52;");
|
||||||
|
css_vars.push_str("--demo-background-color: #242832;");
|
||||||
} else {
|
} else {
|
||||||
style.push_str(&format!("border: 1px solid {};", theme.common.border_color));
|
css_vars.push_str("--demo-color: #00000060;");
|
||||||
}
|
css_vars.push_str("--demo-color-hover: #000000e0;");
|
||||||
});
|
css_vars.push_str(&format!(
|
||||||
style
|
"--demo-border-color: {};",
|
||||||
});
|
|
||||||
let code_style = create_memo(move |_| {
|
|
||||||
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;");
|
|
||||||
theme.with(|theme| {
|
|
||||||
if theme.common.color_scheme == "dark" {
|
|
||||||
style.push_str("border: 1px solid #383f52; border-top-width: 0;");
|
|
||||||
style.push_str("background-color: #242832;");
|
|
||||||
} else {
|
|
||||||
style.push_str(&format!(
|
|
||||||
"border: 1px solid {}; border-top-width: 0;",
|
|
||||||
theme.common.border_color
|
theme.common.border_color
|
||||||
));
|
));
|
||||||
style.push_str("background-color: #f9fafb;");
|
css_vars.push_str("--demo-background-color: #f9fafb;");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
style
|
css_vars
|
||||||
});
|
});
|
||||||
let content_class = create_memo(move |_| {
|
|
||||||
|
let code_class = Memo::new(move |_| {
|
||||||
theme.with(|theme| {
|
theme.with(|theme| {
|
||||||
format!(
|
format!(
|
||||||
"color-scheme--{}",
|
"demo-demo__code color-scheme--{}",
|
||||||
theme.common.color_scheme
|
theme.common.color_scheme
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
let is_show_code = RwSignal::new(children.is_none());
|
||||||
|
|
||||||
let is_highlight = demo_code.is_highlight;
|
let is_highlight = demo_code.is_highlight;
|
||||||
let frag = (demo_code.children)();
|
let frag = (demo_code.children)();
|
||||||
|
|
@ -64,8 +59,47 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
|
||||||
<Style id="leptos-thaw-syntect-css">
|
<Style id="leptos-thaw-syntect-css">
|
||||||
{include_str!("./syntect-css.css")}
|
{include_str!("./syntect-css.css")}
|
||||||
</Style>
|
</Style>
|
||||||
<div style=move || style.get()>{children()}</div>
|
<Style id="demo-demo">
|
||||||
<div style=move || code_style.get() class=move || content_class.get()>
|
{include_str!("./demo.css")}
|
||||||
|
</Style>
|
||||||
|
<div class="demo-demo" style=move || css_vars.get()>
|
||||||
|
{
|
||||||
|
if let Some(children) = children {
|
||||||
|
view! {
|
||||||
|
<div class="demo-demo__view">{children()}</div>
|
||||||
|
<div class="demo-demo__toolbar" class=("demo-demo__toolbar--code", move || !is_show_code.get())>
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger slot>
|
||||||
|
<span on:click=move |_| is_show_code.update(|show| *show = !*show) class="demo-demo__toolbar-btn">
|
||||||
|
{
|
||||||
|
move || if is_show_code.get() {
|
||||||
|
view! {
|
||||||
|
<Icon icon=icondata::LuCode2/>
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
view! {
|
||||||
|
<Icon icon=icondata::LuCode/>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
</PopoverTrigger>
|
||||||
|
{
|
||||||
|
move || if is_show_code.get() {
|
||||||
|
"Hide code"
|
||||||
|
} else {
|
||||||
|
"Show code"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</Popover>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
}.into()
|
||||||
|
} else {
|
||||||
|
None
|
||||||
|
}
|
||||||
|
}
|
||||||
|
<div class=move || code_class.get() style:display=move || (!is_show_code.get()).then_some("none")>
|
||||||
{
|
{
|
||||||
if is_highlight {
|
if is_highlight {
|
||||||
view! {
|
view! {
|
||||||
|
|
@ -77,6 +111,7 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,100 +5,70 @@ use proc_macro2::{Ident, Span};
|
||||||
use quote::quote;
|
use quote::quote;
|
||||||
use syn::ItemFn;
|
use syn::ItemFn;
|
||||||
|
|
||||||
|
macro_rules! file_path {
|
||||||
|
($($key:expr => $value:expr),*) => {
|
||||||
|
{
|
||||||
|
let mut pairs = Vec::new();
|
||||||
|
$(
|
||||||
|
pairs.push(($key, include_str!($value)));
|
||||||
|
)*
|
||||||
|
pairs
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#[proc_macro]
|
#[proc_macro]
|
||||||
pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenStream {
|
pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenStream {
|
||||||
let file_list = vec![
|
let file_list = file_path! {
|
||||||
(
|
"DevelopmentComponentsMdPage" => "../docs/_guide/development/components.md",
|
||||||
"DevelopmentComponentsMdPage",
|
"DevelopmentGuideMdPage" => "../docs/_guide/development/guide.md",
|
||||||
include_str!("../docs/_guide/development/components.md"),
|
"InstallationMdPage" => "../docs/_guide/installation.md",
|
||||||
),
|
"ServerSiderRenderingMdPage" => "../docs/_guide/server_sider_rendering.md",
|
||||||
(
|
"UsageMdPage" => "../docs/_guide/usage.md",
|
||||||
"DevelopmentGuideMdPage",
|
"NavBarMdPage" => "../docs/_mobile/nav_bar/mod.md",
|
||||||
include_str!("../docs/_guide/development/guide.md"),
|
"TabbarMdPage" => "../docs/_mobile/tabbar/mod.md",
|
||||||
),
|
"ToastMdPage" => "../docs/_mobile/toast/mod.md",
|
||||||
(
|
"AlertMdPage" => "../docs/alert/mod.md",
|
||||||
"InstallationMdPage",
|
"AutoCompleteMdPage" => "../docs/auto_complete/mod.md",
|
||||||
include_str!("../docs/_guide/installation.md"),
|
"AvatarMdPage" => "../docs/avatar/mod.md",
|
||||||
),
|
"BadgeMdPage" => "../docs/badge/mod.md",
|
||||||
(
|
"BreadcrumbMdPage" => "../docs/breadcrumb/mod.md",
|
||||||
"ServerSiderRenderingMdPage",
|
"ButtonMdPage" => "../docs/button/mod.md",
|
||||||
include_str!("../docs/_guide/server_sider_rendering.md"),
|
"CalendarMdPage" => "../docs/calendar/mod.md",
|
||||||
),
|
"CardMdPage" => "../docs/card/mod.md",
|
||||||
("UsageMdPage", include_str!("../docs/_guide/usage.md")),
|
"CheckboxMdPage" => "../docs/checkbox/mod.md",
|
||||||
(
|
"CollapseMdPage" => "../docs/collapse/mod.md",
|
||||||
"NavBarMdPage",
|
"ColorPickerMdPage" => "../docs/color_picker/mod.md",
|
||||||
include_str!("../docs/_mobile/nav_bar/mod.md"),
|
"DatePickerMdPage" => "../docs/date_picker/mod.md",
|
||||||
),
|
"DividerMdPage" => "../docs/divider/mod.md",
|
||||||
(
|
"DrawerMdPage" => "../docs/drawer/mod.md",
|
||||||
"TabbarMdPage",
|
"GridMdPage" => "../docs/grid/mod.md",
|
||||||
include_str!("../docs/_mobile/tabbar/mod.md"),
|
"IconMdPage" => "../docs/icon/mod.md",
|
||||||
),
|
"ImageMdPage" => "../docs/image/mod.md",
|
||||||
("ToastMdPage", include_str!("../docs/_mobile/toast/mod.md")),
|
"InputMdPage" => "../docs/input/mod.md",
|
||||||
("AlertMdPage", include_str!("../docs/alert/mod.md")),
|
"InputNumberMdPage" => "../docs/input_number/mod.md",
|
||||||
(
|
"LayoutMdPage" => "../docs/layout/mod.md",
|
||||||
"AutoCompleteMdPage",
|
"LoadingBarMdPage" => "../docs/loading_bar/mod.md",
|
||||||
include_str!("../docs/auto_complete/mod.md"),
|
"MenuMdPage" => "../docs/menu/mod.md",
|
||||||
),
|
"MessageMdPage" => "../docs/message/mod.md",
|
||||||
("AvatarMdPage", include_str!("../docs/avatar/mod.md")),
|
"ModalMdPage" => "../docs/modal/mod.md",
|
||||||
("BadgeMdPage", include_str!("../docs/badge/mod.md")),
|
"PopoverMdPage" => "../docs/popover/mod.md",
|
||||||
(
|
"ProgressMdPage" => "../docs/progress/mod.md",
|
||||||
"BreadcrumbMdPage",
|
"RadioMdPage" => "../docs/radio/mod.md",
|
||||||
include_str!("../docs/breadcrumb/mod.md"),
|
"SelectMdPage" => "../docs/select/mod.md",
|
||||||
),
|
"SkeletonMdPage" => "../docs/skeleton/mod.md",
|
||||||
("ButtonMdPage", include_str!("../docs/button/mod.md")),
|
"SliderMdPage" => "../docs/slider/mod.md",
|
||||||
("CalendarMdPage", include_str!("../docs/calendar/mod.md")),
|
"SpaceMdPage" => "../docs/space/mod.md",
|
||||||
("CardMdPage", include_str!("../docs/card/mod.md")),
|
"SpinnerMdPage" => "../docs/spinner/mod.md",
|
||||||
("CheckboxMdPage", include_str!("../docs/checkbox/mod.md")),
|
"SwitchMdPage" => "../docs/switch/mod.md",
|
||||||
("CollapseMdPage", include_str!("../docs/collapse/mod.md")),
|
"TableMdPage" => "../docs/table/mod.md",
|
||||||
(
|
"TabsMdPage" => "../docs/tabs/mod.md",
|
||||||
"ColorPickerMdPage",
|
"TagMdPage" => "../docs/tag/mod.md",
|
||||||
include_str!("../docs/color_picker/mod.md"),
|
"ThemeMdPage" => "../docs/theme/mod.md",
|
||||||
),
|
"TimePickerMdPage" => "../docs/time_picker/mod.md",
|
||||||
(
|
"TypographyMdPage" => "../docs/typography/mod.md",
|
||||||
"DatePickerMdPage",
|
"UploadMdPage" => "../docs/upload/mod.md"
|
||||||
include_str!("../docs/date_picker/mod.md"),
|
};
|
||||||
),
|
|
||||||
("DividerMdPage", include_str!("../docs/divider/mod.md")),
|
|
||||||
("DrawerMdPage", include_str!("../docs/drawer/mod.md")),
|
|
||||||
("GridMdPage", include_str!("../docs/grid/mod.md")),
|
|
||||||
("IconMdPage", include_str!("../docs/icon/mod.md")),
|
|
||||||
("ImageMdPage", include_str!("../docs/image/mod.md")),
|
|
||||||
("InputMdPage", include_str!("../docs/input/mod.md")),
|
|
||||||
(
|
|
||||||
"InputNumberMdPage",
|
|
||||||
include_str!("../docs/input_number/mod.md"),
|
|
||||||
),
|
|
||||||
("LayoutMdPage", include_str!("../docs/layout/mod.md")),
|
|
||||||
(
|
|
||||||
"LoadingBarMdPage",
|
|
||||||
include_str!("../docs/loading_bar/mod.md"),
|
|
||||||
),
|
|
||||||
("MenuMdPage", include_str!("../docs/menu/mod.md")),
|
|
||||||
("MessageMdPage", include_str!("../docs/message/mod.md")),
|
|
||||||
("ModalMdPage", include_str!("../docs/modal/mod.md")),
|
|
||||||
("PopoverMdPage", include_str!("../docs/popover/mod.md")),
|
|
||||||
("ProgressMdPage", include_str!("../docs/progress/mod.md")),
|
|
||||||
("RadioMdPage", include_str!("../docs/radio/mod.md")),
|
|
||||||
("SelectMdPage", include_str!("../docs/select/mod.md")),
|
|
||||||
("SkeletonMdPage", include_str!("../docs/skeleton/mod.md")),
|
|
||||||
("SliderMdPage", include_str!("../docs/slider/mod.md")),
|
|
||||||
("SpaceMdPage", include_str!("../docs/space/mod.md")),
|
|
||||||
("SpinnerMdPage", include_str!("../docs/spinner/mod.md")),
|
|
||||||
("SwitchMdPage", include_str!("../docs/switch/mod.md")),
|
|
||||||
("TableMdPage", include_str!("../docs/table/mod.md")),
|
|
||||||
("TabsMdPage", include_str!("../docs/tabs/mod.md")),
|
|
||||||
("TagMdPage", include_str!("../docs/tag/mod.md")),
|
|
||||||
("ThemeMdPage", include_str!("../docs/theme/mod.md")),
|
|
||||||
(
|
|
||||||
"TimePickerMdPage",
|
|
||||||
include_str!("../docs/time_picker/mod.md"),
|
|
||||||
),
|
|
||||||
(
|
|
||||||
"TypographyMdPage",
|
|
||||||
include_str!("../docs/typography/mod.md"),
|
|
||||||
),
|
|
||||||
("UploadMdPage", include_str!("../docs/upload/mod.md")),
|
|
||||||
];
|
|
||||||
|
|
||||||
let mut fn_list = vec![];
|
let mut fn_list = vec![];
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,6 @@ pub fn to_tokens(code_block: &NodeCodeBlock, demos: &mut Vec<String>) -> TokenSt
|
||||||
});
|
});
|
||||||
quote! {
|
quote! {
|
||||||
<Demo>
|
<Demo>
|
||||||
""
|
|
||||||
<DemoCode slot is_highlight=#is_highlight>
|
<DemoCode slot is_highlight=#is_highlight>
|
||||||
#literal
|
#literal
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue