og stuff

package.json

@@ -54,6 +54,7 @@
 		"shiki": "^3.6.0",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
+		"svelte-meta-tags": "^4.4.0",
 		"tailwind-merge": "^3.3.1",
 		"tailwind-variants": "^1.0.0",
 		"tailwindcss": "^4.0.0",

pnpm-lock.yaml

@@ -162,6 +162,9 @@ importers:
       svelte-check:
         specifier: ^4.0.0
         version: 4.2.1(picomatch@4.0.2)(svelte@5.34.1)(typescript@5.8.3)
+      svelte-meta-tags:
+        specifier: ^4.4.0
+        version: 4.4.0(svelte@5.34.1)
       tailwind-merge:
         specifier: ^3.3.1
         version: 3.3.1
@@ -2310,6 +2313,9 @@ packages:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
 
+  schema-dts@1.1.5:
+    resolution: {integrity: sha512-RJr9EaCmsLzBX2NDiO5Z3ux2BVosNZN5jo0gWgsyKvxKIUL5R3swNvoorulAeL9kLB0iTSX7V6aokhla2m7xbg==}
+
   semver@7.7.2:
     resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
     engines: {node: '>=10'}
@@ -2403,6 +2409,11 @@ packages:
       svelte:
         optional: true
 
+  svelte-meta-tags@4.4.0:
+    resolution: {integrity: sha512-0g7sksBXdCGYcNM44uipqhVwDrtImB73iZdcpWHE0q0+k96Zg0WS6ySPAV+gX34DSqrkrvcqkG/tI2lwN1KbbA==}
+    peerDependencies:
+      svelte: ^5.0.0
+
   svelte-toolbelt@0.7.1:
     resolution: {integrity: sha512-HcBOcR17Vx9bjaOceUvxkY3nGmbBmCBBbuWLLEWO6jtmWH8f/QoWmbyUfQZrpDINH39en1b8mptfPQT9VKQ1xQ==}
     engines: {node: '>=18', pnpm: '>=8.7.0'}
@@ -4697,6 +4708,8 @@ snapshots:
     dependencies:
       xmlchars: 2.2.0
 
+  schema-dts@1.1.5: {}
+
   semver@7.7.2: {}
 
   set-cookie-parser@2.7.1: {}
@@ -4796,6 +4809,11 @@ snapshots:
     optionalDependencies:
       svelte: 5.34.1
 
+  svelte-meta-tags@4.4.0(svelte@5.34.1):
+    dependencies:
+      schema-dts: 1.1.5
+      svelte: 5.34.1
+
   svelte-toolbelt@0.7.1(svelte@5.34.1):
     dependencies:
       clsx: 2.1.1

src/routes/+layout.svelte

@@ -8,6 +8,8 @@
 	import { ModeWatcher } from 'mode-watcher';
 	import '../app.css';
 	import { browser } from '$app/environment';
+	import { MetaTags } from 'svelte-meta-tags';
+	import { page } from '$app/state';
 
 	let { children } = $props();
 
@@ -15,6 +17,34 @@
 	models.init();
 </script>
 
+<MetaTags
+	title="thom.chat"
+	description="The OpenSource T3Chat alternative."
+	keywords={['svelte', 't3', 'chat', 'ai']}
+	twitter={{
+		cardType: 'summary_large_image',
+		title: 'thom.chat',
+		description: 'The OpenSource T3Chat alternative.',
+		image: 'https://thom.chat/og.png',
+		creator: '@thomasglopes',
+	}}
+	openGraph={{
+		url: page.url.toString(),
+		type: 'website',
+		title: 'thom.chat',
+		description: 'The OpenSource T3Chat alternative.',
+		siteName: 'thom.chat',
+		images: [
+			{
+				url: 'https://thom.chat/og.png',
+				width: 2014,
+				height: 1143,
+				alt: 'thom.chat',
+			},
+		],
+	}}
+/>
+
 <svelte:window
 	use:shortcut={{ ctrl: true, shift: true, key: 'o', callback: () => goto('/chat') }}
 />