docs(ribir): ✏️ fix borken links and move the assets of docs into doc…

CHANGELOG.md

@@ -24,7 +24,7 @@ Please only add new entries below the [Unreleased](#unreleased---releasedate) he
 
 🎉🎉🎉 The first version of Ribir. 
 
-![background](/static/img/hero-banner.png)
+![background](./static/hero-banner.png)
 
 The goal of this version of Ribir is to finish the core framework and answer our questions about the feasibility of the design.
 

README.md

@@ -2,7 +2,7 @@
 Ribir - Non-intrusive Declarative GUI Framework
 </h1>
 <p align="center"><a href="https://ribir.org" target="_blank" rel="noopener noreferrer">
-<img src="static/img/logo.svg" alt="Ribir-logo"  width = "128px">
+<img src="static/logo.svg" alt="Ribir-logo"  width = "128px">
 </a></p>
 
 <p align="center">
@@ -19,7 +19,7 @@ Use Rust to build multi-platform applications from a single codebase.
 
 </div>
 
-![](/static/img/hero-banner.png)
+![](./static/hero-banner.png)
 
 ## What's Ribir?
 
@@ -56,7 +56,7 @@ fn main() {
 </div>
     </td>
       <td style="padding:10px">
-        <img src="website/static/img/counter_demo.gif" width="430"/>
+        <img src="./static/counter_demo.gif" width="430"/>
       </td>
     </tr>
 </table>

docs/en/get_started/quick_start.md

@@ -275,7 +275,7 @@ The complete life cycle of an interactive Ribir widget is as follows:
 4. Receive data changes through the state, and update the view point-to-point according to the mapping relationship.
 5. Repeat steps 3 and 4.
 
-![lifecycle](/static/img/data-flows.svg)
+![lifecycle](../assets/data-flows.svg)
 
 Now, let's improve our example by introducing the state.
 
@@ -383,7 +383,7 @@ At this point, all the structures of the views you create are static, and only t
 
 Suppose you have a counter that doesn't display the count with numbers, but instead uses red squares to represent the count:
 
-<img src="/static/img/box_counter.gif" width="519"/>
+![box counter](../assets/box_counter.gif)
 
 The code:
 

docs/en/practice_todos_app/develop_a_todos_app.md

@@ -17,11 +17,11 @@ This app will allow you to add, delete, edit and mark tasks finish, and support
 To complete this tutorial, we assume that you:
 
 - Mastered the basic concepts and syntax of [Rust](https://www.rust-lang.org/learn) language
-- Completed the prerequisite tutorial series [Quick Start](../en/QuickStart)
+- Completed the prerequisite tutorial series [Getting Started](../get_started/quick_start.md)
 
 ## Showcase
 
-<img src="/static/img/todos-demo.gif" width=640px/>
+![todos demo](../assets/todos-demo.gif)
 
 ## Code structure
 
@@ -133,7 +133,7 @@ Now your application has a complete logic, but no UI yet. Next, let's use Ribir
 
 Before we start developing the UI, let's divide the UI into several main parts according to the prototype diagram, so that we can communicate better in the following text:
 
-<img src="/static/img/todos-widgets.png" width=830px/>
+![todos-prototype](../assets/todos-widgets.png)
 
 1. Title area, showing the name of the application
 2. Input area, enter the task content, press Enter to add the task

docs/readme.md

@@ -0,0 +1,5 @@
+# Ribir Documentation
+
+Please place all asset files in the 'assets' subdirectory within the respective language directory. This helps us manage the versions of assets that correspond to the documentation when we build the website.
+
+Since all assets are linked to the same folder, if you need an image for a specific language, create a new image with the language code as a suffix. Please avoid overwriting the original image.

docs/zh/assets

@@ -0,0 +1 @@
+../en/assets

docs/zh/get_started/quick_start.md

@@ -271,7 +271,7 @@ fn main() {
 4. 通过状态接收到数据的变更，根据映射关系点对点更新视图
 5. 重复步骤 3 和 4 。
 
-![状态的生命周期](/static/img/data-flows.svg)
+![状态的生命周期](../assets/data-flows.svg)
 
 现在，让我们引入状态来改造我们的例子。
 
@@ -380,7 +380,7 @@ let sum = pipe!(*$a + *$b);
 假设你有一个计数器，这个计数器不是用文字来显示数目，而是通过红色小方块来计数：
 
 
-<img src="/static/img/box_counter.gif" width="519"/>
+![Box counter](../assets/box_counter.gif)
 
 代码：
 

docs/zh/practice_todos_app/develop_a_todos_app.md

@@ -13,12 +13,12 @@
 为了完成本教程，我们假设你：
 
 - 了解 [Rust](https://www.rust-lang.org/learn) 语言的基础知识和语法
-- 完成了前置教程 [快速上手](../zh/快速上手) 系列
+- 完成了前置教程 [快速上手](../get_started/quick_start.md) 系列
 
 
 ## 最终效果展示
 
-<img src="/static/img/todos-demo.gif" width=640px/>
+![todos demo](../assets/todos-demo.gif)
 
 ## 代码结构
 
@@ -131,7 +131,7 @@ impl TaskId {
 
 在正式进入 UI 开发之前，我们先对照原型图划分几个主要部分，以方便后文的交流：
 
-<img src="/static/img/todos-widgets.png" width=830px/>
+[todos-widgets](../assets/todos-widgets.png)
 
 1. Title 标题区，展示应用的名称
 2. Input 区，输入任务内容，按回车键添加任务
@@ -667,7 +667,6 @@ fn task_lists(this: &impl StateWriter<Value = Todos>, cond: fn(&Task) -> bool) -
 
 fn task_item<S>(task: S) -> impl WidgetBuilder
 where
-  S: StateWriter<Value = Task> + 'static,
   S::OriginWriter: StateWriter<Value = Todos>,
 {
   let todos = task.origin_writer().clone_writer();