From 572f595621cc535a4ace4fdc94669a9f80a8a1c9 Mon Sep 17 00:00:00 2001
From: Nashwan Azhari <aznashwan@icloud.com>
Date: Tue, 25 Mar 2025 06:25:23 +0200
Subject: [PATCH] docs: update tutorial placeholder image generator. (#3830)

Signed-off-by: Nashwan Azhari <aznashwan@icloud.com>
---
 website/docs/tutorial/index.mdx                           | 8 ++++----
 .../current/tutorial/index.mdx                            | 8 ++++----
 .../version-0.22/tutorial/index.mdx                       | 8 ++++----
 .../current/tutorial/index.mdx                            | 8 ++++----
 .../version-0.22/tutorial/index.mdx                       | 8 ++++----
 .../current/tutorial/index.mdx                            | 8 ++++----
 .../version-0.22/tutorial/index.mdx                       | 8 ++++----
 website/versioned_docs/version-0.19.0/tutorial/index.mdx  | 8 ++++----
 website/versioned_docs/version-0.20/tutorial/index.mdx    | 8 ++++----
 website/versioned_docs/version-0.21/tutorial/index.mdx    | 8 ++++----
 website/versioned_docs/version-0.22/tutorial/index.mdx    | 8 ++++----
 11 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/website/docs/tutorial/index.mdx b/website/docs/tutorial/index.mdx
index 364897862..5002c48e4 100644
--- a/website/docs/tutorial/index.mdx
+++ b/website/docs/tutorial/index.mdx
@@ -176,7 +176,7 @@ We want to build a layout that looks something like this in raw HTML:
 <div>
     <h3>John Doe: Building and breaking things</h3>
     <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"
     />
 </div>
@@ -198,7 +198,7 @@ html! {
         </div>
         <div>
             <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>
     </>
 }
@@ -431,7 +431,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
     html! {
         <div>
             <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>
     }
 }
@@ -467,7 +467,7 @@ fn app() -> Html {
 +            { for details }
 -            <div>
 -                <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>
         </>
     }
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/current/tutorial/index.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/current/tutorial/index.mdx
index 5a81e344b..3b4242a07 100644
--- a/website/i18n/ja/docusaurus-plugin-content-docs/current/tutorial/index.mdx
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/current/tutorial/index.mdx
@@ -160,7 +160,7 @@ Yew は Rust のプロシージャルマクロを利用しており、JSX（Java
 <div>
     <h3>John Doe: Building and breaking things</h3>
     <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"
     />
 </div>
@@ -181,7 +181,7 @@ html! {
         </div>
         <div>
             <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>
     </>
 }
@@ -402,7 +402,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
     html! {
         <div>
             <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>
     }
 }
@@ -438,7 +438,7 @@ fn app() -> Html {
 +            { for details }
 -            <div>
 -                <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>
         </>
     }
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.22/tutorial/index.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.22/tutorial/index.mdx
index 5a81e344b..3b4242a07 100644
--- a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.22/tutorial/index.mdx
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.22/tutorial/index.mdx
@@ -160,7 +160,7 @@ Yew は Rust のプロシージャルマクロを利用しており、JSX（Java
 <div>
     <h3>John Doe: Building and breaking things</h3>
     <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"
     />
 </div>
@@ -181,7 +181,7 @@ html! {
         </div>
         <div>
             <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>
     </>
 }
@@ -402,7 +402,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
     html! {
         <div>
             <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>
     }
 }
@@ -438,7 +438,7 @@ fn app() -> Html {
 +            { for details }
 -            <div>
 -                <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>
         </>
     }
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorial/index.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorial/index.mdx
index b914d5427..2a841f028 100644
--- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorial/index.mdx
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorial/index.mdx
@@ -160,7 +160,7 @@ Yew 利用了 Rust 的过程宏，并为我们提供了一种类似于 JSX（Jav
 <div>
     <h3>John Doe: Building and breaking things</h3>
     <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"
     />
 </div>
@@ -181,7 +181,7 @@ html! {
         </div>
         <div>
             <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>
     </>
 }
@@ -402,7 +402,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
     html! {
         <div>
             <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>
     }
 }
@@ -438,7 +438,7 @@ fn app() -> Html {
 +            { for details }
 -            <div>
 -                <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>
         </>
     }
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.22/tutorial/index.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.22/tutorial/index.mdx
index b914d5427..2a841f028 100644
--- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.22/tutorial/index.mdx
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.22/tutorial/index.mdx
@@ -160,7 +160,7 @@ Yew 利用了 Rust 的过程宏，并为我们提供了一种类似于 JSX（Jav
 <div>
     <h3>John Doe: Building and breaking things</h3>
     <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"
     />
 </div>
@@ -181,7 +181,7 @@ html! {
         </div>
         <div>
             <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>
     </>
 }
@@ -402,7 +402,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
     html! {
         <div>
             <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>
     }
 }
