docs(ribir): ✏️ fix broken links and format the example code

RibirX · Feb 6, 2024 · 5d91a8d · 5d91a8d
1 parent f8c71dd
commit 5d91a8d
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 46 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,7 +20,12 @@ Please only add new entries below the [Unreleased](#unreleased---releasedate) he
 
 <!-- next-header -->
 
-## [@Unreleased](https://github.com/RibirX/Ribir/compare/ribir-v0.1.0-beta.7...HEAD) - @ReleaseDate
+## [@Unreleased](https://github.com/RibirX/Ribir/compare/ribir-v0.2.0-alpha0...HEAD) - @ReleaseDate
+
+### Documented
+
+- fix broken links and format the example code (#526 @M-Adoo)
+
 
 ## [0.1.0-beta.7](https://github.com/RibirX/Ribir/compare/ribir-v0.1.0-alpha.0...ribir-v0.1.0-beta.7) - 2024-02-02
 

diff --git a/README.md b/README.md
@@ -83,7 +83,7 @@ More [Examples]
 
 ## Architecture overview
 
-![](/static/img/architecture.svg)
+![](./docs/en/assets/architecture.svg)
 
 ## Support Platform 
 

diff --git a/docs/en/get_started/quick_start.md b/docs/en/get_started/quick_start.md
@@ -33,7 +33,7 @@ This chapter will only introduce function widget and `Compose` widget. Because i
 
 The function or closure that accepts `&BuildCtx` as the input parameter and returns the `Widget` is called a function widget.
 
-A function widget is the simplest way to define a widget without external state dependencies. In [Creating an application](./creating_an_application.md), you have seen a function widget of `Hello world!`. In this section, we will continue to introduce it through the example of `Hello world!`.
+A function widget is the simplest way to define a widget without external state dependencies. In [Try Ribir](./try_it.md), you have seen a function widget of `Hello world!`. In this section, we will continue to introduce it through the example of `Hello world!`.
 
 
 ### Define widget through function
@@ -152,7 +152,7 @@ fn main() {
     rdl!{ 
       Row {
         rdl!{ FilledButton {
-          rdl! { Label::new("Increment") }
+          rdl!{ Label::new("Increment") }
         }}
         rdl!{ H1 { text: "0" } }
       }
@@ -177,7 +177,7 @@ fn main() {
     rdl!{ 
       $row {
         rdl!{ FilledButton {
-          rdl! { Label::new("Increment") }
+          rdl!{ Label::new("Increment") }
         }}
         rdl!{ Text { text: "0" } }
       }
@@ -188,7 +188,7 @@ fn main() {
 }
 ```
 
-Do you notice the `rdl! { $row { ... } }`? It is the same as the structure literal syntax, but with `$` in front of it, it means that it is a variable rather than a type, so it will not create a new widget, but directly use this variable to compose with the child.
+Do you notice the `rdl!{ $row { ... } }`? It is the same as the structure literal syntax, but with `$` in front of it, it means that it is a variable rather than a type, so it will not create a new widget, but directly use this variable to compose with the child.
 
 > Tip
 >
@@ -200,7 +200,7 @@ Do you notice the `rdl! { $row { ... } }`? It is the same as the structure liter
 
 ### Creating objects through expressions
 
-Except for creating objects through structure literals, you can also create objects by wrapping any expression with `rdl! {...}`. The advantage of this approach is that you can write any code in `{...}` to create objects. This is very useful in nested composition, and it is only necessary when nesting as a child. The following example shows how to use expressions to create objects in `rdl`:
+Except for creating objects through structure literals, you can also create objects by wrapping any expression with `rdl!{...}`. The advantage of this approach is that you can write any code in `{...}` to create objects. This is very useful in nested composition, and it is only necessary when nesting as a child. The following example shows how to use expressions to create objects in `rdl`:
 
 ```rust ignore
 use ribir::prelude::*;

diff --git a/docs/zh/get_started/quick_start.md b/docs/zh/get_started/quick_start.md
@@ -34,7 +34,7 @@ sidebar_position: 2
 
 接收 `&BuildCtx` 作为入参并返回 `Widget` 的函数或闭包被称为函数 widget。
 
-在没有外部状态依赖的情况下，通过函数来定义 widget 是最简单的一种方式。在[创建一个应用](./creating_an_application.md)中，你已经见过一个 `Hello world!` 的函数 widget 了。本节中，我们仍通过 `Hello world!` 的例子来展开介绍。
+在没有外部状态依赖的情况下，通过函数来定义 widget 是最简单的一种方式。在[体验 Ribir](./try_it.md)中，你已经见过一个 `Hello world!` 的函数 widget 了。本节中，我们仍通过 `Hello world!` 的例子来展开介绍。
 
 ### 通过函数来定义 widget
 
@@ -151,7 +151,7 @@ fn main() {
     rdl!{ 
       Row {
         rdl!{ FilledButton {
-          rdl! { Label::new("Increment") }
+          rdl!{ Label::new("Increment") }
         }}
         rdl!{ H1 { text: "0" } }
       }
@@ -176,7 +176,7 @@ fn main() {
     rdl!{ 
       $row {
         rdl!{ FilledButton {
-          rdl! { Label::new("Increment") }
+          rdl!{ Label::new("Increment") }
         }}
         rdl!{ Text { text: "0" } }
       }
@@ -199,7 +199,7 @@ fn main() {
 
 ### 表达式创建对象
 
-除了通过结构体字面量创建对象以外，你还可以通过 `rdl! {...}` 包裹任意表达式来创建对象。这种方式的好处是，你可以在 `{...}` 中写任意代码在创建对象。这在嵌套组合中非常有用，也只在嵌套作为孩子时有必要。下面的例子展示如何在 `rdl` 中使用表达式创建对象：
+除了通过结构体字面量创建对象以外，你还可以通过 `rdl!{...}` 包裹任意表达式来创建对象。这种方式的好处是，你可以在 `{...}` 中写任意代码在创建对象。这在嵌套组合中非常有用，也只在嵌套作为孩子时有必要。下面的例子展示如何在 `rdl` 中使用表达式创建对象：
 
 ```rust ignore
 use ribir::prelude::*;

diff --git a/macros/src/rdl_macro.rs b/macros/src/rdl_macro.rs
@@ -20,26 +20,26 @@ use syn::{
 
 pub enum RdlMacro {
   Literal(StructLiteral),
-  /// Declare an expression as a object, like `rdl! { Widget::new(...) }`
+  /// Declare an expression as a object, like `rdl!{ Widget::new(...) }`
   ExprObj {
     span: Span,
     stmts: Vec<Stmt>,
   },
 }
 
-/// Declare a object use struct literal, like `rdl! { Row { ... } }` or
+/// Declare a object use struct literal, like `rdl!{ Row { ... } }` or
 /// `@parent { ... }`
 pub struct StructLiteral {
   pub span: Span,
   pub parent: RdlParent,
   pub fields: Punctuated<DeclareField, Comma>,
   /// Declare a child in `rdl!` can use `rdl!` macro or `@` symbol.
-  /// `rdl! { Row { rdl! { SizedBox {...} } } }`
+  /// `rdl!{ Row { rdl!{ SizedBox {...} } } }`
   /// or
-  /// `rdl! { Row { @ SizedBox{ ... } } }`
+  /// `rdl!{ Row { @ SizedBox{ ... } } }`
   /// and the second case will be instead by
   /// ```ignore
-  /// rdl! { Row { rdl! { SizedBox {...} } } }
+  /// rdl!{ Row { rdl!{ SizedBox {...} } } }
   /// ```
   ///  in preprocessor.
   pub children: Vec<Macro>,

diff --git a/tests/rdl_macro_test.rs b/tests/rdl_macro_test.rs
@@ -8,7 +8,7 @@ use winit::event::{DeviceId, ElementState, MouseButton, WindowEvent};
 
 fn simplest_leaf_rdl() -> impl WidgetBuilder {
   fn_widget! {
-    rdl! { SizedBox { size: Size::new(500.,500.) } }
+    rdl!{ SizedBox { size: Size::new(500.,500.) } }
   }
 }
 widget_layout_test!(simplest_leaf_rdl, width == 500., height == 500.,);
@@ -26,7 +26,7 @@ widget_layout_test!(with_child_rdl, width == 500., height == 500.,);
 
 fn with_builtin_child_rdl() -> impl WidgetBuilder {
   fn_widget! {
-    rdl! { SizedBox {
+    rdl!{ SizedBox {
       size: Size::new(500.,500.),
       margin: EdgeInsets::all(10.)
     }}
@@ -37,7 +37,7 @@ widget_layout_test!(with_builtin_child_rdl, width == 520., height == 520.,);
 fn rdl_with_child() -> impl WidgetBuilder {
   fn_widget! {
     let single_p = rdl!{ SizedBox { size: Size::new(500.,500.)  }};
-    rdl! { $single_p { rdl! { Void } } }
+    rdl!{ $single_p { rdl!{ Void } } }
   }
 }
 widget_layout_test!(rdl_with_child, width == 500., height == 500.,);
@@ -48,7 +48,7 @@ fn single_rdl_has_builtin_with_child() -> impl WidgetBuilder {
       size: Size::new(500.,500.),
       margin: EdgeInsets::all(10.)
     }};
-    rdl! { $single_p { rdl! { Void } } }
+    rdl!{ $single_p { rdl!{ Void } } }
   }
 }
 widget_layout_test!(
@@ -59,10 +59,10 @@ widget_layout_test!(
 
 fn multi_child_rdl_has_builtin_with_child() -> impl WidgetBuilder {
   fn_widget! {
-    let multi_p = rdl! { Flex {
+    let multi_p = rdl!{ Flex {
       margin: EdgeInsets::all(10.)
     } };
-    rdl! { $multi_p { rdl!{ Void } } }
+    rdl!{ $multi_p { rdl!{ Void } } }
   }
 }
 widget_layout_test!(
@@ -74,7 +74,7 @@ widget_layout_test!(
 fn compose_child_rdl_has_builtin_with_child() -> impl WidgetBuilder {
   fn_widget! {
     let multi_p = rdl!{ Row { margin: EdgeInsets::all(10.) }};
-    rdl! { $multi_p { rdl!{ Void {} }} }
+    rdl!{ $multi_p { rdl!{ Void {} }} }
   }
 }
 widget_layout_test!(
@@ -85,31 +85,31 @@ widget_layout_test!(
 
 fn access_rdl_widget() -> impl WidgetBuilder {
   fn_widget! {
-    let b = rdl! { SizedBox {size: Size::new(500.,500.)}};
-    rdl! { Row {
-      rdl! { SizedBox { size: $b.size } }
-      rdl! { b }
+    let b = rdl!{ SizedBox {size: Size::new(500.,500.)}};
+    rdl!{ Row {
+      rdl!{ SizedBox { size: $b.size } }
+      rdl!{ b }
     }}
   }
 }
 widget_layout_test!(access_rdl_widget, width == 1000., height == 500.,);
 
 fn access_builtin_rdl_widget() -> impl WidgetBuilder {
   fn_widget! {
-    let mut b = rdl! { SizedBox {
+    let mut b = rdl!{ SizedBox {
       size: Size::new(100.,100.),
       margin: EdgeInsets::all(10.)
     }};
 
     rdl!{
       Row {
-        rdl! {
+        rdl!{
           SizedBox {
             size: $b.size,
             margin: $b.margin,
           }
         }
-        rdl! { b }
+        rdl!{ b }
       }
     }
   }
@@ -118,16 +118,16 @@ widget_layout_test!(access_builtin_rdl_widget, width == 240., height == 120.,);
 
 fn dollar_as_rdl_parent() -> impl WidgetBuilder {
   fn_widget! {
-    let b = rdl! {SizedBox { size: Size::new(500.,500.) }};
-    rdl! { $b { rdl! { Void {}} } }
+    let b = rdl!{SizedBox { size: Size::new(500.,500.) }};
+    rdl!{ $b { rdl!{ Void {}} } }
   }
 }
 widget_layout_test!(dollar_as_rdl_parent, width == 500., height == 500.,);
 
 fn dollar_as_middle_parent() -> impl WidgetBuilder {
   fn_widget! {
-    let b = rdl! { SizedBox { size: Size::new(500.,500.) }};
-    rdl! { Row { rdl! { $b { rdl! { Void {} } } } } }
+    let b = rdl!{ SizedBox { size: Size::new(500.,500.) }};
+    rdl!{ Row { rdl!{ $b { rdl!{ Void {} } } } } }
   }
 }
 widget_layout_test!(dollar_as_middle_parent, width == 500., height == 500.,);
@@ -136,7 +136,7 @@ fn pipe_as_field_value() -> impl WidgetBuilder {
   let size = Stateful::new(Size::zero());
   let size2 = size.clone_reader();
   let w = fn_widget! {
-    rdl! { SizedBox { size: pipe!(*$size2) }}
+    rdl!{ SizedBox { size: pipe!(*$size2) }}
   };
   *size.write() = Size::new(100., 100.);
   w
@@ -148,7 +148,7 @@ fn pipe_as_builtin_field_value() -> impl WidgetBuilder {
   let margin2 = margin.clone_reader();
 
   let w = fn_widget! {
-    rdl! { SizedBox {
+    rdl!{ SizedBox {
       size: Size::zero(),
       margin: pipe!(*$margin2)
     }}
@@ -162,7 +162,7 @@ fn pipe_with_ctx() -> impl WidgetBuilder {
   let scale = Stateful::new(1.);
   let scale2 = scale.clone_writer();
   let w = fn_widget! {
-    rdl! { SizedBox {
+    rdl!{ SizedBox {
       size: pipe!(IconSize::of(ctx!()).tiny * *$scale)
     }}
   };
@@ -208,7 +208,7 @@ fn pipe_single_parent() {
         BoxedSingleChild::new(Padding { padding: edges }, ctx!())
       }
     };
-    rdl! {
+    rdl!{
       $blank {
         rdl!{ SizedBox { size: Size::new(100., 100.) } }
       }
@@ -233,13 +233,13 @@ fn pipe_multi_parent() {
   let w = fn_widget! {
     let container = pipe! {
       if *$stack_or_flex {
-        BoxedMultiChild::new(rdl! { Stack { } }, ctx!())
+        BoxedMultiChild::new(rdl!{ Stack { } }, ctx!())
       } else {
-        BoxedMultiChild::new(rdl! { Flex { } }, ctx!())
+        BoxedMultiChild::new(rdl!{ Flex { } }, ctx!())
       }
     };
 
-    rdl! {
+    rdl!{
       $container {
         rdl!{ SizedBox { size: Size::new(100., 100.) } }
         rdl!{ SizedBox { size: Size::new(100., 100.) } }
@@ -264,9 +264,9 @@ fn pipe_as_child() {
   let box_or_not2 = box_or_not.clone_reader();
   let w = fn_widget! {
     let blank = pipe!{
-      $box_or_not2.then(|| rdl! { SizedBox { size: Size::new(100., 100.) } })
+      $box_or_not2.then(|| rdl!{ SizedBox { size: Size::new(100., 100.) } })
     };
-    rdl! { Stack { rdl! { blank } } }
+    rdl!{ Stack { rdl!{ blank } } }
   };
 
   let mut wnd = TestWindow::new(w);
@@ -290,7 +290,7 @@ fn pipe_as_multi_child() {
     let boxes = pipe! {
       (0..*$cnt).map(|_| fix_box.clone()).collect::<Vec<_>>()
     };
-    rdl! { Flex { rdl!{ boxes } } }
+    rdl!{ Flex { rdl!{ boxes } } }
   };
 
   let mut wnd = TestWindow::new(w);
@@ -317,7 +317,7 @@ fn at_as_variable_in_widget() -> impl WidgetBuilder {
       // @ in @
       @SizedBox { size }
       // `rdl!` in @
-      rdl! { SizedBox { size } }
+      rdl!{ SizedBox { size } }
     }
   }
 }
@@ -327,7 +327,7 @@ fn at_as_variable_in_rdl() -> impl WidgetBuilder {
   fn_widget! {
     let size = Size::new(100., 100.);
     let row = @Row {};
-    rdl! {
+    rdl!{
       $row {
         @SizedBox { size }
         @SizedBox { size }