add something to do on updated-store tutorial (sveltejs#544)

Co-authored-by: Rich Harris <[email protected]>

Author: Rich-Harris

content/tutorial/03-sveltekit/08-stores/03-updated-store/README.md

@@ -4,38 +4,29 @@ title: updated
 
 The `updated` store contains `true` or `false` depending on whether a new version of the app has been deployed since the page was first opened. For this to work, your `svelte.config.js` must specify `kit.version.pollInterval`.
 
-Version changes only happen in production, not during development. For that reason, `$updated` will always be `false` in this tutorial.
-
-You can manually check for new versions, regardless of `pollInterval`, by calling `updated.check()`.
-
 ```svelte
 /// file: src/routes/+layout.svelte
 <script>
 	import { page, navigating, +++updated+++ } from '$app/stores';
 </script>
+```
 
-<nav>
-	<a href="/" aria-current={$page.url.pathname === '/'}>
-		home
-	</a>
-
-	<a href="/about" aria-current={$page.url.pathname === '/about'}>
-		about
-	</a>
-
-	{#if $navigating}
-		navigating to {$navigating.to.url.pathname}
-	{/if}
-</nav>
+Version changes only happen in production, not during development. For that reason, `$updated` will always be `false` in this tutorial.
 
-<slot />
+You can manually check for new versions, regardless of `pollInterval`, by calling `updated.check()`.
 
-+++{#if $updated}
-	<p class="toast">
-		A new version of the app is available
+```svelte
+/// file: src/routes/+layout.svelte
 
-		<button on:click={() => location.reload()}>
-			reload the page
-		</button>
-	</p>
-{/if}+++
++++{#if $updated}+++
+	<div class="toast">
+		<p>
+			A new version of the app is available
+
+			<button on:click={() => location.reload()}>
+				reload the page
+			</button>
+		</p>
+	</div>
++++{/if}+++
+```

content/tutorial/03-sveltekit/08-stores/03-updated-store/app-a/src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { page, navigating, updated } from '$app/stores';
+	import { page, navigating } from '$app/stores';
 </script>
 
 <nav>
@@ -18,12 +18,35 @@
 
 <slot />
 
-{#if $updated}
-	<p class="toast">
+<div class="toast">
+	<p>
 		A new version of the app is available
 
 		<button on:click={() => location.reload()}>
 			reload the page
 		</button>
 	</p>
-{/if}
+</div>
+
+<style>
+	.toast {
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		width: 100%;
+		padding: 1rem;
+		display: flex;
+		justify-content: center;
+		gap: 1rem;
+	}
+
+	.toast p {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		background: var(--bg-2);
+		padding: 0.5rem 0.5rem 0.5rem 1rem;
+		border-radius: 4px;
+	}
+</style>
+

content/tutorial/03-sveltekit/08-stores/03-updated-store/app-b/src/routes/+layout.svelte

@@ -0,0 +1,54 @@
+<script>
+	import { page, navigating, updated } from '$app/stores';
+</script>
+
+<nav>
+	<a href="/" aria-current={$page.url.pathname === '/'}>
+		home
+	</a>
+
+	<a href="/about" aria-current={$page.url.pathname === '/about'}>
+		about
+	</a>
+
+	{#if $navigating}
+		navigating to {$navigating.to.url.pathname}
+	{/if}
+</nav>
+
+<slot />
+
+{#if $updated}
+	<div class="toast">
+		<p>
+			A new version of the app is available
+
+			<button on:click={() => location.reload()}>
+				reload the page
+			</button>
+		</p>
+	</div>
+{/if}
+
+<style>
+	.toast {
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		width: 100%;
+		padding: 1rem;
+		display: flex;
+		justify-content: center;
+		gap: 1rem;
+	}
+
+	.toast p {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		background: var(--bg-2);
+		padding: 0.5rem 0.5rem 0.5rem 1rem;
+		border-radius: 4px;
+	}
+</style>
+