docs: update tutorial placeholder image generator. (#3830)

Signed-off-by: Nashwan Azhari <aznashwan@icloud.com>
This commit is contained in:
Nashwan Azhari 2025-03-25 06:25:23 +02:00 committed by GitHub
parent b6232af5b1
commit 572f595621
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 44 additions and 44 deletions

View File

@ -176,7 +176,7 @@ We want to build a layout that looks something like this in raw HTML:
<div> <div>
<h3>John Doe: Building and breaking things</h3> <h3>John Doe: Building and breaking things</h3>
<img <img
src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" src="https://placehold.co/640x360.png?text=Video+Player+Placeholder"
alt="video thumbnail" alt="video thumbnail"
/> />
</div> </div>
@ -198,7 +198,7 @@ html! {
</div> </div>
<div> <div>
<h3>{ "John Doe: Building and breaking things" }</h3> <h3>{ "John Doe: Building and breaking things" }</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
</div> </div>
</> </>
} }
@ -431,7 +431,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
html! { html! {
<div> <div>
<h3>{ video.title.clone() }</h3> <h3>{ video.title.clone() }</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
</div> </div>
} }
} }
@ -467,7 +467,7 @@ fn app() -> Html {
+ { for details } + { for details }
- <div> - <div>
- <h3>{ "John Doe: Building and breaking things" }</h3> - <h3>{ "John Doe: Building and breaking things" }</h3>
- <img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> - <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
- </div> - </div>
</> </>
} }

View File

@ -160,7 +160,7 @@ Yew は Rust のプロシージャルマクロを利用しており、JSXJava
<div> <div>
<h3>John Doe: Building and breaking things</h3> <h3>John Doe: Building and breaking things</h3>
<img <img
src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" src="https://placehold.co/640x360.png?text=Video+Player+Placeholder"
alt="video thumbnail" alt="video thumbnail"
/> />
</div> </div>
@ -181,7 +181,7 @@ html! {
</div> </div>
<div> <div>
<h3>{ "John Doe: Building and breaking things" }</h3> <h3>{ "John Doe: Building and breaking things" }</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
</div> </div>
</> </>
} }
@ -402,7 +402,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
html! { html! {
<div> <div>
<h3>{ video.title.clone() }</h3> <h3>{ video.title.clone() }</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
</div> </div>
} }
} }
@ -438,7 +438,7 @@ fn app() -> Html {
+ { for details } + { for details }
- <div> - <div>
- <h3>{ "John Doe: Building and breaking things" }</h3> - <h3>{ "John Doe: Building and breaking things" }</h3>
- <img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> - <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
- </div> - </div>
</> </>
} }

View File

@ -160,7 +160,7 @@ Yew は Rust のプロシージャルマクロを利用しており、JSXJava
<div> <div>
<h3>John Doe: Building and breaking things</h3> <h3>John Doe: Building and breaking things</h3>
<img <img
src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" src="https://placehold.co/640x360.png?text=Video+Player+Placeholder"
alt="video thumbnail" alt="video thumbnail"
/> />
</div> </div>
@ -181,7 +181,7 @@ html! {
</div> </div>
<div> <div>
<h3>{ "John Doe: Building and breaking things" }</h3> <h3>{ "John Doe: Building and breaking things" }</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
</div> </div>
</> </>
} }
@ -402,7 +402,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
html! { html! {
<div> <div>
<h3>{ video.title.clone() }</h3> <h3>{ video.title.clone() }</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
</div> </div>
} }
} }
@ -438,7 +438,7 @@ fn app() -> Html {
+ { for details } + { for details }
- <div> - <div>
- <h3>{ "John Doe: Building and breaking things" }</h3> - <h3>{ "John Doe: Building and breaking things" }</h3>
- <img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> - <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
- </div> - </div>
</> </>
} }

View File

