Merge branch 'dev' into 'dev'

Small metadata, embed and design changes

See merge request suyu-emu/website!16

package-lock.json

@@ -13,6 +13,7 @@
 				"better-sqlite3": "^9.4.3",
 				"cookie": "^0.6.0",
 				"jsonwebtoken": "^9.0.2",
+				"radix-svelte": "^0.9.0",
 				"reflect-metadata": "^0.2.1",
 				"sequelize": "^6.37.1",
 				"sqlite3": "^5.1.7",
@@ -446,7 +447,6 @@
 			"version": "1.6.0",
 			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
 			"integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
-			"dev": true,
 			"dependencies": {
 				"@floating-ui/utils": "^0.2.1"
 			}
@@ -455,7 +455,6 @@
 			"version": "1.6.3",
 			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
 			"integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
-			"dev": true,
 			"dependencies": {
 				"@floating-ui/core": "^1.0.0",
 				"@floating-ui/utils": "^0.2.0"
@@ -464,8 +463,7 @@
 		"node_modules/@floating-ui/utils": {
 			"version": "0.2.1",
 			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
-			"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==",
-			"dev": true
+			"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
 		},
 		"node_modules/@gar/promisify": {
 			"version": "1.1.3",
@@ -5276,6 +5274,21 @@
 			"resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
 			"integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag=="
 		},
+		"node_modules/radix-svelte": {
+			"version": "0.9.0",
+			"resolved": "https://registry.npmjs.org/radix-svelte/-/radix-svelte-0.9.0.tgz",
+			"integrity": "sha512-0PJMHiZVTjWGrjK7c2/FY+nq0fBGwPXNy6fFvkLZIs73hTIai/Exw+pi3TCvtd80gSjFb5utdHWI3qiuuN0B/Q==",
+			"dependencies": {
+				"@floating-ui/core": "^1.3.1",
+				"@floating-ui/dom": "^1.4.5"
+			},
+			"engines": {
+				"node": ">= 16"
+			},
+			"peerDependencies": {
+				"svelte": "^4.1.1"
+			}
+		},
 		"node_modules/range-parser": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",

src/routes/+page.svelte

@@ -3,15 +3,37 @@
 	import { Dialog } from "radix-svelte";
 	import type { ResolvedProps } from "radix-svelte/internal/helpers";
 
+	import embedImage from '$assets/branding/suyu__Embed-Image.png';
+	import suyuWindow from '$assets/mockups/suyuwindow.png';
+
 	let rootOpen: boolean;
 	let rootModal: boolean = true;
 	let portalContainer: HTMLElement | string;
 	let contentOpenAutoFocus: boolean = true;
 	let contentCloseAutoFocus: boolean = true;
+
+	let metadata = {
+		url: "https://suyu.dev",
+		title: "suyu - Open-source, non-profit Switch emulator",
+		description: "suyu is a familiar C++ based Nintendo Switch emulator with a focus on compatibility. Completely free and open-source, forever. Download it here.",
+		image: embedImage,
+	};
 </script>
 
 <svelte:head>
-	<title>suyu - Open-source, non-profit Switch emulator</title>
+	<title>{metadata.title}</title>
+	<meta name="description" content={metadata.description} />
+
+	<meta property="og:url" content={metadata.url} />
+	<meta property="og:title" content={metadata.title} />
+	<meta property="og:description" content={metadata.description} />
+	<meta property="og:image" content={metadata.image} />
+
+	<meta name="twitter:url" content={metadata.url} />
+	<meta name="twitter:title" content={metadata.title} />
+	<meta name="twitter:description" content={metadata.description} />
+	<meta name="twitter:image" content={metadata.image} />
+	<meta name="twitter:card" content="summary_large_image" />
 </svelte:head>
 
 <div
@@ -39,8 +61,8 @@
 		suyu is the open-source, non-profit Switch emulator
 	</h1>
 	<p class="max-w-[36rem] text-lg leading-relaxed text-[#A6A5A7]">
-		suyu is a C++ based Switch emulator with a focus on compatibility. Completely free and
-		open-source, forever.
+		suyu is a familiar C++ based Switch emulator with a focus on compatibility. Completely free
+		and open-source, forever.
 	</p>
 	<div class="flex flex-row gap-4">
 		<Dialog.Root bind:modal={rootModal} bind:open={rootOpen}>
@@ -144,7 +166,7 @@
 					alt=""
 					decoding="async"
 					loading="lazy"
-					src="/img/bettercrophero.png"
+					src={suyuWindow}
 				/>
 			</div>
 		</div>
@@ -194,7 +216,7 @@
 		href="https://gitlab.com/suyu-emu/"
 		target="_blank"
 		rel="noreferrer noopener"
-		class="relative w-full rounded-[2.25rem] bg-[#f78c40] p-12"
+		class="relative w-full rounded-[2.25rem] bg-[#f78c40] p-12 text-black"
 	>
 		<h2 class="text-[24px] leading-[1.41] md:text-[60px] md:leading-[1.1]">GitLab</h2>
 		<p class="mt-2 text-lg leading-relaxed">