Adding privacy and terms pages, adding svelte meta tags package, and adding defaults for meta tags.

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-	"cSpell.words": ["iconify", "kickstarter", "lucide", "msrp"]
+	"cSpell.words": ["iconify", "kickstarter", "lucide", "msrp", "pcss"]
 }

package.json

@@ -47,6 +47,7 @@
 		"sass": "^1.65.1",
 		"svelte": "^4.2.0",
 		"svelte-check": "^3.5.0",
+		"svelte-meta-tags": "^3.0.3",
 		"svelte-preprocess": "^5.0.4",
 		"svelte-sequential-preprocessor": "^2.0.1",
 		"sveltekit-flash-message": "^2.2.0",
@@ -89,9 +90,7 @@
 		"open-props": "^1.5.13",
 		"radix-svelte": "^0.9.0",
 		"svelte-french-toast": "^1.2.0",
-		"svelte-lazy": "^1.2.1",
 		"svelte-lazy-loader": "^1.0.0",
-		"svelte-legos": "^0.2.1",
 		"tailwind-merge": "^1.14.0",
 		"tailwind-variants": "^0.1.13",
 		"tailwindcss-animate": "^1.0.6",

pnpm-lock.yaml

@@ -77,15 +77,9 @@ dependencies:
   svelte-french-toast:
     specifier: ^1.2.0
     version: 1.2.0(svelte@4.2.0)
-  svelte-lazy:
-    specifier: ^1.2.1
-    version: 1.2.1(svelte@4.2.0)
   svelte-lazy-loader:
     specifier: ^1.0.0
     version: 1.0.0
-  svelte-legos:
-    specifier: ^0.2.1
-    version: 0.2.1(svelte@4.2.0)
   tailwind-merge:
     specifier: ^1.14.0
     version: 1.14.0
@@ -175,6 +169,9 @@ devDependencies:
   svelte-check:
     specifier: ^3.5.0
     version: 3.5.0(postcss-load-config@4.0.1)(postcss@8.4.29)(sass@1.65.1)(svelte@4.2.0)
+  svelte-meta-tags:
+    specifier: ^3.0.3
+    version: 3.0.3(svelte@4.2.0)(typescript@5.1.6)
   svelte-preprocess:
     specifier: ^5.0.4
     version: 5.0.4(postcss-load-config@4.0.1)(postcss@8.4.29)(sass@1.65.1)(svelte@4.2.0)(typescript@5.1.6)
@@ -1865,10 +1862,6 @@ packages:
     resolution: {integrity: sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA==}
     dev: true
 
-  /canvas-confetti@1.6.0:
-    resolution: {integrity: sha512-ej+w/m8Jzpv9Z7W7uJZer14Ke8P2ogsjg4ZMGIuq4iqUOqY2Jq8BNW42iGmNfRwREaaEfFIczLuZZiEVSYNHAA==}
-    dev: false
-
   /chai@4.3.7:
     resolution: {integrity: sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==}
     engines: {node: '>=4'}
@@ -3545,10 +3538,6 @@ packages:
     hasBin: true
     dev: true
 
-  /prism-svelte@0.5.0:
-    resolution: {integrity: sha512-db91Bf3pRGKDPz1lAqLFSJXeW13mulUJxhycysFpfXV5MIK7RgWWK2E5aPAa71s8TCzQUXxF5JOV42/iOs6QkA==}
-    dev: false
-
   /prisma@5.2.0:
     resolution: {integrity: sha512-FfFlpjVCkZwrqxDnP4smlNYSH1so+CbfjgdpioFzGGqlQAEm6VHAYSzV7jJgC3ebtY9dNOhDMS2+4/1DDSM7bQ==}
     engines: {node: '>=16.13'}
@@ -3557,11 +3546,6 @@ packages:
     dependencies:
       '@prisma/engines': 5.2.0
 
-  /prismjs@1.29.0:
-    resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
-    engines: {node: '>=6'}
-    dev: false
-
   /proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
     dev: false
