From 04ed93af2f76c281dec5d902d161cef61f831683 Mon Sep 17 00:00:00 2001
From: Michael Rienstra <mrienstra@gmail.com>
Date: Tue, 30 Mar 2021 14:01:55 -0700
Subject: [PATCH] fix (tutorial): use different random image service

---
 site/content/examples/06-lifecycle/00-onmount/App.svelte    | 6 +++---
 .../tutorial/07-lifecycle/01-onmount/app-a/App.svelte       | 4 ++--
 .../tutorial/07-lifecycle/01-onmount/app-b/App.svelte       | 6 +++---
 site/content/tutorial/07-lifecycle/01-onmount/text.md       | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/site/content/examples/06-lifecycle/00-onmount/App.svelte b/site/content/examples/06-lifecycle/00-onmount/App.svelte
index 1b83727627..1bbfdf20ac 100644
--- a/site/content/examples/06-lifecycle/00-onmount/App.svelte
+++ b/site/content/examples/06-lifecycle/00-onmount/App.svelte
@@ -4,7 +4,7 @@
 	let photos = [];
 
 	onMount(async () => {
-		const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);
+		const res = await fetch(`https://picsum.photos/v2/list?limit=20`);
 		photos = await res.json();
 	});
 </script>
@@ -28,8 +28,8 @@
 <div class="photos">
 	{#each photos as photo}
 		<figure>
-			<img src={photo.thumbnailUrl} alt={photo.title}>
-			<figcaption>{photo.title}</figcaption>
+			<img src={photo.download_url.replace(/\/\d+\/\d+$/, '/128/128')} alt={photo.author}>
+			<figcaption>{photo.author}</figcaption>
 		</figure>
 	{:else}
 		<!-- this block renders when photos.length === 0 -->
diff --git a/site/content/tutorial/07-lifecycle/01-onmount/app-a/App.svelte b/site/content/tutorial/07-lifecycle/01-onmount/app-a/App.svelte
index e8306d1957..e82b6e194a 100644
--- a/site/content/tutorial/07-lifecycle/01-onmount/app-a/App.svelte
+++ b/site/content/tutorial/07-lifecycle/01-onmount/app-a/App.svelte
@@ -21,8 +21,8 @@
 <div class="photos">
 	{#each photos as photo}
 		<figure>
-			<img src={photo.thumbnailUrl} alt={photo.title}>
-			<figcaption>{photo.title}</figcaption>
+			<img src={photo.download_url.replace(/\/\d+\/\d+$/, '/128/128')} alt={photo.author}>
+			<figcaption>{photo.author}</figcaption>
 		</figure>
 	{:else}
 		<!-- this block renders when photos.length === 0 -->
diff --git a/site/content/tutorial/07-lifecycle/01-onmount/app-b/App.svelte b/site/content/tutorial/07-lifecycle/01-onmount/app-b/App.svelte
index 1b83727627..1bbfdf20ac 100644
--- a/site/content/tutorial/07-lifecycle/01-onmount/app-b/App.svelte
+++ b/site/content/tutorial/07-lifecycle/01-onmount/app-b/App.svelte
@@ -4,7 +4,7 @@
 	let photos = [];
 
 	onMount(async () => {
-		const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);
+		const res = await fetch(`https://picsum.photos/v2/list?limit=20`);
 		photos = await res.json();
 	});
 </script>
@@ -28,8 +28,8 @@
 <div class="photos">
 	{#each photos as photo}
 		<figure>
-			<img src={photo.thumbnailUrl} alt={photo.title}>
-			<figcaption>{photo.title}</figcaption>
+			<img src={photo.download_url.replace(/\/\d+\/\d+$/, '/128/128')} alt={photo.author}>
+			<figcaption>{photo.author}</figcaption>
 		</figure>
 	{:else}
 		<!-- this block renders when photos.length === 0 -->
diff --git a/site/content/tutorial/07-lifecycle/01-onmount/text.md b/site/content/tutorial/07-lifecycle/01-onmount/text.md
index 54b385e889..25e99983a0 100644
--- a/site/content/tutorial/07-lifecycle/01-onmount/text.md
+++ b/site/content/tutorial/07-lifecycle/01-onmount/text.md
@@ -15,7 +15,7 @@ We'll add an `onMount` handler that loads some data over the network:
 	let photos = [];
 
 	onMount(async () => {
-		const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);
+		const res = await fetch(`https://picsum.photos/v2/list?limit=20`);
 		photos = await res.json();
 	});
 </script>