[PATCH v1 15/17] feat(seo): add SEO for site metadata

[Muhammad Rizki <kiizuha@gnuweeb.org>]

Added SEO component to handle site metadata for better SEO.

Signed-off-by: Muhammad Rizki <kiizuha@gnuweeb.org>
---
 src/lib/components/customs/seo.svelte         | 27 +++++++++++++++++++
 src/routes/(protected)/+layout.svelte         | 12 +++++++++
 .../(protected)/settings/account/+page.svelte |  3 +++
 .../(protected)/settings/profile/+page.svelte |  3 +++
 src/routes/+page.svelte                       |  3 +++
 5 files changed, 48 insertions(+)
 create mode 100644 src/lib/components/customs/seo.svelte

diff --git a/src/lib/components/customs/seo.svelte b/src/lib/components/customs/seo.svelte
new file mode 100644
index 0000000..34f77ac
--- /dev/null
+++ b/src/lib/components/customs/seo.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  interface Props {
+    title: string;
+    description: string;
+    image?: string;
+  }
+
+  let { title, description, image }: Props = $props();
+
+  const META_IMG = image ?? "/favicon.ico";
+</script>
+
+<svelte:head>
+  <title>{title}</title>
+  <meta name="description" content={description} />
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content={title} />
+  <meta property="og:description" content={description} />
+  <meta property="og:image" content={META_IMG} />
+  <meta property="og:image:alt" content={META_IMG} />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content={title} />
+  <meta name="twitter:description" content={description} />
+  <meta name="twitter:image" content={META_IMG} />
+  <meta name="twitter:image:alt" content={META_IMG} />
+  <meta name="robots" content="index, follow" />
+</svelte:head>
diff --git a/src/routes/(protected)/+layout.svelte b/src/routes/(protected)/+layout.svelte
index e88b3fb..ec934be 100644
--- a/src/routes/(protected)/+layout.svelte
+++ b/src/routes/(protected)/+layout.svelte
@@ -3,10 +3,22 @@
   import AppSidebar from "$components/customs/app-sidebar.svelte";
   import Header from "$components/customs/header.svelte";
   import Separator from "$components/ui/separator/separator.svelte";
+  import Seo from "$components/customs/seo.svelte";
+  import { useAuth } from "$lib/hooks/auth.svelte";
 
   let { children } = $props();
+
+  const auth = useAuth();
 </script>
 
+{#if auth.user && auth.token}
+  <Seo
+    title="{auth.user?.full_name} ({auth.user?.username}) - GNU/Weeb Mail"
+    description="Configure your email client using this config"
+    image={auth.user?.photo}
+  />
+{/if}
+
 <Sidebar.Provider class="light">
   <AppSidebar />
 
diff --git a/src/routes/(protected)/settings/account/+page.svelte b/src/routes/(protected)/settings/account/+page.svelte
index 29ccd06..e1ba4c6 100644
--- a/src/routes/(protected)/settings/account/+page.svelte
+++ b/src/routes/(protected)/settings/account/+page.svelte
@@ -8,6 +8,7 @@
   import Button from "$components/ui/button/button.svelte";
   import http from "$lib/hooks/http.svelte";
   import Separator from "$components/ui/separator/separator.svelte";
+  import Seo from "$components/customs/seo.svelte";
 
   let { data } = $props();
 
@@ -50,6 +51,8 @@
   );
 </script>
 
+<Seo title="Account settings - GNU/Weeb Mail" description="Update your account." />
+
 <div class="space-y-3">
   <h2 class="text-center font-medium sm:text-start">Change Password</h2>
   <Separator />
diff --git a/src/routes/(protected)/settings/profile/+page.svelte b/src/routes/(protected)/settings/profile/+page.svelte
index b91382a..b61601b 100644
--- a/src/routes/(protected)/settings/profile/+page.svelte
+++ b/src/routes/(protected)/settings/profile/+page.svelte
@@ -21,6 +21,7 @@
   import * as typing from "$typings";
   import { toast } from "svelte-sonner";
   import InputPassword from "$components/ui/input/input-password.svelte";
+  import Seo from "$components/customs/seo.svelte";
 
   let { data } = $props();
   let showModalConfirmation = $state(false);
@@ -143,6 +144,8 @@
   const isError = $derived(Boolean($errors.full_name || $errors.ext_email || $errors.gender));
 </script>
 
+<Seo title="Your profile - GNU/Weeb Mail" description="Update your profile." />
+
 <Dialog.Root open={showModalConfirmation} onOpenChange={handleOpenModal}>
   <form use:enhance class="flex flex-col gap-5" enctype="multipart/form-data">
     <div
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cb4f673..f6820bc 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import Loading from "$components/customs/loading.svelte";
+  import Seo from "$components/customs/seo.svelte";
   import { Button } from "$components/ui/button";
   import * as Card from "$components/ui/card";
   import * as Form from "$components/ui/form";
@@ -56,6 +57,8 @@
   });
 </script>
 
+<Seo title="Login - GNU/Weeb Mail" description="Update your profile." />
+
 <div class="mx-auto flex min-h-screen w-full items-center justify-center px-3 py-2">
   <Card.Root class="w-full max-w-lg">
     <form method="POST" use:enhance>
-- 
Muhammad Rizki