mirror of https://github.com/yewstack/yew
Minor fixup of tutorial files (#2131)
* Make the talk titles consistent * Add replacing the hardcoded list of talks with the one generated from data * Update website/docs/tutorial.md Co-authored-by: Simon <simon@siku2.io> * Update website/docs/tutorial.md Co-authored-by: Simon <simon@siku2.io> Co-authored-by: Simon <simon@siku2.io>
This commit is contained in:
parent
8fd6100874
commit
3ebd866d13
|
@ -213,19 +213,19 @@ let videos = vec![
|
|||
},
|
||||
Video {
|
||||
id: 2,
|
||||
title: "Building and breaking things".to_string(),
|
||||
title: "The development process".to_string(),
|
||||
speaker: "Jane Smith".to_string(),
|
||||
url: "https://youtu.be/PsaFVLr8t4E".to_string(),
|
||||
},
|
||||
Video {
|
||||
id: 3,
|
||||
title: "The development process".to_string(),
|
||||
title: "The Web 7.0".to_string(),
|
||||
speaker: "Matt Miller".to_string(),
|
||||
url: "https://youtu.be/PsaFVLr8t4E".to_string(),
|
||||
},
|
||||
Video {
|
||||
id: 4,
|
||||
title: "The Web 7.0".to_string(),
|
||||
title: "Mouseless development".to_string(),
|
||||
speaker: "Tom Jerry".to_string(),
|
||||
url: "https://youtu.be/PsaFVLr8t4E".to_string(),
|
||||
},
|
||||
|
@ -241,6 +241,25 @@ let videos = videos.iter().map(|video| html! {
|
|||
}).collect::<Html>();
|
||||
```
|
||||
|
||||
And finally we need to replace the hardcoded list of videos with the `Html` we created from data:
|
||||
|
||||
```rust ,ignore {6-10}
|
||||
html! {
|
||||
<>
|
||||
<h1>{ "RustConf Explorer" }</h1>
|
||||
<div>
|
||||
<h3>{ "Videos to watch" }</h3>
|
||||
- <p>{ "John Doe: Building and breaking things" }</p>
|
||||
- <p>{ "Jane Smith: The development process" }</p>
|
||||
- <p>{ "Matt Miller: The Web 7.0" }</p>
|
||||
- <p>{ "Tom Jerry: Mouseless development" }</p>
|
||||
+ { videos }
|
||||
</div>
|
||||
// ...
|
||||
</>
|
||||
}
|
||||
```
|
||||
|
||||
## Components
|
||||
|
||||
Components are the building blocks of Yew applications. By combining components, which can be made of other components,
|
||||
|
@ -302,7 +321,7 @@ struct Video {
|
|||
|
||||
Now, we can update our `App` component to make use of `VideosList` component.
|
||||
|
||||
```rust ,ignore {4-10,16-17,19-20}
|
||||
```rust ,ignore {4-7,13-14}
|
||||
#[function_component(App)]
|
||||
fn app() -> Html {
|
||||
// ...
|
||||
|
|
|
@ -7,19 +7,19 @@
|
|||
},
|
||||
{
|
||||
"id": 2,
|
||||
"title": "Building and breaking things",
|
||||
"title": "The development process",
|
||||
"speaker": "Jane Smith",
|
||||
"url": "https://youtu.be/PsaFVLr8t4E"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"title": "The development process",
|
||||
"title": "The Web 7.0",
|
||||
"speaker": "Matt Miller",
|
||||
"url": "https://youtu.be/PsaFVLr8t4E"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"title": "The Web 7.0",
|
||||
"title": "Mouseless development",
|
||||
"speaker": "Tom Jerry",
|
||||
"url": "https://youtu.be/PsaFVLr8t4E"
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue