docs: add development guide (#136)

demo/src/app.rs

@@ -39,6 +39,8 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
                 <Route path="/installation" view=InstallationMdPage/>
                 <Route path="/usage" view=UsageMdPage/>
                 <Route path="/server-sider-rendering" view=ServerSiderRenderingMdPage/>
+                <Route path="/development/guide" view=DevelopmentGuideMdPage/>
+                <Route path="/development/components" view=DevelopmentComponentsMdPage/>
             </Route>
             <Route path="/components" view=ComponentsPage>
                 <Route path="/tabbar" view=TabbarPage/>

demo/src/pages/guide.rs

@@ -115,5 +115,18 @@ pub(crate) fn gen_guide_menu_data() -> Vec<MenuGroupOption> {
                 label: "Server Sider Rendering".into(),
             }],
         },
+        MenuGroupOption {
+            label: "Development".into(),
+            children: vec![
+                MenuItemOption {
+                    value: "development/guide".into(),
+                    label: "Guide".into(),
+                },
+                MenuItemOption {
+                    value: "development/components".into(),
+                    label: "Components".into(),
+                },
+            ],
+        },
     ]
 }

demo_markdown/docs/_guide/development/components.md

@@ -0,0 +1,32 @@
+# Internal component
+
+There are some internal components that let developers know how to use them.
+
+## Binder / Follwer
+
+```rust
+use crate::components::{Binder, Follower, FollowerPlacement};
+use leptos::*;
+
+// Used to internally track the location of this DOM
+let div_ref= NodeRef::new();
+// Used to turn on and off the position to listen to the DOM when the show changes
+let show = RwSignal::new(false);
+
+// placement: The position relative to the DOM when the popup opens
+
+view! {
+    <Binder target_ref=div_ref>
+        <div ref=div_ref>
+            "content"
+        </div>
+        <Follower slot show placement=FollowerPlacement::BottomStart>
+            {
+                move || {
+                    show.get().then_some("popover")
+                }
+            }
+        </Follower>
+    </Binder>
+}
+```

demo_markdown/docs/_guide/development/guide.md

@@ -0,0 +1,16 @@
+# Development guide
+
+### Code style
+
+It is recommended to use the Rust style instead of the functional stule in the newly added reactive code.
+
+```rust
+RwSignal::new(12) // ✅
+create_rw_signal(12) // 🙅
+
+Memo::new(|_| {}) // ✅
+create_memo(|_| {}) // 🙅
+
+Effect::new(|_| {}) // ✅
+create_effect(|_| {}) // 🙅
+```

demo_markdown/src/lib.rs

@@ -8,6 +8,14 @@ use syn::ItemFn;
 #[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"),