chore: switch to Satori

Author: tobynguyen27

apps/frontend/package.json

@@ -17,7 +17,7 @@
 		"@regle/core": "^1.19.13",
 		"@regle/nuxt": "^1.19.13",
 		"@regle/rules": "^1.19.13",
-		"@takumi-rs/core": "^0.69.2",
+		"@resvg/resvg-js": "^2.6.2",
 		"@vueuse/integrations": "^14.2.1",
 		"arktype": "^2.1.29",
 		"dayjs": "^1.11.19",
@@ -30,13 +30,14 @@
 	},
 	"devDependencies": {
 		"@iconify-json/tabler": "^1.2.27",
-		"@takumi-rs/wasm": "^0.69.2",
+		"@resvg/resvg-wasm": "^2.6.2",
 		"@unocss/nuxt": "^66.6.0",
 		"@vueuse/core": "^14.2.1",
 		"@vueuse/nuxt": "^14.2.1",
-		"nuxt-og-image": "6.0.0-beta.41",
+		"nuxt-og-image": "6.0.0-beta.42",
 		"oxlint": "^1.50.0",
 		"oxlint-tsgolint": "^0.14.2",
+		"satori": "^0.19.2",
 		"unocss": "^66.6.0",
 		"wrangler": "^4.69.0"
 	}

…/app/components/OgImage/Basic.takumi.vue …/app/components/OgImage/Basic.satori.vueapps/frontend/src/app/components/OgImage/Basic.takumi.vue renamed to apps/frontend/src/app/components/OgImage/Basic.satori.vue apps/frontend/src/app/components/OgImage/Basic.takumi.vue renamed to apps/frontend/src/app/components/OgImage/Basic.satori.vue

@@ -9,16 +9,12 @@ defineProps<Props>();
 
 <template>
 	<div class="relative h-full w-full overflow-hidden">
-		<img src="/og_template.png" alt="og" class="absolute z-1" width="1200px" height="630px" />
+		<img src="/og_template.png" alt="og" class="absolute" width="1200px" height="630px" />
 
-		<div class="relative flex flex-col justify-between my-12 mx-20 z-10">
-			<h1
-				class="text-7xl text-[#EDEDED]"
-				style="font-family: 'Orbitron', sans-serif">
-				Solitar
-			</h1>
+		<div class="relative my-12 mx-20">
+			<h1 class="text-7xl text-[#EDEDED]" style="font-family: Orbitron">Solitar</h1>
 
-			<div class="flex flex-col" style="font-family: 'Geist Mono', monospace">
+			<div class="mt-58" style="font-family: Geist Mono">
 				<h2 class="text-5xl text-[#EDEDED]" v-if="subtitle">{{ subtitle }}</h2>
 				<h3 v-if="description" class="text-[#A0A0A0] text-3xl">
 					{{ description }}

apps/frontend/src/app/pages/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineOgImage("Basic.takumi");
+defineOgImage("Basic.satori");
 </script>
 
 <template>

apps/frontend/src/app/pages/qr.vue

@@ -2,7 +2,7 @@
 import { useQRCode } from "@vueuse/integrations/useQRCode";
 import { type } from "arktype";
 
-defineOgImage("Basic.takumi", { subtitle: "./qr", description: "Generate QR code for url" });
+defineOgImage("Basic.satori", { subtitle: "./qr", description: "Generate QR code for url" });
 
 const permission = usePermission("clipboard-read");
 const inputUrl = ref();

apps/frontend/src/app/pages/settings.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineOgImage("Basic.takumi", {
+defineOgImage("Basic.satori", {
 	subtitle: "./settings",
 	description: "customize your solitar experience",
 });