feat(wokegame): add og image and add to home page

src/routes/+page.svelte

@@ -18,6 +18,14 @@
 
 	<div class="md:mb-18 mx-auto mb-12 flex w-full max-w-4xl flex-col space-y-24 md:space-y-36">
 		<div class="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6">
+			<ProjectCard
+				title="Woke Game is Bad Game?"
+				description="We analyzed over 1,000 games in Woke Content Detector's list to see if wokeness and user positive reviews are correlated."
+				href="/woke-game-is-bad-game/"
+				image="/woke-game-is-bad-game/og.png"
+				date="29 Nov 2024"
+				lang="EN"
+			/>
 			<ProjectCard
 				title="Senates Blind Test"
 				description="From Thailand's Senates Election in 2024, guessing which candidate get the most votes by reading their 5-lines-introduction document."

src/routes/woke-game-is-bad-game/+page.svelte

@@ -15,6 +15,8 @@
 	import CohenDFormular from './_components/cohen-d-formular.svelte';
 	import Metadata from '../../components/metadata.svelte';
 
+	const PROJECT_PATH = '/woke-game-is-bad-game';
+
 	let games = $state<Game[]>([]);
 
 	let groups = $derived<GameLevelGroup[]>(
@@ -36,7 +38,8 @@
 <Metadata
 	title="Woke Game is Bad Game?"
 	description="We analyzed over 1,000 games to see if wokeness and user reviews are correlated"
-	path="/woke-game-is-bad-game"
+	path={PROJECT_PATH}
+	image="{PROJECT_PATH}/og.png"
 />
 
 <div class="flex justify-center bg-zinc-100 text-neutral-950">
@@ -209,7 +212,7 @@
 			<div class="flex flex-row items-center gap-6">
 				<span class="text-sm">Share</span>
 				<Sharer
-					url="https://ordinaryunfold.com/woke-game-is-bad-game"
+					url="https://ordinaryunfold.com{PROJECT_PATH}"
 					linkClass="text-amber-700 hover:text-amber-600"
 				/>
 			</div>