@@ -3694,6 +3678,14 @@ packages:
       immutable: 4.1.0
       source-map-js: 1.0.2
 
+  /schema-dts@1.1.2(typescript@5.1.6):
+    resolution: {integrity: sha512-MpNwH0dZJHinVxk9bT8XUdjKTxMYrA5bLtrrGmFA6PTLwlOKnhi67XoRd6/ty+Djt6ZC0slR57qFhZDNMI6DhQ==}
+    peerDependencies:
+      typescript: '>=4.1.0'
+    dependencies:
+      typescript: 5.1.6
+    dev: true
+
   /semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -3913,24 +3905,16 @@ packages:
     resolution: {integrity: sha512-AZD6R60vksyojn21FgXLglmBiBB9K5Dkdu0hdGrLbCaRCYT68IsWkZfRUqKhMx1IfzqWcZQ8X9y/f+Ih0oNQkQ==}
     dev: false
 
-  /svelte-lazy@1.2.1(svelte@4.2.0):
-    resolution: {integrity: sha512-8L+GrU5p0ia/nLDeGDMTC+DtmbXlFcoaTPoSf8jIy1NoKicqSJXz5tjiu6GUsD7ra0RjgIvhQiLcdZYR9VECeA==}
+  /svelte-meta-tags@3.0.3(svelte@4.2.0)(typescript@5.1.6):
+    resolution: {integrity: sha512-av5B6MQb1ujpM11GOYj9PDridXYJmWWJdfQvtJivFDeEc7t4Xh0hBQqcL5oEONd4Tt8UjSi0cIQG0mshTM4s+A==}
     peerDependencies:
-      svelte: 3.x
+      svelte: ^3.55.0 || ^4.0.0
     dependencies:
+      schema-dts: 1.1.2(typescript@5.1.6)
       svelte: 4.2.0
-    dev: false
-
-  /svelte-legos@0.2.1(svelte@4.2.0):
-    resolution: {integrity: sha512-M7IncWP2e8FaHzQN1DSzxLSoq/6aQYWZ93REZam9bYlvLEjdPGWLAYdpPNnnZtXlHco+o3zrgYTdwsyyS9beUQ==}
-    peerDependencies:
-      svelte: ^3.54.0
-    dependencies:
-      canvas-confetti: 1.6.0
-      prism-svelte: 0.5.0
-      prismjs: 1.29.0
-      svelte: 4.2.0
-    dev: false
+    transitivePeerDependencies:
+      - typescript
+    dev: true
 
   /svelte-preprocess@5.0.4(postcss-load-config@4.0.1)(postcss@8.4.29)(sass@1.65.1)(svelte@4.2.0)(typescript@5.1.6):
     resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==}

src/routes/(app)/+page.server.ts

@@ -1,13 +1,26 @@
 import { superValidate } from 'sveltekit-superforms/server';
 import { search_schema } from '$lib/zodValidation';
+import type { MetaTagsProps } from 'svelte-meta-tags';
 
 export const load = async ({ fetch, url }) => {
+	const metaTags: MetaTagsProps = Object.freeze({
+		title: 'Home',
+		description: 'Home page',
+		openGraph: {
+			type: 'website',
+			url: new URL(url.pathname, url.origin).href,
+			locale: 'en_US',
+			title: 'Home',
+			description: 'Bored Game, keep track of your games'
+		}
+	});
+
 	const formData = Object.fromEntries(url?.searchParams);
 	console.log('formData', formData);
 	formData.name = formData?.q;
 	const form = await superValidate(formData, search_schema);
 	console.log('form', form);
-	return { form };
+	return { form, metaTagsChild: metaTags };
 };
 
 // export const actions = {

src/routes/(app)/+page.svelte

@@ -8,10 +8,6 @@
 	console.log('formData', formData);
 </script>
 
-<svelte:head>
-	<title>Bored Game | Home</title>
-</svelte:head>
-
 <h1>Search Boardgames!</h1>
 <div class="game-search">
 	<section>

src/routes/(app)/privacy/+page.server.ts

