Dynamic page title

Author: breadthe

src/routes/+layout.svelte

@@ -6,15 +6,22 @@
 	import { page } from "$app/stores"
 	import { AppShell, AppBar, AppRail, AppRailTile, LightSwitch } from "@skeletonlabs/skeleton"
 	import Icon from "../lib/Icon.svelte"
+
+    const siteName = "React Hooks in Svelte"
+    $: title = $page.url.pathname === "/" ? siteName : `${$page.data.title} | ${siteName}`
 </script>
 
+<svelte:head>
+    <title>{title}</title>
+</svelte:head>
+
 <!-- App Shell -->
 <AppShell>
 	<svelte:fragment slot="header">
 		<!-- App Bar -->
 		<AppBar class="bg-primary-500">
 			<svelte:fragment slot="lead">
-				<a href="/" title="Home page"><strong class="text-xl uppercase">React vs Svelte</strong></a>
+				<a href="/" title="Home page"><strong class="text-xl uppercase">{siteName}</strong></a>
 			</svelte:fragment>
 			<svelte:fragment slot="trail">
                 <!-- <LightSwitch /> -->

src/routes/+page.svelte

@@ -5,21 +5,13 @@
 <div class="container h-full mx-auto p-4 sm:p-8 flex flex-col gap-8 sm:gap-16 sm:justify-center items-center">
 	<div class="space-y-4 text-center">
 		<h1>
-			<span
-				class="text-react"
-			>
-				React
-			</span>
+			<span class="text-react">React</span>
 			<span
 				class="bg-gradient-to-r from-react via-primary-100 to-svelte bg-clip-text text-transparent box-decoration-clone"
 			>
 				hooks in
 			</span>
-			<span
-				class="text-svelte"
-			>
-				Svelte
-			</span>
+			<span class="text-svelte">Svelte</span>
 		</h1>
 		<h3>
 			based on <a href="https://github.com/joshnuss/react-hooks-in-svelte" target="_blank" rel="noreferrer"