feat: sveltekit seo, bump dev deps

Author: pitzzahh

package.json

@@ -27,13 +27,13 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.12.0",
+    "@noble/hashes": "^2.0.1",
     "@oslojs/binary": "^1.0.0",
     "@oslojs/crypto": "^1.0.1",
     "@oslojs/encoding": "^1.1.0",
     "@oslojs/otp": "^1.1.0",
     "@pilcrowjs/object-parser": "^0.0.4",
     "arctic": "^3.7.0",
-    "@noble/hashes": "^2.0.1",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
     "dotenv": "^17.3.1",
@@ -65,15 +65,16 @@
     "drizzle-kit": "^1.0.0-beta.16-ea816b6",
     "drizzle-orm": "^1.0.0-beta.16-ea816b6",
     "layerchart": "2.0.0-next.46",
-    "oxlint": "^1.51.0",
+    "oxlint": "^1.52.0",
     "phosphor-svelte": "^3.1.0",
     "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.5.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
-    "svelte": "^5.53.7",
-    "svelte-check": "^4.4.4",
+    "svelte": "^5.53.9",
+    "svelte-check": "^4.4.5",
     "svelte-render-scan": "^1.1.0",
-    "svelte-sonner": "^1.0.8",
+    "svelte-seo": "^2.0.0",
+    "svelte-sonner": "^1.1.0",
     "sveltekit-sse": "^0.14.3",
     "tailwind-merge": "^3.5.0",
     "tailwind-variants": "^3.2.2",

pnpm-lock.yaml

@@ -24,6 +24,7 @@
   import { dev } from "$app/environment";
   import { page } from "$app/state";
   import { IsMobile } from "$/hooks/is-mobile.svelte.js";
+  import SvelteSeo from "svelte-seo";
 
   const { children, data } = $props();
 
@@ -80,27 +81,39 @@
 
 <svelte:head>
   <link rel="icon" href={favicon} />
-  <title>{site.name}: {site.description}</title>
-  <meta name="author" content={site.author} />
-  <meta name="description" content={site.description} />
-  <meta name="keywords" content={site.keywords} />
-  <meta property="og:title" content={site.name} />
-  <meta property="og:description" content={site.description} />
-  <meta property="og:site_name" content={site.name} />
-  <meta property="og:image" content={site.ogImage} />
-  <meta property="og:url" content={site.url} />
-  <meta property="og:type" content="website" />
 </svelte:head>
 
 <svelte:window onclose={() => invalidateAll()} />
 
+<SvelteSeo
+  title="{site.name} | {site.description}"
+  description={site.description}
+  keywords={site.keywords}
+  canonical={site.url}
+  openGraph={{
+    title: site.name,
+    description: site.description,
+    url: site.url,
+    site_name: site.name,
+    images: [
+      {
+        url: site.ogImage,
+        width: 1200,
+        height: 630,
+        alt: site.name,
+      },
+    ],
+    type: "website",
+  }}
+/>
+
 <main>
   {#if data.session && data.user && (data.user.isOauthUser || data.user.emailVerified) && (!data.user.registeredTwoFactor || data.session.twoFactorVerified) && page.url.pathname !== "/" && page.url.searchParams.get("act") !== "2fa-setup"}
     <div class="relative h-screen w-full overflow-hidden">
       <Header user={data.user} />
 
       <div class="no-scrollbar h-full overflow-y-auto">
-        <main class="flex min-h-full justify-between gap-4 px-4 pt-16">
+        <div class="flex min-h-full justify-between gap-4 px-4 pt-16">
           <aside
             in:scale={{ duration: 150 }}
             class={[
@@ -116,7 +129,7 @@
           <div class="flex min-w-0 flex-1 flex-col gap-4 py-1">
             {@render children()}
           </div>
-        </main>
+        </div>
       </div>
     </div>
   {:else}

src/routes/+layout.svelte

@@ -14,8 +14,7 @@
 
   let { data } = $props();
 </script>
-
-<div class="relative min-h-screen overflow-hidden bg-background">
+ <div class="relative min-h-screen overflow-hidden bg-background">
   <LandingNav user={data.user} session={data.session} />
 
   <!-- Hero Section with scroll indicator -->