🥟 Add title for pages

This is the recommended approach.

Author: ruksi

gyoza/src/routes/(anonymous)/log-in/+page.svelte

@@ -22,8 +22,11 @@
     }
 </script>
 
-<!-- svelte-ignore a11y-autofocus -->
+<svelte:head>
+    <title>Log In</title>
+</svelte:head>
 
+<!-- svelte-ignore a11y-autofocus -->
 <main>
     {#if $logIn.error}
         <div class="pb-4" transition:slide>

gyoza/src/routes/(anonymous)/sign-up/+page.svelte

@@ -1 +1,5 @@
+<svelte:head>
+    <title>Sign Up</title>
+</svelte:head>
+
 <h1>Sign Up</h1>

gyoza/src/routes/(authenticated)/settings/+page.svelte

@@ -1 +1,5 @@
+<svelte:head>
+    <title>Settings</title>
+</svelte:head>
+
 <h1>Settings</h1>

gyoza/src/routes/+layout.svelte

@@ -1,18 +1,12 @@
 <script lang="ts">
-    import "../app.css";
-
     import MainHeader from "$lib/MainHeader.svelte";
     import {QueryClientProvider} from "@tanstack/svelte-query";
     import type {LayoutData} from "./$types";
+    import "../app.css";
 
     export let data: LayoutData;
 </script>
 
-<svelte:head>
-    <!--<title>{data.title}</title>-->
-    <title>Izakaya</title>
-</svelte:head>
-
 <QueryClientProvider client={data.queryClient}>
     <MainHeader />
     <slot />

gyoza/src/routes/+page.svelte

@@ -1,3 +1,10 @@
+<script>
+</script>
+
+<svelte:head>
+    <title>Izakaya</title>
+</svelte:head>
+
 <main class="flex flex-col max-w-7xl mx-auto p-4">
     <div class="pt-40 pb-20">
         <div class="flex">