@@ -0,0 +1 @@
+export const prerender = true;

src/routes/(app)/privacy/+page.svelte

@@ -0,0 +1,6 @@
+<h1>Privacy Policy</h1>
+<h2>Last Updated: September 13th, 2023</h2>
+
+At Bored Game, we respect your privacy and are committed to protecting your personal information.
+We collect only the personal information that is necessary for us to provide our services to you.
+We do not sell your personal information to third parties.

src/routes/(app)/terms/+page.server.ts

@@ -0,0 +1 @@
+export const prerender = true;

src/routes/(app)/terms/+page.svelte

@@ -0,0 +1,4 @@
+<h1>Terms of Use</h1>
+<h2>Last Updated: September 13th, 2023</h2>
+
+The following terms of user ("Terms") apply to your use of Bored Game ("Bored Game").

src/routes/(auth)/+layout.svelte

@@ -2,13 +2,6 @@
 	import { page } from "$app/stores";
 	import { Button } from "$lib/components/ui/button";
 	import Logo from "$lib/components/logo.svelte";
-
-	$: link = {
-		label: $page.url.pathname === "/sign-up" ? "Login" : "Sign up",
-		href: $page.url.pathname === "/sign-up" ? "/login" : "/sign-up"
-	};
-
-	$: console.log($page.url.pathname);
 </script>
 
 <div class="container">
@@ -56,7 +49,6 @@
 		/* display: none;
 		position: relative; */
 		display: flex;
-		align-content: center;
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;

src/routes/(auth)/login/+page.svelte

@@ -56,8 +56,7 @@
 		<Label for="password">Password</Label>
 		<Input type="password" id="password" name="password" placeholder="Password" autocomplete="password" data-invalid={$errors.password} bind:value={$form.password} required />
 		<Button type="submit">Login</Button>
-	</form>
-	{#if $errors._errors}
+		{#if $errors._errors}
 		<Alert.Root variant="destructive">
 			<AlertCircle class="h-4 w-4" />
 			<Alert.Title>Error</Alert.Title>
@@ -68,13 +67,15 @@
 	{/if}
 	<p class="px-8 text-center text-sm text-muted-foreground">
 		By clicking continue, you agree to our
-		<a href="/terms-of-service" class="underline underline-offset-4 hover:text-primary">
-			Terms of Service
+		<a href="/terms" class="underline underline-offset-4 hover:text-primary">
+			Terms of Use
 		</a>
 		and
-		<a href="/privacy" class="underline underline-offset-4 hover:text-primary"> Privacy Policy </a>
-		.
+		<a href="/privacy" class="underline underline-offset-4 hover:text-primary">
+			Privacy Policy
+		</a>.
 	</p>
+	</form>
 </div>
 
 <style lang="postcss">

src/routes/+layout.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import "$lib/styles/app.postcss";
+	import "$lib/styles/app.pcss";
 	import { onMount } from "svelte";
 	import { getFlash } from 'sveltekit-flash-message/client';
 	import toast, { Toaster } from 'svelte-french-toast';
   import { navigating, page } from '$app/stores';
+	import { MetaTags } from 'svelte-meta-tags';
 	import debounce from 'just-debounce-it';
 	import 'iconify-icon';
 	import Analytics from '$lib/components/analytics.svelte';
@@ -15,6 +16,18 @@
 	export let data;
 	$: ({ user } = data);
 
+	$: metaTags = {
+		titleTemplate: '%s | Bored Game',
+		description: 'Bored Game, keep track of your games.',
+		openGraph: {
+			type: 'website',
+			titleTemplate: '%s | Bored Game',
+			locale: 'en_US',
+			description: 'Bored Game, keep track of your games',
+		},
+		...$page.data.metaTagsChild
+	}
+
 	const flash = getFlash(page, {
 		clearAfterMs: 6000
 	});
@@ -63,6 +76,8 @@
 	<Analytics />
 {/if}
 
+<MetaTags {...metaTags} />
+
 <div class="layout">
 	<slot />
 </div>