@ -160,7 +160,7 @@ Yew 利用了 Rust 的过程宏,并为我们提供了一种类似于 JSXJav
<div> <div>
<h3>John Doe: Building and breaking things</h3> <h3>John Doe: Building and breaking things</h3>
<img <img
src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" src="https://placehold.co/640x360.png?text=Video+Player+Placeholder"
alt="video thumbnail" alt="video thumbnail"
/> />
</div> </div>
@ -181,7 +181,7 @@ html! {
</div> </div>
<div> <div>
<h3>{ "John Doe: Building and breaking things" }</h3> <h3>{ "John Doe: Building and breaking things" }</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
</div> </div>
</> </>
} }
@ -402,7 +402,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
html! { html! {
<div> <div>
<h3>{ video.title.clone() }</h3> <h3>{ video.title.clone() }</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
</div> </div>
} }
} }
@ -438,7 +438,7 @@ fn app() -> Html {
+ { for details } + { for details }
- <div> - <div>
- <h3>{ "John Doe: Building and breaking things" }</h3> - <h3>{ "John Doe: Building and breaking things" }</h3>
- <img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> - <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
- </div> - </div>
</> </>
} }

View File

@ -160,7 +160,7 @@ Yew 利用了 Rust 的过程宏,并为我们提供了一种类似于 JSXJav
<div> <div>
<h3>John Doe: Building and breaking things</h3> <h3>John Doe: Building and breaking things</h3>
<img <img
src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" src="https://placehold.co/640x360.png?text=Video+Player+Placeholder"
alt="video thumbnail" alt="video thumbnail"
/> />
</div> </div>
@ -181,7 +181,7 @@ html! {
</div> </div>
<div> <div>
<h3>{ "John Doe: Building and breaking things" }</h3> <h3>{ "John Doe: Building and breaking things" }</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
</div> </div>
</> </>
} }
@ -402,7 +402,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
html! { html! {
<div> <div>
<h3>{ video.title.clone() }</h3> <h3>{ video.title.clone() }</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
</div> </div>
} }
} }
@ -438,7 +438,7 @@ fn app() -> Html {
+ { for details } + { for details }
- <div> - <div>
- <h3>{ "John Doe: Building and breaking things" }</h3> - <h3>{ "John Doe: Building and breaking things" }</h3>
- <img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> - <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
- </div> - </div>
</> </>
} }

View File

@ -160,7 +160,7 @@ Yew 利用了 Rust 的過程宏,並為我們提供了一種類似於 JSXJav
<div> <div>
<h3>John Doe: Building and breaking things</h3> <h3>John Doe: Building and breaking things</h3>
<img <img
src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" src="https://placehold.co/640x360.png?text=Video+Player+Placeholder"
alt="video thumbnail" alt="video thumbnail"
/> />
</div> </div>
@ -181,7 +181,7 @@ html! {
</div> </div>
<div> <div>
<h3>{ "John Doe: Building and breaking things" }</h3> <h3>{ "John Doe: Building and breaking things" }</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
</div> </div>
</> </>
} }
@ -402,7 +402,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
html! { html! {
<div> <div>
<h3>{ video.title.clone() }</h3> <h3>{ video.title.clone() }</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
</div> </div>
} }
} }
@ -438,7 +438,7 @@ fn app() -> Html {
+ { for details } + { for details }
- <div> - <div>
- <h3>{ "John Doe: Building and breaking things" }</h3> - <h3>{ "John Doe: Building and breaking things" }</h3>
- <img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> - <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
- </div> - </div>
</> </>
} }

View File

@ -160,7 +160,7 @@ Yew 利用了 Rust 的過程宏,並為我們提供了一種類似於 JSXJav
<div> <div>
<h3>John Doe: Building and breaking things</h3> <h3>John Doe: Building and breaking things</h3>
<img <img
src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" src="https://placehold.co/640x360.png?text=Video+Player+Placeholder"
alt="video thumbnail" alt="video thumbnail"
/> />
</div> </div>
@ -181,7 +181,7 @@ html! {
</div> </div>
<div> <div>
<h3>{ "John Doe: Building and breaking things" }</h3> <h3>{ "John Doe: Building and breaking things" }</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
</div> </div>
</> </>
} }
@ -402,7 +402,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
html! { html! {
<div> <div>
<h3>{ video.title.clone() }</h3> <h3>{ video.title.clone() }</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
</div> </div>
} }
} }
@ -438,7 +438,7 @@ fn app() -> Html {
+ { for details } + { for details }
- <div> - <div>
- <h3>{ "John Doe: Building and breaking things" }</h3> - <h3>{ "John Doe: Building and breaking things" }</h3>
- <img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> - <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
- </div> - </div>
</> </>
} }

View File

