Demo/refactor 240103

.github/workflows/ci.yml

@@ -1,7 +1,7 @@
 name: CI
 on:
     pull_request:
-        paths: ["demo/**", "thaw/**"]
+        paths: ["demo/**", "demo_markdown/**", "thaw/**"]
         branches:
             - main
 

.github/workflows/demo.yml

@@ -1,7 +1,7 @@
 name: Deploy demo
 on:
     push:
-        paths: ["demo/**", "thaw/**"]
+        paths: ["demo/**", "demo_markdown/**", "thaw/**"]
         branches:
             - main
 

demo/Cargo.toml

@@ -19,7 +19,6 @@ icondata = { version = "0.1.0", features = [
     "AiUserOutlined",
     "AiSearchOutlined",
 ] }
-prisms = { git = "https://github.com/luoxiaozero/prisms", rev = "16d4d34b93fc20578ebf03137d54ecc7eafa4d4b" }
 demo_markdown = { path = "../demo_markdown" }
 
 [features]

demo/src/app.rs

@@ -36,29 +36,29 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
         <Routes base="/thaw".to_string()>
             <Route path="/" view=Home/>
             <Route path="/guide" view=GuidePage>
-                <Route path="/installation" view=InstallationPage/>
-                <Route path="/usage" view=UsagePage/>
-                <Route path="/server-sider-rendering" view=ServerSiderRenderingPage/>
+                <Route path="/installation" view=InstallationMdPage/>
+                <Route path="/usage" view=UsageMdPage/>
+                <Route path="/server-sider-rendering" view=ServerSiderRenderingMdPage/>
             </Route>
             <Route path="/components" view=ComponentsPage>
                 <Route path="/tabbar" view=TabbarPage/>
                 <Route path="/nav-bar" view=NavBarPage/>
-                <Route path="/image" view=ImagePage/>
-                <Route path="/button" view=ButtonPage/>
-                <Route path="/checkbox" view=CheckboxPage/>
                 <Route path="/toast" view=ToastPage/>
-                <Route path="/color-picker" view=ColorPickerPage/>
-                <Route path="/alert" view=AlertPage/>
-                <Route path="/grid" view=GridPage/>
-                <Route path="/auto-complete" view=AutoCompletePage/>
-                <Route path="/avatar" view=AvatarPage/>
-                <Route path="/badge" view=BadgePage/>
-                <Route path="/card" view=CardPage/>
-                <Route path="/divider" view=DividerPage/>
-                <Route path="/icon" view=IconPage/>
-                <Route path="/breadcrumb" view=BreadcrumbPage/>
-                <Route path="/calendar" view=CalendarPage/>
-                <Route path="/date-picker" view=DatePickerPage/>
+                <Route path="/alert" view=AlertMdPage/>
+                <Route path="/auto-complete" view=AutoCompleteMdPage/>
+                <Route path="/avatar" view=AvatarMdPage/>
+                <Route path="/badge" view=BadgeMdPage/>
+                <Route path="/breadcrumb" view=BreadcrumbMdPage/>
+                <Route path="/button" view=ButtonMdPage/>
+                <Route path="/calendar" view=CalendarMdPage/>
+                <Route path="/card" view=CardMdPage/>
+                <Route path="/checkbox" view=CheckboxMdPage/>
+                <Route path="/color-picker" view=ColorPickerMdPage/>
+                <Route path="/date-picker" view=DatePickerMdPage/>
+                <Route path="/divider" view=DividerMdPage/>
+                <Route path="/grid" view=GridMdPage/>
+                <Route path="/icon" view=IconMdPage/>
+                <Route path="/image" view=ImageMdPage/>
                 <Route path="/input" view=InputMdPage/>
                 <Route path="/input-number" view=InputNumberMdPage/>
                 <Route path="/layout" view=LayoutMdPage/>

demo/src/components/demo.rs

@@ -61,15 +61,9 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
     }
 
     view! {
-        <Style id="leptos-thaw-prism-css">{prisms::prism_css!()}</Style>
         <Style id="leptos-thaw-syntect-css">
             {include_str!("./syntect-css.css")}
         </Style>
-        <Style id="leptos-thaw-prism-css-fix">
-            ".token.operator {
-                background: hsla(0, 0%, 100%, 0) !important;
-            }"
-        </Style>
         <div style=move || style.get()>{children()}</div>
         <div style=move || code_style.get() class=move || content_class.get()>
             <Code>

demo/src/components/syntect-css.css

@@ -7,20 +7,23 @@
 
 /** light */
 
+.color-scheme--light .syntect-support.syntect-function,
+.color-scheme--light .syntect-entity.syntect-name.syntect-function,
+.color-scheme--light .syntect-variable.syntect-annotation,
+.color-scheme--light .syntect-macro {
+    color: hsl(221, 87%, 60%);
+}
+
 .color-scheme--light .syntect-keyword,
 .color-scheme--light .syntect-storage {
     color: hsl(301, 63%, 40%);
 }
 
+.color-scheme--light .syntect-punctuation.syntect-accessor,
 .color-scheme--light .syntect-keyword.syntect-operator {
     color: hsl(335, 95%, 62%);
 }
 
-.color-scheme--light .syntect-function,
-.color-scheme--light .syntect-macro {
-    color: hsl(221, 87%, 60%);
-}
-
 .color-scheme--light .syntect-support.syntect-type {
     color: hsl(198, 99%, 37%);
 }
@@ -35,21 +38,23 @@
 }
 
 /** dark */
+.color-scheme--dark .syntect-support.syntect-function,
+.color-scheme--dark .syntect-entity.syntect-name.syntect-function,
+.color-scheme--dark .syntect-variable.syntect-annotation,
+.color-scheme--dark .syntect-macro {
+    color: hsl(207, 82%, 66%);
+}
 
 .color-scheme--dark .syntect-keyword,
 .color-scheme--dark .syntect-storage {
     color: hsl(286, 60%, 67%);
 }
 
+.color-scheme--dark .syntect-punctuation.syntect-accessor,
 .color-scheme--dark .syntect-keyword.syntect-operator {
     color: hsl(335, 95%, 62%);
 }
 
-.color-scheme--dark .syntect-function,
-.color-scheme--dark .syntect-macro {
-    color: hsl(207, 82%, 66%);
-}
-
 .color-scheme--dark .syntect-support.syntect-type {
     color: hsl(187, 47%, 55%);
 }