Demo/231217 (#52)

* fix(demo): tabs demo

* demo: add server sider rendering

demo/src/app.rs

@@ -38,6 +38,7 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
             <Route path="/guide" view=GuidePage>
                 <Route path="/installation" view=InstallationPage/>
                 <Route path="/usage" view=UsagePage/>
+                <Route path="/server-sider-rendering" view=ServerSiderRenderingPage/>
             </Route>
             <Route path="/components" view=ComponentsPage>
                 <Route path="/menu" view=MenuPage/>

demo/src/pages/guide/mod.rs

@@ -1,10 +1,12 @@
 mod installation;
+mod server_sider_rendering;
 mod usage;
 
 use crate::components::SiteHeader;
 pub use installation::*;
 use leptos::*;
 use leptos_router::{use_location, use_navigate, Outlet};
+pub use server_sider_rendering::*;
 use thaw::*;
 pub use usage::*;
 
@@ -79,7 +81,8 @@ impl IntoView for MenuItemOption {
 }
 
 pub(crate) fn gen_guide_menu_data() -> Vec<MenuGroupOption> {
-    vec![MenuGroupOption {
+    vec![
+        MenuGroupOption {
             label: "Getting Started".into(),
             children: vec![
                 MenuItemOption {
@@ -91,5 +94,13 @@ pub(crate) fn gen_guide_menu_data() -> Vec<MenuGroupOption> {
                     label: "Usage".into(),
                 },
             ],
-    }]
+        },
+        MenuGroupOption {
+            label: "Guides".into(),
+            children: vec![MenuItemOption {
+                value: "server-sider-rendering".into(),
+                label: "Server Sider Rendering".into(),
+            }],
+        },
+    ]
 }

demo/src/pages/guide/server_sider_rendering.rs

@@ -0,0 +1,31 @@
+use crate::components::{Demo, DemoCode};
+use leptos::*;
+
+#[component]
+pub fn ServerSiderRenderingPage() -> impl IntoView {
+    let ssr_config = r#"thaw = { ..., default-features = false, features = ["ssr"] }"#;
+    let hydrate_config = r#"thaw = { ..., default-features = false, features = ["hydrate"] }"#;
+    view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Server Sider Rendering"</h1>
+            <p>"To enable the ssr mode, the following configurations are required:"</p>
+            <Demo>
+                ""
+                <DemoCode slot>
+
+                    {ssr_config}
+
+                </DemoCode>
+            </Demo>
+            <p>"To enable the hydrate mode, the following configurations are required:"</p>
+            <Demo>
+                ""
+                <DemoCode slot>
+
+                    {hydrate_config}
+
+                </DemoCode>
+            </Demo>
+        </div>
+    }
+}

demo/src/pages/tabs/mod.rs

@@ -22,7 +22,9 @@ pub fn TabsPage() -> impl IntoView {
 
                     {highlight_str!(
                         r#"
-                        let value = create_rw_signal("apple");
+                        let value = create_rw_signal(String::from("apple"));
+
+                        view! {
                             <Tabs value>
                                 <Tab key="apple" label="Apple">
                                     "apple"
@@ -31,6 +33,7 @@ pub fn TabsPage() -> impl IntoView {
                                     "pear"
                                 </Tab>
                             </Tabs>
+                        }
                     "#,
                         "rust"
                     )}
@@ -50,13 +53,19 @@ pub fn TabsPage() -> impl IntoView {
                 <tbody>
                     <tr>
                         <td>"value"</td>
-                        <td>"RwSignal<String>"</td>
+                        <td>
-                        <td>"Default::default()"</td>
+                            <Text code=true>"RwSignal<String>"</Text>
+                        </td>
+                        <td>
+                            <Text code=true>"Default::default()"</Text>
+                        </td>
                         <td>"Tabs value."</td>
                     </tr>
                     <tr>
                         <td>"children"</td>
-                        <td>"Children"</td>
+                        <td>
+                            <Text code=true>"Children"</Text>
+                        </td>
                         <td></td>
                         <td>"Tabs content."</td>
                     </tr>
@@ -75,19 +84,25 @@ pub fn TabsPage() -> impl IntoView {
                 <tbody>
                     <tr>
                         <td>"key"</td>
-                        <td>"String"</td>
+                        <td>
+                            <Text code=true>"String"</Text>
+                        </td>
                         <td></td>
                         <td>"The indentifier of the tab."</td>
                     </tr>
                     <tr>
                         <td>"label"</td>
-                        <td>"String"</td>
+                        <td>
+                            <Text code=true>"String"</Text>
+                        </td>
                         <td></td>
                         <td>"The label of the tab."</td>
                     </tr>
                     <tr>
                         <td>"children"</td>
-                        <td>"Children"</td>
+                        <td>
+                            <Text code=true>"Children"</Text>
+                        </td>
                         <td></td>
                         <td>"Tab's content."</td>
                     </tr>