From 89ee294040aef958dc1306f0338396235a82c4a3 Mon Sep 17 00:00:00 2001
From: luoxiaozero <48741584+luoxiaozero@users.noreply.github.com>
Date: Sun, 17 Dec 2023 17:37:02 +0800
Subject: [PATCH] Demo/231217 (#52)

* fix(demo): tabs demo

* demo: add server sider rendering
---
 demo/src/app.rs                               |  1 +
 demo/src/pages/guide/mod.rs                   | 37 +++++++++------
 .../src/pages/guide/server_sider_rendering.rs | 31 +++++++++++++
 demo/src/pages/tabs/mod.rs                    | 45 ++++++++++++-------
 4 files changed, 86 insertions(+), 28 deletions(-)
 create mode 100644 demo/src/pages/guide/server_sider_rendering.rs

diff --git a/demo/src/app.rs b/demo/src/app.rs
index 16310cd..32f3270 100644
--- a/demo/src/app.rs
+++ b/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/>
diff --git a/demo/src/pages/guide/mod.rs b/demo/src/pages/guide/mod.rs
index edb8cab..365cbde 100644
--- a/demo/src/pages/guide/mod.rs
+++ b/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,17 +81,26 @@ impl IntoView for MenuItemOption {
 }
 
 pub(crate) fn gen_guide_menu_data() -> Vec<MenuGroupOption> {
-    vec![MenuGroupOption {
-        label: "Getting Started".into(),
-        children: vec![
-            MenuItemOption {
-                value: "installation".into(),
-                label: "Installation".into(),
-            },
-            MenuItemOption {
-                value: "usage".into(),
-                label: "Usage".into(),
-            },
-        ],
-    }]
+    vec![
+        MenuGroupOption {
+            label: "Getting Started".into(),
+            children: vec![
+                MenuItemOption {
+                    value: "installation".into(),
+                    label: "Installation".into(),
+                },
+                MenuItemOption {
+                    value: "usage".into(),
+                    label: "Usage".into(),
+                },
+            ],
+        },
+        MenuGroupOption {
+            label: "Guides".into(),
+            children: vec![MenuItemOption {
+                value: "server-sider-rendering".into(),
+                label: "Server Sider Rendering".into(),
+            }],
+        },
+    ]
 }
diff --git a/demo/src/pages/guide/server_sider_rendering.rs b/demo/src/pages/guide/server_sider_rendering.rs
new file mode 100644
index 0000000..6d390d8
--- /dev/null
+++ b/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>
+    }
+}
diff --git a/demo/src/pages/tabs/mod.rs b/demo/src/pages/tabs/mod.rs
index 2945de1..30e33cc 100644
--- a/demo/src/pages/tabs/mod.rs
+++ b/demo/src/pages/tabs/mod.rs
@@ -22,15 +22,18 @@ pub fn TabsPage() -> impl IntoView {
 
                     {highlight_str!(
                         r#"
-                        let value = create_rw_signal("apple");
-                        <Tabs value>
-                            <Tab key="apple" label="Apple">
-                                "apple"
-                            </Tab>
-                            <Tab key="pear" label="Pear">
-                                "pear"
-                            </Tab>
-                        </Tabs>
+                        let value = create_rw_signal(String::from("apple"));
+
+                        view! {
+                            <Tabs value>
+                                <Tab key="apple" label="Apple">
+                                    "apple"
+                                </Tab>
+                                <Tab key="pear" label="Pear">
+                                    "pear"
+                                </Tab>
+                            </Tabs>
+                        }
                     "#,
                         "rust"
                     )}
@@ -50,13 +53,19 @@ pub fn TabsPage() -> impl IntoView {
                 <tbody>
                     <tr>
                         <td>"value"</td>
-                        <td>"RwSignal<String>"</td>
-                        <td>"Default::default()"</td>
+                        <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>