adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-03-12 21:49:49 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Docs 240321 (#149)

Browse source 
* refactor: docs file path

* feat: docs Demo show code
This commit is contained in:
luoxiaozero 2024-03-21 16:39:15 +08:00 • committed by GitHub
parent 513f8ea772
commit c8e74113ba
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 168 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
demo/src/components/demo.css Normal file
View 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);
}

83
demo/src/components/demo.rs
View file

@ -10,43 +10,38 @@ pub struct DemoCode {
}
#[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 style = create_memo(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 css_vars = Memo::new(move |_| {
let mut css_vars = String::new();
theme.with(|theme| {
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 {
style.push_str(&format!("border: 1px solid {};", theme.common.border_color));
}
});
style
});
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;",
css_vars.push_str("--demo-color: #00000060;");
css_vars.push_str("--demo-color-hover: #000000e0;");
css_vars.push_str(&format!(
"--demo-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| {
format!(
"color-scheme--{}",
"demo-demo__code color-scheme--{}",
theme.common.color_scheme
)
})
});
let is_show_code = RwSignal::new(children.is_none());
let is_highlight = demo_code.is_highlight;
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">
{include_str!("./syntect-css.css")}
</Style>
<div style=move || style.get()>{children()}</div>
<div style=move || code_style.get() class=move || content_class.get()>
<Style id="demo-demo">
{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 {
view! {
@ -77,6 +111,7 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
}
}
}
</div>
</div>
}
}

154
demo_markdown/src/lib.rs
View file

@ -5,100 +5,70 @@ use proc_macro2::{Ident, Span};
use quote::quote;
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]
pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenStream {
let file_list = vec![
(
"DevelopmentComponentsMdPage",
include_str!("../docs/_guide/development/components.md"),
),
(
"DevelopmentGuideMdPage",
include_str!("../docs/_guide/development/guide.md"),
),
(
"InstallationMdPage",
include_str!("../docs/_guide/installation.md"),
),
(
"ServerSiderRenderingMdPage",
include_str!("../docs/_guide/server_sider_rendering.md"),
),
("UsageMdPage", include_str!("../docs/_guide/usage.md")),
(
"NavBarMdPage",
include_str!("../docs/_mobile/nav_bar/mod.md"),
),
(
"TabbarMdPage",
include_str!("../docs/_mobile/tabbar/mod.md"),
),
("ToastMdPage", include_str!("../docs/_mobile/toast/mod.md")),
("AlertMdPage", include_str!("../docs/alert/mod.md")),
(
"AutoCompleteMdPage",
include_str!("../docs/auto_complete/mod.md"),
),
("AvatarMdPage", include_str!("../docs/avatar/mod.md")),
("BadgeMdPage", include_str!("../docs/badge/mod.md")),
(
"BreadcrumbMdPage",
include_str!("../docs/breadcrumb/mod.md"),
),
("ButtonMdPage", include_str!("../docs/button/mod.md")),
("CalendarMdPage", include_str!("../docs/calendar/mod.md")),
("CardMdPage", include_str!("../docs/card/mod.md")),
("CheckboxMdPage", include_str!("../docs/checkbox/mod.md")),
("CollapseMdPage", include_str!("../docs/collapse/mod.md")),
(
"ColorPickerMdPage",
include_str!("../docs/color_picker/mod.md"),
),
(
"DatePickerMdPage",
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 file_list = file_path! {
"DevelopmentComponentsMdPage" => "../docs/_guide/development/components.md",
"DevelopmentGuideMdPage" => "../docs/_guide/development/guide.md",
"InstallationMdPage" => "../docs/_guide/installation.md",
"ServerSiderRenderingMdPage" => "../docs/_guide/server_sider_rendering.md",
"UsageMdPage" => "../docs/_guide/usage.md",
"NavBarMdPage" => "../docs/_mobile/nav_bar/mod.md",
"TabbarMdPage" => "../docs/_mobile/tabbar/mod.md",
"ToastMdPage" => "../docs/_mobile/toast/mod.md",
"AlertMdPage" => "../docs/alert/mod.md",
"AutoCompleteMdPage" => "../docs/auto_complete/mod.md",
"AvatarMdPage" => "../docs/avatar/mod.md",
"BadgeMdPage" => "../docs/badge/mod.md",
"BreadcrumbMdPage" => "../docs/breadcrumb/mod.md",
"ButtonMdPage" => "../docs/button/mod.md",
"CalendarMdPage" => "../docs/calendar/mod.md",
"CardMdPage" => "../docs/card/mod.md",
"CheckboxMdPage" => "../docs/checkbox/mod.md",
"CollapseMdPage" => "../docs/collapse/mod.md",
"ColorPickerMdPage" => "../docs/color_picker/mod.md",
"DatePickerMdPage" => "../docs/date_picker/mod.md",
"DividerMdPage" => "../docs/divider/mod.md",
"DrawerMdPage" => "../docs/drawer/mod.md",
"GridMdPage" => "../docs/grid/mod.md",
"IconMdPage" => "../docs/icon/mod.md",
"ImageMdPage" => "../docs/image/mod.md",
"InputMdPage" => "../docs/input/mod.md",
"InputNumberMdPage" => "../docs/input_number/mod.md",
"LayoutMdPage" => "../docs/layout/mod.md",
"LoadingBarMdPage" => "../docs/loading_bar/mod.md",
"MenuMdPage" => "../docs/menu/mod.md",
"MessageMdPage" => "../docs/message/mod.md",
"ModalMdPage" => "../docs/modal/mod.md",
"PopoverMdPage" => "../docs/popover/mod.md",
"ProgressMdPage" => "../docs/progress/mod.md",
"RadioMdPage" => "../docs/radio/mod.md",
"SelectMdPage" => "../docs/select/mod.md",
"SkeletonMdPage" => "../docs/skeleton/mod.md",
"SliderMdPage" => "../docs/slider/mod.md",
"SpaceMdPage" => "../docs/space/mod.md",
"SpinnerMdPage" => "../docs/spinner/mod.md",
"SwitchMdPage" => "../docs/switch/mod.md",
"TableMdPage" => "../docs/table/mod.md",
"TabsMdPage" => "../docs/tabs/mod.md",
"TagMdPage" => "../docs/tag/mod.md",
"ThemeMdPage" => "../docs/theme/mod.md",
"TimePickerMdPage" => "../docs/time_picker/mod.md",
"TypographyMdPage" => "../docs/typography/mod.md",
"UploadMdPage" => "../docs/upload/mod.md"
};
let mut fn_list = vec![];

1
demo_markdown/src/markdown/code_block.rs
View file

@ -45,7 +45,6 @@ pub fn to_tokens(code_block: &NodeCodeBlock, demos: &mut Vec<String>) -> TokenSt
});
quote! {
<Demo>
""
<DemoCode slot is_highlight=#is_highlight>
#literal
</DemoCode>