@ -152,7 +152,7 @@ We want to build a layout that looks something like this in raw HTML:
<div> <div>
<h3>John Doe: Building and breaking things</h3> <h3>John Doe: Building and breaking things</h3>
<img <img
src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" src="https://placehold.co/640x360.png?text=Video+Player+Placeholder"
alt="video thumbnail" alt="video thumbnail"
/> />
</div> </div>
@ -174,7 +174,7 @@ html! {
</div> </div>
<div> <div>
<h3>{ "John Doe: Building and breaking things" }</h3> <h3>{ "John Doe: Building and breaking things" }</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
</div> </div>
</> </>
} }
@ -403,7 +403,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
html! { html! {
<div> <div>
<h3>{ video.title.clone() }</h3> <h3>{ video.title.clone() }</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
</div> </div>
} }
} }
@ -439,7 +439,7 @@ fn app() -> Html {
+ { for details } + { for details }
- <div> - <div>
- <h3>{ "John Doe: Building and breaking things" }</h3> - <h3>{ "John Doe: Building and breaking things" }</h3>
- <img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> - <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
- </div> - </div>
- </> - </>
} }

View File

@ -172,7 +172,7 @@ We want to build a layout that looks something like this in raw HTML:
<div> <div>
<h3>John Doe: Building and breaking things</h3> <h3>John Doe: Building and breaking things</h3>
<img <img
src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" src="https://placehold.co/640x360.png?text=Video+Player+Placeholder"
alt="video thumbnail" alt="video thumbnail"
/> />
</div> </div>
@ -194,7 +194,7 @@ html! {
</div> </div>
<div> <div>
<h3>{ "John Doe: Building and breaking things" }</h3> <h3>{ "John Doe: Building and breaking things" }</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
</div> </div>
</> </>
} }
@ -427,7 +427,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
html! { html! {
<div> <div>
<h3>{ video.title.clone() }</h3> <h3>{ video.title.clone() }</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
</div> </div>
} }
} }
@ -463,7 +463,7 @@ fn app() -> Html {
+ { for details } + { for details }
- <div> - <div>
- <h3>{ "John Doe: Building and breaking things" }</h3> - <h3>{ "John Doe: Building and breaking things" }</h3>
- <img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> - <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
- </div> - </div>
</> </>
} }

View File

@ -176,7 +176,7 @@ We want to build a layout that looks something like this in raw HTML:
<div> <div>
<h3>John Doe: Building and breaking things</h3> <h3>John Doe: Building and breaking things</h3>
<img <img
src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" src="https://placehold.co/640x360.png?text=Video+Player+Placeholder"
alt="video thumbnail" alt="video thumbnail"
/> />
</div> </div>
@ -198,7 +198,7 @@ html! {
</div> </div>
<div> <div>
<h3>{ "John Doe: Building and breaking things" }</h3> <h3>{ "John Doe: Building and breaking things" }</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
</div> </div>
</> </>
} }
@ -431,7 +431,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
html! { html! {
<div> <div>
<h3>{ video.title.clone() }</h3> <h3>{ video.title.clone() }</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
</div> </div>
} }
} }
@ -467,7 +467,7 @@ fn app() -> Html {
+ { for details } + { for details }
- <div> - <div>
- <h3>{ "John Doe: Building and breaking things" }</h3> - <h3>{ "John Doe: Building and breaking things" }</h3>
- <img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> - <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
- </div> - </div>
</> </>
} }

View File

@ -176,7 +176,7 @@ We want to build a layout that looks something like this in raw HTML:
<div> <div>
<h3>John Doe: Building and breaking things</h3> <h3>John Doe: Building and breaking things</h3>
<img <img
src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" src="https://placehold.co/640x360.png?text=Video+Player+Placeholder"
alt="video thumbnail" alt="video thumbnail"
/> />
</div> </div>
@ -198,7 +198,7 @@ html! {
</div> </div>
<div> <div>
<h3>{ "John Doe: Building and breaking things" }</h3> <h3>{ "John Doe: Building and breaking things" }</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
</div> </div>
</> </>
} }
@ -431,7 +431,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
html! { html! {
<div> <div>
<h3>{ video.title.clone() }</h3> <h3>{ video.title.clone() }</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
</div> </div>
} }
} }
@ -467,7 +467,7 @@ fn app() -> Html {
+ { for details } + { for details }
- <div> - <div>
- <h3>{ "John Doe: Building and breaking things" }</h3> - <h3>{ "John Doe: Building and breaking things" }</h3>
- <img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" /> - <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
- </div> - </div>
</> </>
} }