refactor demo docs (#64)

* demo: refactor docs * demo: refactor docs * demo: refactor docs * demo: refactor docs
thaw-ui · Dec 31, 2023 · 1e4832a · 1e4832a
1 parent 9c6c5ae
commit 1e4832a
Show file tree

Hide file tree

Showing 45 changed files with 779 additions and 2,194 deletions.
diff --git a/demo/src/app.rs b/demo/src/app.rs
@@ -41,21 +41,13 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
                 <Route path="/server-sider-rendering" view=ServerSiderRenderingPage/>
             </Route>
             <Route path="/components" view=ComponentsPage>
-                <Route path="/menu" view=MenuPage/>
-                <Route path="/slider" view=SliderPage/>
                 <Route path="/tabbar" view=TabbarPage/>
                 <Route path="/nav-bar" view=NavBarPage/>
                 <Route path="/input" view=InputPage/>
                 <Route path="/image" view=ImagePage/>
-                <Route path="/modal" view=ModalPage/>
                 <Route path="/button" view=ButtonPage/>
                 <Route path="/checkbox" view=CheckboxPage/>
                 <Route path="/toast" view=ToastPage/>
-                <Route path="/tabs" view=TabsPage/>
-                <Route path="/select" view=SelectPage/>
-                <Route path="/space" view=SpacePage/>
-                <Route path="/spinner" view=SpinnerPage/>
-                <Route path="/table" view=TablePage/>
                 <Route path="/color-picker" view=ColorPickerPage/>
                 <Route path="/alert" view=AlertPage/>
                 <Route path="/grid" view=GridPage/>
@@ -66,23 +58,30 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
                 <Route path="/divider" view=DividerPage/>
                 <Route path="/input-number" view=InputNumberPage/>
                 <Route path="/icon" view=IconPage/>
-                <Route path="/message" view=MessagePage/>
-                <Route path="/radio" view=RadioPage/>
-                <Route path="/skeleton" view=SkeletonPage/>
-                <Route path="/switch" view=SwitchPage/>
-                <Route path="/tag" view=TagPage/>
-                <Route path="/upload" view=UploadPage/>
-                <Route path="/upload-md" view=UploadMdPage/>
-                <Route path="/loading-bar" view=LoadingBarPage/>
                 <Route path="/breadcrumb" view=BreadcrumbPage/>
                 <Route path="/layout" view=LayoutPage/>
-                <Route path="/progress" view=ProgressPage/>
-                <Route path="/theme" view=ThemePage/>
-                <Route path="/typography" view=TypographyPage/>
                 <Route path="/calendar" view=CalendarPage/>
-                <Route path="/time-picker" view=TimePickerPage/>
                 <Route path="/date-picker" view=DatePickerPage/>
-                <Route path="/popover" view=PopoverPage/>
+                <Route path="/loading-bar" view=LoadingBarMdPage/>
+                <Route path="/menu" view=MenuMdPage/>
+                <Route path="/message" view=MessageMdPage/>
+                <Route path="/modal" view=ModalMdPage/>
+                <Route path="/popover" view=PopoverMdPage/>
+                <Route path="/progress" view=ProgressMdPage/>
+                <Route path="/radio" view=RadioMdPage/>
+                <Route path="/select" view=SelectMdPage/>
+                <Route path="/skeleton" view=SkeletonMdPage/>
+                <Route path="/slider" view=SliderMdPage/>
+                <Route path="/space" view=SpaceMdPage/>
+                <Route path="/spinner" view=SpinnerMdPage/>
+                <Route path="/switch" view=SwitchMdPage/>
+                <Route path="/table" view=TableMdPage/>
+                <Route path="/tabs" view=TabsMdPage/>
+                <Route path="/tag" view=TagMdPage/>
+                <Route path="/theme" view=ThemeMdPage/>
+                <Route path="/time-picker" view=TimePickerMdPage/>
+                <Route path="/typography" view=TypographyMdPage/>
+                <Route path="/upload" view=UploadMdPage/>
             </Route>
             <Route path="/mobile/tabbar" view=TabbarDemoPage/>
             <Route path="/mobile/nav-bar" view=NavBarDemoPage/>

diff --git a/demo/src/components/demo.rs b/demo/src/components/demo.rs
@@ -24,7 +24,7 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
         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;");
+        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;");

diff --git a/demo/src/components/syntect-css.css b/demo/src/components/syntect-css.css
@@ -7,6 +7,7 @@
 
 /** light */
 
+.color-scheme--light .syntect-keyword,
 .color-scheme--light .syntect-storage {
     color: hsl(301, 63%, 40%);
 }
@@ -28,12 +29,14 @@
     color: hsl(119, 34%, 47%);
 }
 
+.color-scheme--light .syntect-constant,
 .color-scheme--light .syntect-placeholder {
     color: hsl(41, 99%, 30%);
 }
 
 /** dark */
 
+.color-scheme--dark .syntect-keyword,
 .color-scheme--dark .syntect-storage {
     color: hsl(286, 60%, 67%);
 }
@@ -55,6 +58,7 @@
     color: hsl(95, 38%, 62%);
 }
 
+.color-scheme--dark .syntect-constant,
 .color-scheme--dark .syntect-placeholder {
     color: hsl(29, 54%, 61%);
 }
diff --git a/demo/src/pages/loading_bar/mod.rs b/demo/src/pages/loading_bar/mod.rs
diff --git a/demo/src/pages/menu/mod.rs b/demo/src/pages/menu/mod.rs