@@ -438,7 +438,7 @@ fn app() -> Html {
 +            { for details }
 -            <div>
 -                <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>
         </>
     }
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/tutorial/index.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/tutorial/index.mdx
index f58775c19..07833aa89 100644
--- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/tutorial/index.mdx
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/tutorial/index.mdx
@@ -160,7 +160,7 @@ Yew 利用了 Rust 的過程宏，並為我們提供了一種類似於 JSX（Jav
 <div>
     <h3>John Doe: Building and breaking things</h3>
     <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"
     />
 </div>
@@ -181,7 +181,7 @@ html! {
         </div>
         <div>
             <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>
     </>
 }
@@ -402,7 +402,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
     html! {
         <div>
             <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>
     }
 }
@@ -438,7 +438,7 @@ fn app() -> Html {
 +            { for details }
 -            <div>
 -                <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>
         </>
     }
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.22/tutorial/index.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.22/tutorial/index.mdx
index f58775c19..07833aa89 100644
--- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.22/tutorial/index.mdx
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.22/tutorial/index.mdx
@@ -160,7 +160,7 @@ Yew 利用了 Rust 的過程宏，並為我們提供了一種類似於 JSX（Jav
 <div>
     <h3>John Doe: Building and breaking things</h3>
     <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"
     />
 </div>
@@ -181,7 +181,7 @@ html! {
         </div>
         <div>
             <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>
     </>
 }
@@ -402,7 +402,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
     html! {
         <div>
             <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>
     }
 }
@@ -438,7 +438,7 @@ fn app() -> Html {
 +            { for details }
 -            <div>
 -                <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>
         </>
     }
diff --git a/website/versioned_docs/version-0.19.0/tutorial/index.mdx b/website/versioned_docs/version-0.19.0/tutorial/index.mdx
index 2df732837..232d648ff 100644
--- a/website/versioned_docs/version-0.19.0/tutorial/index.mdx
+++ b/website/versioned_docs/version-0.19.0/tutorial/index.mdx
@@ -152,7 +152,7 @@ We want to build a layout that looks something like this in raw HTML:
 <div>
     <h3>John Doe: Building and breaking things</h3>
     <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"
     />
 </div>
@@ -174,7 +174,7 @@ html! {
         </div>
         <div>
             <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>
     </>
 }
@@ -403,7 +403,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
     html! {
         <div>
             <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>
     }
 }
@@ -439,7 +439,7 @@ fn app() -> Html {
 +            { for details }
 -            <div>
 -                <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>
 -        </>
     }
diff --git a/website/versioned_docs/version-0.20/tutorial/index.mdx b/website/versioned_docs/version-0.20/tutorial/index.mdx
index c566d49f1..b6a4a38ca 100644
--- a/website/versioned_docs/version-0.20/tutorial/index.mdx
+++ b/website/versioned_docs/version-0.20/tutorial/index.mdx
@@ -172,7 +172,7 @@ We want to build a layout that looks something like this in raw HTML:
 <div>
     <h3>John Doe: Building and breaking things</h3>
     <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"
     />
 </div>
@@ -194,7 +194,7 @@ html! {
         </div>
         <div>
             <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>
     </>
 }
@@ -427,7 +427,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
     html! {
         <div>
             <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>
     }
 }
@@ -463,7 +463,7 @@ fn app() -> Html {
 +            { for details }
 -            <div>
 -                <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>
         </>
     }
diff --git a/website/versioned_docs/version-0.21/tutorial/index.mdx b/website/versioned_docs/version-0.21/tutorial/index.mdx
index b069230e6..570e5a935 100644
--- a/website/versioned_docs/version-0.21/tutorial/index.mdx
+++ b/website/versioned_docs/version-0.21/tutorial/index.mdx
@@ -176,7 +176,7 @@ We want to build a layout that looks something like this in raw HTML:
 <div>
     <h3>John Doe: Building and breaking things</h3>
     <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"
     />
 </div>
@@ -198,7 +198,7 @@ html! {
         </div>
         <div>
             <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>
     </>
 }
@@ -431,7 +431,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
     html! {
         <div>
             <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>
     }
 }
@@ -467,7 +467,7 @@ fn app() -> Html {
 +            { for details }
 -            <div>
 -                <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>
         </>
     }
diff --git a/website/versioned_docs/version-0.22/tutorial/index.mdx b/website/versioned_docs/version-0.22/tutorial/index.mdx
index 364897862..5002c48e4 100644
--- a/website/versioned_docs/version-0.22/tutorial/index.mdx
+++ b/website/versioned_docs/version-0.22/tutorial/index.mdx
@@ -176,7 +176,7 @@ We want to build a layout that looks something like this in raw HTML:
 <div>
     <h3>John Doe: Building and breaking things</h3>
     <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"
     />
 </div>
@@ -198,7 +198,7 @@ html! {
         </div>
         <div>
             <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>
     </>
 }
@@ -431,7 +431,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
     html! {
         <div>
             <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>
     }
 }
@@ -467,7 +467,7 @@ fn app() -> Html {
 +            { for details }
 -            <div>
 -                <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>
         </>
     }